@extends('layouts.app')

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

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

@section('content')
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-lg-12 col-xl-12">
                <!-- Main Card -->
                <div class="card border-0 shadow-sm">
                    <div class="card-body text-center py-5 px-4" style="min-height: 500px;">
                        
                        <!-- Icon -->
                        <div class="mb-4 mt-4">
                            <i class="fas fa-chair" style="font-size: 40px; color: #8C1867;"></i>
                        </div>

                        <!-- Main Heading -->
                        <h3 class="fw-semibold mb-3" style="color: #1f2937;font-size:20px">Advanced Seating Mode is Disabled</h3>

                        <!-- Description -->
                        <p class="text-muted mb-2" style="font-size: 16px;">
                            Your branch is currently operating in Simple Mode. Table layout management is not available in this mode.
                        </p>
                        <p class="text-muted mb-5" style="font-size: 16px;">
                            Please contact your Restaurant Administrator to switch to Advanced Seating Mode for this branch.
                        </p>

                        <!-- Features Box -->
                        <div class="features-box mx-auto mb-5">
                            <div class="features-header">
                                Features Available in Advanced Mode
                            </div>
                            <div class="features-grid">
                                <div class="feature-item">
                                    {{-- <i class="fa-regular fa-square-check"></i> --}}
                                    <i class="fa-regular fa-square-check text-primary me-2"></i>
                                    <span>Custom table layouts</span>
                                </div>
                                <div class="feature-item">
                                    <i class="fa-regular fa-square-check text-primary me-2"></i>
                                    <span>Capacity Management</span>
                                </div>
                                <div class="feature-item">
                                    <i class="fa-regular fa-square-check text-primary me-2"></i>
                                    <span>Split / Merge tables</span>
                                </div>
                                <div class="feature-item">
                                    <i class="fa-regular fa-square-check text-primary me-2"></i>
                                    <span>Advanced Seating Rules</span>
                                </div>
                            </div>
                        </div>

                        <!-- Action Button -->
                        <button type="button" class="btn btn-primary btn-lg px-5 fs-16" onclick="requestAdvancedSeating()">
                            {{-- <i class="fas fa-cog me-2"></i> --}}
                            Enable Advanced Seating
                        </button>

                    </div>
                </div>

                <!-- Additional Info Cards -->
                {{-- <div class="row mt-4">
                    <div class="col-md-6 mb-3">
                        <div class="info-card">
                            <div class="info-card-icon">
                                <i class="fas fa-check-circle text-success"></i>
                            </div>
                            <div class="info-card-content">
                                <h6 class="fw-bold mb-2">What's Available in Simple Mode</h6>
                                <ul class="list-unstyled mb-0 small text-muted">
                                    <li class="mb-1">• Automatic table assignment</li>
                                    <li class="mb-1">• Basic guest management</li>
                                    <li class="mb-1">• Queue management</li>
                                    <li>• Reservation handling</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 mb-3">
                        <div class="info-card">
                            <div class="info-card-icon">
                                <i class="fas fa-times-circle text-muted"></i>
                            </div>
                            <div class="info-card-content">
                                <h6 class="fw-bold mb-2">Not Available in Simple Mode</h6>
                                <ul class="list-unstyled mb-0 small text-muted">
                                    <li class="mb-1">• Custom table layouts</li>
                                    <li class="mb-1">• Capacity management</li>
                                    <li class="mb-1">• Table merging/splitting</li>
                                    <li>• Advanced seating rules</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div> --}}

            </div>
        </div>
    </div>
@endsection

@push('styles')
<style>
    /* Features Box */
    .features-box {
        background: #F7E9F3;
        border-radius: 12px;
        padding: 0;
        max-width: 580px;
        overflow: hidden;
    }

    .features-header {
        background: #F7E9F3;
        padding: 14px 24px;
        font-weight: 600;
        font-size: 16px;
        color: #1f2937;
        /* border-bottom: 1px solid #f0d4e8; */
    }

    .features-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
        padding: 24px;
    }

    .feature-item {
        display: flex;
        align-items: center;
        padding: 8px 0;
        font-size: 16px;
        color: #272626;
    }

    .feature-item i {
        font-size: 16px;
        flex-shrink: 0;
    }

    /* Info Cards */
    .info-card {
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        padding: 20px;
        display: flex;
        gap: 16px;
        height: 100%;
    }

    .info-card-icon {
        flex-shrink: 0;
    }

    .info-card-icon i {
        font-size: 28px;
    }

    .info-card-content h6 {
        color: #1f2937;
        font-size: 15px;
    }

    /* SweetAlert Custom Styles */
    .adv-seat-popup.swal2-popup {
        background: transparent;
        padding: 0;
        box-shadow: none;
    }

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

    .adv-seat-card-header {
        position: relative;
        padding: 16px 24px;
        font-size: 18px;
        font-weight: 600;
        border-bottom: 1px solid #e5e5e5;
        text-align: left;
        color: #1f2937;
    }

    .adv-seat-card-body {
        padding: 20px 24px;
        font-size: 15px;
        color: #4b5563;
        text-align: left;
        line-height: 1.6;
    }

    .adv-seat-card-footer {
        display: flex;
        justify-content: flex-end;
        gap: 12px;
        padding: 16px 24px;
        border-top: 1px solid #e5e5e5;
        background: #f9fafb;
    }

    .adv-seat-btn {
        border-radius: 6px;
        padding: 10px 24px;
        font-size: 14px;
        font-weight: 500;
        border: none;
        cursor: pointer;
        transition: all 0.2s;
    }

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

    .adv-seat-btn-cancel:hover {
        background: #f3f4f6;
    }

    .adv-seat-btn-confirm {
        background: #8C1867;
        color: #ffffff;
    }

    .adv-seat-btn-confirm:hover {
        background: #6e1350;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .features-grid {
            grid-template-columns: 1fr;
        }

        .adv-seat-card {
            min-width: 340px;
        }
    }
    .fs-16{
        font-size: 16px;
    }
</style>
@endpush

@push('scripts')
<script>
    function requestAdvancedSeating() {
        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,
            backdrop: true,
            customClass: {
                popup: 'adv-seat-popup'
            },
            didOpen: (popup) => {
                popup.querySelector('[data-action="cancel"]').addEventListener('click', () => {
                    Swal.close();
                });

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

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

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