<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- Meta Tags -->
    <title>Safari Muscat Airfare Request Generator</title>
    <meta name="description" content="A web app to generate airfare requests for Safari Muscat Tourism clients. Built with Flatlogic Generator.">
    <meta name="keywords" content="airfare request, flight booking, travel agency, safari muscat, flight quote, travel quote, generate flight pdf, flight information form, travel agent tool, oman travel, muscat tourism, Built with Flatlogic Generator">
    
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:title" content="Safari Muscat Airfare Request Generator">
    <meta property="og:description" content="A web app to generate airfare requests for Safari Muscat Tourism clients.">
    
    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image">

    <!-- Platform-managed meta tags -->
    <meta property="og:image" content="<?php echo htmlspecialchars($_SERVER['PROJECT_IMAGE_URL'] ?? ''); ?>">
    <meta name="twitter:image" content="<?php echo htmlspecialchars($_SERVER['PROJECT_IMAGE_URL'] ?? ''); ?>">

    <!-- Stylesheets -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">

</head>
<body>

    <div class="container">
        <div class="form-container">
            
            <!-- Company Header -->
            <div class="company-header">
                <h1>Safari Muscat Tourism LLC</h1>
                <p>Central Market, Salalah, Dhofar, Sultanate of Oman</p>
                <p>PO Box: 211 | Phone: +968 99737165</p>
            </div>

            <form id="airfareForm" action="generate_pdf.php" method="POST">
                <!-- Customer Details Section -->
                <div class="form-section">
                    <h2 class="section-title"><i class="bi bi-person-circle"></i> Customer Details</h2>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="customerName" class="form-label">Customer Name*</label>
                            <input type="text" class="form-control" id="customerName" name="customerName" required>
                        </div>
                        <div class="col-md-6">
                            <label for="phoneNumber" class="form-label">Phone Number*</label>
                            <input type="tel" class="form-control" id="phoneNumber" name="phoneNumber" required>
                        </div>
                        <div class="col-md-6">
                            <label for="email" class="form-label">Email (Optional)</label>
                            <input type="email" class="form-control" id="email" name="email">
                        </div>
                        <div class="col-md-6">
                            <label for="passengers" class="form-label">No. of Passengers*</label>
                            <input type="number" class="form-control" id="passengers" name="passengers" min="1" value="1" required>
                        </div>
                    </div>
                </div>

                <!-- Flight Information Section -->
                <div class="form-section">
                    <h2 class="section-title"><i class="bi bi-airplane-fill"></i> Flight Information</h2>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="departureAirport" class="form-label">Departure Airport*</label>
                            <input type="text" class="form-control" id="departureAirport" name="departureAirport" placeholder="e.g., Muscat International Airport – MCT" required>
                        </div>
                        <div class="col-md-6">
                            <label for="arrivalAirport" class="form-label">Arrival Airport*</label>
                            <input type="text" class="form-control" id="arrivalAirport" name="arrivalAirport" placeholder="e.g., Salalah International Airport – SLL" required>
                        </div>
                        <div class="col-md-6">
                            <label for="departureDate" class="form-label">Date of Departure*</label>
                            <input type="date" class="form-control" id="departureDate" name="departureDate" required>
                        </div>
                        <div class="col-md-6">
                            <label for="returnDate" class="form-label">Date of Return (Optional)</label>
                            <input type="date" class="form-control" id="returnDate" name="returnDate">
                        </div>
                        <div class="col-md-6">
                            <label for="airline" class="form-label">Preferred Airline</label>
                            <select id="airline" name="airline" class="form-select">
                                <option selected>Any</option>
                                <option>Oman Air</option>
                                <option>SalamAir</option>
                                <option>Emirates</option>
                                <option>Qatar Airways</option>
                                <option>Etihad Airways</option>
                                <option>Other</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="cabinClass" class="form-label">Cabin Class</label>
                            <select id="cabinClass" name="cabinClass" class="form-select">
                                <option selected>Economy</option>
                                <option>Premium Economy</option>
                                <option>Business</option>
                                <option>First</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Layover Section -->
                <div class="form-section">
                    <div class="form-check form-switch mb-3">
                        <input class="form-check-input" type="checkbox" id="layoverToggle" name="layoverToggle">
                        <label class="form-check-label" for="layoverToggle">Will there be a layover?</label>
                    </div>
                    <div id="layoverDetails">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="layoverAirport" class="form-label">Layover Airport</label>
                                <input type="text" class="form-control" id="layoverAirport" name="layoverAirport" placeholder="e.g., Dubai International Airport - DXB">
                            </div>
                            <div class="col-md-6">
                                <label for="layoverDuration" class="form-label">Duration of Layover</label>
                                <input type="text" class="form-control" id="layoverDuration" name="layoverDuration" placeholder="e.g., 4 hours 30 mins">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Fare Details Section -->
                <div class="form-section">
                    <h2 class="section-title"><i class="bi bi-cash-coin"></i> Fare Details</h2>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="fare" class="form-label">Fare per Passenger (OMR)</label>
                            <input type="number" class="form-control" id="fare" name="fare" min="0" step="0.01" value="0">
                        </div>
                        <div class="col-md-6">
                            <label for="totalFare" class="form-label">Total Passenger Fare (OMR)</label>
                            <input type="text" class="form-control" id="totalFare" name="totalFare" readonly>
                        </div>
                    </div>
                </div>

                <!-- Infant Details Section -->
                <div class="form-section">
                    <h2 class="section-title"><i class="bi bi-person-arms-up"></i> Infant Details</h2>
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label for="infants" class="form-label">No. of Infants</label>
                            <input type="number" class="form-control" id="infants" name="infants" min="0" value="0">
                        </div>
                        <div class="col-md-4">
                            <label for="infantFare" class="form-label">Infant Fare (OMR)</label>
                            <input type="number" class="form-control" id="infantFare" name="infantFare" min="0" step="0.01" value="0">
                        </div>
                        <div class="col-md-4">
                            <label for="totalInfantFare" class="form-label">Total Infant Fare (OMR)</label>
                            <input type="text" class="form-control" id="totalInfantFare" name="totalInfantFare" readonly>
                        </div>
                        <div class="col-12">
                            <label for="infantBaggage" class="form-label">Infant Baggage Details</label>
                            <input type="text" class="form-control" id="infantBaggage" name="infantBaggage" placeholder="e.g., 10kg checked + 1 stroller">
                        </div>
                    </div>
                </div>

                <!-- Baggage Details Section -->
                <div class="form-section">
                    <h2 class="section-title"><i class="bi bi-briefcase-fill"></i> Adult Baggage Details</h2>
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label for="checkedBaggage" class="form-label">Checked-in Pieces</label>
                            <input type="number" class="form-control" id="checkedBaggage" name="checkedBaggage" min="0" value="1">
                        </div>
                        <div class="col-md-4">
                            <label for="weightPerPiece" class="form-label">Weight per Piece (kg)</label>
                            <input type="number" class="form-control" id="weightPerPiece" name="weightPerPiece" min="0" value="23">
                        </div>
                        <div class="col-md-4">
                            <label for="handBaggage" class="form-label">Hand Baggage (kg)</label>
                            <input type="number" class="form-control" id="handBaggage" name="handBaggage" min="0" value="7">
                        </div>
                        <div class="col-12">
                            <label for="baggageNotes" class="form-label">Notes (Special Baggage)</label>
                            <textarea class="form-control" id="baggageNotes" name="baggageNotes" rows="2"></textarea>
                        </div>
                    </div>
                </div>

                <!-- Extra Charges Section -->
                <div class="form-section">
                    <h2 class="section-title"><i class="bi bi-plus-circle-dotted"></i> Extra Charges</h2>
                    <div class="row g-3">
                        <div class="col-md-8">
                            <label for="extraChargeDescription" class="form-label">Description</label>
                            <input type="text" class="form-control" id="extraChargeDescription" name="extraChargeDescription" placeholder="e.g., Airport transfer, visa fee">
                        </div>
                        <div class="col-md-4">
                            <label for="extraChargePrice" class="form-label">Price (OMR)</label>
                            <input type="number" class="form-control" id="extraChargePrice" name="extraChargePrice" min="0" step="0.01" value="0">
                        </div>
                    </div>
                </div>

                <!-- Total Fare Section -->
                <div class="form-section total-fare-section">
                    <div class="row justify-content-end">
                        <div class="col-md-5">
                            <label for="grandTotal" class="form-label grand-total-label">GRAND TOTAL (OMR)</label>
                            <input type="text" class="form-control form-control-lg grand-total-input" id="grandTotal" name="grandTotal" readonly>
                        </div>
                    </div>
                </div>

                <!-- Additional Comments Section -->
                <div class="form-section">
                    <h2 class="section-title"><i class="bi bi-chat-left-text-fill"></i> Additional Comments</h2>
                    <div class="row">
                        <div class="col-12">
                            <label for="otherRequests" class="form-label">Other Requests or Remarks</label>
                            <textarea class="form-control" id="otherRequests" name="otherRequests" rows="3"></textarea>
                        </div>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="d-flex justify-content-end gap-2 mt-4">
                    <button type="button" class="btn btn-light" id="resetButton">Reset Form</button>
                    <button type="button" class="btn btn-secondary" id="previewButton">Preview Request</button>
                    <button type="submit" class="btn btn-primary">Generate PDF</button>
                    <button type="button" class="btn btn-success" disabled>Send to Customer</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Preview Modal -->
    <div class="modal fade" id="previewModal" tabindex="-1" aria-labelledby="previewModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="previewModalLabel">Airfare Request Preview</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="previewContent">
                    <!-- Preview content will be injected here by JavaScript -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Scripts -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
</body>
</html>
