@extends('components.dashboard.layout.layout')

@section('content')
    @include('components.alert')

    <style>
        .email-settings-summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
            padding: 1rem;
            border: 1px solid #e2e8f0;
            border-radius: 16px;
            background: #f8fafc;
            margin-bottom: 1rem;
        }

        .email-settings-summary__title {
            font-size: 0.95rem;
            font-weight: 700;
            color: #111827;
            margin: 0;
        }

        .email-settings-summary__text {
            font-size: 0.875rem;
            color: #64748b;
            margin: 0.25rem 0 0;
            line-height: 1.5;
        }

        .email-settings-count {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            padding: 0.55rem 0.8rem;
            border-radius: 999px;
            background: #eef2ff;
            color: #3730a3;
            font-size: 0.82rem;
            font-weight: 700;
            white-space: nowrap;
        }

        .email-settings-table th {
            font-size: 0.78rem;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: #64748b;
            background: #f8fafc;
            border-bottom: 1px solid #e2e8f0;
            padding: 0.95rem 1rem;
        }

        .email-settings-table td {
            padding: 1rem;
            border-bottom: 1px solid #edf2f7;
            vertical-align: middle;
        }

        .email-settings-table tbody tr:last-child td {
            border-bottom: 0;
        }

        .email-settings-role {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            min-width: 0;
        }

        .email-settings-role__icon {
            width: 38px;
            height: 38px;
            border-radius: 12px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #f1f5f9;
            color: #334155;
            flex-shrink: 0;
        }

        .email-settings-role__name {
            font-size: 0.95rem;
            font-weight: 700;
            color: #111827;
            margin: 0;
            overflow-wrap: anywhere;
        }

        .email-settings-role__sub {
            font-size: 0.8rem;
            color: #64748b;
            margin: 0.15rem 0 0;
        }

        .email-switch-wrap {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .email-switch-wrap .form-check-input {
            width: 3rem;
            height: 1.55rem;
            cursor: pointer;
            box-shadow: none !important;
        }

        .email-switch-wrap .form-check-input:checked {
            background-color: #111827;
            border-color: #111827;
        }

        .email-settings-empty {
            padding: 2rem 1rem;
            text-align: center;
            color: #64748b;
        }

        .email-settings-empty__icon {
            width: 52px;
            height: 52px;
            margin: 0 auto 0.75rem;
            border-radius: 16px;
            background: #f1f5f9;
            color: #64748b;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
        }

        .email-settings-empty__title {
            font-weight: 700;
            color: #111827;
            margin-bottom: 0.25rem;
        }

        .email-settings-actions {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 0.75rem;
            flex-wrap: wrap;
            margin-top: 1rem;
        }

        @media (max-width: 575.98px) {
            .email-settings-actions .asset-btn {
                width: 100%;
            }

            .email-settings-summary {
                align-items: flex-start;
            }

            .email-settings-count {
                width: 100%;
            }
        }
    </style>

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="space-y-4">

                <x-page-title
                    title="Email Settings"
                    description="Manage which roles are allowed to receive system emails and notification messages.">
                    <a href="{{ url()->previous() }}" class="asset-btn asset-btn--secondary">
                        Back
                    </a>
                </x-page-title>

                @if (session('status'))
                    <div class="alert alert-success mb-0">
                        {{ session('status') }}
                    </div>
                @endif

                <form method="POST" action="{{ route('email-settings.update') }}">
                    @csrf
                    @method('PUT')

                    <div class="ui-card ui-card--table">
                        <div class="ui-card__header">
                            <div class="email-settings-summary">
                                <div>
                                    <h6 class="email-settings-summary__title">
                                        Role Email Permissions
                                    </h6>
                                    <p class="email-settings-summary__text">
                                        Turn email sending on or off for each role. Disabled roles will not receive emails from this setting.
                                    </p>
                                </div>

                                <span class="email-settings-count">
                                    <i class="fas fa-users"></i>
                                    {{ $settings->count() }} Roles
                                </span>
                            </div>
                        </div>

                        <div class="ui-table-wrap">
                            <table class="ui-table email-settings-table mb-0">
                                <thead>
                                    <tr>
                                        <th>Role</th>
                                        <th class="text-center">Send Email</th>
                                    </tr>
                                </thead>

                                <tbody>
                                    @forelse ($settings as $setting)
                                        <tr>
                                            <td>
                                                <div class="email-settings-role">
                                                    <div class="email-settings-role__icon">
                                                        <i class="fas fa-user-shield"></i>
                                                    </div>

                                                    <div>
                                                        <p class="email-settings-role__name">
                                                            {{ ucfirst($setting->role?->name ?? 'Unknown Role') }}
                                                        </p>
                                                        <p class="email-settings-role__sub">
                                                            Email notification permission
                                                        </p>
                                                    </div>
                                                </div>
                                            </td>

                                            <td class="text-center">
                                                <div class="email-switch-wrap">
                                                    <div class="form-check form-switch m-0">
                                                        <input
                                                            class="form-check-input"
                                                            type="checkbox"
                                                            name="settings[{{ $setting->id }}]"
                                                            value="1"
                                                            id="setting-{{ $setting->id }}"
                                                            {{ $setting->send_email ? 'checked' : '' }}>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="2">
                                                <div class="email-settings-empty">
                                                    <div class="email-settings-empty__icon">
                                                        <i class="fas fa-envelope-open-text"></i>
                                                    </div>
                                                    <div class="email-settings-empty__title">
                                                        No email settings found
                                                    </div>
                                                    <div>
                                                        There are no role email settings available to update.
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="email-settings-actions">
                        <a href="{{ url()->previous() }}" class="asset-btn asset-btn--secondary">
                            Cancel
                        </a>

                        <button type="submit" class="asset-btn asset-btn--primary">
                            Save Settings
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection