{% extends 'main/base.html' %}
{% load static %}
{% load i18n %}


{% block title %}MyTripMed - Request a Free Quote{% endblock title %} 
  
{% block body %}
  


<section class="top-section">
  <div class="container heading-border mb-0">
          <h1>Get a Free Quote!</h1>
     
        <div class="icon-text icon-text-big">
          <img src="{% static 'img/cross-icon.png' %}" alt="cross-icon">
            <span class="text-dark">No Agency Fees</span>
              </div>

              <div class="icon-text pt-4">
                  <h5 class="text-dark">See how much you can save with a 
                      Doctor abroad. We'll get back to you in a flash.</h5>
                </div>
          </div>
  </section>

  <div class="quote-top">
  </div>

<div class="container mb-5 pb-5">   
  <div class="row">
    <div class="col-md-8 container-border-left">
      <div class="form-left card card-sm">
        <form method= "POST" action= "" >
          {% csrf_token %}
        <h4 class="text-dark mb-4">Get a Free Quote</h4>
          <div class="row">
            <div class="col-md-6 mt-4">
              <label for="nameInput" class="form-label">Name*</label>
            <input type="text" class="form-input"
          placeholder="Enter your name" aria-label="First Name" id="nameInput" name="name" required>
        </div>

      <div class="col-md-6 mt-4">
            <label for="emailInput" class="form-label">Email*</label>
        <input type="email" class="form-input" placeholder="Enter your email" aria-label="Email" id="emailInput" name="email" required>
    </div>
 
      <div class="col-xl-6 col-lg-8 pt-3">
        <label for="phoneInput" class="form-label">Phone Number*</label>
        <div class="row">
        
          <div class="col-4">
            <select class="form-select" id="phoneInput" name="phone_code">
                {% for country in all_countries %}
                <option data-countryCode={{country.name}} value={{country.phone_code}}>{{country.name}} ({{country.phone_code}})</option>
                {% endfor %}
              </select>
          </div>
          <div class="col-8">
            <input type="number" class="form-input" 
            placeholder="Enter your phone number with code" aria-label="Enter your phone number with code" name="phone_number">
          </div>
        </div>
      </div>

      <div class="col-12 pt-3">
        <label for="commentsInput">Comments*</label>
          <textarea class="form-input" 
          rows="4"
          placeholder="Comments or treatment details." id="commentsInput" name="comments" required></textarea>
      </div>
    
          <div class="col-12 mt-5 pb-3">
              <div class="d-grid gap-2 d-md-flex justify-content-md-end">
            <button class="btn btn-primary" type="submit">Submit</button>
          </div>
        </div>
      </div>

    </form>
  </div>        
  </div>
</div>
 
    </div>
  </div>

{% endblock body %}