@extends('layouts.app')

@section('title', 'Branch Management - Tiqkets')
@section('page-title', 'Branches')

@section('content')
    {{-- ✅ If there are NO branches, show setup screen --}}
    @if ($branch->isEmpty())
        <div class="d-flex flex-column justify-content-center align-items-center mt-5">
            <div class="text-center mb-3">
                <div class="logo-section">
                    <div class="logo">
                        <img src="{{ asset('assest/images/logo.jpg') }}" alt="tiqkets-logo">
                    </div>
                    <div class="logo-text">TIQKETS</div>
                </div>
            </div>
            <div class="card shadow-sm  p-4" style="max-width: 550px; width: 100%;">
                <h5 class="fw-semibold mb-2">Welcome {{ auth()->user()->name }}!</h5>
                <h4 class="fw-bold mb-3">Setup Your First Branch</h4>
                <p class="text-muted mb-4">
                    Add your first branch, operating hours, services you offer, and team details.
                </p>
                <a href="{{ route('restaurant-admin.billing.subscription') }}" class="btn btn-outline-primary w-100">
                    Add Branch
                </a>
            </div>
        </div>
    @else
        @section('header-action')
            <a href="{{ route('restaurant-admin.billing.subscription') }}" class="btn btn-primary">
                {{-- <i class="bi bi-plus-circle me-1"></i>  --}}
                Add Branch
            </a>
        @endsection

        <div class="user-management-container">
            <div class="table-wrapper">
                <table class="custom-table">
                    <thead class="table-light">
                        <tr>
                            <th style="width: 80px;">S. No.</th>
                            <th>Name</th>
                            <th>Contact Details</th>
                            <th style="width: 120px;">Users</th>
                            <th style="width: 120px;">Status</th>
                            <th>Last Updated</th>
                            <th style="width: 180px;">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($branch as $branches)
                            <tr>
                                <td>{{ $loop->iteration + ($branch->currentPage() - 1) * $branch->perPage() }}</td>
                                <td>
                                    <div class="fw-semibold">{{ $branches->branch_name }}</div>
                                    <small class="text-muted">{{ $branches->branch_address }}</small>
                                </td>
                                <td>
                                    <div class="text-muted">{{ $branches->branch_contact_name }}</div>
                                    <small class="text-muted">
                                        {{ $branches->branch_contact_phone }} · {{ $branches->branch_contact_email }}
                                    </small>
                                </td>
                                <td>{{ count($branches->userscount) }}</td>
                                <td>{{ ucfirst($branches->status) }}</td>
                                <td><small>{{ $branches->updated_at->format('d-m-Y H:i:s') }}</small></td>
                                <td>
                                    <div class="d-flex align-items-center gap-2">
                                        {{-- Manage QR Button - Opens Modal --}}
                                        <button class="btn btn-sm btn-outline-secondary manage-qr-btn"
                                            data-branch-id="{{ $branches->id }}"
                                            data-branch-name="{{ $branches->branch_name }}"
                                            data-branch-code="{{ $branches->branch_code }}"
                                            data-takeaway-enabled="{{ $branches->takeaway_enabled ? 'true' : 'false' }}">
                                            View QR
                                        </button>

                                        <div class="dropdown">
                                            <button
                                                class="btn btn-sm btn-outline-light border dropdown-toggle text-black hidearrow"
                                                type="button" data-bs-toggle="dropdown" aria-expanded="false"
                                                style="height: 32px;width: 32px;">
                                                <i class="fas fa-ellipsis-v"></i>
                                            </button>
                                            <ul class="dropdown-menu dropdown-menu-end">
                                                <li>
                                                    <a class="dropdown-item"
                                                        href="{{ route('branches.edit', $branches) }}">
                                                        <i class="fas fa-edit me-2"></i> Edit
                                                    </a>
                                                </li>
                                                <li>
                                                    <hr class="dropdown-divider">
                                                </li>
                                                <li>
                                                    <a class="dropdown-item toggle-branch-status" href="#"
                                                        data-branch-id="{{ $branches->id }}"
                                                        data-status="{{ $branches->status }}">
                                                        <i
                                                            class="fas fa-{{ $branches->status === 'active' ? 'ban' : 'check-circle' }} me-2"></i>
                                                        Mark as
                                                        {{ $branches->status === 'active' ? 'Inactive' : 'Active' }}
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            {{-- ✅ Custom Pagination --}}
            {{-- ✅ Custom Pagination --}}
            {{-- ✅ Custom Pagination --}}
            @if ($branch->total() > 0)
                <div class="pagination-wrapper rounded">

                    {{-- ✅ SHOWING ENTRIES (ALWAYS) --}}
                    <div class="pagination-info">
                        Showing
                        <strong>{{ $branch->firstItem() ?? 1 }}</strong>
                        to
                        <strong>{{ $branch->lastItem() ?? $branch->count() }}</strong>
                        of
                        <strong>{{ $branch->total() }}</strong>
                        entries
                    </div>

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

                                {{-- Previous --}}
                                @if ($branch->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="{{ $branch->previousPageUrl() }}">
                                            <i class="fas fa-chevron-left"></i>
                                        </a>
                                    </li>
                                @endif

                                {{-- Page Numbers --}}
                                @foreach ($branch->getUrlRange(1, $branch->lastPage()) as $page => $url)
                                    @if ($page == $branch->currentPage())
                                        <li class="page-item active">
                                            <span class="page-link">{{ $page }}</span>
                                        </li>
                                    @else
                                        <li class="page-item">
                                            <a class="page-link" href="{{ $url }}">{{ $page }}</a>
                                        </li>
                                    @endif
                                @endforeach

                                {{-- Next --}}
                                @if ($branch->hasMorePages())
                                    <li class="page-item">
                                        <a class="page-link" href="{{ $branch->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
                        {{-- keeps layout aligned when pagination hidden --}}
                        <nav class="pagination-controls"></nav>
                    @endif

                    {{-- ✅ PER PAGE DROPDOWN (ALWAYS) --}}
                    <div class="pagination-per-page">
                        <label for="perPageSelect">Show:</label>
                        <select id="perPageSelect" class="per-page-select" onchange="changePerPage(this.value)">
                            <option value="10"
                                {{ request('per_page') == 10 || !request('per_page') ? 'selected' : '' }}>
                                10
                            </option>
                            <option value="20" {{ request('per_page') == 20 ? '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>

        {{-- QR Code Management Modal --}}
        {{-- QR Code Management Modal --}}
        <div class="modal fade" id="qrManagementModal" tabindex="-1" aria-labelledby="qrManagementModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content qr-modal-content">
                    <div class="modal-header border-0">
                        <h5 class="modal-title" id="qrManagementModalLabel">Manage QR Code - <span
                                id="modalBranchName"></span></h5>
                        {{-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> --}}
                    </div>
                    <div class="modal-body p-0">
                        <!-- Tab Navigation -->
                        <div class="qr-tabs">
                            <button class="qr-tab active" data-tab="restaurant">Restaurant QR</button>
                            <button class="qr-tab" data-tab="takeaway" id="takeawayTab" style="display: none;">Takeaway
                                QR</button>
                        </div>

                        <!-- QR Code Display Area -->
                        <div class="qr-display-area" id="qrDisplayArea">
                            <div class="qr-content">
                                <!-- Logo -->
                                <div class="qr-logo-section">
                                    {{-- <div class="qr-logo"> --}}
                                    <img class="" src="{{ asset('assest/images/modal-logo.png') }}"
                                        alt="tiqkets-logo">
                                    {{-- </div> --}}
                                    {{-- <h3 class="qr-brand-name">TIQKETS</h3> --}}
                                </div>

                                <!-- Branch Info -->
                                <div class="qr-branch-info">
                                    <h4 class="branch-name" id="modalBranchNameDisplay"></h4>
                                    <p class="branch-id" id="modalBranchCode"></p>
                                </div>

                                <!-- QR Code -->
                                <div class="qr-code-container" id="qrCodeContainer">
                                    <div class="text-center">
                                        <i class="fas fa-spinner fa-spin fa-2x text-primary"></i>
                                        <p class="mt-2">Loading QR Code...</p>
                                    </div>
                                </div>

                                <!-- Scan Me Text -->
                                <div class="scan-text">
                                    <p>Scan Me</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer border-0 justify-content-between">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                        <div class="d-flex gap-2 flex-wrap">
                            <div class="dropdown">
                                <button class="btn btn-outline-primary dropdown-toggle" type="button"
                                    data-bs-toggle="dropdown">
                                    Download As
                                </button>

                                <ul class="dropdown-menu">
                                    <li>
                                        <a class="dropdown-item download-qr" href="#" data-format="png">
                                            <i class="fas fa-file-image me-2"></i> PNG
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item download-qr" href="#" data-format="svg">
                                            <i class="fas fa-vector-square me-2"></i> SVG
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item download-qr" href="#" data-format="pdf">
                                            <i class="fas fa-file-pdf me-2"></i> PDF
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <button type="button" class="btn btn-primary" id="printQrBtn">
                                <i class="fas fa-print me-2"></i> Print
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
@endsection

@push('styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
    <style>
        .user-management-container {
            background: #fff;
            border-radius: 8px;
            padding: 0;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            overflow-x: auto;
        }

        /* Table base */
        .table-wrapper {
            width: 100%;
            border-radius: 12px;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            border: 1px solid #e5e7eb;
        }

        .custom-table {
            width: 100%;
            border-collapse: collapse;
            margin: 0;
            min-width: 800px;

        }

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

        .custom-table thead th {
            padding: 14px 16px;
            text-align: left;
            font-size: 13px;
            font-weight: 600;
            color: #374151;
            white-space: nowrap;
        }

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

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

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

        .user-name {
            font-weight: 500;
            color: #111827;
            white-space: nowrap;
        }

        .role-badge {
            display: inline-block;
            padding: 4px 10px;
            background: #f3f4f6;
            color: #374151;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 500;
            white-space: nowrap;
        }

        .action-buttons {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 6px;
            flex-wrap: nowrap;
        }

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

        .btn-icon:hover {
            background: #f9fafb;
            border-color: #d1d5db;
            color: #374151;
        }

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

        .dropdown-menu {
            border: 1px solid #e5e7eb;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            padding: 6px;
            min-width: 180px;
            z-index: 99990 !important;
        }

        div:where(.swal2-container).swal2-top,
        div:where(.swal2-container).swal2-center,
        div:where(.swal2-container).swal2-bottom {
            grid-template-columns: auto minmax(0, 1fr) auto;
            z-index: 1000000000000000000000;
        }

        .table-wrapper,
        .user-management-container {
            overflow: visible !important;
        }

        .dropdown-menu {
            position: absolute !important;
            z-index: 29999 !important;
            transform: translate3d(0, 0, 0);
        }

        .custom-table td,
        .custom-table th {
            overflow: visible !important;
        }

        /* .dropdown-toggle::after {
                                                    content: none !important;
                                                } */
        .hidearrow::after {
            content: none !important;
        }

        /* ===== 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: var(--primary-color);
            border-color: var(--primary-color);
            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: var(--primary-color);
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        }

        /* QR Code Modal Styles */
        .modal .card {
            border: 1px solid #e5e7eb;
            border-radius: 12px;
        }

        .modal .card-body {
            padding: 2rem;
        }

        #restaurantQrCode svg,
        #takeawayQrCode svg {
            max-width: 200px;
            height: auto;
        }

        .download-qr,
        .print-qr {
            min-width: 100px;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .custom-table {
                font-size: 12px;
                min-width: 700px;
            }

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

            .btn-icon {
                width: 30px;
                height: 30px;
            }

            .action-buttons {
                gap: 4px;
            }

            .pagination-wrapper {
                flex-direction: column;
                align-items: stretch;
                gap: 12px;
            }

            .pagination-info,
            .pagination-per-page {
                text-align: center;
                justify-content: center;
            }

            .pagination-controls {
                justify-content: center;
            }

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

            .modal-dialog {
                margin: 1rem;
            }

            .download-qr,
            .print-qr {
                min-width: 80px;
                font-size: 0.8rem;
            }
        }

        .table-wrapper::-webkit-scrollbar {
            height: 6px;
        }

        .table-wrapper::-webkit-scrollbar-thumb {
            background-color: #d1d5db;
            border-radius: 4px;
        }

        .swal2-popup {
            border-radius: 12px;
            font-family: inherit;
        }

        .swal2-title {
            color: #111827;
            font-size: 22px;
            font-weight: 600;
        }

        .swal2-html-container {
            color: #6b7280;
            font-size: 14px;
        }

        .swal2-confirm {
            background-color: var(--primary-color) !important;
            border-radius: 8px;
            padding: 10px 24px;
            font-weight: 500;
            box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
        }

        .swal2-confirm:hover {
            background-color: var(--primary-color) !important;
        }

        .swal2-cancel {
            background-color: #e5e7eb !important;
            color: #374151 !important;
            border-radius: 8px;
            padding: 10px 24px;
            font-weight: 500;
        }

        .swal2-cancel:hover {
            background-color: var(--primary-color) !important;
        }

        .swal2-icon.swal2-success [class^='swal2-success-line'] {
            background-color: var(--primary-color);
        }

        .swal2-icon.swal2-success .swal2-success-ring {
            border-color: var(--primary-color);
        }

        .swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
            background-color: var(--primary-color);
        }

        .swal2-icon.swal2-warning {
            border-color: var(--primary-color);
            color: var(--primary-color);
        }

        /* Modal Styles */
        .qr-modal-content {
            border-radius: 16px;
            overflow: hidden;
            border: none;
        }

        .modal-header {
            padding: 24px 32px 16px;
        }

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

        /* Tab Navigation */
        .qr-tabs {
            display: flex;
            justify-content: center;
            border-bottom: 1px solid #e5e7eb;
            padding: 0 32px;
            gap: 8px;
        }

        .qr-tab {
            padding: 12px 24px;
            background: none;
            border: none;
            color: #6b7280;
            font-weight: 500;
            font-size: 14px;
            cursor: pointer;
            position: relative;
            transition: all 0.3s;
        }

        .qr-tab:hover {
            color: #111827;
        }

        .qr-tab.active {
            color: #8b2d6b;
        }

        .qr-tab.active::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            right: 0;
            height: 2px;
            background: #8b2d6b;
        }

        /* QR Display Area */
        .qr-display-area {
            background: #e5e5e5;
            padding: 60px 40px;
            min-height: 500px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .qr-content {
            background: white;
            border-radius: 16px;
            padding: 40px;
            max-width: 400px;
            width: 100%;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            text-align: center;
        }

        /* Logo Section */
        .qr-logo-section {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin-bottom: 32px;
        }

        .qr-logo {
            width: 50px;
            height: 50px;
            background: #8b2d6b;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 0 !important;
        }

        .qr-brand-name {
            margin: 0;
            font-size: 24px;
            font-weight: 700;
            color: #8b2d6b;
            letter-spacing: 1px;
        }

        /* Branch Info */
        .qr-branch-info {
            margin-bottom: 32px;
        }

        .branch-name {
            font-size: 18px;
            font-weight: 600;
            color: #111827;
            margin-bottom: 8px;
        }

        .branch-id {
            font-size: 14px;
            color: #6b7280;
            margin: 0;
        }

        /* QR Code Container */
        .qr-code-container {
            margin-bottom: 32px;
            display: flex;
            justify-content: center;
        }

        .qr-code-container svg {
            width: 200px !important;
            height: 200px !important;
            border: 4px solid #f3f4f6;
            border-radius: 12px;
            padding: 16px;
            background: white;
        }

        /* Scan Text */
        .scan-text {
            padding-top: 24px;
            border-top: 1px dashed #d1d5db;
        }

        .scan-text p {
            font-size: 16px;
            font-weight: 500;
            color: #6b7280;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin: 0;
        }

        /* Modal Footer */
        .modal-footer {
            padding: 20px 32px 24px;
            background: #f9fafb;
        }

        /* Logo Image */
        .logo1 {
            height: 30px;
            width: 30px;
            background: var(--primary-color);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 24px;
            flex-shrink: 0;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .qr-display-area {
                padding: 40px 20px;
            }

            .qr-content {
                padding: 30px 20px;
            }

            .modal-footer {
                flex-direction: column;
                gap: 12px;
            }

            .modal-footer .d-flex {
                width: 100%;
            }
        }

        .logo-section {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin-bottom: 17px;
        }

        .logo {
            width: 45px;
            height: 45px;
            background: #8B2D6B;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .logo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .logo-text {
            font-size: 24px;
            font-weight: 700;
            color: #8B2D6B;
            letter-spacing: 0.5px;
        }

        /* Outer container wraps both table + pagination */
        /* Outer container wraps both table + pagination */
        .table-container {
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            /* full rounding applied */
            overflow: hidden;
            /* IMPORTANT: applies rounding to table top */
            background: #fff;
            margin-bottom: 20px;
        }

        /* Table wrapper with NO border-radius */
        .table-wrapper {
            /* border-bottom: 1px solid #e5e7eb; */
            overflow: hidden;
        }


        /* Remove all inner radiuses on table */
        /* .custom-table {
                                                            border-radius: 0 !important;
                                                            border: none !important;
                                                        } */

        /* Pagination bottom rounded (only outer container controls this) */
        .pagination-wrapper {
            background: #f9fafb;
            padding: 16px 24px;
            border-top: 1px solid #e5e7eb;
            position: relative;
            z-index: 9999;
        }

        th {
            /* border-radius: 20px; */
            background: #f9fafb;
        }

        .btn.dropdown-toggle::after {
            margin-left: 0.45rem;
            /* spacing near text */
            border-top: 0.4em solid;
            /* arrow size */
            border-right: 0.35em solid transparent;
            border-left: 0.35em solid transparent;
            vertical-align: 0.15em;
        }

        .modal {
            z-index: 99999 !important;
        }

        .modal-backdrop {
            z-index: 99990 !important;
        }

        .per-page-select {
            appearance: none;
            background-image: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/svgs/solid/chevron-down.svg");
            background-repeat: no-repeat;
            background-position: right 12px center;
            background-size: 12px;
        }
    </style>
@endpush

@push('scripts')
    <!-- Add SweetAlert2 JS -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.32/dist/sweetalert2.all.min.js"></script>
    <script>
        const qrDownloadUrlTemplate =
            "{{ route('restaurant-admin.qr-code.download', ['branch' => '__BRANCH__', 'type' => '__TYPE__']) }}";
    </script>


    <script>
        document.addEventListener('DOMContentLoaded', function() {
            let currentBranchId = null;
            let currentBranchData = null;
            let currentQrType = 'restaurant';
            const baseurl = "{{ url('') }}";

            // Initialize Bootstrap Modal
            const qrModal = new bootstrap.Modal(document.getElementById('qrManagementModal'));

            // Manage QR Button Click Handler
            document.querySelectorAll('.manage-qr-btn').forEach(button => {
                button.addEventListener('click', function() {
                    const branchId = this.dataset.branchId;
                    const branchName = this.dataset.branchName;
                    const branchCode = this.dataset.branchCode;
                    const takeawayEnabled = this.dataset.takeawayEnabled === 'true';

                    currentBranchData = {
                        id: branchId,
                        name: branchName,
                        code: branchCode,
                        takeawayEnabled: takeawayEnabled
                    };

                    // Update modal content
                    document.getElementById('modalBranchName').textContent = branchName;
                    document.getElementById('modalBranchNameDisplay').textContent = branchName;
                    document.getElementById('modalBranchCode').textContent = `ID: ${branchCode}`;

                    // Show/hide takeaway tab
                    const takeawayTab = document.getElementById('takeawayTab');
                    if (takeawayEnabled) {
                        takeawayTab.style.display = 'block';
                    } else {
                        takeawayTab.style.display = 'none';
                        // Ensure restaurant tab is active if takeaway is disabled
                        setActiveTab('restaurant');
                    }

                    // Reset to restaurant QR and load
                    currentQrType = 'restaurant';
                    setActiveTab('restaurant');
                    loadQRCodes(branchId, 'restaurant');

                    // Show modal
                    qrModal.show();
                });
            });

            // Tab Click Handler
            document.querySelectorAll('.qr-tab').forEach(tab => {
                tab.addEventListener('click', function() {
                    const tabType = this.dataset.tab;
                    setActiveTab(tabType);
                    currentQrType = tabType;
                    loadQRCodes(currentBranchData.id, tabType);
                });
            });

            // Set active tab
            function setActiveTab(tabType) {
                document.querySelectorAll('.qr-tab').forEach(tab => {
                    if (tab.dataset.tab === tabType) {
                        tab.classList.add('active');
                    } else {
                        tab.classList.remove('active');
                    }
                });
            }

            // Load QR Codes via AJAX
            function loadQRCodes(branchId, type) {
                const qrContainer = document.getElementById('qrCodeContainer');
                qrContainer.innerHTML =
                    '<div class="text-center"><i class="fas fa-spinner fa-spin fa-2x text-primary"></i><p class="mt-2">Loading QR Code...</p></div>';

                fetch(`${baseurl}/restaurant-admin/qr-codes/${branchId}/qr-data`, {
                        method: 'GET',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Content-Type': 'application/json',
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        },
                        credentials: 'same-origin'
                    })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error(`HTTP error! status: ${response.status}`);
                        }
                        return response.json();
                    })
                    .then(data => {
                        if (data.success) {
                            const qrSvg = type === 'takeaway' ? data.takeaway_qr_svg : data.restaurant_qr_svg;
                            qrContainer.innerHTML = qrSvg;

                            // Update download links
                            updateDownloadLinks(type);
                        } else {
                            showQRCodeError('Failed to load QR codes: ' + data.message);
                        }
                    })
                    .catch(error => {
                        console.error('Error loading QR codes:', error);
                        showQRCodeError('Error loading QR codes. Please try again.');
                    });
            }

            // Update download links
            function updateDownloadLinks(type) {
                document.querySelectorAll('.download-qr').forEach(link => {
                    const format = link.dataset.format;

                    let finalUrl = qrDownloadUrlTemplate
                        .replace('__BRANCH__', currentBranchData.id)
                        .replace('__TYPE__', type);

                    link.href = finalUrl + `?format=${format}`;
                });
            }


            // Show QR code error
            function showQRCodeError(message) {
                const errorHtml = `<div class="text-center text-danger">
            <i class="fas fa-exclamation-triangle fa-2x"></i>
            <p class="mt-2">${message}</p>
            <button class="btn btn-sm btn-primary mt-2" onclick="loadQRCodes(currentBranchData.id, currentQrType)">
                <i class="fas fa-redo me-1"></i> Retry
            </button>
        </div>`;

                document.getElementById('qrCodeContainer').innerHTML = errorHtml;
            }

            // Print QR Code
            document.getElementById('printQrBtn').addEventListener('click', function() {
                printQRCode(currentQrType);
            });

            // Print QR Code Function
            function printQRCode(type) {
                const qrContainer = document.getElementById('qrCodeContainer');
                const svgElement = qrContainer.querySelector('svg');

                if (!svgElement) {
                    alert('QR code not loaded yet. Please wait and try again.');
                    return;
                }

                const svgString = new XMLSerializer().serializeToString(svgElement);
                const branchName = currentBranchData.name;
                const branchId = currentBranchData.code;

                const printWindow = window.open('', '', 'width=600,height=400');
                printWindow.document.write(`
            <!DOCTYPE html>
            <html>
            <head>
                <title>QR Code - ${type === 'takeaway' ? 'Takeaway' : 'Restaurant'}</title>
                <style>
                    body {
                        margin: 0;
                        padding: 20px;
                        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        min-height: 100vh;
                    }
                    .qr-content {
                        text-align: center;
                        background: white;
                        padding: 40px;
                        border-radius: 16px;
                    }
                    .qr-logo-section {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        gap: 12px;    
                        margin-bottom: 32px;
                    }
                    .qr-logo {
                        width: 50px;
                        height: 50px;
                        background: #8b2d6b;
                        border-radius: 50%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        margin-bottom: 0 !important;
                    }
                    .qr-brand-name {
                        margin: 0;
                        font-size: 24px;
                        font-weight: 700;
                        color: #8b2d6b;
                        letter-spacing: 1px;
                    }
                    .qr-branch-info {
                        margin-bottom: 32px;
                    }
                    .branch-name {
                        font-size: 18px;
                        font-weight: 600;
                        color: #111827;
                        margin-bottom: 8px;
                    }
                    .branch-id {
                        font-size: 14px;
                        color: #6b7280;
                    }
                    .qr-code-container {
                        margin: 32px 0;
                        display: flex;
                        justify-content: center;
                    }
                    .qr-code-container svg {
                        width: 300px !important;
                        height: 300px !important;
                        border: 4px solid #f3f4f6;
                        border-radius: 12px;
                        padding: 16px;
                    }
                    .scan-text {
                        margin-top: 32px;
                        padding-top: 24px;
                        border-top: 1px dashed #d1d5db;
                    }
                    .scan-text p {
                        font-size: 16px;
                        font-weight: 500;
                        color: #6b7280;
                        text-transform: uppercase;
                        letter-spacing: 0.5px;
                        margin: 0;
                    }
                    .logo1 {
                        height: 35px;
                        width: 35px;
                        background: var(--primary-color);
                        border-radius: 12px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        color: white;
                        font-size: 24px;
                        flex-shrink: 0;
                    }
                    @media print {
                        body {
                            padding: 0;
                        }
                    }
                </style>
            </head>
            <body>
                <div class="qr-content">
                    <div class="qr-logo-section">
                        <div class="qr-logo">
                            <img class="logo1" src="{{ asset('assest/images/logo.jpg') }}" alt="tiqkets-logo">
                        </div>
                        <h3 class="qr-brand-name">TIQKETS</h3>
                    </div>
                    <div class="qr-branch-info">
                        <h4 class="branch-name">${branchName}</h4>
                        <p class="branch-id">ID: ${branchId}</p>
                    </div>
                    <div class="qr-code-container">
                        ${svgString}
                    </div>
                    <div class="scan-text">
                        <p>Scan Me</p>
                    </div>
                </div>
            </body>
            </html>
        `);

                printWindow.document.close();
                printWindow.focus();

                setTimeout(() => {
                    printWindow.print();
                    printWindow.close();
                }, 500);
            }

            // Toggle branch status with SweetAlert2 (existing code)
            document.querySelectorAll('.toggle-branch-status').forEach(button => {
                button.addEventListener('click', function(e) {
                    e.preventDefault();
                    currentBranchId = this.dataset.branchId;
                    const currentStatus = this.dataset.status;
                    const newStatus = currentStatus === 'active' ? 'Inactive' : 'Active';

                    Swal.fire({
                        html: `
                <div class="adv-seat-card">
                    <div class="adv-seat-card-header">
                        Change Branch Status
                    </div>
                    <div class="adv-seat-card-body">
                        Do you want to mark this branch as <strong>${newStatus}</strong>?
                    </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, mark as ${newStatus}
                        </button>
                    </div>
                </div>
            `,
                        showConfirmButton: false,
                        showCancelButton: false,
                        customClass: {
                            popup: 'adv-seat-popup'
                        }
                    });

                    const popup = Swal.getPopup();
                    popup.querySelector('[data-action="cancel"]').onclick = () => Swal.close();
                    popup.querySelector('[data-action="confirm"]').onclick = () => {
                        Swal.close();

                        // Loading dialog
                        Swal.fire({
                            title: 'Processing...',
                            text: 'Updating branch status',
                            allowOutsideClick: false,
                            allowEscapeKey: false,
                            didOpen: () => {
                                Swal.showLoading();
                            }
                        });

                        fetch(`{{ url('restaurant-admin/branches') }}/${currentBranchId}/toggle-status`, {
                                method: 'POST',
                                headers: {
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                    'Content-Type': 'application/json',
                                    'Accept': 'application/json'
                                }
                            })
                            .then(response => response.json())
                            .then(data => {
                                if (data.success) {
                                    Swal.fire({
                                        icon: 'success',
                                        title: 'Success!',
                                        text: data.message ||
                                            'Branch status updated successfully',
                                        confirmButtonColor: '#8C1867',
                                        timer: 2000,
                                        timerProgressBar: true,
                                        showConfirmButton: false
                                    }).then(() => {
                                        location.reload();
                                    });
                                } else {
                                    Swal.fire({
                                        icon: 'error',
                                        title: 'Error!',
                                        text: data.message ||
                                            'Failed to update branch status',
                                        confirmButtonColor: '#8C1867',
                                        confirmButtonText: 'OK'
                                    });
                                }
                            })
                            .catch(error => {
                                console.error('Error:', error);
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Network Error!',
                                    text: 'Unable to connect to the server. Please try again.',
                                    confirmButtonColor: '#8C1867',
                                    confirmButtonText: 'OK'
                                });
                            });
                    };
                });
            });

        });

        // Change per page function
        function changePerPage(value) {
            const url = new URL(window.location.href);
            url.searchParams.set('per_page', value);
            url.searchParams.set('page', '1');
            window.location.href = url.toString();
        }

        // Change per page function
        // function changePerPage(value) {
        //     const url = new URL(window.location.href);
        //     url.searchParams.set('per_page', value);
        //     url.searchParams.set('page', '1');
        //     window.location.href = url.toString();
        // }
    </script>
@endpush