<div class="container-fluid py-4">
    <x-title>Daily management email</x-title>

    <div class="row g-4">
        <div class="col-xl-5">
            <x-card>
                <h5 class="mb-1">
                    <i class="mdi mdi-email-clock-outline me-1"></i>
                    {{ $editingId ? 'Edit manager' : 'Add manager' }}
                </h5>
                <p class="text-muted small mb-4">
                    Active addresses on this global whitelist receive the all-solicitor KPI summary every day at 6:00 PM.
                </p>

                @if(session('success'))
                    <div class="alert alert-success py-2">{{ session('success') }}</div>
                @endif

                <form wire:submit="save">
                    <div class="mb-3">
                        <label for="management-name" class="form-label">Manager name</label>
                        <input id="management-name" type="text"
                               class="form-control @error('name') is-invalid @enderror"
                               wire:model="name" placeholder="e.g. Jane Smith">
                        @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="mb-3">
                        <label for="management-email" class="form-label">Email address</label>
                        <input id="management-email" type="email"
                               class="form-control @error('emailAddress') is-invalid @enderror"
                               wire:model="emailAddress" placeholder="manager@example.com">
                        @error('emailAddress')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="form-check form-switch mb-4">
                        <input id="management-active" class="form-check-input" type="checkbox" wire:model="isActive">
                        <label class="form-check-label" for="management-active">Receive the daily email</label>
                    </div>

                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="mdi mdi-content-save me-1"></i>{{ $editingId ? 'Save changes' : 'Add to whitelist' }}
                        </button>
                        @if($editingId)
                            <button type="button" class="btn btn-outline-secondary" wire:click="cancelEdit">Cancel</button>
                        @endif
                    </div>
                </form>
            </x-card>
        </div>

        <div class="col-xl-7">
            <x-card>
                <div class="d-flex justify-content-between align-items-start mb-3">
                    <div>
                        <h5 class="mb-1">Manager email whitelist</h5>
                        <p class="text-muted small mb-0">Global recipients across every solicitor workspace.</p>
                    </div>
                    <span class="badge bg-primary">{{ $recipients->where('is_active', true)->count() }} active</span>
                </div>

                @if($recipients->isEmpty())
                    <div class="text-center text-muted py-5">
                        <i class="mdi mdi-account-multiple-plus-outline" style="font-size:48px;"></i>
                        <p class="fw-semibold mt-2 mb-1">No managers added yet</p>
                        <p class="small mb-0">No daily report will be sent until an active address is added.</p>
                    </div>
                @else
                    <div class="table-responsive">
                        <table class="table align-middle mb-0">
                            <thead>
                            <tr>
                                <th>Manager</th>
                                <th>Status</th>
                                <th>Last sent</th>
                                <th class="text-end">Actions</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($recipients as $recipient)
                                <tr wire:key="management-recipient-{{ $recipient->id }}">
                                    <td>
                                        <div class="fw-semibold">{{ $recipient->name ?: 'Manager' }}</div>
                                        <div class="text-muted small">{{ $recipient->email_address }}</div>
                                    </td>
                                    <td>
                                        <button type="button"
                                                class="btn btn-sm {{ $recipient->is_active ? 'btn-success' : 'btn-outline-secondary' }}"
                                                wire:click="toggle({{ $recipient->id }})">
                                            {{ $recipient->is_active ? 'Active' : 'Paused' }}
                                        </button>
                                    </td>
                                    <td class="text-muted small">
                                        {{ $recipient->last_sent_at?->timezone(config('app.timezone'))->format('d M Y H:i') ?? 'Never' }}
                                    </td>
                                    <td class="text-end text-nowrap">
                                        <button type="button" class="btn btn-sm btn-outline-primary"
                                                wire:click="edit({{ $recipient->id }})" title="Edit">
                                            <i class="mdi mdi-pencil-outline"></i>
                                        </button>
                                        <button type="button" class="btn btn-sm btn-outline-danger"
                                                wire:click="delete({{ $recipient->id }})"
                                                wire:confirm="Remove this manager from the daily report whitelist?" title="Remove">
                                            <i class="mdi mdi-delete-outline"></i>
                                        </button>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </x-card>
        </div>
    </div>

    <div class="row mt-4">
        <div class="col-12">
            <div class="alert alert-light border d-flex gap-3 mb-0">
                <i class="mdi mdi-information-outline text-primary fs-4"></i>
                <div>
                    <div class="fw-semibold">What the email contains</div>
                    <div class="text-muted small">
                        Leads In, Contracts Sent, Sent To Redress and APP Number Received, each shown for today,
                        the week so far and the month so far. Delivery uses the configured SendGrid API.
                        Every total includes a per-solicitor breakdown in parentheses.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
