<?php include "../autoload.php"; ?>

<script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/lucide@latest"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
        .gradient-bg {
            background: linear-gradient(135deg, #1e40af 0%, #60a5fa 100%);
        }
        .result-card {
            background: linear-gradient(145deg, #ffffff, #f0f7ff);
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
            transition: transform 0.3s ease, opacity 0.3s ease;
        }
        .result-card.hidden {
            transform: translateY(20px);
            opacity: 0;
        }
        .result-card:not(.hidden) {
            transform: translateY(0);
            opacity: 1;
        }
        .input-container {
            background: linear-gradient(145deg, #ffffff, #f9fafb);
            transition: all 0.3s ease;
        }
        .input-container:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
        }
        .range-input::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            background: #1e40af;
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        }
        .range-input::-moz-range-thumb {
            width: 20px;
            height: 20px;
            background: #1e40af;
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        }
        .btn-primary {
            transition: all 0.3s ease;
        }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
        }
        .visual-container {
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect fill="%23f3f4f6" width="100" height="100"/><circle cx="50" cy="50" r="30" fill="%23dbeafe" opacity="0.5"/></svg>') repeat;
            border-radius: 12px;
            box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        select {
            appearance: none;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><path fill="%234b5563" d="M7 10l5 5 5-5H7z"/></svg>');
            background-repeat: no-repeat;
            background-position: right 0.75rem center;
            background-size: 12px;
        }
    </style>


            <!-- Input Form -->
            <div class="mb-12">
                <h2 class="text-3xl font-semibold text-gray-800 mb-6">Enter Your Luggage & Airline Details</h2>
                <p class="text-gray-500 mb-8 text-lg">Slide or type to input your luggage dimensions and select an airline to check carry-on compliance.</p>
                <form id="luggageSizeForm" class="space-y-8">
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                        <div class="space-y-3">
                            <label for="luggageLength" class="block text-sm font-medium text-gray-700">Luggage Length (in)</label>
                            <div class="relative flex items-center">
                                <i data-lucide="ruler" class="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                                <input type="number" id="luggageLength" class="pl-12 pr-4 py-3 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-600 focus:ring focus:ring-blue-600 focus:ring-opacity-50 text-lg" placeholder="22.0" step="0.1" min="10" max="30" value="22.0" required>
                            </div>
                            <input type="range" id="luggageLengthRange" class="range-input w-full h-2 bg-gray-200 rounded-lg cursor-pointer" min="10" max="30" step="0.1" value="22">
                            <p id="luggageLengthValue" class="text-sm text-gray-500">22.0 in</p>
                        </div>
                        <div class="space-y-3">
                            <label for="luggageWidth" class="block text-sm font-medium text-gray-700">Luggage Width (in)</label>
                            <div class="relative flex items-center">
                                <i data-lucide="maximize" class="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                                <input type="number" id="luggageWidth" class="pl-12 pr-4 py-3 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-600 focus:ring focus:ring-blue-600 focus:ring-opacity-50 text-lg" placeholder="14.0" step="0.1" min="5" max="20" value="14.0" required>
                            </div>
                            <input type="range" id="luggageWidthRange" class="range-input w-full h-2 bg-gray-200 rounded-lg cursor-pointer" min="5" max="20" step="0.1" value="14">
                            <p id="luggageWidthValue" class="text-sm text-gray-500">14.0 in</p>
                        </div>
                        <div class="space-y-3">
                            <label for="luggageHeight" class="block text-sm font-medium text-gray-700">Luggage Height (in)</label>
                            <div class="relative flex items-center">
                                <i data-lucide="expand" class="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                                <input type="number" id="luggageHeight" class="pl-12 pr-4 py-3 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-600 focus:ring focus:ring-blue-600 focus:ring-opacity-50 text-lg" placeholder="9.0" step="0.1" min="5" max="15" value="9.0" required>
                            </div>
                            <input type="range" id="luggageHeightRange" class="range-input w-full h-2 bg-gray-200 rounded-lg cursor-pointer" min="5" max="15" step="0.1" value="9">
                            <p id="luggageHeightValue" class="text-sm text-gray-500">9.0 in</p>
                        </div>
                        <div class="space-y-3">
                            <label for="airline" class="block text-sm font-medium text-gray-700">Airline</label>
                            <div class="relative flex items-center">
                                <i data-lucide="plane" class="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                                <select id="airline" class="pl-12 pr-10 py-3 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-600 focus:ring focus:ring-blue-600 focus:ring-opacity-50 text-lg" required>
                                    <option value="American Airlines">American Airlines</option>
                                    <option value="Delta Air Lines">Delta Air Lines</option>
                                    <option value="United Airlines">United Airlines</option>
                                    <option value="Southwest Airlines">Southwest Airlines</option>
                                    <option value="Frontier Airlines">Frontier Airlines</option>
                                    <option value="Ryanair">Ryanair</option>
                                    <option value="EasyJet">EasyJet</option>
                                    <option value="Air France">Air France</option>
                                    <option value="Asiana Airlines">Asiana Airlines</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <button type="submit" class="btn-primary w-full bg-blue-600 text-white py-4 px-8 rounded-xl hover:bg-blue-700 flex items-center justify-center text-lg">
                        <i data-lucide="search" class="mr-3 h-5 w-5"></i>
                        Check Luggage Fit
                    </button>
                </form>
            </div>

            <!-- Result Section -->
            <div id="resultSection" class="result-card rounded-2xl p-10 hidden">
                <h2 class="text-3xl font-semibold text-gray-800 mb-6 flex items-center">
                    <i data-lucide="check-circle-2" class="mr-3 text-green-500 h-7 w-7"></i>
                    Your Luggage Fit Assessment
                </h2>
                <div id="resultOutput" class="text-gray-700 space-y-6 text-base">
                    <!-- Results will be dynamically inserted here -->
                </div>
                <div class="mt-10 flex flex-col md:flex-row justify-between items-center gap-6">
                    <div class="flex items-center text-blue-600">
                        <i data-lucide="info" class="mr-2 h-5 w-5"></i>
                        <p class="text-sm font-medium">Based on airline carry-on size and weight restrictions as of 2025.</p>
                    </div>
                    <button id="downloadPdf" class="btn-primary bg-green-600 text-white py-3 px-8 rounded-xl hover:bg-blue-700 flex items-center text-base">
                        <i data-lucide="download" class="mr-2 h-5 w-5"></i>
                        Download PDF Report
                    </button>
                </div>
                <!-- Visual Representation -->
                <div class="mt-10 visual-container p-8">
                    <h3 class="text-xl font-medium text-gray-800 mb-4 flex items-center">
                        <i data-lucide="luggage" class="mr-3 text-blue-500 h-6 w-6"></i>
                        Luggage Size Visualization
                    </h3>
                    <div class="relative w-full h-96 bg-gray-200 rounded-xl overflow-hidden shadow-lg">
                        <canvas id="luggageCanvas" class="w-full h-full"></canvas>
                    </div>
                    <p class="text-sm text-gray-600 mt-4">Visualization showing your luggage size compared to the airline's carry-on limit.</p>
                </div>
                <!-- Expert Insights -->
                <div class="mt-10 bg-blue-50 p-8 rounded-xl shadow-sm">
                    <h3 class="text-xl font-medium text-gray-800 mb-4 flex items-center">
                        <i data-lucide="lightbulb" class="mr-3 text-yellow-500 h-6 w-6"></i>
                        Expert Tips for Carry-On Compliance
                    </h3>
                    <ul class="list-none space-y-4 text-gray-700 text-sm">
                        <li class="flex items-start">
                            <i data-lucide="check" class="mr-2 text-green-500 h-5 w-5"></i>
                            <span><strong>Measure Accurately:</strong> Include handles and wheels in your luggage measurements to meet airline restrictions.</span>
                        </li>
                        <li class="flex items-start">
                            <i data-lucide="check" class="mr-2 text-green-500 h-5 w-5"></i>
                            <span><strong>Weight Limits:</strong> Check airline weight restrictions (e.g., Ryanair: 10 kg, EasyJet: 15 kg) to avoid fees.</span>
                        </li>
                        <li class="flex items-start">
                            <i data-lucide="check" class="mr-2 text-green-500 h-5 w-5"></i>
                            <span><strong>Soft vs. Hard Case:</strong> Soft-sided bags may fit better in tight overhead bins due to flexibility.</span>
                        </li>
                        <li class="flex items-start">
                            <i data-lucide="check" class="mr-2 text-green-500 h-5 w-5"></i>
                            <span><strong>Personal Item:</strong> Most airlines allow a smaller personal item (e.g., 16 x 10 x 8 in) under the seat.</span>
                        </li>
                        <li class="flex items-start">
                            <i data-lucide="check" class="mr-2 text-green-500 h-5 w-5"></i>
                            <span><strong>Check Restrictions:</strong> Always verify airline policies before travel, as rules may vary for international flights.</span>
                        </li>
                    </ul>
                </div>
            </div>


    <script>
        // Initialize Lucid Icons
        lucide.createIcons();

        // Sync range and number inputs
        function syncInputs(numberId, rangeId, valueId) {
            const numberInput = document.getElementById(numberId);
            const rangeInput = document.getElementById(rangeId);
            const valueDisplay = document.getElementById(valueId);

            numberInput.addEventListener('input', () => {
                rangeInput.value = numberInput.value;
                valueDisplay.textContent = `${parseFloat(numberInput.value).toFixed(1)} in`;
            });
            rangeInput.addEventListener('input', () => {
                numberInput.value = rangeInput.value;
                valueDisplay.textContent = `${parseFloat(rangeInput.value).toFixed(1)} in`;
            });
        }

        syncInputs('luggageLength', 'luggageLengthRange', 'luggageLengthValue');
        syncInputs('luggageWidth', 'luggageWidthRange', 'luggageWidthValue');
        syncInputs('luggageHeight', 'luggageHeightRange', 'luggageHeightValue');

        // Form Submission
        document.getElementById('luggageSizeForm').addEventListener('submit', function (e) {
            e.preventDefault();
            checkLuggageFit();
        });

        function checkLuggageFit() {
            const luggageLength = parseFloat(document.getElementById('luggageLength').value);
            const luggageWidth = parseFloat(document.getElementById('luggageWidth').value);
            const luggageHeight = parseFloat(document.getElementById('luggageHeight').value);
            const airline = document.getElementById('airline').value;

            if (!luggageLength || !luggageWidth || !luggageHeight || luggageLength < 10 || luggageWidth < 5 || luggageHeight < 5) {
                alert('Please enter valid luggage dimensions (Length ≥ 10 in, Width/Height ≥ 5 in).');
                return;
            }

            // Airline carry-on limits (in inches, including handles and wheels)[](https://www.briggs-riley.com/pages/carry-on-luggage-sizes-dimensions-by-airline)[](https://www.travelandleisure.com/style/travel-bags/airline-carry-on-luggage-size-guide)[](https://horizn-studios.com/blogs/journal/airlines-standard-sizes-for-cabin-luggage)
            const airlineLimits = {
                'American Airlines': { length: 22, width: 14, height: 9, weight: 'No Limit' },
                'Delta Air Lines': { length: 22, width: 14, height: 9, weight: 'No Limit' },
                'United Airlines': { length: 22, width: 14, height: 9, weight: 'No Limit' },
                'Southwest Airlines': { length: 24, width: 16, height: 10, weight: 'No Limit' },
                'Frontier Airlines': { length: 24, width: 16, height: 10, weight: '35 lb' },
                'Ryanair': { length: 22, width: 16, height: 8, weight: '10 kg' },
                'EasyJet': { length: 22, width: 18, height: 10, weight: '15 kg' },
                'Air France': { length: 22, width: 14, height: 9, weight: '12 kg' },
                'Asiana Airlines': { length: 21.5, width: 15.5, height: 8, weight: '10 kg' }
            };

            const limits = airlineLimits[airline];
            const linearInches = luggageLength + luggageWidth + luggageHeight;
            const maxLinearInches = limits.length + limits.width + limits.height;

            // Check fit
            const fitsDimensions = luggageLength <= limits.length && luggageWidth <= limits.width && luggageHeight <= limits.height;
            const fitsLinear = linearInches <= 45; // Common linear inch limit[](https://www.waywardblog.com/carry-on-luggage-size-guide-us-airlines/)
            const luggageFit = fitsDimensions ? 'Yes' : 'No';

            // Generate output
            const output = `
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 bg-white p-6 rounded-xl shadow-sm">
                    <div>
                        <p class="font-medium text-gray-700">Luggage Dimensions</p>
                        <p class="text-xl text-blue-600 font-semibold">${luggageLength.toFixed(1)} x ${luggageWidth.toFixed(1)} x ${luggageHeight.toFixed(1)} in</p>
                    </div>
                    <div>
                        <p class="font-medium text-gray-700">Airline</p>
                        <p class="text-lg">${airline}</p>
                    </div>
                    <div>
                        <p class="font-medium text-gray-700">Airline Carry-On Limit</p>
                        <p class="text-lg">${limits.length} x ${limits.width} x ${limits.height} in (Weight: ${limits.weight})</p>
                    </div>
                    <div>
                        <p class="font-medium text-gray-700">Fit Assessment</p>
                        <p class="text-lg ${luggageFit === 'Yes' ? 'text-green-600' : 'text-red-600'} font-semibold">
                            ${luggageFit === 'Yes' ? 'Fits Within Limits' : 'Exceeds Carry-On Limits'}
                        </p>
                        <p class="text-sm text-gray-600">${
                            luggageFit === 'Yes' 
                                ? 'Your luggage complies with the airline’s carry-on restrictions.' 
                                : `Issues: ${
                                    luggageLength > limits.length ? 'Length exceeds limit. ' : ''
                                }${
                                    luggageWidth > limits.width ? 'Width exceeds limit. ' : ''
                                }${
                                    luggageHeight > limits.height ? 'Height exceeds limit. ' : ''
                                }${linearInches > 45 ? 'Total linear inches exceed 45 in.' : ''}`
                        }</p>
                    </div>
                </div>
                <div class="bg-blue-50 p-4 rounded-lg">
                    <p class="text-sm"><span class="font-medium">Tip:</span> Always check airline policies before travel, as restrictions may vary for international flights.</p>
                </div>
            `;

            document.getElementById('resultOutput').innerHTML = output;
            document.getElementById('resultSection').classList.remove('hidden');

            // Draw visualization
            drawVisualization(luggageLength, luggageWidth, luggageHeight, limits);

            // Setup PDF download
            setupPdfDownload(luggageLength, luggageWidth, luggageHeight, airline, limits, luggageFit);
        }

        function drawVisualization(luggageLength, luggageWidth, luggageHeight, limits) {
            const canvas = document.getElementById('luggageCanvas');
            const ctx = canvas.getContext('2d');
            canvas.width = canvas.offsetWidth;
            canvas.height = canvas.offsetHeight;

            // Clear canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // Scale factors (based on largest dimension for comparison)
            const maxDim = Math.max(luggageLength, luggageWidth, luggageHeight, limits.length, limits.width, limits.height);
            const scale = canvas.width / (maxDim * 1.5); // Scale to fit canvas
            const luggageW = luggageWidth * scale;
            const luggageH = luggageHeight * scale;
            const limitW = limits.width * scale;
            const limitH = limits.height * scale;

            // Draw background
            const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
            gradient.addColorStop(0, '#e5e7eb');
            gradient.addColorStop(1, '#d1d5db');
            ctx.fillStyle = gradient;
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            // Draw airline limit box (dashed outline)
            ctx.strokeStyle = '#1e40af';
            ctx.lineWidth = 2;
            ctx.setLineDash([5, 5]);
            ctx.strokeRect(canvas.width * 0.55, canvas.height * 0.2, limitW, limitH);
            ctx.fillStyle = '#bfdbfe';
            ctx.globalAlpha = 0.3;
            ctx.fillRect(canvas.width * 0.55, canvas.height * 0.2, limitW, limitH);
            ctx.globalAlpha = 1.0;
            ctx.setLineDash([]);

            // Draw luggage with realistic effects
            ctx.shadowColor = 'rgba(0, 0, 0, 0.4)';
            ctx.shadowBlur = 15;
            ctx.shadowOffsetX = 8;
            ctx.shadowOffsetY = 8;
            ctx.fillStyle = '#2d3748';
            const luggageX = canvas.width * 0.15;
            const luggageY = canvas.height * 0.2;
            ctx.fillRect(luggageX, luggageY, luggageW, luggageH);

            // Draw luggage texture
            const luggageGradient = ctx.createLinearGradient(luggageX, luggageY, luggageX + luggageW, luggageY + luggageH);
            luggageGradient.addColorStop(0, 'rgba(255, 255, 255, 0.15)');
            luggageGradient.addColorStop(1, 'rgba(255, 255, 255, 0.05)');
            ctx.fillStyle = luggageGradient;
            ctx.fillRect(luggageX + 5, luggageY + 5, luggageW - 10, luggageH - 10);

            // Draw text
            ctx.shadowColor = 'transparent';
            ctx.fillStyle = '#ffffff';
            ctx.font = 'bold 18px Poppins';
            ctx.textAlign = 'center';
            ctx.fillText(`${luggageWidth.toFixed(1)} x ${luggageHeight.toFixed(1)} in`, luggageX + luggageW / 2, luggageY + luggageH / 2);
            ctx.fillStyle = '#1e40af';
            ctx.fillText(`Limit: ${limits.width} x ${limits.height} in`, canvas.width * 0.55 + limitW / 2, canvas.height * 0.2 + limitH / 2);
            ctx.font = '14px Poppins';
            ctx.fillStyle = '#4b5563';
            ctx.fillText(`Your Luggage vs. ${document.getElementById('airline').value} Limit`, canvas.width / 2, canvas.height - 30);
        }

        function setupPdfDownload(luggageLength, luggageWidth, luggageHeight, airline, limits, luggageFit) {
            document.getElementById('downloadPdf').onclick = function () {
                const { jsPDF } = window.jspdf;
                const doc = new jsPDF();

                // Header
                doc.setFont('helvetica', 'bold');
                doc.setFontSize(20);
                doc.setTextColor(31, 64, 175);
                doc.text('<?= $name ?> - Luggage Fit Assessment Report', 20, 20);

                doc.setFont('helvetica', 'normal');
                doc.setFontSize(10);
                doc.setTextColor(100, 100, 100);
                doc.text(`Generated on: ${new Date().toLocaleString()}`, 20, 28);

                // Results
                doc.setFontSize(14);
                doc.setTextColor(0, 0, 0);
                doc.text('Your Luggage Fit Assessment', 20, 40);

                doc.setFontSize(11);
                doc.text(`Luggage Dimensions: ${luggageLength.toFixed(1)} x ${luggageWidth.toFixed(1)} x ${luggageHeight.toFixed(1)} in`, 20, 50);
                doc.text(`Airline: ${airline}`, 20, 58);
                doc.text(`Carry-On Limit: ${limits.length} x ${limits.width} x ${limits.height} in (Weight: ${limits.weight})`, 20, 66);
                doc.text(`Fit Assessment: ${luggageFit === 'Yes' ? 'Fits Within Limits' : 'Exceeds Carry-On Limits'}`, 20, 74);
                doc.text(`Recommendation: ${
                    luggageFit === 'Yes' 
                        ? 'Your luggage is compliant with the airline’s carry-on restrictions.' 
                        : 'Choose a smaller bag or check your luggage to avoid fees.'
                }`, 20, 82);

                // Expert Tips
                doc.setFont('helvetica', 'bold');
                doc.setFontSize(12);
                doc.text('Expert Tips', 20, 94);
                doc.setFont('helvetica', 'normal');
                doc.setFontSize(10);
                doc.text('• Measure Accurately: Include handles and wheels in measurements.', 20, 102);
                doc.text('• Weight Limits: Check restrictions (e.g., Ryanair: 10 kg, EasyJet: 15 kg).', 20, 110);
                doc.text('• Soft vs. Hard Case: Soft-sided bags may fit better in tight bins.', 20, 118);
                doc.text('• Personal Item: Most airlines allow a smaller item under the seat.', 20, 126);
                doc.text('• Check Restrictions: Verify airline policies before travel.', 20, 134);

                doc.save('HomeFit_Luggage_Fit_Assessment.pdf');
            };
        }
    </script>