@extends('layouts.app')

@section('title', 'Generate QR - Tiqkets')
@section('page-title', 'Generate QR')

@section('content')
    <div class="container-fluid">
        <div class="row">
            <!-- Restaurant QR Code Card -->
            <div class="col-md-6 mb-4">
                <div class="card qr-preview-card">
                    <div class="card-body text-center p-4">
                        <h5 class="card-title mb-4">Restaurant QR Code</h5>
                        <button type="button" class="btn btn-primary btn-lg" data-bs-toggle="modal"
                            data-bs-target="#restaurantQrModal">
                            <i class="fas fa-qrcode me-2"></i> View QR Code
                        </button>
                    </div>
                </div>
            </div>

            <!-- Takeaway QR Code Card -->
            @if ($isTakeawayEnabled)
                <div class="col-md-6 mb-4">
                    <div class="card qr-preview-card">
                        <div class="card-body text-center p-4">
                            <h5 class="card-title mb-4">Takeaway QR Code</h5>
                            <button type="button" class="btn btn-success btn-lg" data-bs-toggle="modal"
                                data-bs-target="#takeawayQrModal">
                                <i class="fas fa-qrcode me-2"></i> View QR Code
                            </button>
                        </div>
                    </div>
                </div>
            @else
                <div class="col-md-6 mb-4">
                    <div class="card qr-preview-card">
                        <div class="card-body text-center p-4 d-flex align-items-center justify-content-center"
                            style="min-height: 200px;">
                            <div class="text-muted">
                                <i class="fas fa-ban fa-3x mb-3"></i>
                                <h5>Takeaway Not Enabled</h5>
                                <p class="mb-0">Takeaway service is not enabled for this branch.</p>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        </div>

        <!-- Instructions Card -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header bg-light">
                        <h5 class="mb-0">
                            <i class="fas fa-info-circle me-2"></i>QR Code Instructions
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12">
                                <h6 class="text-primary mb-3">
                                    <i class="fas fa-utensils me-2"></i>Restaurant/Takeaway QR Code
                                </h6>
                                <ul class="list-unstyled">
                                    <li class="mb-2">
                                        <i class="fas fa-check text-success me-2"></i>
                                        Customers scan the QR code to join the dining queue, book a table, or join the
                                        takeaway queue.
                                    </li>
                                    <li class="mb-2">
                                        <i class="fas fa-check text-success me-2"></i>
                                        Place the QR code at visible spots like the entrance, reception, takeaway counter,
                                        and waiting area.
                                    </li>
                                    <li class="mb-2">
                                        <i class="fas fa-check text-success me-2"></i>
                                        Scanning the QR instantly opens the correct form based on the customer's need.
                                    </li>
                                    <li class="mb-2">
                                        <i class="fas fa-check text-success me-2"></i>
                                        Customers receive automatic WhatsApp updates on their queue status, table readiness,
                                        or order progress.
                                    </li>
                                    <li class="mb-2">
                                        <i class="fas fa-check text-success me-2"></i>
                                        Reduces crowding at the counter and lets staff focus more on service instead of
                                        managing queues manually.
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Restaurant QR Modal -->
    <div class="modal fade" id="restaurantQrModal" tabindex="-1" aria-labelledby="restaurantQrModalLabel"
        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="restaurantQrModalLabel">Manage QR Code</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" data-modal="restaurantQrModal">Restaurant
                            QR</button>
                        @if ($isTakeawayEnabled)
                            <button class="qr-tab" data-tab="takeaway" data-modal="takeawayQrModal">Takeaway QR</button>
                        @endif
                    </div>

                    <!-- QR Code Display Area -->
                    <div class="qr-display-area" id="qrDisplayArea" data-qr-type="restaurant">
                        <div class="qr-content">
                            <!-- Logo -->
                            <div class="qr-logo-section">
                                <div class="qr-logo">
                                    <i class="fas fa-ticket-alt"></i>
                                </div>
                                <h3 class="qr-brand-name">Tiqkets</h3>
                            </div>

                            <!-- Branch Info -->
                            <div class="qr-branch-info">
                                <h4 class="branch-name">{{ $branch->branch_name }}</h4>
                                <p class="branch-id">ID:{{ $branch->branch_code }}</p>
                            </div>

                            <!-- QR Code -->
                            <div class="qr-code-container">
                                {!! $restaurantQrSvg !!}
                            </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">
                        <span class="qr-dimensions">1206 Fill × 511.33</span>
                        <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"
                                        href="{{ route('location-manager.qr-code.download', ['type' => 'restaurant', 'format' => 'png']) }}">
                                        <i class="fas fa-file-image me-2"></i> PNG
                                    </a>
                                </li>
                                <li>
                                    <a class="dropdown-item"
                                        href="{{ route('location-manager.qr-code.download', ['type' => 'restaurant', 'format' => 'svg']) }}">
                                        <i class="fas fa-vector-square me-2"></i> SVG
                                    </a>
                                </li>
                                <li>
                                    <a class="dropdown-item"
                                        href="{{ route('location-manager.qr-code.download', ['type' => 'restaurant', 'format' => 'pdf']) }}">
                                        <i class="fas fa-file-pdf me-2"></i> PDF
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <button type="button" class="btn btn-primary" onclick="printQRCode('restaurant')">
                            <i class="fas fa-print me-2"></i> Print
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Takeaway QR Modal -->
    @if ($isTakeawayEnabled)
        <div class="modal fade" id="takeawayQrModal" tabindex="-1" aria-labelledby="takeawayQrModalLabel"
            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="takeawayQrModalLabel">Manage QR Code</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" data-tab="restaurant" data-modal="restaurantQrModal">Restaurant
                                QR</button>
                            <button class="qr-tab active" data-tab="takeaway" data-modal="takeawayQrModal">Takeaway
                                QR</button>
                        </div>

                        <!-- QR Code Display Area -->
                        <div class="qr-display-area" id="qrDisplayAreaTakeaway" data-qr-type="takeaway">
                            <div class="qr-content">
                                <!-- Logo -->
                                <div class="qr-logo-section">
                                    <div class="qr-logo">
                                        <i class="fas fa-ticket-alt"></i>
                                    </div>
                                    <h3 class="qr-brand-name">Tiqkets</h3>
                                </div>

                                <!-- Branch Info -->
                                <div class="qr-branch-info">
                                    <h4 class="branch-name">{{ $branch->branch_name }}</h4>
                                    <p class="branch-id">ID:{{ $branch->branch_code }}</p>
                                </div>

                                <!-- QR Code -->
                                <div class="qr-code-container">
                                    {!! $takeawayQrSvg !!}
                                </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">
                            <span class="qr-dimensions">1206 Fill × 511.33</span>
                            <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"
                                            href="{{ route('location-manager.qr-code.download', ['type' => 'takeaway', 'format' => 'png']) }}">
                                            <i class="fas fa-file-image me-2"></i> PNG
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item"
                                            href="{{ route('location-manager.qr-code.download', ['type' => 'takeaway', 'format' => 'svg']) }}">
                                            <i class="fas fa-vector-square me-2"></i> SVG
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item"
                                            href="{{ route('location-manager.qr-code.download', ['type' => 'takeaway', 'format' => 'pdf']) }}">
                                            <i class="fas fa-file-pdf me-2"></i> PDF
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <button type="button" class="btn btn-primary" onclick="printQRCode('takeaway')">
                                <i class="fas fa-print me-2"></i> Print
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
@endsection

