264 lines
15 KiB
PHP
264 lines
15 KiB
PHP
<!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>
|