@extends('layouts.app')

@section('title', 'Buku Tamu & Doa Restu - 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">Doa Restu &amp; Konfirmasi Kehadiran (RSVP)</h1>
                <p class="text-xs sm:text-sm text-charcoal/70 mt-1">Pantau ucapan, doa tulus, dan kepastian kehadiran dari para undangan.</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-white text-charcoal/70 hover:text-charcoal border border-[#A8BBA6]/20 shadow-sm">
                <i data-lucide="users" class="w-4 h-4 text-deepsage"></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-deepsage text-ivory shadow">
                <i data-lucide="heart" class="w-4 h-4"></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

        @php
            $hadirCount = $activeInvitation->wishes->where('attendance', 'hadir')->count();
            $raguCount = $activeInvitation->wishes->where('attendance', 'ragu')->count();
            $tidakHadirCount = $activeInvitation->wishes->where('attendance', 'tidak_hadir')->count();
            $totalCount = $activeInvitation->wishes->count();
        @endphp

        <!-- 4 KPI Status Kartu Kehadiran (2x2 on Mobile, 4 Cols on Desktop) -->
        <div class="grid grid-cols-2 lg:grid-cols-4 gap-2.5 sm:gap-4 mb-6 sm:mb-8">
            <div class="bg-white p-3.5 sm:p-5 rounded-2xl sm:rounded-3xl border border-[#A8BBA6]/20 shadow-sm">
                <span class="text-[11px] sm:text-xs font-semibold text-charcoal/60 block truncate">Total Pesan</span>
                <span class="font-heading text-2xl sm:text-3xl font-bold text-charcoal mt-1 block">{{ $totalCount }}</span>
                <span class="text-[10px] text-charcoal/50 truncate block">Seluruh ucapan masuk</span>
            </div>
            <div class="bg-white p-3.5 sm:p-5 rounded-2xl sm:rounded-3xl border border-emerald-200 shadow-sm">
                <div class="flex items-center justify-between">
                    <span class="text-[11px] sm:text-xs font-semibold text-emerald-800 truncate">Hadir</span>
                    <span class="w-2.5 h-2.5 rounded-full bg-emerald-500 shrink-0"></span>
                </div>
                <span class="font-heading text-2xl sm:text-3xl font-bold text-emerald-700 mt-1 block">{{ $hadirCount }}</span>
                <span class="text-[10px] text-emerald-600/70 truncate block">Tamu berkenan hadir</span>
            </div>
            <div class="bg-white p-3.5 sm:p-5 rounded-2xl sm:rounded-3xl border border-amber-200 shadow-sm">
                <div class="flex items-center justify-between">
                    <span class="text-[11px] sm:text-xs font-semibold text-amber-800 truncate">Ragu</span>
                    <span class="w-2.5 h-2.5 rounded-full bg-amber-500 shrink-0"></span>
                </div>
                <span class="font-heading text-2xl sm:text-3xl font-bold text-amber-700 mt-1 block">{{ $raguCount }}</span>
                <span class="text-[10px] text-amber-600/70 truncate block">Belum memastikan</span>
            </div>
            <div class="bg-white p-3.5 sm:p-5 rounded-2xl sm:rounded-3xl border border-red-200 shadow-sm">
                <div class="flex items-center justify-between">
                    <span class="text-[11px] sm:text-xs font-semibold text-red-800 truncate">Berhalangan</span>
                    <span class="w-2.5 h-2.5 rounded-full bg-red-500 shrink-0"></span>
                </div>
                <span class="font-heading text-2xl sm:text-3xl font-bold text-red-700 mt-1 block">{{ $tidakHadirCount }}</span>
                <span class="text-[10px] text-red-600/70 truncate block">Kirim doa restu</span>
            </div>
        </div>

        <!-- Daftar Doa Restu Masuk & Moderasi Hapus -->
        <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 items-center justify-between pb-4 border-b border-gray-100">
                <h3 class="font-heading text-xl sm:text-2xl font-bold text-charcoal flex items-center gap-2">
                    <i data-lucide="message-circle" class="w-5 h-5 text-deepsage"></i>
                    Semua Ucapan &amp; Doa Restu
                </h3>
            </div>

            <div class="space-y-4">
                @forelse($activeInvitation->wishes as $wish)
                    <div class="p-3.5 sm:p-5 bg-[#FAF7F0] rounded-2xl border border-[#A8BBA6]/20 flex flex-col sm:flex-row sm:items-start justify-between gap-3 sm:gap-4 transition hover:bg-white hover:shadow-sm">
                        <div class="space-y-2">
                            <div class="flex items-center gap-2 flex-wrap">
                                <strong class="text-charcoal font-bold text-sm">{{ $wish->name }}</strong>
                                <span class="px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider {{ $wish->attendance === 'hadir' ? 'bg-emerald-100 text-emerald-800' : ($wish->attendance === 'tidak_hadir' ? 'bg-red-100 text-red-800' : 'bg-amber-100 text-amber-800') }}">
                                    {{ $wish->attendance === 'hadir' ? 'Hadir' : ($wish->attendance === 'tidak_hadir' ? 'Tidak Hadir' : 'Masih Ragu') }}
                                </span>
                                <span class="text-[11px] text-charcoal/40 font-normal">
                                    {{ $wish->created_at->diffForHumans() }}
                                </span>
                            </div>
                            <p class="text-xs text-charcoal/80 leading-relaxed max-w-3xl">
                                “{{ $wish->message }}”
                            </p>
                        </div>
                        <form action="{{ route('client.wish.delete', $wish->id) }}" method="POST" onsubmit="return confirm('Hapus ucapan ini?')" class="self-end sm:self-center shrink-0">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="px-3 py-2 sm:py-1.5 bg-red-50 text-red-600 hover:bg-red-600 hover:text-white rounded-xl sm:rounded-lg text-xs font-semibold transition min-h-[36px] sm:min-h-0 flex items-center justify-center">
                                Hapus
                            </button>
                        </form>
                    </div>
                @empty
                    <div class="text-center py-16 text-charcoal/40 text-xs">
                        <i data-lucide="inbox" class="w-12 h-12 mx-auto mb-3 opacity-40"></i>
                        Belum ada doa atau ucapan yang dikirimkan oleh tamu undangan.
                    </div>
                @endforelse
            </div>
        </div>

        @endif

    </div>
</div>
@endsection