@extends('layouts.app')

@section('title', 'Manajemen Buku Tamu & WhatsApp - Janoer Koening')

@push('styles')
<style>
    .scrollbar-none::-webkit-scrollbar {
        display: none;
    }
    .scrollbar-none {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
</style>
@endpush

@section('content')
<div class="py-6 sm:py-10 bg-[#FAF7F0]">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <!-- Welcome Header & Status Pill -->
        <div class="flex flex-col sm:flex-row sm:items-center justify-between pb-6 mb-6 border-b border-[#A8BBA6]/20 gap-4">
            <div>
                <span class="text-xs font-semibold text-deepsage uppercase tracking-widest">Dashboard Mempelai</span>
                <h1 class="font-heading text-2xl sm:text-4xl font-bold text-charcoal">Daftar Tamu &amp; WhatsApp Sender</h1>
                <p class="text-xs sm:text-sm text-charcoal/70 mt-1">Kelola nama tamu undangan, import batch dari Excel, dan kirim pesan personal WhatsApp.</p>
            </div>
            @if($activeInvitation)
                <div class="flex items-center gap-3">
                    <a href="{{ route('invitation.public', $activeInvitation->slug) }}" target="_blank" class="inline-flex items-center gap-2 px-4 sm:px-5 py-2 sm:py-2.5 bg-white border border-[#A8BBA6]/30 text-charcoal text-xs font-semibold rounded-full shadow-sm hover:bg-gray-50 transition">
                        <i data-lucide="eye" class="w-4 h-4 text-deepsage"></i>
                        Live Preview
                    </a>
                </div>
            @endif
        </div>

        @if(session('success'))
            <div class="mb-6 p-4 bg-emerald-50 border border-emerald-200 text-emerald-800 rounded-2xl text-xs sm:text-sm flex items-center gap-2">
                <i data-lucide="check-circle" class="w-5 h-5 text-emerald-600 shrink-0"></i>
                <span>{{ session('success') }}</span>
            </div>
        @endif

        <!-- SUB-NAV TABS CLIENT -->
        <div class="flex items-center gap-2 mb-6 sm:mb-8 border-b border-[#A8BBA6]/20 pb-3 sm:pb-4 overflow-x-auto whitespace-nowrap -mx-4 px-4 sm:mx-0 sm:px-0 scrollbar-none">
            <a href="{{ route('client.dashboard') }}" class="shrink-0 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full text-xs font-bold transition flex items-center gap-2 bg-white text-charcoal/70 hover:text-charcoal border border-[#A8BBA6]/20 shadow-sm">
                <i data-lucide="palette" class="w-4 h-4 text-deepsage"></i>
                Desain &amp; Isi Undangan
            </a>
            <a href="{{ route('client.guests') }}" class="shrink-0 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full text-xs font-bold transition flex items-center gap-2 bg-deepsage text-ivory shadow">
                <i data-lucide="users" class="w-4 h-4"></i>
                Buku Tamu &amp; WhatsApp ({{ $activeInvitation ? $activeInvitation->guests->count() : 0 }})
            </a>
            <a href="{{ route('client.wishes') }}" class="shrink-0 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full text-xs font-bold transition flex items-center gap-2 bg-white text-charcoal/70 hover:text-charcoal border border-[#A8BBA6]/20 shadow-sm">
                <i data-lucide="heart" class="w-4 h-4 text-deepsage"></i>
                Doa &amp; Restu Masuk ({{ $activeInvitation ? $activeInvitation->wishes->count() : 0 }})
            </a>
        </div>

        @if(!$activeInvitation)
            <div class="bg-white p-6 sm:p-8 rounded-2xl sm:rounded-3xl border border-[#A8BBA6]/20 text-center py-12">
                <p class="text-sm text-charcoal/70">Silakan buat undangan pernikahan terlebih dahulu.</p>
            </div>
        @else

        <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 sm:gap-8">
            <!-- Left Column: Single Add & Bulk Import (5 cols) -->
            <div class="lg:col-span-5 space-y-6">
                <!-- Tambah 1 Tamu Manual -->
                <div class="bg-white p-4 sm:p-7 rounded-2xl sm:rounded-3xl border border-[#A8BBA6]/20 shadow-sm">
                    <h3 class="font-heading text-lg sm:text-xl font-bold text-charcoal flex items-center gap-2 mb-2">
                        <i data-lucide="user-plus" class="w-5 h-5 text-deepsage"></i>
                        Tambah Tamu Undangan
                    </h3>
                    <p class="text-xs text-charcoal/70 mb-4">Tambahkan nama tamu perseorangan atau keluarga.</p>

                    <form action="{{ route('client.guest.store', $activeInvitation->id) }}" method="POST" class="space-y-3">
                        @csrf
                        <div>
                            <label class="block text-xs font-semibold text-charcoal/80 mb-1">Nama Tamu*</label>
                            <input type="text" name="name" placeholder="misal: Bapak Joko &amp; Ibu" required class="w-full px-3 py-2 rounded-xl border border-charcoal/20 text-xs">
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-charcoal/80 mb-1">Nomor WhatsApp (Opsional)</label>
                            <input type="text" name="phone" placeholder="misal: 08123456789" class="w-full px-3 py-2 rounded-xl border border-charcoal/20 text-xs font-mono">
                        </div>
                        <button type="submit" class="w-full py-2.5 bg-deepsage text-ivory text-xs font-semibold rounded-xl hover:bg-opacity-90 shadow transition">
                            + Simpan Nama Tamu
                        </button>
                    </form>
                </div>

                <!-- BULK IMPORT GUEST FORM -->
                <div class="bg-white p-4 sm:p-7 rounded-2xl sm:rounded-3xl border border-[#A8BBA6]/20 shadow-sm">
                    <h3 class="font-heading text-lg sm:text-xl font-bold text-charcoal flex items-center gap-2 mb-2">
                        <i data-lucide="file-spreadsheet" class="w-5 h-5 text-deepsage"></i>
                        Import Tamu Massal (Excel / Batch)
                    </h3>
                    <p class="text-xs text-charcoal/70 mb-4">Copy dan paste daftar nama tamu langsung dari Excel atau dokumen. Satu baris per nama tamu (bisa sertakan nomor WA dengan pemisah koma / tab).</p>

                    <form action="{{ route('client.guest.bulkStore', $activeInvitation->id) }}" method="POST" class="space-y-3">
                        @csrf
                        <textarea name="bulk_guests" rows="6" placeholder="Contoh:&#10;Bapak Joko Widodo, 08123456789&#10;Ibu Sri Mulyani&#10;Keluarga Besar Budi, 08987654321" required class="w-full px-3 py-2.5 rounded-xl border border-charcoal/20 text-xs font-mono leading-relaxed focus:border-deepsage outline-none"></textarea>
                        <button type="submit" class="w-full py-2.5 bg-deepsage text-ivory text-xs font-semibold rounded-xl hover:bg-opacity-90 shadow transition">
                            + Import Semua Nama Tamu
                        </button>
                    </form>
                </div>

                <!-- Form Custom Template Teks WA -->
                <div class="bg-white p-4 sm:p-7 rounded-2xl sm:rounded-3xl border border-[#A8BBA6]/20 shadow-sm">
                    <h3 class="font-heading text-lg sm:text-xl font-bold text-charcoal flex items-center gap-2 mb-2">
                        <i data-lucide="message-square" class="w-5 h-5 text-deepsage"></i>
                        Template Teks Pengantar WA
                    </h3>
                    <p class="text-xs text-charcoal/70 mb-3">Teks ini akan otomatis muncul saat Anda menekan tombol "Kirim WA".</p>
                    
                    <form action="{{ route('client.invitation.update', $activeInvitation->id) }}" method="POST" class="space-y-3">
                        @csrf
                        <input type="hidden" name="template_id" value="{{ $activeInvitation->template_id }}">
                        <input type="hidden" name="slug" value="{{ $activeInvitation->slug }}">
                        <textarea name="wa_template" rows="5" class="w-full p-3 rounded-xl border border-charcoal/20 text-xs font-mono leading-relaxed focus:border-deepsage outline-none">{{ $activeInvitation->wa_template ?: "Kepada Yth. Bapak/Ibu/Sahabat {nama_tamu},\n\nTanpa mengurangi rasa hormat, perkenankan kami mengundang Anda untuk hadir di hari bahagia pernikahan kami:\n\n{link_undangan}\n\nTerima kasih atas doa & restunya.\n\nSalam hangat,\n{nama_mempelai}" }}</textarea>
                        <button type="submit" class="w-full py-2 bg-gray-100 hover:bg-gray-200 text-charcoal text-xs font-semibold rounded-xl transition">
                            Simpan Perubahan Teks WA
                        </button>
                    </form>
                </div>
            </div>

            <!-- Right Column: Guest List & 1-Click WhatsApp Sender (7 cols) -->
            <div class="lg:col-span-7">
                <div class="bg-white p-4 sm:p-8 rounded-2xl sm:rounded-3xl border border-[#A8BBA6]/20 shadow-sm space-y-4">
                    <div class="flex flex-col sm:flex-row sm:items-center justify-between pb-4 border-b border-gray-100 gap-2">
                        <div>
                            <h3 class="font-heading text-xl sm:text-2xl font-bold text-charcoal flex items-center gap-2">
                                <i data-lucide="send" class="w-5 h-5 text-deepsage"></i>
                                Daftar Tamu Undangan ({{ $activeInvitation->guests->count() }})
                            </h3>
                            <p class="text-xs text-charcoal/60">Setiap link bersifat personal dengan nama tamu yang otomatis tampil di undangan.</p>
                        </div>
                    </div>

                    <!-- Filter / Search input -->
                    <div>
                        <input type="text" id="searchGuestInput" onkeyup="filterGuestTable()" placeholder="Cari nama tamu..." class="w-full px-4 py-2 text-xs border rounded-xl outline-none focus:border-deepsage">
                    </div>

                    <div class="space-y-3 max-h-[700px] overflow-y-auto pr-1" id="guestListContainer">
                        @forelse($activeInvitation->guests as $guest)
                            @php
                                $guestUrl = route('invitation.public', ['slug' => $activeInvitation->slug, 'to' => $guest->name]);
                                $defaultWaMsg = "Kepada Yth. Bapak/Ibu/Sahabat {nama_tamu},\n\nTanpa mengurangi rasa hormat, perkenankan kami mengundang Anda untuk hadir di hari bahagia pernikahan kami:\n\n{link_undangan}\n\nTerima kasih atas doa & restunya.\n\nSalam hangat,\n{nama_mempelai}";
                                $templateText = $activeInvitation->wa_template ?: $defaultWaMsg;
                                $waText = str_replace(
                                    ['{nama_tamu}', '{link_undangan}', '{nama_mempelai}'],
                                    [$guest->name, $guestUrl, $activeInvitation->groom_nickname . ' & ' . $activeInvitation->bride_nickname],
                                    $templateText
                                );
                                $cleanPhone = preg_replace('/^0/', '62', preg_replace('/[^0-9]/', '', $guest->phone ?? ''));
                                $waLink = "https://wa.me/" . $cleanPhone . "?text=" . urlencode($waText);
                            @endphp
                            <div class="guest-row-item p-3.5 sm:p-4 bg-[#FAF7F0] rounded-2xl border border-[#A8BBA6]/20 text-xs space-y-2.5 transition hover:bg-white hover:shadow-sm">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center gap-2 min-w-0">
                                        <div class="w-7 h-7 rounded-full bg-sage/30 text-deepsage flex items-center justify-center font-bold text-xs shrink-0">
                                            {{ substr($guest->name, 0, 1) }}
                                        </div>
                                        <div class="min-w-0">
                                            <strong class="text-charcoal font-semibold text-sm guest-name-text truncate block">{{ $guest->name }}</strong>
                                            @if($guest->phone)
                                                <span class="text-[11px] text-charcoal/50 block font-mono">{{ $guest->phone }}</span>
                                            @endif
                                        </div>
                                    </div>
                                    <form action="{{ route('client.guest.delete', $guest->id) }}" method="POST" onsubmit="return confirm('Hapus tamu ini?')" class="inline shrink-0">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="text-red-500 hover:text-red-700 text-xs font-semibold p-2 -mr-1 inline-flex items-center justify-center min-h-[36px] min-w-[36px]">
                                            Hapus
                                        </button>
                                    </form>
                                </div>
                                <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-2">
                                    <input type="text" readonly value="{{ $guestUrl }}" class="flex-grow px-3 py-2 sm:py-1.5 bg-white border border-charcoal/15 rounded-xl sm:rounded-lg text-[11px] text-charcoal/70 font-mono">
                                    <a href="{{ $waLink }}" target="_blank" class="px-4 py-2.5 sm:py-2 bg-emerald-600 text-white rounded-xl sm:rounded-lg text-xs font-bold flex items-center justify-center gap-1.5 shrink-0 hover:bg-emerald-700 shadow-sm transition active:scale-95 min-h-[42px] sm:min-h-0">
                                        <i data-lucide="message-circle" class="w-4 h-4"></i> Kirim WhatsApp
                                    </a>
                                </div>
                            </div>
                        @empty
                            <div class="text-center py-12 text-charcoal/40 text-xs">
                                <i data-lucide="users" class="w-10 h-10 mx-auto mb-2 opacity-50"></i>
                                Belum ada daftar tamu. Tambahkan tamu secara manual atau import dari Excel.
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>

        @endif

    </div>
</div>

<script>
    function filterGuestTable() {
        var input = document.getElementById("searchGuestInput");
        var filter = input.value.toLowerCase();
        var rows = document.querySelectorAll(".guest-row-item");

        rows.forEach(function(row) {
            var name = row.querySelector(".guest-name-text").innerText.toLowerCase();
            if (name.indexOf(filter) > -1) {
                row.style.display = "";
            } else {
                row.style.display = "none";
            }
        });
    }
</script>
@endsection