@push('styles')
    <style>
        /* Preview Cards */
        .qr-preview-card {
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            transition: all 0.3s;
        }

        .qr-preview-card:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            transform: translateY(-2px);
        }

        /* 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;
            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: linear-gradient(135deg, #f8f4f7 0%, #f0e8ee 100%);
            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 {
            margin-bottom: 32px;
        }

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

        .qr-logo i {
            font-size: 28px;
            color: white;
        }

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

        /* 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;
        }

        .qr-dimensions {
            display: inline-flex;
            align-items: center;
            padding: 8px 16px;
            background: #0ea5e9;
            color: white;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 500;
        }

        /* 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%;
            }

            .qr-dimensions {
                width: 100%;
                justify-content: center;
            }
        }

        /* Print Styles */
        @media print {
            body * {
                visibility: hidden;
            }

            .qr-display-area,
            .qr-display-area * {
                visibility: visible;
            }

            .qr-display-area {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                background: white;
            }

            .modal-header,
            .modal-footer,
            .qr-tabs,
            .btn-close {
                display: none !important;
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const tabs = document.querySelectorAll('.qr-tab');

            tabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    const targetModalId = this.getAttribute('data-modal');
                    const currentModal = bootstrap.Modal.getInstance(this.closest('.modal'));
                    
                    if (currentModal) {
                        currentModal.hide();
                    }

                    setTimeout(() => {
                        const targetModal = new bootstrap.Modal(document.getElementById(targetModalId));
                        targetModal.show();
                    }, 300);
                });
            });
        });

        function printQRCode(type) {
            const displayArea = document.querySelector(`[data-qr-type="${type}"]`);

            if (!displayArea) {
                console.error('QR display area not found for type:', type);
                return;
            }

            const branchName = '{{ $branch->branch_name }}';
            const branchId = '{{ $branch->branch_code }}';
            const svgElement = displayArea.querySelector('svg');
            const svgString = svgElement ? new XMLSerializer().serializeToString(svgElement) : '';

            const printWindow = window.open('', '', 'width=800,height=600');
            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 {
                            margin-bottom: 32px;
                        }
                        .qr-logo {
                            width: 60px;
                            height: 60px;
                            background: #8b2d6b;
                            border-radius: 50%;
                            display: inline-flex;
                            align-items: center;
                            justify-content: center;
                            margin: 0 auto 16px;
                        }
                        .qr-logo i {
                            font-size: 28px;
                            color: white;
                        }
                        .qr-brand-name {
                            font-size: 24px;
                            font-weight: 700;
                            color: #8b2d6b;
                            margin-bottom: 32px;
                            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;
                        }
                        @media print {
                            body {
                                padding: 0;
                            }
                        }
                    </style>
                    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
                </head>
                <body>
                    <div class="qr-content">
                        <div class="qr-logo-section">
                            <div class="qr-logo">
                                <i class="fas fa-ticket-alt"></i>
                            </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);
        }
    </script>
@endpush