@extends('layouts.admin', [
    'title' => 'Scheduled Reminders',
    'pageTitle' => 'Scheduled Reminders',
    'active' => 'reminders',
])

@php
    $statusVariants = ['Scheduled' => 'warning', 'Sent' => 'success', 'Failed' => 'danger', 'Cancelled' => 'muted'];
    $filters = $filters ?? [];
    $reminders = $reminders ?? [];
@endphp

@section('content')
    <div class="space-y-5">
        <div class="flex min-w-0 flex-col gap-3 2xl:flex-row 2xl:items-center 2xl:justify-between">
            <p class="text-sm font-medium text-booklio-muted">Review upcoming reminder jobs before they are sent to customers.</p>
            @include('admin.reminders.partials.nav', ['activeTab' => 'scheduled'])
        </div>

        <x-ui.card data-booklio-filter-panel>
            <form method="GET" action="{{ route('admin.reminders.scheduled') }}" class="grid gap-3 lg:grid-cols-[1fr_170px_170px_170px_auto_auto]" data-booklio-filter-grid>
                <div class="relative">
                    <x-ui.icon name="search" class="pointer-events-none absolute right-3 top-1/2 h-5 w-5 -translate-y-1/2 text-slate-400" />
                    <input name="q" value="{{ $filters['q'] ?? '' }}" class="h-11 w-full rounded-lg border border-booklio-border bg-white pl-4 pr-11 text-sm font-medium shadow-soft outline-none placeholder:text-slate-400 focus:border-booklio-primary focus:ring-4 focus:ring-blue-100" placeholder="Search customer, service, reminder..." />
                </div>
                <select name="status" class="h-11 rounded-lg border border-booklio-border bg-white px-3 text-sm font-semibold shadow-soft outline-none focus:border-booklio-primary focus:ring-4 focus:ring-blue-100">
                    @foreach (['all' => 'All Statuses', 'scheduled' => 'Scheduled', 'sent' => 'Sent', 'failed' => 'Failed', 'cancelled' => 'Cancelled'] as $value => $label)
                        <option value="{{ $value }}" @selected(($filters['status'] ?? 'all') === $value)>{{ $label }}</option>
                    @endforeach
                </select>
                <select name="channel" class="h-11 rounded-lg border border-booklio-border bg-white px-3 text-sm font-semibold shadow-soft outline-none focus:border-booklio-primary focus:ring-4 focus:ring-blue-100">
                    @foreach (['all' => 'All Channels', 'whatsapp' => 'WhatsApp', 'email' => 'Email'] as $value => $label)
                        <option value="{{ $value }}" @selected(($filters['channel'] ?? 'all') === $value)>{{ $label }}</option>
                    @endforeach
                </select>
                <input name="date" value="{{ $filters['date'] ?? '' }}" type="date" class="h-11 rounded-lg border border-booklio-border bg-white px-3 text-sm font-semibold shadow-soft outline-none focus:border-booklio-primary focus:ring-4 focus:ring-blue-100" />
                <x-ui.button variant="secondary" type="submit">
                    <x-ui.icon name="filter" class="h-4 w-4" />
                    Filter
                </x-ui.button>
                <x-ui.button variant="ghost" href="{{ route('admin.reminders.scheduled') }}">Reset</x-ui.button>
            </form>
        </x-ui.card>

        <x-ui.card title="Scheduled Queue" padding="p-0">
            <div class="hidden overflow-x-auto md:block booklio-scrollbar">
                <table class="min-w-[1240px] w-full divide-y divide-booklio-border">
                    <thead class="bg-slate-50">
                        <tr>
                            @foreach (['Customer', 'Reminder Type', 'Channel', 'Appointment / Service', 'Scheduled Time', 'Status', 'Actions'] as $heading)
                                <th class="px-5 py-4 text-left text-xs font-bold uppercase tracking-wide text-booklio-muted">{{ $heading }}</th>
                            @endforeach
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-booklio-border bg-white">
                        @forelse ($reminders as $reminder)
                            <tr class="transition hover:bg-slate-50/80">
                                <td class="max-w-[180px] px-5 py-4 text-sm font-extrabold text-booklio-dark"><span class="block truncate">{{ $reminder['customer'] }}</span></td>
                                <td class="max-w-[190px] px-5 py-4 text-sm font-semibold text-slate-700"><span class="block truncate">{{ $reminder['type'] }}</span></td>
                                <td class="px-5 py-4"><x-ui.badge :variant="$reminder['channel'] === 'WhatsApp' ? 'success' : 'primary'">{{ $reminder['channel'] }}</x-ui.badge></td>
                                <td class="max-w-[220px] px-5 py-4 text-sm font-semibold text-slate-700"><span class="block truncate">{{ $reminder['service'] }}</span></td>
                                <td class="px-5 py-4 text-sm font-semibold text-slate-700">{{ $reminder['time'] }}</td>
                                <td class="px-5 py-4"><x-ui.badge :variant="$statusVariants[$reminder['status']] ?? 'muted'">{{ $reminder['status'] }}</x-ui.badge></td>
                                <td class="px-5 py-4">
                                    <div class="flex items-center gap-2">
                                        <x-ui.button size="sm" variant="secondary" data-booklio-placeholder="Scheduled reminder details will open after reminder CRUD is connected.">View</x-ui.button>
                                        <x-ui.button size="sm" variant="ghost" data-booklio-placeholder="Manual reminder dispatch will use the reminder queue service.">Send Now</x-ui.button>
                                        <x-ui.button size="sm" variant="danger" data-booklio-placeholder="Scheduled reminder cancellation will update the reminder job when backend scheduling is connected.">Cancel</x-ui.button>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="px-5 py-8">
                                    <x-ui.empty-state
                                        title="No scheduled reminders found"
                                        description="Try changing the search, status, channel, or date filters."
                                        icon="clock"
                                    />
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="divide-y divide-booklio-border md:hidden">
                @forelse ($reminders as $reminder)
                    <div class="p-5">
                        <div class="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
                            <div class="min-w-0">
                                <p class="truncate text-sm font-extrabold text-booklio-dark">{{ $reminder['customer'] }}</p>
                                <p class="truncate text-xs font-medium text-booklio-muted">{{ $reminder['type'] }}</p>
                            </div>
                            <x-ui.badge :variant="$statusVariants[$reminder['status']] ?? 'muted'">{{ $reminder['status'] }}</x-ui.badge>
                        </div>
                        <div class="mt-4 grid grid-cols-2 gap-3 text-sm">
                            <div><p class="text-xs font-bold text-booklio-muted">Channel</p><p class="font-bold">{{ $reminder['channel'] }}</p></div>
                            <div><p class="text-xs font-bold text-booklio-muted">Service</p><p class="font-bold">{{ $reminder['service'] }}</p></div>
                            <div class="col-span-2"><p class="text-xs font-bold text-booklio-muted">Scheduled</p><p class="font-bold">{{ $reminder['time'] }}</p></div>
                        </div>
                        <div class="mt-4 flex gap-2">
                            <x-ui.button size="sm" variant="secondary" class="flex-1" data-booklio-placeholder="Scheduled reminder details will open after reminder CRUD is connected.">View</x-ui.button>
                            <x-ui.button size="sm" variant="ghost" class="flex-1" data-booklio-placeholder="Manual reminder dispatch will use the reminder queue service.">Send Now</x-ui.button>
                        </div>
                    </div>
                @empty
                    <div class="p-5">
                        <x-ui.empty-state
                            title="No scheduled reminders found"
                            description="Try changing the search, status, channel, or date filters."
                            icon="clock"
                        />
                    </div>
                @endforelse
            </div>
        </x-ui.card>
    </div>
@endsection