@extends('admin.layout')

@section('title', 'Tamu Undangan')

@section('content')

    <div class="flex flex-wrap items-start justify-between gap-4 mb-6">
        <div>
            <h1 class="text-2xl font-semibold text-forest-950">Tamu Undangan</h1>
            <p class="text-sm text-forest-700/60 mt-1">{{ $totalGuests }} tamu terdaftar.</p>
        </div>
        <div class="flex flex-wrap gap-2">
            <a href="{{ route('admin.guests.export') }}"
               class="inline-flex items-center gap-1.5 px-4 py-2.5 rounded-full border border-forest-950/15 text-forest-950 text-sm font-medium hover:bg-forest-950/5 transition-colors">
                Export CSV
            </a>
            <a href="{{ route('admin.guests.create') }}"
               class="inline-flex items-center gap-1.5 px-4 py-2.5 rounded-full bg-forest-950 text-white text-sm font-medium hover:bg-forest-800 transition-colors">
                + Tambah Tamu
            </a>
        </div>
    </div>

    {{-- Tambah banyak tamu sekaligus --}}
    <details class="bg-white rounded-xl border border-forest-950/10 mb-6 group">
        <summary class="cursor-pointer select-none px-5 py-4 text-sm font-medium text-forest-950 flex items-center justify-between">
            Tambah Banyak Tamu Sekaligus
            <span class="text-xs text-forest-700/50 group-open:hidden">klik untuk buka</span>
        </summary>
        <form method="POST" action="{{ route('admin.guests.bulk') }}" class="px-5 pb-5 space-y-3">
            @csrf
            <p class="text-xs text-forest-700/60">
                Satu tamu per baris. Format bebas: <code class="bg-forest-950/5 px-1 rounded">Nama</code>,
                atau <code class="bg-forest-950/5 px-1 rounded">Nama, No HP</code>,
                atau <code class="bg-forest-950/5 px-1 rounded">Nama, No HP, Kategori</code>.
            </p>
            <textarea name="bulk_names" rows="5" required placeholder="Budi Santoso, 081234567890, Keluarga&#10;Siti Aminah&#10;Kantor RAFNST, 08111222333, Kantor"
                      class="w-full rounded-lg border border-forest-950/15 px-4 py-2.5 text-sm font-mono focus:border-gold-500 focus:ring-0"></textarea>
            <div class="flex flex-wrap items-center gap-3">
                <input type="text" name="bulk_category" placeholder="Kategori default (opsional)"
                       class="rounded-lg border border-forest-950/15 px-4 py-2.5 text-sm focus:border-gold-500 focus:ring-0">
                <button type="submit"
                        class="inline-flex items-center px-5 py-2.5 rounded-full bg-forest-950 text-white text-sm font-medium hover:bg-forest-800 transition-colors">
                    Tambahkan Semua
                </button>
            </div>
        </form>
    </details>

    {{-- Pencarian & filter --}}
    <form method="GET" class="flex flex-wrap gap-3 mb-4">
        <input type="text" name="q" value="{{ $filters['q'] ?? '' }}" placeholder="Cari nama, no HP, atau kode..."
               class="flex-1 min-w-[200px] rounded-lg border border-forest-950/15 px-4 py-2.5 text-sm focus:border-gold-500 focus:ring-0">

        <select name="category" class="rounded-lg border border-forest-950/15 px-4 py-2.5 text-sm bg-white focus:border-gold-500 focus:ring-0">
            <option value="">Semua Kategori</option>
            @foreach ($categories as $category)
                <option value="{{ $category }}" @selected(($filters['category'] ?? '') === $category)>{{ $category }}</option>
            @endforeach
        </select>

        <select name="status" class="rounded-lg border border-forest-950/15 px-4 py-2.5 text-sm bg-white focus:border-gold-500 focus:ring-0">
            <option value="">Semua Status</option>
            <option value="opened" @selected(($filters['status'] ?? '') === 'opened')>Sudah Dibuka</option>
            <option value="unopened" @selected(($filters['status'] ?? '') === 'unopened')>Belum Dibuka</option>
        </select>

        <button type="submit" class="px-5 py-2.5 rounded-lg bg-forest-950/5 text-forest-950 text-sm font-medium hover:bg-forest-950/10 transition-colors">
            Filter
        </button>
        @if (($filters['q'] ?? '') || ($filters['category'] ?? '') || ($filters['status'] ?? ''))
            <a href="{{ route('admin.guests.index') }}" class="px-5 py-2.5 text-sm text-forest-700/60 hover:text-forest-950">Reset</a>
        @endif
    </form>

    {{-- Bar aksi massal (muncul otomatis via JS saat ada baris dicentang) --}}
    <form id="bulk-destroy-form" method="POST" action="{{ route('admin.guests.bulk-destroy') }}"
          data-confirm="Hapus semua tamu yang dipilih? Tindakan ini tidak bisa dibatalkan.">
        @csrf
        @method('DELETE')
        <div id="bulk-actions-bar" class="hidden items-center justify-between bg-forest-950 text-white text-sm rounded-lg px-4 py-3 mb-4">
            <span><span id="bulk-selected-count">0</span> tamu dipilih</span>
            <button type="submit" class="px-4 py-1.5 rounded-full bg-rose-500 hover:bg-rose-600 transition-colors text-xs font-medium">
                Hapus Terpilih
            </button>
        </div>
    </form>

    {{-- Tabel tamu --}}
    <div class="bg-white rounded-xl border border-forest-950/10 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="text-left text-xs text-forest-700/60 uppercase tracking-wide border-b border-forest-950/10">
                        <th class="px-4 py-3 w-10">
                            <input type="checkbox" id="select-all-guests" class="rounded border-forest-950/20">
                        </th>
                        <th class="px-4 py-3">Nama</th>
                        <th class="px-4 py-3 hidden sm:table-cell">Kategori</th>
                        <th class="px-4 py-3">Status</th>
                        <th class="px-4 py-3 hidden md:table-cell">RSVP</th>
                        <th class="px-4 py-3 text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-forest-950/5">
                    @forelse ($guests as $guest)
                        @php
                            // ---- Pesan undangan (ubah teks di sini bila perlu) ----------------
                            $opening = "Assalamu'alaikum Warahmatullahi Wabarakatuh\n\n"
                                . "Kepada Yth.\n*{$guest->name}*\n\n"
                                . "Tanpa mengurangi rasa hormat, kami mengundang Bapak/Ibu/Saudara/i untuk menghadiri dan memberikan doa restu pada momen bahagia pernikahan kami:\n\n"
                                . "*Fitria & Roihan*\n"
                                . "(Fitria Safwa Irfani, S.Ak., M.Ak. & Muhammad Roihan Hanif Bancin, S.Ak., M.Ak.)";
                            $linkLead = "Silakan buka undangan digital kami melalui tautan berikut:";
                            $closing = "Kehadiran serta doa restu Anda merupakan kebahagiaan dan kado terindah bagi perjalanan baru kami.\n\n"
                                . "Terima kasih atas perhatian dan doa baiknya.\n"
                                . "Wassalamu'alaikum Warahmatullahi Wabarakatuh.\n\n"
                                . "Salam hangat,\n*Fitria & Roihan*";

                            // Versi lengkap (dengan link) untuk WhatsApp & menu Bagikan.
                            $shareText = $opening."\n\n".$linkLead."\n".$guest->link."\n\n".$closing;
                            // Versi polos: tanpa tanda bintang (format tebal WhatsApp) untuk Email, SMS, Telegram.
                            $plainText = str_replace('*', '', $shareText);
                            $plainNoLink = str_replace('*', '', $opening."\n\n".$closing);

                            // ---- Nomor WhatsApp: 08xx / 8xx / +62 / 62 / 0062 -> 62xxxxxxxx ---
                            $waNumber = $guest->phone ? preg_replace('/\D+/', '', $guest->phone) : '';
                            if (str_starts_with($waNumber, '00')) {
                                $waNumber = substr($waNumber, 2);
                            } elseif (str_starts_with($waNumber, '0')) {
                                $waNumber = '62'.substr($waNumber, 1);
                            } elseif (str_starts_with($waNumber, '8')) {
                                $waNumber = '62'.$waNumber;
                            }
                            if (strlen($waNumber) < 8) {
                                $waNumber = ''; // nomor tidak valid -> WhatsApp akan meminta pilih kontak
                            }

                            $waLink = 'https://wa.me/'.$waNumber.'?text='.rawurlencode($shareText);
                            $tgLink = 'https://t.me/share/url?url='.rawurlencode($guest->link).'&text='.rawurlencode($plainNoLink);
                            $mailLink = 'mailto:?subject='.rawurlencode('Undangan Pernikahan Fitria & Roihan').'&body='.rawurlencode(str_replace("\n", "\r\n", $plainText));
                            $smsLink = $guest->phone ? 'sms:'.$guest->phone.'?body='.rawurlencode($plainText) : null;
                        @endphp
                        <tr class="align-top">
                            <td class="px-4 py-3">
                                <input type="checkbox" class="guest-row-checkbox rounded border-forest-950/20" value="{{ $guest->id }}">
                            </td>
                            <td class="px-4 py-3">
                                <p class="font-medium text-forest-950">{{ $guest->name }}</p>
                                @if ($guest->phone)
                                    <p class="text-xs text-forest-700/50">{{ $guest->phone }}</p>
                                @endif
                                <p class="text-[11px] text-forest-700/40 mt-0.5 break-all">{{ $guest->link }}</p>
                            </td>
                            <td class="px-4 py-3 hidden sm:table-cell text-forest-700/70">
                                {{ $guest->category ?? '—' }}
                            </td>
                            <td class="px-4 py-3">
                                <span class="text-[11px] px-2 py-0.5 rounded-full {{ $guest->is_opened ? 'bg-emerald-50 text-emerald-700' : 'bg-forest-950/5 text-forest-700/60' }}">
                                    {{ $guest->is_opened ? 'Dibuka ('.$guest->opened_count.'x)' : 'Belum dibuka' }}
                                </span>
                            </td>
                            <td class="px-4 py-3 hidden md:table-cell">
                                @php
                                    $rsvpLabel = match ($guest->rsvp_status) {
                                        'hadir' => 'Hadir',
                                        'tidak_hadir' => 'Tidak Hadir',
                                        'ragu_ragu' => 'Masih Ragu',
                                        default => 'Belum konfirmasi',
                                    };
                                @endphp
                                <span class="text-xs text-forest-700/70">{{ $rsvpLabel }}</span>
                            </td>
                            <td class="px-4 py-3">
                                <div class="flex flex-wrap items-center justify-end gap-1 relative">
                                    <button type="button" data-copy-link="{{ $guest->link }}"
                                            class="px-2.5 py-1.5 rounded-lg text-xs text-forest-700 hover:bg-forest-950/5 transition-colors">
                                        Salin Link
                                    </button>

                                    {{-- Kirim langsung lewat WhatsApp (ke nomor tamu bila ada, jika tidak pilih kontak) --}}
                                    <a href="{{ $waLink }}" target="_blank" rel="noopener"
                                       title="{{ $waNumber ? 'Kirim langsung ke '.$guest->phone : 'Pilih kontak WhatsApp tujuan' }}"
                                       class="inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-xs font-medium text-white bg-emerald-600 hover:bg-emerald-700 transition-colors">
                                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                            <path d="M21 11.5a8.4 8.4 0 0 1-12.4 7.4L3 20.5l1.6-5.5A8.4 8.4 0 1 1 21 11.5z"/>
                                        </svg>
                                        WhatsApp
                                    </a>

                                    <button type="button"
                                            data-share-native
                                            data-share-url="{{ $guest->link }}"
                                            data-share-text="{{ $shareText }}"
                                            data-share-dropdown-target="share-dropdown-{{ $guest->id }}"
                                            class="px-2.5 py-1.5 rounded-lg text-xs text-white bg-forest-950 hover:bg-forest-800 transition-colors">
                                        Bagikan
                                    </button>

                                    {{-- Fallback dropdown untuk browser tanpa Web Share API --}}
                                    <div id="share-dropdown-{{ $guest->id }}"
                                         class="share-dropdown hidden absolute right-0 top-10 z-50 w-44 bg-white border border-forest-950/10 rounded-lg shadow-lg py-1 text-left">
                                        <a href="{{ $waLink }}" target="_blank" rel="noopener" class="block px-4 py-2 text-xs text-forest-950 hover:bg-forest-950/5">WhatsApp</a>
                                        <a href="{{ $tgLink }}" target="_blank" rel="noopener" class="block px-4 py-2 text-xs text-forest-950 hover:bg-forest-950/5">Telegram</a>
                                        <a href="{{ $mailLink }}" class="block px-4 py-2 text-xs text-forest-950 hover:bg-forest-950/5">Email</a>
                                        @if ($smsLink)
                                            <a href="{{ $smsLink }}" class="block px-4 py-2 text-xs text-forest-950 hover:bg-forest-950/5">SMS</a>
                                        @endif
                                    </div>

                                    <a href="{{ route('admin.guests.edit', $guest) }}"
                                       class="px-2.5 py-1.5 rounded-lg text-xs text-forest-700 hover:bg-forest-950/5 transition-colors">
                                        Ubah
                                    </a>

                                    <form method="POST" action="{{ route('admin.guests.destroy', $guest) }}"
                                          data-confirm="Hapus tamu &quot;{{ $guest->name }}&quot;?">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="px-2.5 py-1.5 rounded-lg text-xs text-rose-600 hover:bg-rose-50 transition-colors">
                                            Hapus
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-4 py-10 text-center text-sm text-forest-700/50">
                                Belum ada tamu. <a href="{{ route('admin.guests.create') }}" class="text-gold-600 underline">Tambah tamu pertama</a>.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <div class="mt-6">
        {{ $guests->links() }}
    </div>

@endsection