@extends('layouts.app')

@section('title', 'Table Management - Tiqkets')
@section('page-title', 'Table Management')

@section('header-action')
    <div class="d-flex align-items-center gap-3">
        @if (auth()->user()->role != 4)
            <select class="branch-select" id="branchFilter">
                <option value="">All Branches</option>
                @if (isset($branches))
                    @foreach ($branches as $branch)
                        <option value="{{ $branch->id }}" {{ request('branch_id') == $branch->id ? 'selected' : '' }}>
                            {{ $branch->branch_name }}
                        </option>
                    @endforeach
                @endif
            </select>
        @endif

        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addTableModal">
            <i class="fas fa-plus me-2"></i> Add Table
        </button>
    </div>
@endsection
<style>
    /* ===== Pagination Wrapper ===== */
        .pagination-wrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 24px;
            border-top: 1px solid #e5e7eb;
            background: #f9fafb;
            gap: 16px;
            flex-wrap: wrap;
        }

        .pagination-info {
            font-size: 14px;
            color: #6b7280;
            white-space: nowrap;
        }

        .pagination-info strong {
            color: #111827;
            font-weight: 600;
        }

        /* ===== Custom Pagination Controls ===== */
        .pagination-controls {
            flex: 1;
            display: flex;
            justify-content: center;
        }

        .pagination-list {
            display: flex;
            list-style: none;
            gap: 6px;
            margin: 0;
            padding: 0;
            align-items: center;
        }

        .pagination-list .page-item {
            list-style: none;
        }

        .pagination-list .page-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 38px;
            height: 38px;
            padding: 0 12px;
            border: 1.5px solid #d1d5db;
            border-radius: 8px;
            color: #374151;
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.2s ease;
            background: #ffffff;
            cursor: pointer;
        }

        .pagination-list .page-item.active .page-link {
            background: #667eea;
            border-color: #667eea;
            color: #ffffff;
            box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
            cursor: default;
        }

        .pagination-list .page-item:not(.active):not(.disabled) .page-link:hover {
            background: #f3f4f6;
            border-color: #9ca3af;
            color: #111827;
        }

        .pagination-list .page-item.disabled .page-link {
            color: #d1d5db;
            background: #f9fafb;
            border-color: #e5e7eb;
            cursor: not-allowed;
            opacity: 0.6;
        }

        .pagination-list .page-link i {
            font-size: 12px;
        }

        /* ===== Per Page Selector ===== */
        .pagination-per-page {
            display: flex;
            align-items: center;
            gap: 8px;
            white-space: nowrap;
        }

        .pagination-per-page label {
            font-size: 14px;
            color: #6b7280;
            margin: 0;
        }

        .per-page-select {
            padding: 8px 32px 8px 12px;
            border: 1.5px solid #d1d5db;
            border-radius: 8px;
            font-size: 14px;
            color: #374151;
            background-color: #ffffff;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23374151' d='M8 11L3 6h10z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 10px center;
            appearance: none;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .per-page-select:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        }
        /* ===== RESPONSIVE PAGINATION ===== */

/* Tablets & below */
@media (max-width: 1024px) {
    .pagination-wrapper {
        padding: 16px;
        gap: 12px;
    }

    .pagination-controls {
        order: 3;
        width: 100%;
        justify-content: center;
    }
}

