@extends('layouts.app')

@section('title', 'Settings - Tiqkets')
@section('page-title', 'Settings')

@section('content')
    <div class="settings-container">
        @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

        <!-- Seat Threshold Section -->
        <div class="settings-section">
            <div class="section-header">
                <div class="d-flex">
                    <div class="section-info">
                        <h6 class="section-title ">Seat Treshold</h6>
                        <p class="section-description">Minimum group size threshold before splitting/sharing tables.</p>
                    </div>
                    <div class="section-info">
                        <form action="{{ route('location-manager.settings.seat-threshold') }}" method="POST"
                            class="inline-form">
                            @csrf
                            <input type="number" name="seat_threshold" class="threshold-input"
                                value="{{ old('seat_threshold', $branch->seat_threshold ?? 6) }}" min="1"
                                max="20" required>
                        </form>
                    </div>
                    <div class="section-info">
                        {{-- <form action="{{ route('location-manager.settings.seat-threshold') }}" method="POST"
                            class="inline-form">
                            @csrf
                            <input type="number" name="seat_threshold" class="threshold-input"
                                value="{{ old('seat_threshold', $branch->seat_threshold ?? 6) }}" min="1"
                                max="20" required>
                        </form> --}}
                    </div>
                </div>
            </div>
        </div>


        <!-- Service Toggles Section -->
        <div class="settings-section">
            <form action="{{ route('location-manager.settings.restaurant') }}" method="POST" id="serviceSettingsForm">
                @csrf


                <!-- Take-away -->
                <div class="setting-item">
                    <div class="setting-control p-2">
                        <label class="toggle-switch">
                            <input type="checkbox" name="takeaway_enabled" value="1"
                                {{ $branch->takeaway_enabled ? 'checked' : '' }} onchange="this.form.submit()">
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                    <div class="setting-info">
                        <h6 class="setting-title">Take-away</h6>
                        <p class="setting-description">When enabled, customers can place take-away orders via kiosk, QR, or
                            staff entry.</p>
                        @php
                            use App\Models\ShortUrl;
                            $takeawayUrl = route('location-manager.takeaway-display', [
                                'bid' => $branch->id,
                                'cid' => $branch->cid,
                            ]);
                        @endphp
                        @if ($branch->takeaway_enabled)
                            <div class="tv-url-container mt-2">
                                <div class="tv-url-box" data-url="{{ ShortUrl::generate($takeawayUrl) }}">
                                    <span class="tv-url-label">Takeaway Display URL:</span>
                                    <a href="{{ ShortUrl::generate($takeawayUrl) }}" target="_blank" class="tv-url-link">
                                        {{ ShortUrl::generate($takeawayUrl) }}
                                    </a>
                                    <button type="button" class="btn-copy" onclick="copyTakeawayUrl(event)"
                                        title="Copy URL">
                                        <i class="fas fa-copy"></i>
                                    </button>
                                </div>
                            </div>
                        @endif
                    </div>

                </div>


                <!-- Reservation -->
                <div class="setting-item">
                    <div class="setting-control p-2">
                        <label class="toggle-switch">
                            <input type="checkbox" name="reservation_enabled" value="1"
                                {{ $branch->reservation_enabled ? 'checked' : '' }} onchange="this.form.submit()">
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                    <div class="setting-info">
                        <h6 class="setting-title">Reservation</h6>
                        <p class="setting-description">Accept or block reservations.</p>

                        @php
                            $reservationUrl = route('location-manager.reservation-form', [
                                'bid' => $branch->id,
                                'cid' => $branch->cid,
                            ]);
                        @endphp

                        @if ($branch->reservation_enabled)
                            <div class="tv-url-container mt-2">
                                <div class="tv-url-box"
                                    data-url="{{ route('location-manager.reservation-form', ['bid' => $branch->id, 'cid' => $branch->cid]) }}">
                                    <span class="tv-url-label">Reservation Form URL:</span>
                                    <a href="{{ ShortUrl::generate($reservationUrl) }}" target="_blank"
                                        class="tv-url-link">
                                        {{ ShortUrl::generate($reservationUrl) }}
                                    </a>
                                    <button type="button" class="btn-copy" onclick="copyReservationUrl(event)"
                                        title="Copy URL">
                                        <i class="fas fa-copy"></i>
                                    </button>
                                </div>
                            </div>
                        @endif
                    </div>

                </div>


                <!-- Wait Time Rules -->
                <div class="setting-item">
                    <div class="setting-control p-2">
                        <label class="toggle-switch">
                            <input type="checkbox" value="1" {{ $branch->wait_time_enabled ? 'checked' : '' }}
                                disabled>

                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                    <div class="setting-info">
                        <h6 class="setting-title">Wait Time Rules</h6>
                        <p class="setting-description">Turn ON/OFF live wait-time tracking.</p>
                    </div>

                </div>

                <!-- Background Audio -->
                <div class="setting-item">
                    <div class="setting-control p-2">
                        <label class="toggle-switch">
                            <input type="checkbox" name="audio_enable" value="1"
                                {{ $branch->audio_enable ? 'checked' : '' }} onchange="this.form.submit()">
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                    <div class="setting-info">
                        <h6 class="setting-title">Background Audio</h6>
                        <p class="setting-description">Restaurant announcements/music play through speakers</p>
                    </div>

                </div>

                <!-- TV Display -->
                <div class="setting-item">
                    <div class="setting-control p-2">
                        <label class="toggle-switch">
                            <input type="checkbox" name="video_enable" value="1"
                                {{ $branch->video_enable ? 'checked' : '' }} onchange="this.form.submit()">
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                    <div class="setting-info">
                        <h6 class="setting-title">TV Display</h6>
                        <p class="setting-description">Show queue status on TV screen.</p>

                        @php
                            $tvUrl = route('location-manager.tv-display', [
                                'bid' => $branch->id,
                                'cid' => $branch->cid,
                            ]);
                        @endphp

                        @if ($branch->video_enable)
                            <div class="tv-url-container mt-2">
                                <div class="tv-url-box">
                                    <span class="tv-url-label">TV Display URL:</span>
                                    <a href="{{ ShortUrl::generate($tvUrl) }}" target="_blank" class="tv-url-link">
                                        {{ ShortUrl::generate($tvUrl) }}
                                    </a>
                                    <button type="button" class="btn-copy" onclick="copyTVUrl()" title="Copy URL">
                                        <i class="fas fa-copy"></i>
                                    </button>
                                </div>
                            </div>
                        @endif
                    </div>

                </div>

                <!-- Advanced Seating -->
                <div class="setting-item">
                    <div class="setting-control p-2">
                        <label class="toggle-switch">
                            <input type="checkbox" name="advanced_seating_enabled" value="1"
                                {{ $branch->advanced_seating_enabled ? 'checked' : '' }}
                                onchange="confirmAdvancedSeatingToggle(this)">
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                    <div class="setting-info">
                        <h6 class="setting-title">Advanced Seating</h6>
                        <p class="setting-description">Enable advanced table layout management with custom table
                            configurations and capacity settings.</p>
                    </div>

                </div>
                <!-- Gender Enable -->
                <div class="setting-item">
                    <div class="setting-control p-2">
                        <label class="toggle-switch">
                            <input type="checkbox" name="gender_enable" value="1"
                                {{ $branch->gender_enable ? 'checked' : '' }} onchange="this.form.submit()">
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                    <div class="setting-info">
                        <h6 class="setting-title">Gender Selection</h6>
                        <p class="setting-description">Enable customers to select gender for table allocation.</p>
                    </div>
                </div>
                <!-- Split / Share Enable -->
                <div class="setting-item">
                    <div class="setting-control p-2">
                        <label class="toggle-switch">
                            <input type="checkbox" name="split_share_enable" value="1"
                                {{ $branch->split_share_enable ? 'checked' : '' }} onchange="this.form.submit()">
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                    <div class="setting-info">
                        <h6 class="setting-title">Split/Share Seating</h6>
                        <p class="setting-description">Enable splitting or sharing tables based on seat threshold.</p>
                    </div>
                </div>

            </form>
        </div>


        <!-- Notification Setup Section -->
        <div class="settings-section mt-4">
            <div class="notification-header">
                <div>
                    <h5 class="section-title">Notification Setup</h5>
                    <p class="section-description">Manage up to 5 notification contacts for queue monitoring, reports, and
                        alerts. Configure when and how your team gets notified about restaurant operations.</p>
                </div>
                <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal"
                    data-bs-target="#addContactModal">
                    Add Contact
                </button>
            </div>

            <!-- Notification Contacts Table -->
            @if ($notificationContacts->count() > 0)
                <div class="notification-table-wrapper">
                    <table class="notification-table">
                        <thead>
                            <tr>
                                <th style="width: 60px;">S. No.</th>
                                <th>Contact Name</th>
                                <th>Number</th>
                                <th>Alert Types</th>
                                <th style="width: 80px;"></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($notificationContacts as $index => $contact)
                                <tr style="background: #fff">
                                    <td>{{ $index + 1 }}</td>
                                    <td class="contact-name">{{ $contact->name }}</td>
                                    <td class="contact-number">{{ $contact->phone_number }}</td>
                                    <td>
                                        <div class="alert-tags">
                                            @if ($contact->queue_start)
                                                <span class="alert-tag">Queue Start</span>
                                            @endif
                                            @if ($contact->queue_report)
                                                <span class="alert-tag">Queue Report</span>
                                            @endif
                                            @if ($contact->high_booking_alert)
                                                <span class="alert-tag">Alert when bookings >
                                                    {{ $contact->booking_threshold }}</span>
                                            @endif
                                            @if ($contact->high_waiting_alert)
                                                <span class="alert-tag">Alert when waiting >
                                                    {{ $contact->waiting_threshold }}</span>
                                            @endif
                                        </div>
                                    </td>
                                    <td>
                                        <div class="action-buttons">
                                            <button class="btn-icon edit-contact" title="Edit"
                                                data-contact-id="{{ $contact->id }}"
                                                data-contact-name="{{ $contact->name }}"
                                                data-phone-number="{{ $contact->phone_number }}"
                                                data-queue-start="{{ $contact->queue_start }}"
                                                data-queue-report="{{ $contact->queue_report }}"
                                                data-high-booking-alert="{{ $contact->high_booking_alert }}"
                                                data-high-waiting-alert="{{ $contact->high_waiting_alert }}"
                                                data-booking-threshold="{{ $contact->booking_threshold }}"
                                                data-waiting-threshold="{{ $contact->waiting_threshold }}">

                                                <i class="fas fa-pen"></i>
                                            </button>
                                            <button class="btn-icon delete-contact" title="Delete"
                                                data-contact-id="{{ $contact->id }}"
                                                data-contact-name="{{ $contact->name }}">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <div class="empty-state">
                    <i class="fas fa-bell-slash fa-3x text-muted mb-3"></i>
                    <p class="text-muted">No notification contacts configured yet.</p>
                </div>
            @endif
        </div>
    </div>

    <!-- Add/Edit Contact Modal -->
    <div class="modal fade" id="addContactModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="contactModalTitle">Add Notification Contact</h5>
                    {{-- <button type="button" class="btn-close" data-bs-dismiss="modal"></button> --}}
                </div>
                <form id="contactForm" method="POST"
                    action="{{ route('location-manager.settings.notification-contacts.store') }}">
                    @csrf
                    <input type="hidden" name="_method" id="contactMethod" value="POST">
                    <input type="hidden" name="contact_id" id="contactId">

                    <div class="modal-body">
                        <div class="row">

                            <div class="col-md-6 mb-3">
                                <label class="form-label">Name <span class="text-danger">*</span></label>
                                <input type="text" name="name" id="contactName" class="form-control" required>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="form-label">Phone Number <span class="text-danger">*</span></label>
                                <input type="number" name="phone_number" id="contactPhone" class="form-control"
                                    required>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Alert Types <span class="text-danger">*</span></label>
                                <div class="alert-types-grid">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="alert_types[]"
                                            value="queue_start" id="alert_queue_start">
                                        <label class="form-check-label" for="alert_queue_start">
                                            Queue Start
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="alert_types[]"
                                            value="queue_report" id="alert_queue_report">
                                        <label class="form-check-label" for="alert_queue_report">
                                            Queue Report
                                        </label>
                                    </div>
                                    <div class="form-check d-flex align-items-center gap-2">
                                        <input class="form-check-input" type="checkbox" name="alert_types[]"
                                            value="high_booking_alert" id="alert_high_booking">

                                        <label class="form-check-label" for="alert_high_booking">
                                            Alert when bookings >
                                        </label>

                                        <input type="number" min="1" class="form-control d-none"
                                            style="width: 90px" name="booking_threshold" id="booking_threshold">
                                    </div>

                                    <div class="form-check d-flex align-items-center gap-2">
                                        <input class="form-check-input" type="checkbox" name="alert_types[]"
                                            value="high_waiting_alert" id="alert_high_waiting">

                                        <label class="form-check-label" for="alert_high_waiting">
                                            Alert when waiting >
                                        </label>

                                        <input type="number" min="1" class="form-control d-none"
                                            style="width: 90px" name="waiting_threshold" id="waiting_threshold">
                                    </div>


                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Save </button>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <!-- Delete Confirmation Modal -->
    <div class="modal fade" id="deleteContactModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Confirm Delete</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete contact "<strong id="deleteContactName"></strong>"?</p>
                    <p class="text-danger mb-0">
                        <i class="fas fa-exclamation-triangle me-1"></i>
                        This action cannot be undone.
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <form id="deleteContactForm" method="POST">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger">Delete Contact</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .settings-container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .settings-section {
            /* background: #fff; */
            border-radius: 8px;
            /* padding: 24px;
                                                                                                                                margin-bottom: 20px; */
            /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); */
        }

        /* Inline section header for Seat Threshold */
        .section-header-inline {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .section-info {
            flex: 1;
        }

        .section-title {
            font-size: 16px;
            font-weight: 600;
            color: #111827;
            margin-bottom: 4px;
        }

        .section-description {
            font-size: 13px;
            color: #6b7280;
            margin: 0;
            line-height: 1.5;
        }

        .inline-form {
            margin-left: 20px;
        }

        .threshold-input {
            width: 80px;
            height: 40px;
            padding: 0 12px;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            font-size: 14px;
            text-align: center;
            font-weight: 500;
        }

        .threshold-input:focus {
            outline: none;
            border-color: #8C1867;
            box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
        }

        /* Setting Items */
        .setting-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 18px 0;
            /* border-bottom: 1px solid #f3f4f6; */
        }

        .setting-item:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        .setting-item:first-child {
            padding-top: 0;
        }

        .setting-info {
            flex: 1;
            padding-right: 20px;
        }

        .setting-title {
            font-size: 15px;
            font-weight: 600;
            color: #111827;
            margin-bottom: 4px;
        }

        .setting-control {
            flex-shrink: 0;
        }

        /* Toggle Switch */
        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 48px;
            height: 24px;
            cursor: pointer;
        }

        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .toggle-slider {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #cbd5e1;
            border-radius: 24px;
            transition: 0.3s;
        }

        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            border-radius: 50%;
            transition: 0.3s;
        }

        .toggle-switch input:checked+.toggle-slider {
            background-color: #8C1867;
        }

        .toggle-switch input:checked+.toggle-slider:before {
            transform: translateX(24px);
        }

        /* Notification Section */
        .notification-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 20px;
            gap: 20px;
        }

        .btn-add-contact {
            padding: 8px 16px;
            background: #8C1867;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: background 0.2s;
            white-space: nowrap;
        }

        .btn-add-contact:hover {
            background: #8C1867;
        }

        .notification-table-wrapper {
            overflow-x: auto;
            margin-top: 16px;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
        }

        .notification-table {
            width: 100%;
            border-collapse: collapse;
        }

        .notification-table thead {
            background: #f9fafb;
        }

        .notification-table thead th {
            padding: 12px 16px;
            text-align: left;
            font-size: 12px;
            font-weight: 600;
            color: #6b7280;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border-bottom: 1px solid #e5e7eb;
        }

        .notification-table tbody tr {
            border-bottom: 1px solid #f3f4f6;
        }

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

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

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

        .contact-name {
            font-weight: 500;
        }

        .contact-number {
            color: #6b7280;
        }

        .alert-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        .alert-tag {
            display: inline-block;
            padding: 4px 10px;
            background: #f3f4f6;
            color: #374151;
            border-radius: 4px;
            font-size: 11px;
            font-weight: 500;
            white-space: nowrap;
        }

        .action-buttons {
            display: flex;
            gap: 6px;
            justify-content: flex-end;
        }

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

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

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

        .empty-state i {
            opacity: 0.3;
        }

        /* Alert Types Grid */
        .alert-types-grid {
            display: grid;
            gap: 12px;
        }

        .form-check {
            padding-left: 1.5rem;
        }

        .form-check-input {
            width: 18px;
            height: 18px;
            margin-top: 0.125rem;
        }

        .form-check-label {
            font-size: 14px;
            color: #374151;
            cursor: pointer;
        }

        /* TV URL Container */
        .tv-url-container {
            margin-top: 12px;
        }

        .tv-url-box {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 12px;
            background: #f9fafb;
            border: 1px solid #e5e7eb;
            border-radius: 6px;
        }

        .tv-url-label {
            font-size: 12px;
            font-weight: 500;
            color: #6b7280;
            white-space: nowrap;
        }

        .tv-url-link {
            flex: 1;
            font-size: 12px;
            color: #8C1867;
            text-decoration: none;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .tv-url-link:hover {
            color: #8C1867;
            text-decoration: underline;
        }

        .btn-copy {
            padding: 5px 8px;
            background: #fff;
            border: 1px solid #d1d5db;
            border-radius: 4px;
            color: #6b7280;
            cursor: pointer;
            transition: all 0.2s;
            font-size: 12px;
        }

        .btn-copy:hover {
            background: #f3f4f6;
            color: #374151;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .settings-section {
                padding: 16px;
            }

            .section-header-inline {
                flex-direction: column;
                align-items: flex-start;
                gap: 12px;
            }

            .inline-form {
                margin-left: 0;
            }

            .setting-item {
                flex-direction: column;
                align-items: flex-start;
                gap: 12px;
            }

            .setting-control {
                align-self: flex-end;
            }

            .notification-header {
                flex-direction: column;
            }

            .notification-table {
                font-size: 13px;
            }

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

            .alert-tags {
                flex-direction: column;
            }
        }

        .adv-seat-popup.swal2-popup {
            background: transparent;
            padding: 0;
            box-shadow: none;
        }

        .adv-seat-card {
            background: #ffffff;
            border-radius: 4px;
            border: 1px solid #d0d7e2;
            min-width: 360px;
            max-width: 420px;
            overflow: hidden;
            font-family: inherit;
        }

        /* blue top border like Figma */
        .adv-seat-card-header {
            position: relative;
            padding: 14px 20px;
            font-size: 20px;
            font-weight: 600;
            border-bottom: 1px solid #e5e5e5;
            text-align: left;
        }

        .adv-seat-card-header::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            /* background: #1c9dd9; */
            /* adjust to exact blue from design */
        }

        .adv-seat-card-body {
            padding: 12px 20px 20px;
            font-size: 16px;
            color: #343a40;
            text-align: left;
        }

        /* grey separator above buttons */
        .adv-seat-card-footer {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            padding: 12px 20px 16px;
            border-top: 1px solid #e5e5e5;
        }

        .adv-seat-btn {
            border-radius: 4px;
            padding: 8px 18px;
            font-size: 14px;
            border: none;
        }

        .adv-seat-btn-cancel {
            background: #ffffff;
            border: 1px solid #d0d0d0;
            color: #333;
        }

        .adv-seat-btn-confirm {
            background: #aa0066;
            /* your magenta */
            color: #ffffff;
        }
    </style>
