<?php

/**
 * Guest List Workspace View
 * Location: app/views/guest/list.php
 *
 * Variables expected:
 *   $title        — string — Page title.
 *   $guests       — array — Paginated list of guests.
 *   $filters      — array — Current search and filter criteria.
 *   $categories   — array — List of distinct guest groups in workspace.
 *   $stats        — array — General attendance stats from OperationModel.
 *   $page         — int — Current page index.
 *   $total_pages  — int — Total paginated pages count.
 *   $total_guests — int — Total guests matching query.
 *
 * @package Inveetaire
 * @ref     RC-012
 */

$role = \App\Core\Session::get('role_snapshot') === 'crew' ? 'crew' : 'couple';
/** @var string $title */
/** @var array $guests */
/** @var array $filters */
/** @var array $categories */
/** @var array $stats */
/** @var int $page */
/** @var int $total_pages */
/** @var int $total_guests */

?>

<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 space-y-8 py-4" 
     x-data="{ 
        deleteModalOpen: false, 
        deleteUrl: '', 
        tableLoading: false,
        toastOpen: false,
        toastMessage: '',
        showToast(msg) {
            this.toastMessage = msg;
            this.toastOpen = true;
            setTimeout(() => { this.toastOpen = false; }, 3000);
        },
        search: '<?= escape_html($filters['search'] ?? '') ?>',
        group: '<?= escape_html($filters['group'] ?? '') ?>',
        rsvp: '<?= escape_html($filters['rsvp'] ?? '') ?>',
        attendance: '<?= escape_html($filters['attendance'] ?? '') ?>',
        navigate(targetUrl) {
            this.tableLoading = true;
            let url = new URL(targetUrl, window.location.origin);
            url.searchParams.set('ajax', '1');
            fetch(url.toString())
                .then(res => res.text())
                .then(html => {
                    const parser = new DOMParser();
                    const doc = parser.parseFromString(html, 'text/html');
                    const wrapper = doc.getElementById('guest-list-wrapper');
                    if (wrapper) {
                        document.getElementById('guest-list-wrapper').innerHTML = wrapper.innerHTML;
                    }
                    window.history.pushState({}, '', targetUrl);
                    this.tableLoading = false;
                })
                .catch(err => {
                    console.error(err);
                    this.tableLoading = false;
                });
        },
        updateFromInputs() {
            let url = new URL(window.location.href);
            url.searchParams.set('search', this.search);
            url.searchParams.set('group', this.group);
            url.searchParams.set('rsvp', this.rsvp);
            url.searchParams.set('attendance', this.attendance);
            url.searchParams.set('page', '1');
            this.navigate(url.toString());
        }
     }">

    <div id="guest-list-wrapper" class="space-y-6">

    <!-- ── 1. HEADER SECTION ────────────────────────────────────────── -->
    <div class="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-4">
        <div>
            <div class="page-breadcrumb">
                <?php if ($role === 'crew'): ?>
                    <a href="<?= url('/app/crew/weddings') ?>">Weddings</a>
                <?php else: ?>
                    <a href="<?= url('/app/couple/dashboard') ?>">Dashboard</a>
                <?php endif; ?>
                <span class="sep">/</span>
                <span>Guest List</span>
            </div>
            <h1 class="page-h1">
                <span class="page-header-icon">
                    <i class="fa-solid fa-users"></i>
                </span>
                Guest List Workspace
            </h1>
            <p class="page-subtitle">Manage, search, filter, and import your wedding guest list records.</p>
        </div>
        <div class="flex flex-wrap gap-2 pt-2 sm:pt-0">
            <a href="<?= url("/app/{$role}/guests/create") ?>" class="btn btn-primary btn-md flex items-center gap-1.5">
                <i class="fa-solid fa-user-plus text-[10px]"></i> Add Guest
            </a>
            <a href="<?= url("/app/{$role}/guests/import") ?>" class="btn btn-secondary btn-md flex items-center gap-1.5">
                <i class="fa-solid fa-file-import text-[10px]"></i> Import Excel
            </a>
            <a href="<?= url("/app/{$role}/guests/template") ?>" class="btn btn-secondary btn-md flex items-center gap-1.5">
                <i class="fa-solid fa-download text-[10px]"></i> Download Template
            </a>
            <button class="btn btn-secondary btn-md opacity-45 cursor-not-allowed flex items-center gap-1.5" disabled>
                <i class="fa-solid fa-file-export text-[10px]"></i> Export Guests
            </button>
        </div>
    </div>

    <!-- ── 2. STATISTICS HEADER ────────────────────────────────────────── -->
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mt-2">
        <!-- Card 1 -->
        <div class="card p-4 flex items-center justify-between">
            <div>
                <span class="text-[10px] text-slate-400 uppercase font-bold tracking-wider block">Expected Guests</span>
                <span class="text-2xl font-black text-slate-800 mt-1 block font-mono"><?= (int) $stats['expected_guests'] ?></span>
            </div>
            <span class="text-2xl bg-blue-50 text-blue-600 p-2 rounded-xl">👥</span>
        </div>

        <!-- Card 2 -->
        <div class="card p-4 flex items-center justify-between">
            <div>
                <span class="text-[10px] text-slate-400 uppercase font-bold tracking-wider block">Expected Pax</span>
                <span class="text-2xl font-black text-slate-800 mt-1 block font-mono"><?= (int) $stats['expected_pax'] ?></span>
            </div>
            <span class="text-2xl bg-indigo-50 text-indigo-600 p-2 rounded-xl">🎟️</span>
        </div>

        <!-- Card 3 -->
        <div class="card p-4 flex items-center justify-between">
            <div>
                <span class="text-[10px] text-slate-400 uppercase font-bold tracking-wider block">Pending</span>
                <span class="text-2xl font-black text-amber-700 mt-1 block font-mono"><?= (int) $stats['pending_count'] ?></span>
            </div>
            <span class="text-2xl bg-amber-50 text-amber-600 p-2 rounded-xl">⏳</span>
        </div>

        <!-- Card 4 -->
        <div class="card p-4 flex items-center justify-between">
            <div>
                <span class="text-[10px] text-slate-400 uppercase font-bold tracking-wider block">Checked In</span>
                <span class="text-2xl font-black text-pink-700 mt-1 block font-mono"><?= (int) $stats['checked_in_count'] ?></span>
            </div>
            <span class="text-2xl bg-pink-50 text-pink-600 p-2 rounded-xl">🎯</span>
        </div>
    </div>

    <!-- ── 3. TABS FOR WEDDING EVENTS ───────────────────────────────────── -->
    <div class="flex border-b border-slate-200 gap-1 mt-4 overflow-x-auto">
        <?php 
            $isAllActive = ((int) $active_event_id === 0);
            $allTabUrl = url("/app/{$role}/guests") . '?event_id=0';
            if (!empty($filters['search'])) $allTabUrl .= '&search=' . urlencode($filters['search']);
            if (!empty($filters['group'])) $allTabUrl .= '&group=' . urlencode($filters['group']);
            if (!empty($filters['rsvp'])) $allTabUrl .= '&rsvp=' . urlencode($filters['rsvp']);
            if (!empty($filters['attendance'])) $allTabUrl .= '&attendance=' . urlencode($filters['attendance']);
        ?>
        <a 
            href="<?= $allTabUrl ?>" 
            @click.prevent="navigate($event.target.closest('a').href)"
            class="py-2 px-4 font-bold text-xs border-b-2 transition whitespace-nowrap <?= $isAllActive ? 'border-[#D4A28C] text-[#232323] bg-[#FAF8F3]/50 rounded-t-xl' : 'border-transparent text-slate-400 hover:text-slate-700 hover:bg-[#FAF8F3]/20 rounded-t-xl' ?>"
        >
            <i class="fa-solid fa-layer-group text-[10px] mr-1"></i> All Guests
        </a>
        <?php foreach ($workspace_events as $we): 
            $isActive = ((int) $we['id'] === (int) $active_event_id);
            $tabUrl = url("/app/{$role}/guests") . '?event_id=' . $we['id'];
            if (!empty($filters['search'])) $tabUrl .= '&search=' . urlencode($filters['search']);
            if (!empty($filters['group'])) $tabUrl .= '&group=' . urlencode($filters['group']);
            if (!empty($filters['rsvp'])) $tabUrl .= '&rsvp=' . urlencode($filters['rsvp']);
            if (!empty($filters['attendance'])) $tabUrl .= '&attendance=' . urlencode($filters['attendance']);
        ?>
            <a 
                href="<?= $tabUrl ?>" 
                @click.prevent="navigate($event.target.closest('a').href)"
                class="py-2 px-4 font-bold text-xs border-b-2 transition whitespace-nowrap <?= $isActive ? 'border-[#D4A28C] text-[#232323] bg-[#FAF8F3]/50 rounded-t-xl' : 'border-transparent text-slate-400 hover:text-slate-700 hover:bg-[#FAF8F3]/20 rounded-t-xl' ?>"
            >
                <?= escape_html($we['event_name']) ?>
            </a>
        <?php endforeach; ?>
    </div>
 
    <!-- ── 3. SEARCH & FILTERS BAR ────────────────────────────────────── -->
    <div class="card p-4">
        <form method="GET" action="<?= url("/app/{$role}/guests") ?>" @submit.prevent="updateFromInputs()" class="grid grid-cols-1 md:grid-cols-5 gap-3">
            <input type="hidden" id="active-event-id-input" name="event_id" value="<?= (int) $active_event_id ?>">
            <!-- Search -->
            <div class="md:col-span-2 relative">
                <input 
                    type="text" 
                    name="search" 
                    x-model.debounce.300ms="search"
                    @input="updateFromInputs()"
                    value="<?= escape_html($filters['search']) ?>" 
                    placeholder="Search name or phone..." 
                    class="form-input text-xs w-full pl-8"
                >
                <span class="absolute left-2.5 top-2.5 text-slate-400 text-xs flex items-center justify-center"><i class="fa-solid fa-magnifying-glass"></i></span>
            </div>

            <!-- Filter: Category -->
            <div>
                <select name="group" x-model="group" @change="updateFromInputs()" class="form-select text-xs w-full">
                    <option value="">All Categories</option>
                    <?php
                    $groupMap = [
                        'family' => 'Family',
                        'relatives' => 'Relatives',
                        'friends' => 'Friends',
                        'colleagues' => 'Colleagues',
                        'church' => 'Church',
                        'business_partners' => 'Business Partners',
                        'vip' => 'VIP',
                        'others' => 'Others'
                    ];
                    foreach ($categories as $cat):
                        if (empty($cat)) continue;
                        $label = $groupMap[$cat] ?? ucfirst($cat);
                    ?>
                        <option value="<?= escape_html($cat) ?>" <?= ($filters['group'] === $cat) ? 'selected' : '' ?>>
                            <?= escape_html($label) ?>
                        </option>
                    <?php endforeach; ?>
                </select>
            </div>

            <!-- Filter: RSVP -->
            <div>
                <select name="rsvp" x-model="rsvp" @change="updateFromInputs()" class="form-select text-xs w-full">
                    <option value="">All RSVPs</option>
                    <option value="pending" <?= ($filters['rsvp'] === 'pending') ? 'selected' : '' ?>>Pending</option>
                    <option value="attending" <?= ($filters['rsvp'] === 'attending') ? 'selected' : '' ?>>Attending</option>
                    <option value="declined" <?= ($filters['rsvp'] === 'declined') ? 'selected' : '' ?>>Declined</option>
                </select>
            </div>

            <!-- Filter: Attendance -->
            <div class="flex gap-2">
                <select name="attendance" x-model="attendance" @change="updateFromInputs()" class="form-select text-xs w-full">
                    <option value="">All Attendance</option>
                    <option value="checked_in" <?= ($filters['attendance'] === 'checked_in') ? 'selected' : '' ?>>Checked In</option>
                    <option value="not_arrived" <?= ($filters['attendance'] === 'not_arrived') ? 'selected' : '' ?>>Not Arrived</option>
                </select>
                <button type="submit" class="btn btn-primary text-xs font-semibold px-4">
                    Apply
                </button>
            </div>
        </form>
    </div>

    <?php if (empty($guests)): ?>
        <!-- Elegant Empty State -->
        <div class="empty-state-elegant">
            <div class="empty-state-icon flex items-center justify-center"><i class="fa-solid fa-users text-4xl text-slate-300"></i></div>
            <h3 class="empty-state-title">No guests found</h3>
            <p class="empty-state-text">Start adding guests manually or upload a compiled Excel/CSV template spreadsheet.</p>
            <div class="flex justify-center gap-3">
                <a href="<?= url("/app/{$role}/guests/create") ?>" class="btn btn-primary text-xs font-semibold px-5 py-2.5 flex items-center gap-1.5">
                    <i class="fa-solid fa-user-plus"></i> Add Guest Manually
                </a>
                <a href="<?= url("/app/{$role}/guests/import") ?>" class="btn btn-secondary text-xs font-semibold px-5 py-2.5 flex items-center gap-1.5">
                    <i class="fa-solid fa-file-import"></i> Import Spreadsheet
                </a>
            </div>
        </div>
    <?php else: ?>
        <!-- Loading skeletons visual overlay (RC-015) -->
        <div class="card p-5 space-y-4" x-show="tableLoading" style="display: none;">
            <div class="flex justify-between items-center pb-2">
                <h4 class="text-xs font-black text-slate-400 uppercase tracking-wide">Updating list...</h4>
            </div>
            <div class="space-y-3">
                <div class="skeleton-pulse skeleton-table-row"></div>
                <div class="skeleton-pulse skeleton-table-row"></div>
                <div class="skeleton-pulse skeleton-table-row"></div>
                <div class="skeleton-pulse skeleton-table-row"></div>
                <div class="skeleton-pulse skeleton-table-row"></div>
            </div>
        </div>

        <!-- Table -->
        <div class="card p-0 overflow-hidden shadow-sm" x-show="!tableLoading">
            <div class="overflow-x-auto">
                <table class="w-full text-left border-collapse text-xs table-elegant">
                    <thead>
                        <tr class="bg-slate-50 border-b border-slate-100 font-bold text-slate-600 uppercase tracking-wider">
                            <th class="px-6 py-4">Guest Name</th>
                            <th class="px-6 py-4">Phone Number</th>
                            <th class="px-6 py-4">Category</th>
                            <th class="px-6 py-4 text-center">Pax</th>
                            <?php foreach ($workspace_events as $wEvt): ?>
                                <th class="px-3 py-4 text-center font-bold text-slate-700 whitespace-nowrap" title="<?= escape_html($wEvt['event_name']) ?>">
                                    <?= escape_html($wEvt['event_name']) ?>
                                </th>
                            <?php endforeach; ?>
                            <th class="px-6 py-4 text-center">RSVP Status</th>
                            <th class="px-6 py-4 text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 text-slate-700">
                        <?php foreach ($guests as $g):
                            $catLabel = $groupMap[$g['guest_group']] ?? ucfirst($g['guest_group']);
                            $gId = (int) $g['id'];
                            $gMatrix = $attendance_matrix[$gId] ?? [];
                        ?>
                            <tr class="hover:bg-slate-50/50 transition-colors">
                                <td class="px-6 py-4 font-semibold text-slate-800">
                                    <?php if (!empty($g['honorific'])): ?>
                                        <span class="text-slate-400 font-normal text-[10px] mr-1 block sm:inline"><?= escape_html($g['honorific']) ?></span>
                                    <?php endif; ?>
                                    <?= escape_html($g['full_name']) ?>
                                    <span class="block text-[10px] font-mono text-slate-400 mt-0.5" title="Guest Token: <?= escape_html($g['guest_code']) ?>"><?= escape_html($g['guest_code']) ?></span>
                                </td>
                                <td class="px-6 py-4 font-mono text-slate-500">
                                    <?= $g['phone_number'] ? escape_html($g['phone_number']) : '<span class="text-slate-300 italic">None</span>' ?>
                                </td>
                                <td class="px-6 py-4">
                                    <span class="bg-slate-100 text-slate-700 px-2.5 py-1 rounded-full text-[10px] font-semibold">
                                        <?= escape_html($catLabel) ?>
                                    </span>
                                </td>
                                <td class="px-6 py-4 text-center font-bold font-mono">
                                    <?php if ($g['rsvp_status'] === 'attending'): ?>
                                        <span class="text-emerald-700"><?= (int)($g['confirmed_pax'] ?? $g['invited_pax']) ?></span> <span class="text-slate-400 font-normal">/ <?= (int) $g['invited_pax'] ?></span>
                                    <?php else: ?>
                                        <span class="text-slate-500"><?= (int) $g['invited_pax'] ?></span>
                                    <?php endif; ?>
                                </td>
                                <?php foreach ($workspace_events as $wEvt): 
                                    $eId = (int) $wEvt['id'];
                                    $evtData = $gMatrix[$eId] ?? null;
                                    $isInvited = $evtData['is_invited'] ?? false;
                                    $isCheckedIn = $evtData['is_checked_in'] ?? false;
                                    $chkTime = $evtData['checked_in_at'] ?? null;
                                ?>
                                    <td class="px-3 py-4 text-center whitespace-nowrap">
                                        <?php if (!$isInvited): ?>
                                            <span class="text-slate-300 font-bold text-sm" title="Not Invited">—</span>
                                        <?php elseif ($isCheckedIn): ?>
                                            <span class="inline-flex items-center justify-center w-7 h-7 bg-emerald-100 text-emerald-800 rounded-full text-xs font-bold shadow-2xs" title="Arrived <?= $chkTime ? 'at ' . date('H:i', strtotime($chkTime)) : '' ?>">
                                                ✅
                                            </span>
                                        <?php else: ?>
                                            <span class="inline-flex items-center justify-center w-6 h-6 border-2 border-slate-300 bg-slate-50 text-slate-400 rounded-lg text-[10px] font-semibold" title="Invited but Not Arrived">
                                                ☐
                                            </span>
                                        <?php endif; ?>
                                    </td>
                                <?php endforeach; ?>
                                <td class="px-6 py-4 text-center">
                                    <?php if ($g['rsvp_status'] === 'attending'): ?>
                                        <span class="inline-block bg-green-100 text-green-800 px-2.5 py-0.5 rounded-full text-[10px] font-bold">
                                            Attending
                                        </span>
                                    <?php elseif ($g['rsvp_status'] === 'declined'): ?>
                                        <span class="inline-block bg-red-100 text-red-800 px-2.5 py-0.5 rounded-full text-[10px] font-bold">
                                            Declined
                                        </span>
                                    <?php else: ?>
                                        <span class="inline-block bg-yellow-100 text-yellow-800 px-2.5 py-0.5 rounded-full text-[10px] font-bold">
                                            Pending
                                        </span>
                                    <?php endif; ?>

                                    <?php if (!empty($g['rsvp_message'])): ?>
                                        <div class="mt-1 text-[10px] text-slate-600 bg-slate-50 border border-slate-200 rounded px-2 py-1 italic max-w-[180px] mx-auto truncate" title="<?= escape_html($g['rsvp_message']) ?>">
                                            "<?= escape_html($g['rsvp_message']) ?>"
                                        </div>
                                    <?php endif; ?>

                                    <?php if (!empty($g['rsvp_updated_at']) || !empty($g['rsvp_submitted_at'])): ?>
                                        <span class="text-[9px] text-slate-400 block mt-0.5">
                                            <?= date('d M H:i', strtotime((string)($g['rsvp_updated_at'] ?? $g['rsvp_submitted_at']))) ?>
                                        </span>
                                    <?php endif; ?>
                                </td>
                                <td class="px-6 py-4 text-right whitespace-nowrap">
                                    <div class="inline-flex items-center justify-end gap-1">
                                        <!-- Open Invitation -->
                                        <a 
                                            href="<?= url("/" . \App\Core\Session::get('active_workspace_slug') . "/i/" . $g['guest_code']) ?>" 
                                            target="_blank" 
                                            class="w-8 h-8 rounded-lg inline-flex items-center justify-center text-slate-500 hover:text-slate-900 hover:bg-slate-100 transition"
                                            title="Open Invitation"
                                        >
                                            <i class="fa-solid fa-arrow-up-right-from-square text-xs"></i>
                                        </a>

                                        <!-- Copy Invitation Link -->
                                        <button 
                                            type="button"
                                            @click="navigator.clipboard.writeText('<?= url("/" . \App\Core\Session::get('active_workspace_slug') . "/i/" . $g['guest_code']) ?>'); showToast('Invitation link copied!')" 
                                            class="w-8 h-8 rounded-lg inline-flex items-center justify-center text-[#D4A28C] hover:text-[#b8826b] hover:bg-amber-50 transition"
                                            title="Copy Invitation Link"
                                        >
                                            <i class="fa-solid fa-link text-xs"></i>
                                        </button>

                                        <!-- Copy Guest Code -->
                                        <button 
                                            type="button"
                                            @click="navigator.clipboard.writeText('<?= escape_html($g['guest_code']) ?>'); showToast('Guest token copied!')" 
                                            class="w-8 h-8 rounded-lg inline-flex items-center justify-center text-slate-500 hover:text-slate-800 hover:bg-slate-100 transition"
                                            title="Copy Guest Code (<?= escape_html($g['guest_code']) ?>)"
                                        >
                                            <i class="fa-solid fa-key text-xs"></i>
                                        </button>

                                        <!-- Download QR Pass -->
                                        <a 
                                            href="<?= url("/app/{$role}/guests/qr/" . $g['id']) ?>" 
                                            class="w-8 h-8 rounded-lg inline-flex items-center justify-center text-blue-600 hover:text-blue-800 hover:bg-blue-50 transition"
                                            title="Download QR Pass"
                                        >
                                            <i class="fa-solid fa-qrcode text-xs"></i>
                                        </a>

                                        <!-- Edit Guest -->
                                        <a 
                                            href="<?= url("/app/{$role}/guests/edit/" . $g['id']) . ((int)$active_event_id > 0 ? "?event_id={$active_event_id}" : "") ?>" 
                                            class="w-8 h-8 rounded-lg inline-flex items-center justify-center text-amber-600 hover:text-amber-800 hover:bg-amber-50 transition"
                                            title="Edit Guest"
                                        >
                                            <i class="fa-solid fa-pen-to-square text-xs"></i>
                                        </a>

                                        <!-- Delete Guest -->
                                        <button 
                                            type="button"
                                            @click="deleteUrl = '<?= url("/app/{$role}/guests/delete/" . $g['id']) ?>'; deleteModalOpen = true" 
                                            class="w-8 h-8 rounded-lg inline-flex items-center justify-center text-red-500 hover:text-red-700 hover:bg-red-50 transition"
                                            title="Delete Guest"
                                        >
                                            <i class="fa-solid fa-trash-can text-xs"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>

            <!-- Pagination controls -->
            <?php if ($total_pages > 1): ?>
                <div class="px-6 py-4 bg-slate-50 border-t border-slate-100 flex items-center justify-between text-slate-500 text-xxs">
                    <span>Showing page <strong><?= $page ?></strong> of <strong><?= $total_pages ?></strong> (Total matching: <?= $total_guests ?>)</span>
                    
                    <div class="flex gap-1.5">
                        <!-- Prev -->
                        <?php if ($page > 1): ?>
                            <a href="?event_id=<?= (int) $active_event_id ?>&page=<?= $page - 1 ?>&search=<?= urlencode($filters['search']) ?>&group=<?= urlencode($filters['group']) ?>&rsvp=<?= urlencode($filters['rsvp']) ?>&attendance=<?= urlencode($filters['attendance']) ?>" @click="tableLoading = true" class="btn btn-secondary px-2.5 py-1 text-center font-bold">
                                ◀ Previous
                            </a>
                        <?php endif; ?>

                        <!-- Next -->
                        <?php if ($page < $total_pages): ?>
                            <a href="?event_id=<?= (int) $active_event_id ?>&page=<?= $page + 1 ?>&search=<?= urlencode($filters['search']) ?>&group=<?= urlencode($filters['group']) ?>&rsvp=<?= urlencode($filters['rsvp']) ?>&attendance=<?= urlencode($filters['attendance']) ?>" @click.prevent="navigate($event.target.closest('a').href)" class="btn btn-secondary px-2.5 py-1 text-center font-bold">
                                Next ▶
                            </a>
                        <?php endif; ?>
                    </div>
                </div>
            <?php endif; ?>
        </div>
    <?php endif; ?>
    </div>

    <!-- ── 5. CONFIRMATION DELETE MODAL ───────────────────────────────── -->
    <div 
        class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-50 flex items-center justify-center p-4" 
        style="display: none;" 
        x-show="deleteModalOpen"
        @keydown.escape.window="deleteModalOpen = false"
        @click.self="deleteModalOpen = false"
        x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0 scale-95"
        x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-150"
        x-transition:leave-start="opacity-100 scale-100"
        x-transition:leave-end="opacity-0 scale-95"
        role="dialog"
        aria-modal="true"
        aria-labelledby="modal-title-delete"
    >
        <div class="bg-white rounded-2xl max-w-sm w-full p-6 shadow-2xl space-y-6">
            <div class="text-center space-y-2">
                <span class="text-4xl block">⚠️</span>
                <h3 id="modal-title-delete" class="text-sm font-bold text-slate-800">Delete Guest Record?</h3>
                <p class="text-xs text-slate-500 leading-relaxed">Are you absolutely sure you want to delete this guest? This action cannot be undone.</p>
            </div>
            
            <form :action="deleteUrl" method="POST" class="flex gap-3">
                <?= csrf_field() ?>
                <button type="button" @click="deleteModalOpen = false" class="btn btn-secondary flex-1 py-2 text-xs font-bold">
                    Cancel
                </button>
                <button type="submit" class="btn btn-danger flex-1 py-2 text-xs font-bold text-white">
                    Confirm Delete
                </button>
            </form>
        </div>
    </div>

    <!-- Clipboard Toast Notification (G006) -->
    <div 
        x-show="toastOpen" 
        x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0 translate-y-2"
        x-transition:enter-end="opacity-100 translate-y-0"
        x-transition:leave="transition ease-in duration-200"
        x-transition:leave-start="opacity-100 translate-y-0"
        x-transition:leave-end="opacity-0 translate-y-2"
        class="fixed bottom-5 right-5 z-50 bg-slate-900 text-white px-4 py-2.5 rounded-xl shadow-xl text-xs font-semibold flex items-center gap-2 border border-slate-800"
        style="display: none;"
    >
        <span class="text-emerald-500"><i class="fa-solid fa-circle-check"></i></span>
        <span x-text="toastMessage"></span>
    </div>

</div>