/* Mobile (stack layout) */
@media (max-width: 768px) {
    .pagination-wrapper {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .pagination-info {
        text-align: center;
        white-space: normal;
    }

    .pagination-controls {
        order: 2;
    }

    .pagination-list {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
    }

    .pagination-list .page-link {
        min-width: 34px;
        height: 34px;
        padding: 0 10px;
        font-size: 13px;
    }

    .pagination-per-page {
        order: 1;
        justify-content: center;
    }
}

/* Very small screens (≤ 480px) */
@media (max-width: 480px) {
    .pagination-list .page-link {
        min-width: 32px;
        height: 32px;
        font-size: 12px;
    }

    .pagination-info {
        font-size: 13px;
    }

    .per-page-select {
        font-size: 13px;
        padding: 6px 28px 6px 10px;
    }
}

</style>
@section('content')
    @if (session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="fas fa-check-circle me-2"></i>
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @if (session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fas fa-exclamation-circle me-2"></i>
            {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="table-management-container">
        <div class="table-wrapper">
            <table class="custom-table">
                <thead>
                    <tr>
                        <th>Table ID</th>
                        <th>Name</th>
                        <th>Description</th>
                        <th class="text-center" style="width: 80px;">Min</th>
                        <th class="text-center" style="width: 80px;">Max</th>
                        <th style="width: 60px;"></th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($tables as $table)
                        <tr>
                            <td>
                                <span class="table-code">{{ $table->table_code }}</span>
                            </td>
                            <td>
                                <span class="table-name">{{ $table->table_name }}</span>
                            </td>
                            <td>
                                <span class="table-description">{{ $table->description ?? '-' }}</span>
                            </td>
                            <td class="text-center">
                                <span>{{ $table->min_capacity }}</span>
                            </td>
                            <td class="text-center">
                                <span>{{ $table->max_capacity }}</span>
                            </td>
                            <td>
                                <button class="btn-icon edit-table-btn" data-table-id="{{ $table->id }}"
                                    data-table-name="{{ $table->table_name }}"
                                    data-min-capacity="{{ $table->min_capacity }}"
                                    data-max-capacity="{{ $table->max_capacity }}"
                                    data-description="{{ $table->description }}" title="Edit Table">
                                    <i class="fas fa-pen"></i>
                                </button>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="text-center py-5">
                                <div class="empty-state">
                                    <i class="fas fa-table fa-3x text-muted mb-3"></i>
                                    <h5 class="text-muted mb-2">No Tables Found</h5>
                                    <p class="text-muted mb-3">Start by adding your first table to manage your restaurant
                                        layout.</p>
                                    <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                        data-bs-target="#addTableModal">
                                        <i class="fas fa-plus me-1"></i> Add First Table
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        {{-- ================== PAGINATION WRAPPER ================== --}}
        @if ($tables->total() > 0)
            <div class="pagination-wrapper">

                {{-- 🔹 SHOW ENTRIES (ALWAYS) --}}
                <div class="pagination-info">
                    Showing
                    <strong>{{ $tables->firstItem() ?? 0 }}</strong>
                    to
                    <strong>{{ $tables->lastItem() ?? $tables->count() }}</strong>
                    of
                    <strong>{{ $tables->total() }}</strong>
                    entries
                </div>

                {{-- 🔹 PAGINATION CONTROLS (ONLY IF MORE THAN ONE PAGE) --}}
                @if ($tables->hasPages())
                    <nav class="pagination-controls">
                        <ul class="pagination-list">

                            {{-- Previous --}}
                            @if ($tables->onFirstPage())
                                <li class="page-item disabled">
                                    <span class="page-link"><i class="fas fa-chevron-left"></i></span>
                                </li>
                            @else
                                <li class="page-item">
                                    <a class="page-link" href="{{ $tables->previousPageUrl() }}">
                                        <i class="fas fa-chevron-left"></i>
                                    </a>
                                </li>
                            @endif

                            {{-- Page Numbers (with ellipsis) --}}
                            @php
                                $current = $tables->currentPage();
                                $last = $tables->lastPage();
                                $start = max($current - 2, 1);
                                $end = min($current + 2, $last);
                            @endphp

                            @if ($start > 1)
                                <li class="page-item">
                                    <a class="page-link" href="{{ $tables->url(1) }}">1</a>
                                </li>
                                @if ($start > 2)
                                    <li class="page-item disabled"><span class="page-link">…</span></li>
                                @endif
                            @endif

                            @for ($i = $start; $i <= $end; $i++)
                                <li class="page-item {{ $i == $current ? 'active' : '' }}">
                                    <a class="page-link" href="{{ $tables->url($i) }}">{{ $i }}</a>
                                </li>
                            @endfor

                            @if ($end < $last)
                                @if ($end < $last - 1)
                                    <li class="page-item disabled"><span class="page-link">…</span></li>
                                @endif
                                <li class="page-item">
                                    <a class="page-link" href="{{ $tables->url($last) }}">{{ $last }}</a>
                                </li>
                            @endif

                            {{-- Next --}}
                            @if ($tables->hasMorePages())
                                <li class="page-item">
                                    <a class="page-link" href="{{ $tables->nextPageUrl() }}">
                                        <i class="fas fa-chevron-right"></i>
                                    </a>
                                </li>
                            @else
                                <li class="page-item disabled">
                                    <span class="page-link"><i class="fas fa-chevron-right"></i></span>
                                </li>
                            @endif

                        </ul>
                    </nav>
                @else
                    {{-- layout balance --}}
                    <nav class="pagination-controls"></nav>
                @endif

                {{-- 🔹 PER PAGE (ALWAYS) --}}
                <div class="pagination-per-page">
                    <label>Show:</label>
                    <select class="per-page-select" onchange="changePerPage(this.value)">
                        <option value="10" {{ request('per_page') == 10 ? 'selected' : '' }}>10</option>
                        <option value="20" {{ request('per_page') == 20 || !request('per_page') ? 'selected' : '' }}>20
                        </option>
                        <option value="50" {{ request('per_page') == 50 ? 'selected' : '' }}>50</option>
                        <option value="100" {{ request('per_page') == 100 ? 'selected' : '' }}>100</option>
                    </select>
                </div>

            </div>
        @endif


    </div>

    <!-- Advanced Seating Info Banner -->
    <div class="advanced-seating-banner">
        <div class="row">
            <div class="col-1 banner-icons d-flex justify-content-center align-items-center text-center">
                <i class="fas fa-chair" style="font-size:40px;color:#8C1867"></i>
            </div>

            <div class="col-6">
                <h6 class="mb-1 fw-bold">Advanced Seating Mode is Enabled</h6>
                <p class="mb-0 text-muted small">
                    Your branch is currently operating in Advanced Mode with Table layout management.
                    Please contact your Restaurant Administrator to switch to Simple Seating Mode for this branch.
                </p>
            </div>
            <div class="col-2">

            </div>
            <div class="col-3 d-flex justify-content-center align-items-center text-center">
                <button type="button" class="btn btn-outline-primary btn-sm fs-16" onclick="requestAdvancedSeating()">
                    Enable Simple Seating
                </button>
            </div>
        </div>
    </div>

    <!-- Add/Edit Table Modal -->
    <div class="modal fade" id="addTableModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalTitle">Add New Table</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="tableForm">
                        @csrf
                        <input type="hidden" name="table_id" id="tableId">
                        <input type="hidden" name="branch_id" value="{{ $branchId }}">

                        <div class="mb-3">
                            <label class="form-label">Table Name <span class="text-danger">*</span></label>
                            <input type="text" name="table_name" id="tableName" class="form-control"
                                placeholder="e.g., Table 1, VIP Table" required minlength="2">
                        </div>

                        <div class="row g-3 mb-3">
                            <div class="col-6">
                                <label class="form-label">Min Capacity <span class="text-danger">*</span></label>
                                <input type="number" name="min_capacity" id="minCapacity" class="form-control"
                                    min="1" max="50" placeholder="1" required>
                            </div>
                            <div class="col-6">
                                <label class="form-label">Max Capacity <span class="text-danger">*</span></label>
                                <input type="number" name="max_capacity" id="maxCapacity" class="form-control"
                                    min="1" max="50" placeholder="4" required>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Description</label>
                            <textarea name="description" id="description" class="form-control" rows="2"
                                placeholder="Optional table description" maxlength="100"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="saveTableBtn">
                        <i class="fas fa-save me-1"></i> Save Table
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .table-management-container {
            background: #fff;
            border-radius: 12px;
            padding: 0;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
            border: 1px solid #e5e7eb;
            margin-bottom: 24px;
        }

        .branch-select {
            min-width: 200px;
            height: 42px;
            padding: 0 36px 0 12px;
            border: 1px solid #d1d5db;
            border-radius: 8px;
            font-size: 14px;
            color: #111827;
            background: #ffffff;
            cursor: pointer;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 12px center;
        }

        .fs-16 {
            font-size: 16px;
        }

        .branch-select:focus {
            outline: none;
            border-color: #8C1867;
            box-shadow: 0 0 0 3px rgba(140, 24, 103, 0.1);
        }

        .table-wrapper {
            overflow-x: auto;
        }

        .custom-table {
            width: 100%;
            border-collapse: collapse;
            margin: 0;
        }

        .custom-table thead {
            background: #fafafa;
            border-bottom: 1px solid #e5e7eb;
        }

        .custom-table thead th {
            padding: 14px 20px;
            text-align: left;
            font-size: 13px;
            font-weight: 600;
            color: #6b7280;
            border: none;
        }

        .custom-table tbody tr {
            border-bottom: 1px solid #f3f4f6;
            transition: background-color 0.15s;
        }

        .custom-table tbody tr:hover {
            background-color: #fafafa;
        }

        .custom-table tbody tr:last-child {
            border-bottom: none;
        }

        .custom-table tbody td {
            padding: 16px 20px;
            font-size: 14px;
            color: #1f2937;
            vertical-align: middle;
        }

        .custom-table .text-center {
            text-align: center;
        }

        .table-code {
            color: #6b7280;
            font-size: 14px;
        }

        .table-name {
            font-weight: 500;
            color: #111827;
        }

        .table-description {
            color: #6b7280;
            font-size: 14px;
        }

        .btn-icon {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #e5e7eb;
            background: #fff;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s;
            color: #6b7280;
        }

        .btn-icon:hover {
            background: #f9fafb;
            border-color: #8C1867;
            color: #8C1867;
        }

        .btn-icon i {
            font-size: 13px;
        }

        .empty-state {
            padding: 60px 20px;
        }

        .empty-state i {
            opacity: 0.2;
        }

        /* Advanced Seating Banner */
        .advanced-seating-banner {
            background: #f9d5e8;
            border: 1px solid #f9d5e8;
            border-radius: 12px;
            padding: 20px 24px;
        }

        .banner-icons {
            /* width: 40px;
                        height: 40px; */
            /* background: #8C1867;
                        border-radius: 8px; */
            /* display: flex;
                        align-items: center;
                        justify-content: center;
                        flex-shrink: 0; */
        }

        .banner-icons i {
            color: #fff;
            font-size: 18px;
        }

        .advanced-seating-banner h6 {
            color: #1f2937;
            font-size: 16px;
        }

        /* Pagination */
        .pagination-wrapper {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 20px;
            border-top: 1px solid #f3f4f6;
        }

        .pagination-info {
            font-size: 14px;
            color: #6b7280;
        }

        .pagination-info strong {
            color: #111827;
            font-weight: 600;
        }

        .pagination {
            display: flex;
            list-style: none;
            margin: 0;
            padding: 0;
            gap: 4px;
        }

        .page-link {
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 36px;
            height: 36px;
            padding: 0 10px;
            border: 1px solid #e5e7eb;
            background: #fff;
            color: #6b7280;
            text-decoration: none;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.15s;
        }

        .page-link:hover {
            background: #fafafa;
            border-color: #8C1867;
            color: #8C1867;
        }

        .page-item.active .page-link {
            background: #8C1867;
            border-color: #8C1867;
            color: #fff;
        }

        .page-item.disabled .page-link {
            background: #fafafa;
            border-color: #e5e7eb;
            color: #9ca3af;
            cursor: not-allowed;
            pointer-events: none;
        }

        /* Modal */
        .modal-content {
            border-radius: 12px;
            border: none;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
        }

        .modal-header {
            border-bottom: 1px solid #e5e7eb;
            padding: 20px 24px;
        }

        .modal-title {
            font-size: 18px;
            font-weight: 600;
            color: #111827;
        }

        .modal-body {
            padding: 24px;
        }

        .modal-footer {
            border-top: 1px solid #e5e7eb;
            padding: 16px 24px;
        }

        .form-label {
            font-size: 14px;
            font-weight: 500;
            color: #374151;
            margin-bottom: 6px;
        }

        .form-control {
            border: 1px solid #d1d5db;
            border-radius: 8px;
            padding: 10px 12px;
            font-size: 14px;
            transition: all 0.2s;
        }

        .form-control:focus {
            border-color: #8C1867;
            box-shadow: 0 0 0 3px rgba(140, 24, 103, 0.1);
            outline: none;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .pagination-wrapper {
                flex-direction: column;
                gap: 16px;
                align-items: flex-start;
            }

            .custom-table thead th,
            .custom-table tbody td {
                padding: 12px 10px;
            }

            .advanced-seating-banner {
                padding: 16px;
            }

            .advanced-seating-banner .btn {
                width: 100%;
                margin-top: 12px;
            }
        }

        .small,
        small {
            font-size: 12px;
        }
    </style>
@endpush

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const baseUrl = "{{ url('location-manager/table-layout') }}";
            const csrfToken = "{{ csrf_token() }}";

            // Branch filter
            document.getElementById('branchFilter')?.addEventListener('change', function() {
                const branchId = this.value;
                const url = new URL(window.location.href);
                if (branchId) {
                    url.searchParams.set('branch_id', branchId);
                } else {
                    url.searchParams.delete('branch_id');
                }
                url.searchParams.delete('page');
                window.location.href = url.toString();
            });

            // Edit table
            document.querySelectorAll('.edit-table-btn').forEach(button => {
                button.addEventListener('click', function() {
                    document.getElementById('modalTitle').textContent = 'Edit Table';
                    document.getElementById('tableId').value = this.dataset.tableId;
                    document.getElementById('tableName').value = this.dataset.tableName;
                    document.getElementById('minCapacity').value = this.dataset.minCapacity;
                    document.getElementById('maxCapacity').value = this.dataset.maxCapacity;
                    document.getElementById('description').value = this.dataset.description !==
                        'null' ? this.dataset.description : '';

                    new bootstrap.Modal(document.getElementById('addTableModal')).show();
                });
            });

            // Save table
            document.getElementById('saveTableBtn').addEventListener('click', function() {
                const form = document.getElementById('tableForm');
                const formData = new FormData(form);

                if (!form.checkValidity()) {
                    form.reportValidity();
                    return;
                }

                const minCapacity = parseInt(formData.get('min_capacity'));
                const maxCapacity = parseInt(formData.get('max_capacity'));

                if (minCapacity > maxCapacity) {
                    showAlert('danger', 'Minimum capacity cannot be greater than maximum capacity.');
                    return;
                }

                this.disabled = true;
                this.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> Saving...';

                const tableId = document.getElementById('tableId').value;
                const url = tableId ? `${baseUrl}/${tableId}` : baseUrl;
                const method = tableId ? 'PUT' : 'POST';

                const data = {};
                formData.forEach((value, key) => data[key] = value);

                fetch(url, {
                        method: method,
                        headers: {
                            'X-CSRF-TOKEN': csrfToken,
                            'Content-Type': 'application/json',
                            'Accept': 'application/json',
                        },
                        body: JSON.stringify(data)
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            bootstrap.Modal.getInstance(document.getElementById('addTableModal'))
                                .hide();
                            showAlert('success', data.message);
                            setTimeout(() => location.reload(), 1500);
                        } else {
                            showAlert('danger', 'Error: ' + data.message);
                        }
                    })
                    .catch(() => showAlert('danger', 'Failed to save table.'))
                    .finally(() => {
                        this.disabled = false;
                        this.innerHTML = '<i class="fas fa-save me-1"></i> Save Table';
                    });
            });

            // Reset modal
            document.getElementById('addTableModal').addEventListener('hidden.bs.modal', function() {
                document.getElementById('modalTitle').textContent = 'Add New Table';
                document.getElementById('tableForm').reset();
                document.getElementById('tableId').value = '';
            });

            function showAlert(type, message) {
                const alert = document.createElement('div');
                alert.className = `alert alert-${type} alert-dismissible fade show position-fixed`;
                alert.style.cssText = 'top: 80px; right: 20px; z-index: 9999; min-width: 300px;';
                alert.innerHTML =
                    `${message}<button type="button" class="btn-close" data-bs-dismiss="alert"></button>`;
                document.body.appendChild(alert);
                setTimeout(() => alert.remove(), 5000);
            }
        });

        function disableAdvancedSeating() {
            Swal.fire({
                title: 'Switch to Simple Seating?',
                text: 'This will disable advanced table layout features.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, switch',
                cancelButtonText: 'Cancel'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Add your API call here
                    console.log('Switching to simple seating...');
                }
            });
        }
    </script>
    <script>
        function changePerPage(value) {
            const url = new URL(window.location.href);
            url.searchParams.set('per_page', value);
            url.searchParams.set('page', 1); // reset to first page
            window.location.href = url.toString();
        }
    </script>

    <script>
        function requestAdvancedSeating() {
            Swal.fire({
                html: `
                <div class="adv-seat-card">
                    <div class="adv-seat-card-header">
                        Enable Simple Seating
                    </div>
                    <div class="adv-seat-card-body">
                        Enabling Simple Seating will allow you to directly assign table layouts.
                        You can configure this in the <strong>Table Layout</strong> section.
                    </div>
                    <div class="adv-seat-card-footer">
                        <button type="button"
                                class="adv-seat-btn adv-seat-btn-cancel"
                                data-action="cancel">
                            Cancel
                        </button>
                        <button type="button"
                                class="adv-seat-btn adv-seat-btn-confirm"
                                data-action="confirm">
                            Yes, enable
                        </button>
                    </div>
                </div>
            `,
                showConfirmButton: false,
                showCancelButton: false,
                backdrop: true,
                customClass: {
                    popup: 'adv-seat-popup'
                },
                didOpen: (popup) => {
                    popup.querySelector('[data-action="cancel"]').addEventListener('click', () => {
                        Swal.close();
                    });

                    popup.querySelector('[data-action="confirm"]').addEventListener('click', () => {
                        Swal.close();
                        enableAdvancedSeating();
                    });
                }
            });
        }

        function enableAdvancedSeating() {
            Swal.fire({
                title: 'Enabling Advanced Seating...',
                html: 'Please wait while we update your settings.',
                allowOutsideClick: false,
                allowEscapeKey: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });

            fetch("{{ route('location-manager.branch.update-advanced-seating') }}", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': "{{ csrf_token() }}"
                    },
                    body: JSON.stringify({
                        advanced_seating_enabled: 0
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        Swal.fire({
                            title: 'Success!',
                            text: 'Simple Seating has been enabled successfully.',
                            icon: 'success',
                            timer: 2000,
                            showConfirmButton: false
                        }).then(() => window.location.reload());
                    } else {
                        Swal.fire('Error!', data.message || 'Failed to enable Simple Seating', 'error');
                    }
                })
                .catch(() => {
                    Swal.fire('Error!', 'Failed to Enable Simple Seating. Please try again.', 'error');
                });
        }
    </script>
@endpush