@extends('admin.layout')
@section('title', 'Notifikasi - LapFinder Admin')

@section('content')
<x-admin.page-header
    title="Notifikasi"
    subtitle="Kirim promo atau informasi aplikasi ke semua user atau user tertentu."
/>

<div class="grid gap-6 xl:grid-cols-[24rem_minmax(0,1fr)]">
    <x-admin.card title="Kirim notifikasi" description="Notifikasi global tetap dihitung read per user.">
        <form method="POST" action="{{ route('notifications.store') }}" class="space-y-4">
            @csrf
            <div>
                <label class="form-label" for="title">Judul *</label>
                <input id="title" name="title" type="text" value="{{ old('title') }}" class="form-control" placeholder="Promo laptop terbaru" required>
                @error('title') <p class="form-error">{{ $message }}</p> @enderror
            </div>

            <div>
                <label class="form-label" for="type">Tipe *</label>
                <select id="type" name="type" class="form-control" required>
                    <option value="info" @selected(old('type') === 'info')>Info</option>
                    <option value="promo" @selected(old('type') === 'promo')>Promo</option>
                    <option value="new_laptop" @selected(old('type') === 'new_laptop')>Laptop baru</option>
                </select>
                @error('type') <p class="form-error">{{ $message }}</p> @enderror
            </div>

            <div>
                <label class="form-label" for="target">Target *</label>
                <select id="target" name="target" class="form-control" data-notification-target required>
                    <option value="all" @selected(old('target', 'all') === 'all')>Semua user aktif</option>
                    <option value="user" @selected(old('target') === 'user')>User tertentu</option>
                </select>
                @error('target') <p class="form-error">{{ $message }}</p> @enderror
            </div>

            <div data-notification-user class="hidden">
                <label class="form-label" for="target_user_id">User target</label>
                <select id="target_user_id" name="target_user_id" class="form-control">
                    <option value="">Pilih user</option>
                    @foreach($users as $user)
                        <option value="{{ $user->id }}" @selected((string) old('target_user_id') === (string) $user->id)>{{ $user->name }} - {{ $user->email }}</option>
                    @endforeach
                </select>
                @error('target_user_id') <p class="form-error">{{ $message }}</p> @enderror
            </div>

            <div>
                <label class="form-label" for="message">Pesan *</label>
                <textarea id="message" name="message" rows="5" class="form-control" placeholder="Isi pesan yang akan tampil di aplikasi." required>{{ old('message') }}</textarea>
                @error('message') <p class="form-error">{{ $message }}</p> @enderror
            </div>

            <button type="submit" class="btn-primary w-full">
                <i class="fa-solid fa-paper-plane"></i>
                Kirim Notifikasi
            </button>
        </form>
    </x-admin.card>

    <x-admin.card title="Riwayat notifikasi" description="{{ number_format($notifications->total()) }} notifikasi tersimpan.">
        <div class="overflow-x-auto">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Notifikasi</th>
                        <th>Tipe</th>
                        <th>Target</th>
                        <th>Dibaca</th>
                        <th>Tanggal</th>
                        <th class="text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($notifications as $notif)
                        <tr>
                            <td>
                                <p class="font-bold text-slate-950 dark:text-white">{{ $notif->title }}</p>
                                <p class="mt-1 max-w-lg text-sm text-slate-600 dark:text-slate-300">{{ $notif->message }}</p>
                            </td>
                            <td>
                                @if($notif->type === 'promo')
                                    <span class="badge-yellow"><i class="fa-solid fa-tag"></i> Promo</span>
                                @elseif($notif->type === 'new_laptop')
                                    <span class="badge-green"><i class="fa-solid fa-laptop"></i> Laptop baru</span>
                                @else
                                    <span class="badge-blue"><i class="fa-solid fa-circle-info"></i> Info</span>
                                @endif
                            </td>
                            <td>
                                @if($notif->target_user_id)
                                    <span class="badge-slate">{{ optional($notif->targetUser)->name ?? 'User terhapus' }}</span>
                                @else
                                    <span class="badge-blue">Semua user</span>
                                @endif
                            </td>
                            <td class="font-semibold text-slate-800 dark:text-slate-100">{{ number_format($notif->reads_count) }}</td>
                            <td class="text-slate-500 dark:text-slate-400">{{ $notif->created_at->format('d M Y H:i') }}</td>
                            <td>
                                <div class="flex justify-end">
                                    <button
                                        type="button"
                                        class="icon-btn text-red-600 hover:text-red-700 dark:text-red-400"
                                        data-confirm-action="{{ route('notifications.destroy', $notif) }}"
                                        data-confirm-method="DELETE"
                                        data-confirm-title="Hapus notifikasi?"
                                        data-confirm-message="{{ $notif->title }} akan dihapus dari riwayat notifikasi."
                                    >
                                        <i class="fa-solid fa-trash"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6">
                                <x-admin.empty-state icon="fa-bell-slash" title="Belum ada notifikasi" description="Riwayat notifikasi akan muncul setelah admin mengirim pesan." />
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($notifications->hasPages())
            <div class="mt-4 border-t border-slate-100 pt-4 dark:border-slate-800">
                {{ $notifications->withQueryString()->links() }}
            </div>
        @endif
    </x-admin.card>
</div>
@endsection