<?php
// Show success/error message if redirected back
$status = $_GET['status'] ?? '';
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Itinerary Request - Tripcuro</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f8fafc;
        }
    </style>
</head>
<body class="text-gray-800 overflow-x-hidden">

    <header class="bg-white shadow-md py-4 px-4 sm:px-6 md:px-12 lg:px-24 rounded-b-lg">
        <nav class="flex items-center justify-between flex-wrap max-w-screen-xl mx-auto">
            <div class="flex items-center flex-shrink-0 text-indigo-700 mr-6">
                <svg class="h-8 w-8 mr-2" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5S10.62 6.5 12 6.5s2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
                </svg>
                <span class="font-bold text-2xl tracking-tight">Tripcuro</span>
            </div>
            <!-- Desktop Nav -->
            <div class="hidden md:flex flex-grow items-center w-auto">
                <div class="text-sm lg:flex-grow">
                    <a href="../index.html" class="block mt-4 md:inline-block md:mt-0 text-gray-600 hover:text-indigo-600 mr-6 transition duration-300 ease-in-out">
                        Home
                    </a>
                    <a href="services.html" class="block mt-4 md:inline-block md:mt-0 text-gray-600 hover:text-indigo-600 mr-6 transition duration-300 ease-in-out">
                        Services
                    </a>
                    <a href="about.html" class="block mt-4 md:inline-block md:mt-0 text-gray-600 hover:text-indigo-600 mr-6 transition duration-300 ease-in-out">
                        About Us
                    </a>
                    <a href="testimonials.html" class="block mt-4 md:inline-block md:mt-0 text-gray-600 hover:text-indigo-600 mr-6 transition duration-300 ease-in-out">
                        Reviews
                    </a>
                    <a href="contact.php" class="block mt-4 md:inline-block md:mt-0 text-gray-600 hover:text-indigo-600 transition duration-300 ease-in-out">
                        Contact
                    </a>
                </div>
                <div>
                    <a href="itinerary-request.php" class="inline-block text-sm px-6 py-2 leading-none border rounded-full text-indigo-600 border-indigo-600 hover:border-transparent hover:text-white hover:bg-indigo-600 mt-4 md:mt-0 transition duration-300 ease-in-out">
                        Request Itinerary
                    </a>
                </div>
            </div>
            <!-- Mobile Hamburger -->
            <div class="block md:hidden">
                <button id="mobile-menu-btn" class="flex items-center px-3 py-2 border rounded text-gray-600 border-gray-400 hover:text-indigo-600 hover:border-indigo-600 focus:outline-none" aria-label="Open Menu">
                    <svg class="fill-current h-5 w-5" viewBox="0 0 20 20"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
                </button>
            </div>
        </nav>
        <!-- Mobile Nav Menu -->
        <div id="mobile-menu" class="md:hidden fixed inset-0 bg-white bg-opacity-95 z-50 flex flex-col items-center justify-start pt-24 space-y-6 text-lg font-medium text-gray-700 transition-transform duration-300 transform -translate-x-full">
            <a href="../index.html" class="w-full text-center py-2 border-b border-gray-200 hover:text-indigo-600 transition">Home</a>
            <a href="services.html" class="w-full text-center py-2 border-b border-gray-200 hover:text-indigo-600 transition">Services</a>
            <a href="about.html" class="w-full text-center py-2 border-b border-gray-200 hover:text-indigo-600 transition">About Us</a>
            <a href="../blog/blog.html" class="w-full text-center py-2 border-b border-gray-200 hover:text-indigo-600 transition">Blog</a>
            <a href="testimonials.html" class="w-full text-center py-2 border-b border-gray-200 hover:text-indigo-600 transition">Reviews</a>
            <a href="contact.php" class="w-full text-center py-2 border-b border-gray-200 hover:text-indigo-600 transition">Contact</a>
            <a href="itinerary-request.php" class="w-full text-center py-2 mt-2 rounded-full border border-indigo-600 text-indigo-600 hover:bg-indigo-600 hover:text-white transition">Request Itinerary</a>
            <button id="mobile-menu-close" class="absolute top-4 right-4 text-gray-600 hover:text-indigo-600 text-3xl font-bold focus:outline-none" aria-label="Close Menu">&times;</button>
        </div>
    </header>

    <section class="py-12 sm:py-16 px-4 sm:px-6 md:px-12 lg:px-24 bg-indigo-50 rounded-lg shadow-md">
        <div class="max-w-screen-sm mx-auto bg-white p-6 sm:p-10 rounded-xl shadow-lg">
            <h2 class="text-2xl sm:text-3xl md:text-4xl font-bold text-center mb-6 sm:mb-8 text-indigo-700">Personalized Itinerary Request</h2>
            <?php if ($status === 'success'): ?>
                <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative text-center mb-6" role="alert">
                    Thank you! Your itinerary request has been submitted.
                </div>
            <?php elseif ($status === 'error'): ?>
                <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative text-center mb-6" role="alert">
                    Sorry, there was an error submitting your request. Please try again.
                </div>
            <?php endif; ?>
            <form id="itinerary-form" method="POST" action="itinerary-request-submit.php">
                <div class="mb-6">
                    <label for="email" class="block text-gray-700 text-sm font-bold mb-2">Email Address:</label>
                    <input type="email" id="email" name="email" required class="shadow appearance-none border rounded-lg w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" placeholder="your@email.com">
                </div>
                <div class="mb-6">
                    <label class="block text-gray-700 text-sm font-bold mb-2">Phone Number:</label>
                    <div class="flex gap-2">
                        <select id="country-code" name="country_code" required class="shadow appearance-none border rounded-lg py-3 px-2 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent w-2/5">
                            <option value="">Country Code</option>
                            <option value="+1">United States (+1)</option>
                            <option value="+91">India (+91)</option>
                            <option value="+44">United Kingdom (+44)</option>
                            <option value="+61">Australia (+61)</option>
                            <option value="+81">Japan (+81)</option>
                            <option value="+49">Germany (+49)</option>
                            <option value="+33">France (+33)</option>
                            <option value="+86">China (+86)</option>
                            <option value="+971">UAE (+971)</option>
                            <option value="+65">Singapore (+65)</option>
                            <option value="+7">Russia (+7)</option>
                            <option value="+27">South Africa (+27)</option>
                            <option value="+34">Spain (+34)</option>
                            <option value="+39">Italy (+39)</option>
                            <option value="+55">Brazil (+55)</option>
                            <option value="+82">South Korea (+82)</option>
                            <option value="+62">Indonesia (+62)</option>
                            <option value="+60">Malaysia (+60)</option>
                            <option value="+63">Philippines (+63)</option>
                            <option value="+64">New Zealand (+64)</option>
                            <option value="+20">Egypt (+20)</option>
                            <option value="+92">Pakistan (+92)</option>
                            <option value="+880">Bangladesh (+880)</option>
                            <option value="+966">Saudi Arabia (+966)</option>
                            <option value="+90">Turkey (+90)</option>
                            <option value="+234">Nigeria (+234)</option>
                            <option value="+212">Morocco (+212)</option>
                            <option value="+351">Portugal (+351)</option>
                            <option value="+48">Poland (+48)</option>
                            <option value="+46">Sweden (+46)</option>
                            <option value="+358">Finland (+358)</option>
                            <option value="+47">Norway (+47)</option>
                            <option value="+31">Netherlands (+31)</option>
                            <option value="+41">Switzerland (+41)</option>
                            <option value="+43">Austria (+43)</option>
                            <option value="+32">Belgium (+32)</option>
                            <option value="+420">Czech Republic (+420)</option>
                            <option value="+36">Hungary (+36)</option>
                            <option value="+45">Denmark (+45)</option>
                            <option value="+52">Mexico (+52)</option>
                            <option value="+1-242">Bahamas (+1-242)</option>
                            <option value="+1-246">Barbados (+1-246)</option>
                            <option value="+1-441">Bermuda (+1-441)</option>
                            <option value="+1-876">Jamaica (+1-876)</option>
                            <option value="+1-758">Saint Lucia (+1-758)</option>
                            <option value="+1-784">Saint Vincent & Grenadines (+1-784)</option>
                            <option value="+1-868">Trinidad & Tobago (+1-868)</option>
                            <option value="+380">Ukraine (+380)</option>
                            <option value="+48">Poland (+48)</option>
                            <option value="+420">Czech Republic (+420)</option>
                            <option value="+386">Slovenia (+386)</option>
                            <option value="+421">Slovakia (+421)</option>
                            <option value="+36">Hungary (+36)</option>
                            <option value="+40">Romania (+40)</option>
                            <option value="+30">Greece (+30)</option>
                            <option value="+353">Ireland (+353)</option>
                            <option value="+372">Estonia (+372)</option>
                            <option value="+371">Latvia (+371)</option>
                            <option value="+370">Lithuania (+370)</option>
                            <option value="+48">Poland (+48)</option>
                            <option value="+380">Ukraine (+380)</option>
                            <option value="+375">Belarus (+375)</option>
                            <option value="+994">Azerbaijan (+994)</option>
                            <option value="+995">Georgia (+995)</option>
                            <option value="+998">Uzbekistan (+998)</option>
                            <option value="+996">Kyrgyzstan (+996)</option>
                            <option value="+993">Turkmenistan (+993)</option>
                            <option value="+992">Tajikistan (+992)</option>
                            <option value="+84">Vietnam (+84)</option>
                            <option value="+66">Thailand (+66)</option>
                            <option value="+65">Singapore (+65)</option>
                            <option value="+60">Malaysia (+60)</option>
                            <option value="+63">Philippines (+63)</option>
                            <option value="+62">Indonesia (+62)</option>
                            <option value="+856">Laos (+856)</option>
                            <option value="+855">Cambodia (+855)</option>
                            <option value="+95">Myanmar (+95)</option>
                            <option value="+94">Sri Lanka (+94)</option>
                            <option value="+880">Bangladesh (+880)</option>
                            <option value="+92">Pakistan (+92)</option>
                            <option value="+977">Nepal (+977)</option>
                            <option value="+960">Maldives (+960)</option>
                            <option value="+968">Oman (+968)</option>
                            <option value="+974">Qatar (+974)</option>
                            <option value="+973">Bahrain (+973)</option>
                            <option value="+965">Kuwait (+965)</option>
                            <option value="+962">Jordan (+962)</option>
                            <option value="+961">Lebanon (+961)</option>
                            <option value="+963">Syria (+963)</option>
                            <option value="+964">Iraq (+964)</option>
                            <option value="+972">Israel (+972)</option>
                            <option value="+20">Egypt (+20)</option>
                            <option value="+212">Morocco (+212)</option>
                            <option value="+213">Algeria (+213)</option>
                            <option value="+216">Tunisia (+216)</option>
                            <option value="+218">Libya (+218)</option>
                            <option value="+254">Kenya (+254)</option>
                            <option value="+255">Tanzania (+255)</option>
                            <option value="+256">Uganda (+256)</option>
                            <option value="+250">Rwanda (+250)</option>
                            <option value="+27">South Africa (+27)</option>
                            <option value="+234">Nigeria (+234)</option>
                            <option value="+233">Ghana (+233)</option>
                            <option value="+225">Ivory Coast (+225)</option>
                            <option value="+221">Senegal (+221)</option>
                            <option value="+213">Algeria (+213)</option>
                            <option value="+216">Tunisia (+216)</option>
                            <option value="+218">Libya (+218)</option>
                            <option value="+351">Portugal (+351)</option>
                            <option value="+34">Spain (+34)</option>
                            <option value="+33">France (+33)</option>
                            <option value="+39">Italy (+39)</option>
                            <option value="+49">Germany (+49)</option>
                            <option value="+43">Austria (+43)</option>
                            <option value="+41">Switzerland (+41)</option>
                            <option value="+31">Netherlands (+31)</option>
                            <option value="+32">Belgium (+32)</option>
                            <option value="+46">Sweden (+46)</option>
                            <option value="+47">Norway (+47)</option>
                            <option value="+45">Denmark (+45)</option>
                            <option value="+358">Finland (+358)</option>
                            <option value="+420">Czech Republic (+420)</option>
                            <option value="+421">Slovakia (+421)</option>
                            <option value="+36">Hungary (+36)</option>
                            <option value="+48">Poland (+48)</option>
                            <option value="+380">Ukraine (+380)</option>
                            <option value="+375">Belarus (+375)</option>
                            <option value="+7">Russia (+7)</option>
                            <option value="+1">Canada (+1)</option>
                            <option value="+52">Mexico (+52)</option>
                            <option value="+55">Brazil (+55)</option>
                            <option value="+54">Argentina (+54)</option>
                            <option value="+56">Chile (+56)</option>
                            <option value="+57">Colombia (+57)</option>
                            <option value="+51">Peru (+51)</option>
                            <option value="+58">Venezuela (+58)</option>
                            <option value="+1-876">Jamaica (+1-876)</option>
                            <option value="+1-242">Bahamas (+1-242)</option>
                            <option value="+1-246">Barbados (+1-246)</option>
                            <option value="+1-441">Bermuda (+1-441)</option>
                            <option value="+1-784">Saint Vincent & Grenadines (+1-784)</option>
                            <option value="+1-758">Saint Lucia (+1-758)</option>
                            <option value="+1-868">Trinidad & Tobago (+1-868)</option>
                            <option value="+61">Australia (+61)</option>
                            <option value="+64">New Zealand (+64)</option>
                            <option value="+81">Japan (+81)</option>
                            <option value="+82">South Korea (+82)</option>
                            <option value="+86">China (+86)</option>
                        </select>
                        <input type="tel" id="phone" name="phone" required pattern="[0-9]{6,15}" class="shadow appearance-none border rounded-lg py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent w-3/5" placeholder="Phone Number">
                    </div>
                </div>
                <div class="mb-6">
                    <label for="destination" class="block text-gray-700 text-sm font-bold mb-2">Destination:</label>
                    <input type="text" id="destination" name="destination" required class="shadow appearance-none border rounded-lg w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" placeholder="e.g., Paris, Japan, Coastal California">
                </div>
                <div class="mb-6">
                    <label for="interests" class="block text-gray-700 text-sm font-bold mb-2">Interests <span class="text-gray-400">(comma-separated)</span>:</label>
                    <textarea id="interests" name="interests" rows="3" required class="shadow appearance-none border rounded-lg w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" placeholder="e.g., historical sites, adventure sports, fine dining, relaxing beaches"></textarea>
                </div>
                <div class="mb-8">
                    <label for="days" class="block text-gray-700 text-sm font-bold mb-2">Number of Days:</label>
                    <input type="number" id="days" name="days" min="1" value="5" required class="shadow appearance-none border rounded-lg w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
                </div>
                <div class="flex justify-center">
                    <button type="submit" id="generate-itinerary-btn" class="bg-indigo-600 text-white font-bold py-3 px-8 rounded-full shadow-lg hover:bg-indigo-700 hover:scale-105 transition duration-300 ease-in-out transform flex items-center justify-center">
                        Generate Itinerary
                    </button>
                </div>
            </form>
            <div id="itinerary-output" class="mt-8 sm:mt-12 p-4 sm:p-6 bg-indigo-50 rounded-xl shadow-inner border border-gray-200 hidden">
                <h3 class="text-xl sm:text-2xl font-semibold text-indigo-700 mb-4 text-center">Your Custom Itinerary:</h3>
                <div id="itinerary-content" class="prose max-w-none text-gray-700"></div>
            </div>
        </div>
    </section>

    <footer class="bg-gray-800 text-white py-8 px-4 sm:px-6 md:px-12 lg:px-24 rounded-t-lg">
        <div class="container mx-auto flex flex-col md:flex-row justify-between items-center text-center md:text-left max-w-screen-xl">
            <p>&copy; 2025 Tripcuro. All rights reserved.</p>
            <p class="text-sm text-gray-400">Designed with <span class="text-red-500">&hearts;</span> by Tripcuro Team</p>
        </div>
    </footer>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var menuBtn = document.getElementById('mobile-menu-btn');
            var menu = document.getElementById('mobile-menu');
            var menuClose = document.getElementById('mobile-menu-close');
            if (menuBtn && menu && menuClose) {
                menuBtn.addEventListener('click', function() {
                    menu.classList.remove('-translate-x-full');
                    menu.classList.add('translate-x-0');
                    document.body.style.overflow = 'hidden';
                });
                menuClose.addEventListener('click', function() {
                    menu.classList.add('-translate-x-full');
                    menu.classList.remove('translate-x-0');
                    document.body.style.overflow = '';
                });
                menu.querySelectorAll('a').forEach(function(link) {
                    link.addEventListener('click', function() {
                        menu.classList.add('-translate-x-full');
                        menu.classList.remove('translate-x-0');
                        document.body.style.overflow = '';
                    });
                });
            }
        });
    </script>
</body>
</html>