@php
    $branchOptions = $branches->pluck('name', 'id')->toArray();
    $departmentOptions = $departments->pluck('name', 'id')->toArray();
    $hasActiveFilters = filled($filter_q) || filled($filter_date_from) || filled($filter_date_to) || filled($filter_branch_id) || filled($filter_department_id);
@endphp

<div
    x-data="{ showModal: @entangle('showModal'), showFilters: @js($hasActiveFilters) }"
    x-on:close-modal.window="showModal = false; $wire.call('resetForm')"
    class="antialiased font-sans text-gray-900 bg-gray-50/50 min-h-screen p-4 md:p-8"
>

    {{-- Header --}}
    <div class="mb-6 flex flex-col md:flex-row md:justify-between md:items-center gap-3">
        <h1 class="text-2xl font-bold text-gray-800 dark:text-white">
            <i class="fas fa-bell mr-2"></i> {{ __('Notification Center') }}
        </h1>

        <div class="flex flex-wrap gap-2">
            <button @click="showFilters = !showFilters"
                    class="bg-gray-600 text-white px-4 py-2 rounded hover:bg-gray-700 flex items-center gap-2">
                <i class="fas fa-search"></i> {{ __('Filter') }}
            </button>

            @can('notifications send')
                <button
                    @click="showModal = true; $wire.call('resetForm')"
                    wire:loading.attr="disabled" wire:target="resetForm"
                    class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 flex items-center gap-2"
                >
                    <i class="fas fa-plus-circle"></i> {{ __('Compose New') }}
                    <svg wire:loading wire:target="resetForm" class="animate-spin h-5 w-5 text-white"
                         xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path>
                    </svg>
                </button>
            @endcan
        </div>
    </div>

    {{-- Session message --}}
    @if(session()->has('message'))
        <div class="mb-4 bg-green-100 dark:bg-green-800 text-green-800 dark:text-green-100 px-4 py-2 rounded">
            {{ session('message') }}
        </div>
    @endif

    {{-- Errors --}}
    @if ($errors->any())
        <div class="bg-red-100 text-red-700 p-3 rounded mb-4">
            <ul class="list-disc list-inside">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    {{-- Filters --}}
    <div x-show="showFilters" x-transition class="mb-6">
        <form wire:submit.prevent="filter"
              class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4 items-end">

            <div>
                <label class="text-sm text-gray-600 dark:text-gray-300">{{ __('Search') }}</label>
                <input type="text" wire:model.defer="filter_q"
                       placeholder="{{ __('Subject / Body / Target') }}"
                       class="w-full border rounded px-3 py-2 dark:bg-gray-800 dark:text-white dark:border-gray-600">
            </div>

            <div>
                <label class="text-sm text-gray-600 dark:text-gray-300">{{ __('From Date') }}</label>
                <x-date-picker wire:model.live="filter_date_from" max-model="filter_date_to" />
            </div>

            <div>
                <label class="text-sm text-gray-600 dark:text-gray-300">{{ __('To Date') }}</label>
                <x-date-picker wire:model.live="filter_date_to" min-model="filter_date_from" />
            </div>

            <div>
                <label class="text-sm text-gray-600 dark:text-gray-300">{{ __('Branch') }}</label>
                <x-searchable-select wire:model.live="filter_branch_id" :options="$branchOptions" :placeholder="__('All Branches')" />
            </div>

            <div>
                <label class="text-sm text-gray-600 dark:text-gray-300">{{ __('Department') }}</label>
                <x-searchable-select wire:model.live="filter_department_id" :options="$departmentOptions" :placeholder="__('All Departments')" />
            </div>

            <div class="flex gap-2">
                <button type="submit" wire:loading.attr="disabled" wire:target="filter"
                        class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 flex items-center gap-2 justify-center w-full">
                    <i class="fas fa-search" wire:loading.remove wire:target="filter"></i>
                    <span wire:loading.remove wire:target="filter">{{ __('Search') }}</span>
                    <span wire:loading wire:target="filter" class="flex items-center gap-2">
                        <i class="fas fa-spinner fa-spin"></i> {{ __('Processing...') }}
                    </span>
                </button>

                <button type="button" wire:click="resetFilters" wire:loading.attr="disabled"
                        class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600 flex items-center gap-2 justify-center w-full">
                    <i class="fas fa-sync-alt"></i>
                    <span>{{ __('Reset') }}</span>
                </button>
            </div>
        </form>
    </div>

    {{-- Table --}}
    <div class="overflow-x-auto md:shadow md:border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800 rounded">
        <table class="min-w-full divide-y text-sm divide-gray-200 dark:divide-gray-600">
            <thead class="bg-gray-100 text-gray-700 dark:text-gray-100 dark:bg-gray-700">
            <tr class="border border-gray-200 dark:border-gray-600 text-center">
                <th class="px-3 py-2">#</th>
                <th class="px-3 py-2">{{ __('Subject / Preview') }}</th>
                <th class="px-3 py-2">{{ __('Recipients') }}</th>
                <th class="px-3 py-2">{{ __('Channels') }}</th>
                <th class="px-3 py-2">{{ __('Priority') }}</th>
                <th class="px-3 py-2">{{ __('Status') }}</th>
                <th class="px-3 py-2">{{ __('Created at') }}</th>
                <th class="px-3 py-2">{{ __('Send time') }}</th>
            </tr>
            </thead>

            <tbody class="text-gray-800 dark:text-gray-100">
            @forelse($sentHistory as $log)
                @php
                    $props = $log->properties ?? [];
                    $scheduled = data_get($props, 'scheduled_at');
                    $priority = data_get($props, 'priority', 'normal');
                    $channels = (array) data_get($props, 'channels', []);
                @endphp

                <tr class="border border-gray-200 dark:border-gray-700 text-center hover:bg-gray-50 dark:hover:bg-gray-700/40 transition">
                    <td class="px-3 py-2 whitespace-nowrap" data-label="#">
                        {{ $loop->iteration + ($sentHistory->currentPage() - 1) * $sentHistory->perPage() }}
                    </td>

                    <td class="px-3 py-2 text-left" data-label="{{ __('Subject / Preview') }}">
                        <div class="font-semibold text-gray-900 dark:text-white">
                            <span class="text-blue-600">
                                {{ $log->description }}
                            </span>
                        </div>
                        <div class="text-xs text-gray-500 dark:text-gray-300 line-clamp-1 italic">
                            {{ data_get($props, 'body', __('N/A')) }}
                        </div>
                    </td>

                    <td class="px-3 py-2 whitespace-nowrap" data-label="{{ __('Recipients') }}">
                        <div class="inline-flex items-center px-2 py-1 rounded bg-blue-100 text-blue-700 text-xs font-semibold">
                            <button type="button"
                                    wire:click="showRecipients({{ $log->id }})"
                                    class="mt-1 text-[11px] text-blue-600 hover:underline font-semibold">
                                {{ data_get($props, 'recipients_count', 0) }} {{ __('Employees') }}
                                <i wire:loading wire:target="showRecipients({{ $log->id }})" class="fas fa-spinner fa-spin"></i>

                            </button>
                        </div>
                    </td>

                    <td class="px-3 py-2 whitespace-nowrap" data-label="{{ __('Channels') }}">
                        @if(count($channels))
                            <div class="flex justify-center gap-1 flex-wrap">
                                @foreach($channels as $ch)
                                    <span class="px-2 py-0.5 rounded bg-gray-200 dark:bg-gray-600 text-xs">
                                        {{ __($ch === 'database' ? 'Database' : ($ch === 'mail' ? 'Mail' : ($ch === 'sms' ? 'SMS' : ($ch === 'whatsapp' ? 'WhatsApp' : $ch)))) }}
                                    </span>
                                @endforeach
                            </div>
                        @else
                            -
                        @endif
                    </td>

                    <td class="px-3 py-2 whitespace-nowrap" data-label="{{ __('Priority') }}">
                        @if($priority === 'urgent')
                            <span class="text-red-600 font-bold text-xs">{{ __($priority) }}</span>
                        @elseif($priority === 'high')
                            <span class="text-amber-600 font-bold text-xs">{{ __($priority) }}</span>
                        @elseif($priority === 'low')
                            <span class="text-gray-600 dark:text-gray-300 font-bold text-xs">{{ __($priority) }}</span>
                        @else
                            <span class="text-blue-600 font-bold text-xs">{{ __($priority) }}</span>
                        @endif
                    </td>

                    <td class="px-3 py-2 whitespace-nowrap" data-label="{{ __('Status') }}">
                        @if($scheduled)
                            <span class="inline-flex items-center text-xs font-semibold text-amber-600">
                                <i class="fas fa-clock mr-1"></i> {{ __('Scheduled') }}
                            </span>
                        @else
                            <span class="inline-flex items-center text-xs font-semibold text-green-600">
                                <i class="fas fa-check-circle mr-1"></i> {{ __('Delivered') }}
                            </span>
                        @endif
                    </td>

                    <td class="px-3 py-2 whitespace-nowrap" data-label="{{ __('Created at') }}">
                        {{ $log->created_at->format('Y-m-d H:i') }}
                    </td>
                    <td class="px-3 py-2 whitespace-nowrap" data-label="{{ __('Send time') }}">
                        {{ $scheduled }}
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="8" class="border px-3 py-6 text-gray-500 dark:text-gray-300 text-center">
                        {{ __('No notifications sent yet.') }}
                    </td>
                </tr>
            @endforelse
            </tbody>
        </table>

        <div class="mt-4 px-4 pb-4">
            {{ $sentHistory->links() }}
        </div>
    </div>


    <div x-data="{ open: @entangle('showRecipientsModal') }"
         x-show="open"
         class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 dark:bg-black/70"
         style="display:none;"
    >
        <div class="bg-white dark:bg-gray-800 dark:text-white w-full max-w-lg p-6 rounded shadow-lg max-h-[80vh] overflow-y-auto relative">

            <div class="flex items-center justify-between mb-4 border-b pb-3 border-gray-300 dark:border-gray-600">
                <h2 class="text-lg font-semibold">
                    <i class="fas fa-users mr-2"></i> {{ $recipientsTitle ?: __('Recipients') }}
                </h2>

                <button @click="open = false; $wire.closeRecipientsModal()"
                        class="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white">
                    <i class="fas fa-times fa-lg"></i>
                </button>
            </div>

            @if(empty($recipientsList))
                <div class="text-center text-gray-500 dark:text-gray-300 py-8">
                    {{ __('No recipients to show.') }}
                </div>
            @else
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-600 text-sm">
                        <thead class="bg-gray-100 dark:bg-gray-700">
                        <tr class="text-center">
                            <th class="px-3 py-2 w-16">#</th>
                            <th class="px-3 py-2 text-left">{{ __('Employee Name') }}</th>
                        </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200 dark:divide-gray-600">
                        @foreach($recipientsList as $i => $name)
                            <tr>
                                <td class="px-3 py-2 text-center" data-label="#">{{ $i + 1 }}</td>
                                <td class="px-3 py-2 text-left" data-label="{{ __('Employee Name') }}">{{ $name }}</td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            @endif

            <div class="flex justify-end mt-4">
                <button type="button"
                        @click="open = false; $wire.closeRecipientsModal()"
                        class="bg-gray-300 hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500 text-gray-800 dark:text-white px-5 py-2 rounded flex items-center gap-2">
                    <i class="fas fa-times"></i> {{ __('Close') }}
                </button>
            </div>
        </div>
    </div>


    {{-- Modal --}}
    <div x-show="showModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 dark:bg-black/70"
         style="display:none;">
        <div class="bg-white dark:bg-gray-800 dark:text-white w-full max-w-3xl p-6 rounded shadow-lg max-h-[90vh] overflow-y-auto relative">

            <div class="flex items-center justify-between mb-6 border-b pb-3 border-gray-300 dark:border-gray-600">
                <h2 class="text-xl font-semibold flex-grow text-start">
                    {{ __('New Notification') }}
                </h2>
                <button @click="showModal = false; $wire.closeModal()"
                        class="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white cursor-pointer">
                    <i class="fas fa-times fa-lg"></i>
                </button>
            </div>

            <form wire:submit.prevent="send" class="space-y-5">

                <div>
                    <label class="block font-medium mb-1">{{ __('Subject Title') }}</label>
                    <input type="text" wire:model.defer="title"
                           class="w-full border rounded px-3 py-2 dark:bg-gray-700 dark:text-white dark:border-gray-600">
                    @error('title') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                </div>

                <div>
                    <label class="block font-medium mb-1">{{ __('Message Content') }}</label>
                    <textarea wire:model.defer="body" rows="4"
                              class="w-full border rounded px-3 py-2 dark:bg-gray-700 dark:text-white dark:border-gray-600"></textarea>
                    @error('body') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                </div>

                <div>
                    <label class="block font-medium mb-1">
                        <i class="fas fa-paperclip mr-1 text-gray-500"></i> {{ __('Attachment (Optional)') }}
                    </label>
                    <input type="file" wire:model="attachment"
                           accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.jpg,.jpeg,.png,.webp,.txt,.zip"
                           class="w-full border rounded px-3 py-2 dark:bg-gray-700 dark:text-white dark:border-gray-600">
                    <div wire:loading wire:target="attachment" class="mt-1 text-xs text-blue-600">
                        {{ __('Uploading...') }}
                    </div>
                    @if($attachment)
                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-300">{{ $attachment->getClientOriginalName() }}</p>
                    @endif
                    @error('attachment') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <label class="block font-medium mb-1">{{ __('Priority') }}</label>
                        <x-searchable-select
                            wire:model.defer="priority"
                            :options="[
                                'low' => __('Low'),
                                'normal' => __('Normal'),
                                'high' => __('High'),
                                'urgent' => __('Urgent'),
                            ]"
                            :placeholder="__('Select')"
                        />
                        @error('priority') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                    </div>

                    <div class="md:col-span-2">
                        <label class="block font-medium mb-1">{{ __('Delivery Channels') }}</label>
                        <div class="flex flex-wrap gap-4">
                            @foreach(['database', 'mail', 'sms', 'whatsapp', 'app'] as $ch)
                                <label class="flex items-center gap-2 cursor-pointer">
                                    <input type="checkbox" value="{{ $ch }}" wire:model="channels"
                                           class="w-4 h-4 rounded text-blue-600 border-gray-300">
                                    <span class="text-sm font-semibold">{{ strtoupper($ch === 'app' ? __('Push App') : $ch) }}</span>
                                </label>
                            @endforeach
                        </div>
                        @error('channels') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                    </div>
                </div>

                <div class="border rounded p-4 dark:border-gray-600 space-y-4">
                    <label class="flex items-center gap-2 cursor-pointer w-max">
                        <input type="checkbox" wire:model.live="send_to_all"
                               class="w-4 h-4 rounded text-blue-600 border-gray-300 focus:ring-blue-500">
                        <span class="font-semibold">{{ __('Send to Group (Bulk)') }}</span>
                        @if($send_to_all)
                            <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full dark:bg-blue-900 dark:text-blue-200">
                                {{ __('Matched Employees') }}: {{ $this->recipientsCount }}
                            </span>
                        @else
                            <span class="text-xs bg-gray-100 text-gray-800 px-2 py-1 rounded-full dark:bg-gray-700 dark:text-gray-200">
                                {{ __('Selected') }}: {{ count($employee_ids) }}
                            </span>
                        @endif
                    </label>

                    @if(!$send_to_all)
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 max-h-60 overflow-auto border rounded p-3 dark:border-gray-600">
                            @foreach($employees as $emp)
                                <label class="flex items-center gap-2 text-sm">
                                    <input type="checkbox"
                                           wire:model.defer="employee_ids"
                                           value="{{ $emp->id }}"
                                           class="rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600">
                                    <span>{{ $emp->name }}</span>
                                </label>
                            @endforeach
                        </div>
                        @error('employee_ids') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                    @else
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm text-gray-600 dark:text-gray-300 mb-1">{{ __('Branch') }}</label>
                                <x-searchable-select
                                    wire:model.live="filter_branch_id"
                                    :options="$branches->pluck('name', 'id')->toArray()"
                                    :placeholder="__('All Branches')"
                                />
                                @error('filter_branch_id') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                            </div>

                            <div>
                                <label class="block text-sm text-gray-600 dark:text-gray-300 mb-1">{{ __('Department') }}</label>
                                <x-searchable-select
                                    wire:model.live="filter_department_id"
                                    :options="$departments->pluck('name', 'id')->toArray()"
                                    :placeholder="__('All Departments')"
                                />
                                @error('filter_department_id') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                            </div>
                        </div>
                        @error('employee_ids') <span class="text-red-500 text-sm block mt-2">{{ $message }}</span> @enderror
                    @endif
                </div>

                <div>
                    <label class="block font-medium mb-1">
                        <i class="fas fa-clock mr-1 text-amber-600"></i> {{ __('Schedule Delivery') }}
                    </label>
                    <x-date-picker wire:model.defer="scheduled_at" :options="['enableTime' => true, 'dateFormat' => 'Y-m-d H:i']" />
                    @error('scheduled_at') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                </div>

                <div class="flex justify-end gap-3 mt-6">
                    <button type="submit" wire:loading.attr="disabled" wire:target="send"
                            class="bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded flex items-center gap-2">
                        <i class="fas fa-paper-plane" wire:loading.remove wire:target="send"></i>
                        <span wire:loading.remove wire:target="send">{{ __('Confirm Broadcast') }}</span>
                        <span wire:loading wire:target="send" class="flex items-center gap-2">
                            <i class="fas fa-spinner fa-spin"></i> {{ __('Processing...') }}
                        </span>
                    </button>

                    <button type="button" @click="showModal = false; $wire.closeModal()"
                            class="bg-gray-300 hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500 text-gray-800 dark:text-white px-6 py-2 rounded flex items-center gap-2">
                        <i class="fas fa-times"></i> {{ __('Cancel') }}
                    </button>
                </div>

            </form>
        </div>
    </div>

</div>