@extends('layouts.app')

@section('title', 'Buku Tamu Operator')
@section('header-title', 'Buku Tamu Operator')
@section('header-right')
    <a href="{{ route('visits.create') }}"
       class="rounded-field border border-white/30 px-4 py-1.5 font-medium text-white transition hover:bg-white/10">
        Halaman Tamu
    </a>
    <div class="h-4"></div>
    <form method="POST" action="{{ route('admin.logout') }}" class="inline">
        @csrf
        <button type="submit" class="rounded-field border border-white/30 px-4 py-1.5 font-medium text-white transition hover:bg-white/10">
            Logout
        </button>
    </form>
@endsection

@section('content')
<main class="mx-auto max-w-6xl px-4 py-10">
    @if (session('flash'))
        <div class="mb-6 flex items-center gap-2 rounded-field border border-success/30 bg-success-bg px-4 py-3 text-sm text-success animate-pop">
            <span class="flex h-5 w-5 items-center justify-center rounded-full bg-success text-xs font-bold text-white">✓</span>
            {{ session('flash') }}
        </div>
    @endif

    <div class="flex flex-wrap items-end justify-between gap-4">
        <form method="GET" action="{{ route('operator.harian') }}" class="flex flex-wrap items-end gap-2">
            <div>
                <label for="tanggal" class="label">Pilih Tanggal</label>
                <input type="date" name="tanggal" id="tanggal" value="{{ $tanggal }}" class="field">
            </div>
            <button type="submit" class="btn-ghost px-5 py-2">Tampilkan</button>
        </form>

        <a href="{{ route('export.harian', ['tanggal' => $tanggal]) }}" class="btn-gold px-5 py-2.5 text-sm">
            <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <path d="M12 3v12m0 0l-4-4m4 4l4-4M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/>
            </svg>
            Export Buku Tamu ({{ $tanggal }})
        </a>
    </div>

    <div class="mt-6 overflow-hidden rounded-card bg-white ring-1 ring-line">
        <table class="w-full border-collapse text-sm">
            <thead>
                <tr class="bg-navy text-left text-xs uppercase tracking-wider text-white">
                    <th class="px-4 py-3">No</th>
                    <th class="px-4 py-3">Tanggal</th>
                    <th class="px-4 py-3">Hari</th>
                    <th class="px-4 py-3">Nama</th>
                    <th class="px-4 py-3">Instansi</th>
                    <th class="px-4 py-3">Jumlah</th>
                    <th class="px-4 py-3">Keperluan</th>
                    <th class="px-4 py-3">Status</th>
                    <th class="px-4 py-3">Aksi</th>
                </tr>
            </thead>
            <tbody id="visits-tbody">
                @forelse ($visits as $i => $visit)
                    @php
                        $guestsList = $visit->guests ?: [['full_name' => $visit->full_name, 'phone_number' => $visit->phone_number]];
                        $signByIndex = $visit->signatures->keyBy('guest_index');
                    @endphp
                    <tr class="visit-row cursor-pointer border-t border-line even:bg-paper-2/60" data-visit-id="{{ $visit->id }}">
                        <td class="px-4 py-3 text-ink-soft">{{ $i + 1 }}</td>
                        <td class="px-4 py-3">{{ $visit->visit_date->format('d/m/Y') }}</td>
                        <td class="px-4 py-3">{{ $visit->visit_date->locale('id')->isoFormat('dddd') }}</td>
                        <td class="px-4 py-3 font-medium text-navy">
                            <span class="inline-flex items-center gap-1.5">
                                {{ $visit->full_name }}
                                @if ($visit->guest_count > 1)
                                    <span class="rounded-full bg-info-bg px-2 py-0.5 text-xs font-semibold text-teal">+{{ $visit->guest_count - 1 }}</span>
                                @endif
                                <svg class="chevron h-4 w-4 text-ink-soft transition-transform" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                    <path d="M6 9l6 6 6-6"/>
                                </svg>
                            </span>
                        </td>
                        <td class="px-4 py-3">{{ $visit->institution }}</td>
                        <td class="px-4 py-3 text-ink-soft">{{ $visit->guest_count }} org.</td>
                        <td class="px-4 py-3 max-w-xs">{{ $visit->purpose }}</td>
                        <td class="px-4 py-3">
                            @if ($visit->status === 'selesai')
                                <span class="rounded-full bg-success-bg px-2.5 py-1 text-xs font-semibold text-success">Selesai</span>
                            @elseif ($visit->status === 'kedaluwarsa')
                                <span class="rounded-full bg-warn-bg px-2.5 py-1 text-xs font-semibold text-warn">Kedaluwarsa</span>
                            @else
                                <span class="rounded-full bg-info-bg px-2.5 py-1 text-xs font-semibold text-teal">Menunggu</span>
                            @endif
                        </td>
                        <td class="px-4 py-3">
                            <div class="flex flex-wrap items-center gap-2">
                                <a href="{{ route('operator.edit', $visit) }}"
                                   class="rounded-full bg-info-bg px-3 py-1 text-xs font-semibold text-teal transition hover:bg-teal hover:text-white">Edit</a>
                                <form method="POST" action="{{ route('operator.destroy', $visit) }}" onsubmit="return confirm('Hapus kunjungan {{ $visit->full_name }}?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit"
                                            class="rounded-full bg-red-100 px-3 py-1 text-xs font-semibold text-red-700 transition hover:bg-red-600 hover:text-white">Hapus</button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    <tr class="guest-detail hidden border-t border-line bg-paper-2/40" data-visit-id="{{ $visit->id }}">
                        <td colspan="9" class="px-6 py-4">
                            <p class="text-xs font-semibold uppercase tracking-wider text-navy">Daftar Tamu ({{ $visit->guest_count }})</p>
                            <div class="mt-2 grid gap-2 sm:grid-cols-2">
                                @foreach ($guestsList as $gi => $g)
                                    @php $sig = $signByIndex[$gi] ?? null; @endphp
                                    <div class="flex flex-wrap items-center gap-2 rounded-field bg-white p-3 ring-1 ring-line">
                                        <span class="font-medium text-navy">{{ $g['full_name'] }}</span>
                                        <span class="text-xs text-ink-soft">{{ $g['phone_number'] }}</span>
                                        @if ($sig)
                                            <span class="rounded-full bg-success-bg px-2 py-0.5 text-xs font-semibold text-success">✓ Sudah TTD</span>
                                        @else
                                            <span class="rounded-full bg-warn-bg px-2 py-0.5 text-xs font-semibold text-warn">Belum TTD</span>
                                        @endif
                                    </div>
                                @endforeach
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr class="border-t border-line">
                        <td colspan="9" class="px-4 py-16 text-center">
                            <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-paper-2 text-xl text-ink-soft">0</div>
                            <p class="mt-3 font-medium text-ink">Belum ada kunjungan</p>
                            <p class="mt-1 text-sm text-ink-soft">Tidak ada data buku tamu pada tanggal {{ $tanggal }}.</p>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <script>
        const tbody = document.getElementById('visits-tbody');
        const expanded = new Set();

        function applyExpandedState() {
            tbody.querySelectorAll('.visit-row').forEach(row => {
                const detail = tbody.querySelector(`.guest-detail[data-visit-id="${row.dataset.visitId}"]`);
                if (!detail) return;
                const open = expanded.has(row.dataset.visitId);
                detail.classList.toggle('hidden', !open);
                row.querySelector('.chevron')?.classList.toggle('rotate-180', open);
            });
        }

        tbody.addEventListener('click', (e) => {
            if (e.target.closest('a, button, form')) return;
            const row = e.target.closest('.visit-row');
            if (!row) return;
            const id = row.dataset.visitId;
            if (expanded.has(id)) { expanded.delete(id); } else { expanded.add(id); }
            applyExpandedState();
        });

        async function refreshTable() {
            try {
                const res = await fetch(location.href, { headers: { 'X-Requested-With': 'XMLHttpRequest' } });
                const doc = new DOMParser().parseFromString(await res.text(), 'text/html');
                const fresh = doc.getElementById('visits-tbody');
                if (fresh && fresh.innerHTML !== tbody.innerHTML) {
                    tbody.innerHTML = fresh.innerHTML;
                    applyExpandedState();
                }
            } catch (e) {
                /* jaringan tidak stabil — coba lagi saat interval berikutnya */
            }
        }

        setInterval(refreshTable, 5000);
    </script>
</main>
@endsection