@endpush

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Auto-submit seat threshold on blur
            document.querySelector('input[name="seat_threshold"]')?.addEventListener('blur', function() {
                this.closest('form').submit();
            });

            // Modal instances
            const addContactModal = new bootstrap.Modal(document.getElementById('addContactModal'));
            const deleteContactModal = new bootstrap.Modal(document.getElementById('deleteContactModal'));

            // Edit Contact
            // document.querySelectorAll('.edit-contact').forEach(button => {
            //     button.addEventListener('click', function() {

            //         // ✅ SET FORM MODE
            //         document.getElementById('contactModalTitle').textContent =
            //             'Edit Notification Contact';
            //         document.getElementById('contactMethod').value = 'PUT';
            //         document.getElementById('contactForm').action =
            //             `{{ url('location-manager/settings/notification-contacts') }}/${this.dataset.contactId}`;

            //         // ✅ SET BASIC DETAILS (🔥 THIS WAS MISSING)
            //         document.getElementById('contactName').value = this.dataset.contactName;
            //         document.getElementById('contactPhone').value = this.dataset.phoneNumber;

            //         // ✅ SET CHECKBOXES
            //         const bookingCheckbox = document.getElementById('alert_high_booking');
            //         const waitingCheckbox = document.getElementById('alert_high_waiting');
            //         alert(this.dataset.highBookingAlert);
            //         bookingCheckbox.checked = this.dataset.highBookingAlert === '1';
            //         waitingCheckbox.checked = this.dataset.highWaitingAlert === '1';

            //         // ✅ SET THRESHOLD VALUES
            //         document.getElementById('booking_threshold').value =
            //             this.dataset.bookingThreshold || '';

            //         document.getElementById('waiting_threshold').value =
            //             this.dataset.waitingThreshold || '';

            //         // ✅ TOGGLE INPUT VISIBILITY
            //         toggleThreshold(bookingCheckbox, document.getElementById('booking_threshold'));
            //         toggleThreshold(waitingCheckbox, document.getElementById('waiting_threshold'));

            //         // ✅ SHOW MODAL
            //         addContactModal.show();
            //     });
            // });
            document.querySelectorAll('.edit-contact').forEach(button => {
                button.addEventListener('click', function() {

                    document.getElementById('contactModalTitle').textContent =
                        'Edit Notification Contact';
                    document.getElementById('contactMethod').value = 'PUT';
                    document.getElementById('contactForm').action =
                        `{{ url('location-manager/settings/notification-contacts') }}/${this.dataset.contactId}`;

                    // Basic fields
                    document.getElementById('contactName').value = this.dataset.contactName;
                    document.getElementById('contactPhone').value = this.dataset.phoneNumber;

                    // ✅ Queue alerts (FIX)
                    document.getElementById('alert_queue_start').checked =
                        this.dataset.queueStart === '1';

                    document.getElementById('alert_queue_report').checked =
                        this.dataset.queueReport === '1';

                    // Booking & Waiting alerts
                    const bookingCheckbox = document.getElementById('alert_high_booking');
                    const waitingCheckbox = document.getElementById('alert_high_waiting');

                    bookingCheckbox.checked = this.dataset.highBookingAlert === '1';
                    waitingCheckbox.checked = this.dataset.highWaitingAlert === '1';

                    document.getElementById('booking_threshold').value =
                        this.dataset.bookingThreshold || '';

                    document.getElementById('waiting_threshold').value =
                        this.dataset.waitingThreshold || '';

                    toggleThreshold(bookingCheckbox, document.getElementById('booking_threshold'));
                    toggleThreshold(waitingCheckbox, document.getElementById('waiting_threshold'));

                    addContactModal.show();
                });
            });



            // Reset modal on close
            document.getElementById('addContactModal').addEventListener('hidden.bs.modal', function() {
                document.getElementById('contactModalTitle').textContent = 'Add Notification Contact';
                document.getElementById('contactMethod').value = 'POST';
                document.getElementById('contactForm').action =
                    '{{ route('location-manager.settings.notification-contacts.store') }}';
                document.getElementById('contactForm').reset();
            });

            // Delete Contact
            // document.querySelectorAll('.delete-contact').forEach(button => {
            //     button.addEventListener('click', function() {
            //         const contactId = this.dataset.contactId;
            //         const contactName = this.dataset.contactName;

            //         document.getElementById('deleteContactName').textContent = contactName;
            //         document.getElementById('deleteContactForm').action =
            //             `{{ url('location-manager/settings/notification-contacts') }}/${contactId}`;

            //         deleteContactModal.show();
            //     });
            // });
            document.querySelectorAll('.delete-contact').forEach(button => {
                button.addEventListener('click', function() {
                    const contactId = this.dataset.contactId;
                    const contactName = this.dataset.contactName;

                    // Set form action as before (Laravel DELETE form)
                    const form = document.getElementById('deleteContactForm');
                    form.action =
                        `{{ url('location-manager/settings/notification-contacts') }}/${contactId}`;

                    Swal.fire({
                        html: `
                <div class="adv-seat-card">
                    <div class="adv-seat-card-header">
                        Delete Contact
                    </div>
                    <div class="adv-seat-card-body">
                        Are you sure you want to delete contact
                        "<strong>${contactName}</strong>"?
                        <br><br>
                        <span style="color:#dc2626;">
                            <i class="fas fa-exclamation-triangle me-1"></i>
                            This action cannot be undone.
                        </span>
                    </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">
                            Delete
                        </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();
                        form.submit(); // submit Laravel Delete form
                    };
                });
            });


            // Form validation
            document.getElementById('contactForm').addEventListener('submit', function(e) {
                const checkboxes = this.querySelectorAll('input[name="alert_types[]"]');
                const checked = Array.from(checkboxes).some(cb => cb.checked);

                if (!checked) {
                    e.preventDefault();
                    Swal.fire({
                        icon: 'warning',
                        title: 'Alert Required',
                        text: 'Please select at least one alert type.',
                        confirmButtonColor: '#8C1867'
                    });

                    return false;
                }
            });
        });

        // Advanced Seating Toggle Confirmation
        function confirmAdvancedSeatingToggle(checkbox) {
            const isEnabling = checkbox.checked;

            // Immediately revert UI until user confirms
            checkbox.checked = !checkbox.checked;

            if (isEnabling) {
                showAdvancedSeatingEnableDialog(() => {
                    checkbox.checked = true;
                    checkbox.form.submit();
                });
            } else {
                showAdvancedSeatingDisableDialog(() => {
                    checkbox.checked = false;
                    checkbox.form.submit();
                });
            }
        }



        function showAdvancedSeatingEnableDialog(onConfirm) {
            Swal.fire({
                html: `
                    <div class="adv-seat-card">
                        <div class="adv-seat-card-header">
                            Enable Advanced Seating
                        </div>
                        <div class="adv-seat-card-body">
                            Enabling Advanced Seating will allow you to create and manage custom 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,
                customClass: {
                    popup: 'adv-seat-popup'
                }
            }).then(() => {});

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

        function showAdvancedSeatingDisableDialog(onConfirm) {
            Swal.fire({
                html: `
            <div class="adv-seat-card">
                <div class="adv-seat-card-header">
                    Switch Seating Mode
                </div>
                <div class="adv-seat-card-body">
                    Are you sure you want to disable advanced seating?
                    You will be reverted back to simple seat counting mode.
                </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, proceed
                    </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();
                onConfirm && onConfirm();
            };
        }

        function copyTVUrl() {
            const linkElement = document.querySelector('.tv-url-link');
            const urlText = linkElement.href;

            navigator.clipboard.writeText(urlText).then(function() {
                const btn = event.target.closest('.btn-copy');
                const originalHTML = btn.innerHTML;
                btn.innerHTML = '<i class="fas fa-check"></i>';
                btn.style.color = '#10b981';

                setTimeout(() => {
                    btn.innerHTML = originalHTML;
                    btn.style.color = '#6b7280';
                }, 2000);
            }).catch(function(err) {
                console.error('Failed to copy URL:', err);
            });
        }

        function copyTakeawayUrl(event) {
            const urlBox = event.target.closest('.tv-url-box');
            const urlText = urlBox.getAttribute('data-url');

            navigator.clipboard.writeText(urlText).then(function() {
                const btn = event.target.closest('.btn-copy');
                const originalHTML = btn.innerHTML;
                btn.innerHTML = '<i class="fas fa-check"></i>';
                btn.style.color = '#10b981';

                setTimeout(() => {
                    btn.innerHTML = originalHTML;
                    btn.style.color = '#6b7280';
                }, 2000);
            }).catch(function(err) {
                console.error('Failed to copy URL:', err);
                Swal.fire({
                    icon: 'error',
                    title: 'Copy Failed',
                    text: 'Unable to copy the URL. Please try again.',
                    confirmButtonColor: '#8C1867'
                });

            });
        }

        function copyReservationUrl(event) {
            const urlBox = event.target.closest('.tv-url-box');
            const urlText = urlBox.getAttribute('data-url');

            navigator.clipboard.writeText(urlText).then(function() {
                const btn = event.target.closest('.btn-copy');
                const originalHTML = btn.innerHTML;
                btn.innerHTML = '<i class="fas fa-check"></i>';
                btn.style.color = '#10b981';

                setTimeout(() => {
                    btn.innerHTML = originalHTML;
                    btn.style.color = '#6b7280';
                }, 2000);
            }).catch(function(err) {
                console.error('Failed to copy URL:', err);
                alert('Failed to copy URL');
            });
        }

        const bookingCheckbox = document.getElementById('alert_high_booking');
        const bookingInput = document.getElementById('booking_threshold');

        const waitingCheckbox = document.getElementById('alert_high_waiting');
        const waitingInput = document.getElementById('waiting_threshold');

        // Toggle function
        function toggleThreshold(checkbox, input) {
            if (checkbox.checked) {
                input.classList.remove('d-none');
                input.required = true;
            } else {
                input.classList.add('d-none');
                input.required = false;
                input.value = '';
            }
        }

        // On change
        bookingCheckbox.addEventListener('change', () =>
            toggleThreshold(bookingCheckbox, bookingInput)
        );

        waitingCheckbox.addEventListener('change', () =>
            toggleThreshold(waitingCheckbox, waitingInput)
        );

        // 🔥 IMPORTANT: run once on page load / edit modal open
        toggleThreshold(bookingCheckbox, bookingInput);
        toggleThreshold(waitingCheckbox, waitingInput);
    </script>
@endpush