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

{% block title %}
{% if request.GET.search %}
{{ request.resolver_match.kwargs.search_treatment }} {% trans "in" %} {% if request.resolver_match.kwargs.search_country %} {{ request.resolver_match.kwargs.search_country }} {% else %} {% trans "all countries" %} {% endif %}, {% trans "compare prices" %} - Mytripmed
{% else %}
Treatments, Clinics, Destinations
{% endif %}
{% endblock title %}

{% block description %}
{{ request.resolver_match.kwargs.search_treatment }} {% trans "in" %} {% if request.resolver_match.kwargs.search_country %} {{ request.resolver_match.kwargs.search_country }} {% else %} {% trans "all countries" %} {% endif %} - {% trans "Compare prices of doctors and clinics, read real patient reviews and book an appointment online for your" %} {{ request.resolver_match.kwargs.search_treatment }}
{% endblock description %}

{% block body %}
<section class="results-section top-section">
    
    <div class="container">
        {% if request.GET.search %}
        <h2 class="text-dark mb-2">
            {{ request.resolver_match.kwargs.search_treatment }} {% trans "in" %} {% if request.resolver_match.kwargs.search_country %} {{ request.resolver_match.kwargs.search_country }} {% else %} {% trans "all countries" %} {% endif %}
        </h2>
        <p class="p-big heading-border text-dark">
            {% trans "All" %} <strong>{{ paginator.count }}</strong> {{ request.GET.query }}  {% if request.resolver_match.kwargs.search_country %} {% trans "Clinics in" %} {{ request.resolver_match.kwargs.search_country }} {% else %} {% trans "Clinics found." %} {% endif %}
        </p> 
        {% endif %}
        <div class="row">
            <div class="col-xl-3 container-border container-border-left py-0">
                <div class="filter-box">
                    <div class="d-flex justify-content-between mt-4 mb-4">
                        <h5 class="subheading mb-0">
                            {% trans "filters" %}
                        </h5>

                        <i data-feather="x" onclick="closeFilters()" class="d-lg-none" style="cursor: pointer;"></i>
                    </div>

                    <div class="card card-shadow-xl card-sm">
                        <form method="GET" action="" class="form">
                            <!-- {% csrf_token %} -->
                            <div class="form-group mb-3">

                                <label for="searchDestinationInput" class="form-label">{% trans "Destination" %}</label>
                                <input type="text" style="display: none;" name="sort_by" value="{{sort_by}}">
                                <select name="country" class="form-select" id="searchDestinationInput">
                                    <option value="">{% trans "Select Destination" %}</option>
                                    {% for country in all_countries %}
                                    <option value="{{country.name}}" {% if request.resolver_match.kwargs.search_country == country.name %} selected
                                        {% endif %} ">{{ country.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>


                            <div class=" form-group mb-3">

                                        <label for="priceFilterInput" class="form-label">{% trans "Rating" %}</label>

                                        <div class="btn-check-group btn-group btn-radio-group" role="group"
                                            aria-label="Basic radio toggle button group">
                                            <input type="radio" class="btn-check" name="score" id="btnradio1"
                                                autocomplete="off" value="1">
                                            <label class="btn-check-label" for="btnradio1">1</label>

                                            <input type="radio" class="btn-check" name="score" id="btnradio2"
                                                autocomplete="off" value="2">
                                            <label class="btn-check-label" for="btnradio2">2</label>

                                            <input type="radio" class="btn-check" name="score" id="btnradio3"
                                                autocomplete="off" value="3">
                                            <label class="btn-check-label" for="btnradio3">3</label>

                                            <input type="radio" class="btn-check" name="score" id="btnradio4"
                                                autocomplete="off" value="4">
                                            <label class="btn-check-label" for="btnradio4">4</label>

                                            <input type="radio" class="btn-check" name="score" id="btnradio5"
                                                autocomplete="off" value="5">
                                            <label class="btn-check-label" for="btnradio5">5</label>
                                        </div>
                            </div>

                            <div class="form-group mb-3">
                                <label for="filterPrice" class="form-label">{% trans "Price" %}</label>

                                <select name="price" class="form-select" id="filterPrice">
                                    <option value="">{% trans "Select Price" %}</option>
                                    <option value="{{min_price}}-{{ max_price|div:3|floatformat:0 }}">{{min_price}}
                                        {{current_symbol}} - {{ max_price|div:3|floatformat:0 }} {{current_symbol}}
                                    </option>
                                    <option
                                        value="{{max_price|div:3|floatformat:0|add:1}}-{{ max_price|div:3|add:max_price|div:3|floatformat:0 }}">
                                        {{max_price|div:3|floatformat:0|add:1}} {{current_symbol}} - {{ max_price|div:3|add:max_price|div:3|floatformat:0 }} {{current_symbol}}</option>
                                    <option
                                        value="{{ max_price|div:3|add:max_price|div:3|floatformat:0|add:1 }}-{{max_price}}">
                                        {{ max_price|div:3|add:max_price|div:3|floatformat:0|add:1 }} {{current_symbol}}
                                        - {{max_price}} {{current_symbol}}</option>

                                </select>
                            </div>

                            <div class="text-center mt-5">

                                <button type="submit" class="btn btn-primary">
                                    {% trans "Apply" %}

                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
           
            <div class="col-xl-9 container-border container-border-right">
                <div class="results-actions">

                    <button class="btn input-btn d-xl-none" onclick="showFilters()">
                        <i data-feather="filter"></i>
                        {% trans "Filters" %}
                        <i data-feather="chevron-right"></i>
                    </button>
                    <div class="form-group form-icon filter-sortby">
                        <img src="{% static 'img/sort.png' %}" alt="sort-icon">

                        <select class="form-select form-select-icon" onchange="location = this.value;">
                            <option value="" {% if sort_by == '' %} selected {% endif %}>{% trans "Sort By" %}</option>
                            <option value="?country={{request.resolver_match.kwargs.search_country}}&query={{request.GET.query}}&sort_by=rating"
                                {% if sort_by == 'rating' %} selected {% endif %}>Rating</option>
                            <option value="?country={{request.resolver_match.kwargs.search_country}}&query={{request.GET.query}}&sort_by=price"
                                {% if sort_by == 'price' %} selected {% endif %}>Price</option>

                        </select>
                    </div>

                </div>
                {% if all_treatments|length == 0 %}
                <div class="results-list mt-4">
                <h2 style="text-align: center; padding: 30px;">No Treatments found</h1>
                </div>
                {% else %}

                <div class="results-list mt-4">
                    {% for treatment in all_treatments %}
                    <div class="result-card">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="result-card-img">
                                    <img src="{{ treatment.clinic.get_cover_image.image.url }}" alt="#" class="clinic-img">
                                </div>
                            </div>
                            <div class="col-md-8">
                                <div class="result-card-body">
                                    <div class="result-card-body-content">
                                        <div class="result-card-body-content-top">
                                            <div>
                                                <a
                                                    href="{% url 'clinics:clinics_each_detail' treatment.clinic.slug %}">
                                                    <h4 class="result-card-heading">

                                                        {{ treatment.clinic.name }}
                                                    </h4>
                                                </a>

                                                <div class="icon-text">
                                                    <img src="{% static 'img/location-icon.png' %}"
                                                        alt="clinic location">
                                                    <span>{{ treatment.clinic.city }}, {{ treatment.clinic.country }}</span>
                                                </div>
                                            </div>

                                            <div class="result-card-body-content-top-right">
                                                <div class="Stars"
                                                    style="--rating: {{ treatment.clinic.get_avg_rating }};"
                                                    aria-label="Rating of this product is {{ treatment.clinic.get_avg_rating }} out of 5.">

                                                       <span class="text-purple text-right" style="font-size: 2rem;"> {{ treatment.clinic.get_avg_rating }} </span>

                                                </div>
                                            </div>



                                        </div>


                                        <p class="p-sm text-grey mt-4">
                                            {{ treatment.short_desc }}
                                        </p>

                                        <div class="package-container">
                                            <div class="row">
                                                {% if treatment.package_info_1 %}
                                                <div class="col-sm-6">
                                                    <h6 class="package-name">
                                                        {{ treatment.package_info_1 }}
                                                    </h6>
                                                </div>
                                                {% endif %}
                                                {% if treatment.package_info_2 %}
                                                <div class="col-sm-6">
                                                    <h6 class="package-name">
                                                        {{ treatment.package_info_2 }}
                                                    </h6>
                                                </div>
                                                {% endif %}
                                                {% if treatment.package_info_3 %}
                                                <div class="col-sm-6">
                                                    <h6 class="package-name">
                                                        {{ treatment.package_info_3 }}
                                                    </h6>
                                                </div>
                                                {% endif %}
                                                {% if treatment.package_info_4 %}
                                                <div class="col-sm-6">
                                                    <h6 class="package-name">
                                                        {{ treatment.package_info_4 }}
                                                    </h6>
                                                </div>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="result-card-body-footer">
                                        <div class="d-flex align-items-center gap-3">
                                            <span class="p-sm text-grey">
                                                from
                                            </span>
                                            <span class="h2 d-inline-block text-dark mb-0">
                                                {% comment %} {{ treatment.price }} € {% endcomment %}
                                                {{ treatment.price }} {{ current_symbol }}
                                            </span>

                                        </div>

                                        <a class="btn btn-primary btn-secondary"
                                            href="{% url 'clinics:clinics_free_quote' treatment.clinic.slug %}?treatment={{treatment.searched_treatment}}">
                                            {% trans "Inquire" %}
                                        </a>
                                    </div>

                                </div>

                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>


                <div class="pagination">
                    <nav aria-label="Results Navigation" class="w-100">
                        <ul class="pagination justify-content-center">
                            <li class="page-item">
                                {% if current_page.has_previous %}
                                <a class="btn-icon"
                                    href="{% url 'clinics:clinics_search' %}?query={{request.GET.query}}&country={{request.resolver_match.kwargs.search_country}}&page={{page_no|add:"-1"}}" tabindex="-1" aria-disabled="true">
                                    <i class="text-dark" data-feather="chevron-left"></i>
                                </a>
                                {% else %}
                                <a class="btn-icon disabled" href="#" tabindex="-1" aria-disabled="true">
                                    <i class="text-dark" data-feather="chevron-left"></i>
                                </a>
                                {% endif %}
                            </li>
                            <li class="page-item active">

                                <h5 class="pagination-text">
                                    {% trans "Page" %} {{page_no}} {% trans "of" %} {{ paginator.num_pages }}
                                </h5>

                            </li>
                            <li class="page-item">
                                {% if current_page.has_next %}
                                <a class="btn-icon"
                                    href="{% url 'clinics:clinics_search' %}?query={{request.GET.query}}&country={{request.resolver_match.kwargs.search_country}}&page={{page_no|add:"+1"}}">
                                    <i class="text-dark" data-feather="chevron-right"></i>
                                </a>
                                {% else %}
                                <a class="btn-icon disabled" href="#">
                                    <i class="text-dark" data-feather="chevron-right"></i>
                                </a>
                                {% endif %}
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
{% endif %}

</section>

{% endblock body %}