{% extends "demo/base.html" %}

{% load static %}

{% block content %}

<div class="container-fluid pt-4">
  <h3 class="login-heading" style="font-size: 26;color: #793D01;">Traveler Details<span style="color: red;">*</span></h3>
  <p>Confirmed final price for your flight from <b>{{ departure_iata_code }}</b> to <b>{{ arrival_iata_code }}</b> is <b style="color: green;">{{ new_price }} {{ new_currency }}</b></p>
  <p style="padding-left: 3%;">Fill in the information below select a payment method to book the flight</p>
  <form method="post" action="{% url 'final_booking' %}">
    {% csrf_token %}
    <input type="hidden" name="flight_price_confirmed" value="{{ flight_price_confirmed }}" />
    <div class="row" style="padding-left: 3%; padding-right: 3%;">
      <!-- First Column for Traveler Details -->
      <div class="col-md-6 p-4 rounded bg-light">
        <h5 style="color: #944c05;"><b>Personal details</b></h5>
        <div class="mb-4 mt-2">
          <label for="firstName">First name:</label>
          <input type="text" id="firstName" name="firstName" class="form-control rounded">
        </div>
        <div class="mb-4">
          <label for="lastName">Last name:</label>
          <input type="text" id="lastName" name="lastName" class="form-control rounded">
        </div>
        <div class="mb-4">
          <label for="dateOfBirth">Date of Birth:</label>
          <input type="date" name="dateOfBirth" class="form-control rounded">
        </div>
        <div class="mb-4">
          <label for="gender">Gender:</label>
          <select id="gender" name="gender" class="form-control rounded">
            <option value="MALE" selected>Male</option>
            <option value="FEMALE" selected>Female</option>
            <!-- Add other gender options as needed -->
          </select>
        </div>
      </div>

      <!-- Second Column for Additional Traveler Details -->
      <div class="col-md-6 p-4 rounded bg-light">
        <h5 style="color: #944c05;"><b>Contact</b></h5>
        <div class="mb-4 mt-2">
          <label for="sampleField">Email:</label>
          <input type="text" id="sampleField" name="emailAddress" class="form-control rounded">
        </div>
        <div class="mb-4">
          <label for="anotherField">Phone:</label>
          <input type="text" id="anotherField" name="phone_number" class="form-control rounded">
        </div>
        <!-- Phones Section -->
        <div class="mb-4">
          <label for="deviceType">Device Type:</label>
          <select id="deviceType" name="deviceType" class="form-control rounded">
            <option value="MOBILE" selected>Mobile</option>
            <!-- Add other device type options as needed -->
          </select>
        </div>
        <div class="mb-4">
          <label for="countryCallingCode">Country Calling Code:</label>
          <input type="text" id="countryCallingCode" name="countryCallingCode" class="form-control rounded">
        </div>
        <!-- Add more input fields for phones as needed -->
      </div>


      <!-- Added for documents -->
          <!-- First Column for Traveler Details -->
          <div class="col-md-6 p-4 rounded bg-light">
            <h5 style="color: #944c05;"><b>Documents</b></h5>
            <div class="mb-4">
              <label for="documentType" class="font-weight-bold">Document Type:</label>
              <select id="documentType" name="documentType" class="form-control rounded">
                <option value="PASSPORT" selected>Passport</option>
                <option value="PASSPORT" selected>National ID</option>
              </select>
            </div>
            <div class="mb-4">
              <label for="birthPlace" class="font-weight-bold">Birth Place:</label>
              <input type="text" name="birthPlace" class="form-control rounded">
            </div>
            <div class="mb-4">
              <label for="issuanceLocation" class="font-weight-bold">Issuance Location:</label>
              <input type="text" name="issuanceLocation" class="form-control rounded">
            </div>
            <div class="mb-4">
              <label for="issuanceLocation" class="font-weight-bold">Nationality:</label>
              <input type="text" name="nationality" class="form-control rounded">
            </div>
            <div class="mb-4">
              <label for="issuanceLocation" class="font-weight-bold">issuance Country:</label>
              <input type="text" name="issuanceCountry" class="form-control rounded">
            </div>
          </div>
      
          <!-- Second Column for Additional Traveler Details -->
          <div class="col-md-6 p-4 rounded bg-light">
            <h5 style="color: #944c05;"><b>...</b></h5>
            
            <!-- Add more input fields for phones as needed -->
      
            <!-- Documents Section -->
            <div class="mb-4">
              <label for="issuanceDate" class="font-weight-bold">Issuance Date:</label>
              <input type="date" name="issuanceDate" class="form-control rounded">
            </div>
            <div class="mb-4">
              <label for="documentNumber" class="font-weight-bold">Document Number:</label>
              <input type="text" name="documentNumber" class="form-control rounded">
            </div>
            <div class="mb-4">
              <label for="expiryDate" class="font-weight-bold">Expiry Date:</label>
              <input type="date" name="expiryDate" class="form-control rounded">
            </div>
            <div class="mb-4">
              <label for="documentNumber" class="font-weight-bold">Validity Country:</label>
              <input type="text" name="validityCountry" class="form-control rounded">
            </div>
          </div>
      

              <!-- Added for documents -->
          <!-- First Column for Traveler Details -->
          <div class="col-md-6 p-4 rounded bg-light">
            <h5 style="color: #944c05;"><b>Payment details...</b></h5>
          </div>
      
          <!-- Second Column for Additional Traveler Details -->
          <div class="col-md-6 p-4 rounded bg-light">
            <!-- <h5 style="color: #944c05;"><b>...</b></h5>  
            <div class="mb-4">
              <label for="expiryDate" class="font-weight-bold">Expiry Date:</label>
              <input type="date" id="expiryDate" class="form-control rounded">
            </div> -->
            <!-- Add more input fields for document details as needed -->
          </div>

      <!-- Submit Button centered between the two columns -->
      <div class="col-md-12 text-center mt-4" style="padding-bottom: 3%;">
        <button style="color: white; background-color: rgb(201, 201, 5); width: 30%; border-radius: 10px; border: none; height: 140%;" type="submit" name='final_booking'>
          <b>Book Flight</b>
        </button>
      </div>
    </div>
  </form>
</div>


{% endblock %}