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


{% block title %}MyTripMed - Home Page{% endblock title %} 


{% block body %}
  <section class="top-section hero-section">
    <div class="container">
      <div class="row">
        <div class="col-md-5 hero-section-left">
          <h1>{% trans "Find the right doctors and clinic for you across the world." %}</h1>
          <div class="row">
            <div class="col-10">
              <p class="p-big">{% trans "Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla" %}</p>
            </div>
          </div>


        </div>
        <div class="col-md-7">
          <img src="{% static 'img/top-section-image.png' %}" alt="#" class="d-none d-md-block">
        </div>
      </div>
      <div class="search-box">
        <div class="card">
          <h5>
            {% trans "Search for clinics, treatments and locations" %}
          </h5>

          <form action="{% url 'clinics:clinics_search' %}" onsubmit="event.preventDefault(); goToSearch(document.getElementById('query').value, document.getElementById('country').value)">
            <input type="hidden" id="search" name="search" value="true">
          <div class="row mt-3">
            <div class="col-sm-9">
              <div class="form-group mb-4 mb-sm-0" style="display: flex; flex-direction: row;">
                <input type="text" class="form-input" id="query" name="query"
                  placeholder="Search treatment" required>
                <input type="text" class="form-input" id="country" style="margin-left: 20px;" name="country"
                placeholder="Search location">
              </div>

            </div>
            <div class="col-sm-3 d-flex justify-content-end align-items-end">
              <button type="submit" class="btn btn-primary">{% trans "Search" %}</button>
            </div>
          </div>
        </form>
        </div>
      </div>
    </div>

  </section>

  {% include 'main/popular-treatments.html' %}
  {% include 'main/popular-clinics.html' %}

  <section class="section-details">
    <div class="container">
      <h2 class="text-center">{% trans "What do you get using Beauty Look" %}</h2>
      <div class="reasons-list">
        <div class="row">

          <div class="col-lg-4 col-sm-6 reason-box">
            <div class="row no-gutters">
              <div class="col-4">
                <img src="{% static 'img/logo-service.png' %}" alt="logo-service" class="logo-icon">
              </div>
              <div class="col-8 pb-4">
                <h4>{% trans "Superior Customer Service" %}</h4>
                <p> {% trans "Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla" %}</p>
              </div>
            </div>
          </div>

          <div class="col-lg-4 col-sm-6 reason-box">
            <div class="row no-gutters">
              <div class="col-4">
                <img src="{% static 'img/logo-clinic.png' %}" alt="logo-clinic" class="logo-icon">
              </div>
              <div class="col-8 pb-5">
                <h4>{% trans "Quality Clinics" %}</h4>
                <p>{% trans "Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla" %}</p>
              </div>
            </div>
          </div>

          <div class="col-lg-4 col-sm-6 reason-box">
            <div class="row no-gutters">
              <div class="col-4">
                <img src="{% static 'img/logo-checklist.png' %}" alt="logo-checklist" class="logo-icon">
              </div>
              <div class="col-8">
                <h4>{% trans "Know before you go" %}</h4>
                <p>{% trans " Lorem ipsum dolor sit amet, consectetur adipiscingelit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla" %}</p>
              </div>
            </div>
          </div>

          <div class="col-lg-4 col-sm-6 reason-box">
            <div class="row no-gutters">
              <div class="col-4">
                <img src="{% static 'img/logo-finance.png' %}" alt="logo-finance" class="logo-icon">
              </div>
              <div class="col-8">
                <h4>{% trans "Medical Finance" %}</h4>
                <p>{% trans "Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla" %}</p>
              </div>
            </div>
          </div>

          <div class="col-lg-4 col-sm-6 reason-box">
            <div class="row no-gutters">
              <div class="col-4">
                <img src="{% static 'img/logo-hotel.png' %}" alt="logo-hotel" class="logo-icon">
              </div>
              <div class="col-8">
                <h4>{% trans "Hotel Booking" %}</h4>
                <p>{% trans "Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla" %}</p>
              </div>
            </div>
          </div>

          <div class="col-lg-4 col-sm-6 reason-box">
            <div class="row no-gutters">
              <div class="col-4">
                <img src="{% static 'img/logo-booking.png' %}" alt="logo-booking" class="logo-icon">
              </div>
              <div class="col-8">
                <h4>{% trans "Easy Booking" %}</h4>
                <p>{% trans " Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla" %}</p>
              </div>
            </div>
          </div>

          <div class="col-lg-4 col-sm-6 reason-box">
            <div class="row no-gutters">
              <div class="col-4">
                <img src="{% static 'img/logo-insurance.png' %}" alt="logo-insurance" class="logo-icon">
              </div>
              <div class="col-8">
                <h4>{% trans "Medical Travel Insurance" %}</h4>
                <p>{% trans " Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla" %}</p>
              </div>
            </div>
          </div>

          <div class="col-lg-4 col-sm-6 reason-box">
            <div class="row no-gutters">
              <div class="col-4">
                <img src="{% static 'img/logo-reviews.png' %}" alt="logo-reviews" class="logo-icon">
              </div>
              <div class="col-8">
                <h4>{% trans "Free Quotes" %}</h4>
                <p>{% trans " Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla" %}</p>
              </div>
            </div>
          </div>

          <div class="col-lg-4 col-sm-6 reason-box">
            <div class="row no-gutters">
              <div class="col-4">
                <img src="{% static 'img/logo-reviews.png' %}" alt="logo-reviews" class="logo-icon">
              </div>
              <div class="col-8">
                <h4>{% trans "Real Reviews from Real People" %}</h4>
                <p>{% trans " Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla" %}</p>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </section>

  <section class="register">
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <h2>
            {% trans "Popular Treatments" %}
          </h2>
          <p class="section-subheading">
            {% trans "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odit laborum blanditiis in quas earum est" %}
          </p>
        </div>
      </div>

      <div class="row align-items-center">
        <div class="col-md-6">
          <img src="{% static 'img/logo-guidance.png' %}" class="steps-img" />
        </div>
        <div class="col-md-6">

          <div class="steps-wrapper">
            <div class="single-step">
              <h1 class="step-1">1</h1>
              <div class="content">
                <h4>{% trans "Find clinic" %}</h4>
                <p>{% trans "First find your clinic and compare prices and reviews" %}</p>
              </div>
            </div>

            <div class="single-step">
              <h1 class="step-1">2</h1>
              <div class="content">
                <h4>{% trans "Schedule Appointement" %}</h4>
                <p>{% trans "After finding the clinic, you can schedule the appointment for it." %}</p>
              </div>
            </div>

            <div class="single-step">
              <h1 class="step-1">3</h1>
              <div class="content">
                <h4>{% trans "Submit Infomation" %}</h4>
                <p>{% trans "Confirm and submit the information." %}</p>
              </div>
            </div>
          </div>
          <div class="steps-bg">
          </div>
        </div>
      </div>
    </div>
    </div>
  </section>
<script>
  function goToSearch(query, country) {
    let url;
    if (country) {

     url = '{% url "clinics:clinics_search" %}' + '/' + query + '/' + country + "?search=true"
    } else {
     url = '{% url "clinics:clinics_search" %}' + '/' + query  + "?search=true"

    }
    window.location.href = url
  }
</script>
{% endblock body %}