<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Carpool Request Form</title>
    <script src="https://cdn.tailwindcss.com/"></script>
    <style>
        @keyframes fadeIn {
            0% { opacity: 0; transform: scale(0.8); }
            100% { opacity: 1; transform: scale(1); }
        }

        .fadeIn {
            animation: fadeIn 0.5s ease-in-out;
        }
        
        @keyframes slideUp {
            0% { transform: translateY(100%); }
            100% { transform: translateY(0); }
        }

        .slideUp {
            animation: slideUp 0.5s ease-out;
        }

        .copy-btn:hover {
            background-color: #1dbf73;
            transform: scale(1.05);
        }
    </style>
<script defer="" data-domain="passegerrf.tiiny.site" src="https://analytics.tiiny.site/js/plausible.js"></script></head>
<body class="bg-gray-900 text-white font-sans p-6">

    <h1 class="text-center text-4xl text-green-500 font-semibold mb-6">🚘 Carpool Request Form 🚘</h1>
    
    <div class="max-w-xl mx-auto bg-gray-800 p-8 rounded-2xl shadow-2xl fadeIn">
        <form id="carpoolForm">
            <!-- From Location -->
            <div class="mb-4">
                <label for="from" class="block text-lg text-green-500 font-semibold">🛫 Starting Point</label>
                <input type="text" id="from" name="from" placeholder="Where are you starting from?" class="w-full p-3 mt-2 bg-gray-700 text-white border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500" required="">
            </div>
            
            <!-- To Location -->
            <div class="mb-4">
                <label for="to" class="block text-lg text-green-500 font-semibold">📍 Destination</label>
                <input type="text" id="to" name="to" placeholder="Where are you headed?" class="w-full p-3 mt-2 bg-gray-700 text-white border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500" required="">
            </div>

            <!-- Ride Preference -->
            <div class="mb-4">
                <label for="rideType" class="block text-lg text-green-500 font-semibold">🛻 Ride Preference</label>
                <select id="rideType" name="rideType" class="w-full p-3 mt-2 bg-gray-700 text-white border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500">
                    <option value="🚨 Shared ride only | 🚫 No private 🚫">Shared Ride Only</option>
                    <option value="🚗 Private ride required 🚗">Private Ride</option>
                </select>
            </div>

            <!-- Number of Passengers -->
            <div class="mb-4">
                <label for="passengers" class="block text-lg text-green-500 font-semibold">👥 Number of Passengers</label>
                <input type="number" id="passengers" name="passengers" min="1" placeholder="How many passengers?" class="w-full p-3 mt-2 bg-gray-700 text-white border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500" required="">
            </div>

            <!-- Round Trip Option -->
            <div class="mb-4">
                <label for="roundTrip" class="block text-lg text-green-500 font-semibold">🔄 Round Trip (Up and Down)</label>
                <input type="checkbox" id="roundTrip" name="roundTrip" class="ml-2" onclick="toggleRoundTripInputs()"> Yes
            </div>

            <!-- Return Passengers Input -->
            <div id="returnPassengersSection" class="mb-4 hidden">
                <label for="returnPassengers" class="block text-lg text-green-500 font-semibold">👥 Number of Return Passengers</label>
                <input type="number" id="returnPassengers" name="returnPassengers" min="1" placeholder="How many are returning?" class="w-full p-3 mt-2 bg-gray-700 text-white border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500">
            </div>

            <!-- Pick-Up Time -->
            <div class="mb-4">
                <label for="pickupTime" class="block text-lg text-green-500 font-semibold">⏰ Pick-Up Time</label>
                <select id="pickupTime" name="pickupTime" class="w-full p-3 mt-2 bg-gray-700 text-white border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500" onchange="toggleScheduledTimeInput()">
                    <option value="Immediate">Immediate</option>
                    <option value="Scheduled">Scheduled</option>
                </select>
            </div>

            <!-- Scheduled Time Input -->
            <div id="scheduledTimeSection" class="mb-4 hidden">
                <label for="scheduledTime" class="block text-lg text-green-500 font-semibold">📅 Select Time</label>
                <input type="datetime-local" id="scheduledTime" name="scheduledTime" class="w-full p-3 mt-2 bg-gray-700 text-white border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500">
            </div>

            <!-- Fare Option -->
            <div class="mb-4">
                <label for="fareToggle" class="text-lg text-green-500 font-semibold">💵 Include Fare?</label>
                <input type="checkbox" id="fareToggle" name="fareToggle" class="ml-2" onclick="toggleFareInput()"> Yes
            </div>

            <!-- Fare Input -->
            <div id="fareSection" class="mb-4 hidden">
                <label for="fare" class="block text-lg text-green-500 font-semibold">🚖 Fare Amount</label>
                <input type="text" id="fare" name="fare" placeholder="How much are you offering?" class="w-full p-3 mt-2 bg-gray-700 text-white border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500">
            </div>

            <!-- Nearby Driver Details -->
            <div class="mb-4">
                <label for="driverNearby" class="block text-lg text-green-500 font-semibold">📌 Nearby Driver</label>
                <textarea id="driverNearby" name="driverNearby" placeholder="location for Nearby Preferred Driver" class="w-full p-3 mt-2 bg-gray-700 text-white border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500"></textarea>
            </div>

            <!-- Preferred Route -->
            <div class="mb-4">
                <label for="route" class="block text-lg text-green-500 font-semibold">🗺️ Preferred Route</label>
                <input type="text" id="route" name="route" placeholder="Google Maps Route Generated Link" class="w-full p-3 mt-2 bg-gray-700 text-white border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500" required="">
            </div>

            <!-- Generate Ride Request Button -->
            <button type="button" onclick="generateResponse()" class="w-full py-3 bg-green-500 text-white font-bold rounded-lg hover:bg-green-400 focus:outline-none focus:ring-2 focus:ring-green-500 transition-all">Generate Ride Request</button>
        </form>
    </div>

    <!-- Output Section -->
    <div id="output" class="mt-8 bg-gray-800 p-6 rounded-xl shadow-lg slideUp"></div>
    
    <!-- Copy to Clipboard Button -->
    <button id="copyBtn" class="mt-4 py-2 px-4 bg-green-500 text-white rounded-lg hover:bg-green-400 focus:outline-none focus:ring-2 focus:ring-green-500 transition-all hidden" onclick="copyToClipboard()">Copy to Clipboard</button>

    <!-- Disclaimer -->
    <p class="text-center text-sm text-gray-400 mt-6">⚠️ This form is auto-generated for carpooling requests. Please review details before sharing with Shift Administration.</p>

    <script>
        function toggleFareInput() {
            const fareSection = document.getElementById("fareSection");
            const fareToggle = document.getElementById("fareToggle");
            
            if (fareToggle.checked) {
                fareSection.classList.remove("hidden");
            } else {
                fareSection.classList.add("hidden");
            }
        }

        function toggleScheduledTimeInput() {
            const pickupTime = document.getElementById("pickupTime").value;
            const scheduledTimeSection = document.getElementById("scheduledTimeSection");
            
            if (pickupTime === "Scheduled") {
                scheduledTimeSection.classList.remove("hidden");
            } else {
                scheduledTimeSection.classList.add("hidden");
            }
        }

        function toggleRoundTripInputs() {
            const returnPassengersSection = document.getElementById("returnPassengersSection");
            const roundTrip = document.getElementById("roundTrip");

            if (roundTrip.checked) {
                returnPassengersSection.classList.remove("hidden");
            } else {
                returnPassengersSection.classList.add("hidden");
            }
        }

        function generateResponse() {
            const from = document.getElementById("from").value;
            const to = document.getElementById("to").value;
            const rideType = document.getElementById("rideType").value;
            const pickupTime = document.getElementById("pickupTime").value;
            const scheduledTime = document.getElementById("scheduledTime").value;
            const fareToggle = document.getElementById("fareToggle").checked;
            const fare = fareToggle ? document.getElementById("fare").value : "Not Specified";
            const driverNearby = document.getElementById("driverNearby").value || "No driver nearby";
            const route = document.getElementById("route").value;
            const passengers = document.getElementById("passengers").value;
            const roundTrip = document.getElementById("roundTrip").checked;
            const returnPassengers = roundTrip ? document.getElementById("returnPassengers").value : "N/A";

            let fareAmount = fare;
            if (roundTrip && fare !== "Not Specified") {
                fareAmount = `${fare} (Up and Down)`;
            }

            let passengersText = roundTrip ? `${passengers} passengers going and ${returnPassengers} returning` : `${passengers} passengers`;

            let response = `
            
            *Carpool Request*📢
            
*Need Ride for* :- Need a ride for ${passengersText}

🛫 *From*: ${from}
📍 *To*: ${to}
⏰ *Pick-Up Time*: ${pickupTime === "Scheduled" ? `Scheduled at ${scheduledTime}` : "Immediate"}

*Details*:  
${rideType === "🚗 Private ride required 🚗" ? "🚗 Private ride required" : "🚨 Going that way only | 🚫 No private 🚫"}
💵 *Fare*: $${fareAmount}

${driverNearby ? `📞 *Contact Now*: +1(647)-749-5515` : ""}
${driverNearby && route ? `📌 *Driver Nearby*: ${driverNearby}` : ""}
${route ? `📍 *Route*: ${route}` : ""}

👥 *Number of Passengers*: ${passengers}
👥 *Number of Return Passengers*: ${roundTrip ? returnPassengers : "N/A"}

🚘*CARPOOL CREW* 🚘
            `;

            document.getElementById("output").innerText = response;

            document.getElementById("copyBtn").classList.remove("hidden");
        }

        function copyToClipboard() {
            const output = document.getElementById("output").innerText;
            const textarea = document.createElement("textarea");
            textarea.value = output;
            document.body.appendChild(textarea);
            textarea.select();
            document.execCommand("copy");
            document.body.removeChild(textarea);
            alert("Carpool request copied to clipboard!");
        }
    </script>


</body></html>