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


{% block title %}MyTripMed - Clinic Review{% endblock title %}

{% block body %}
<section class="top-section pb-0">
  <div class="container heading-border">
    <h1 class="mb-3">Submit Review</h1>
    <h5 class="text-dark">Submit the review for the {{ clinic_data.name }}</h5>
  </div>
</section>

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

<div class="container mb-5 pb-5">
  <div class="row">
    <div class="col-md-8 container-border">
      <div class="form-left card card-sm">
        <form method="POST" action="{% url 'clinics:clinics_reviews' clinic_data.slug %}">
          {% csrf_token %}
          <h4 class="text-dark mb-4">Fill this form to submit your review </h4>
          <div class="row">

            <div class="col-12">
              <h6 class="mt-2 mb-4">
                Give your review -
              </h6>

              <div class="row">
                <div class="col-md-4 col-sm-6">
                  <p class="text-grey text-700 p-sm">
                    For Quality
                  </p>

                  <div class="star-container">
                    <input type="radio" id="Qualitystar-1" value="5" name="QualityStar" required/>
                    <label for="Qualitystar-1"><i data-feather="star"></i></label>
                    <input type="radio" id="Qualitystar-2" value="4" name="QualityStar" checked/>
                    <label for="Qualitystar-2"><i data-feather="star"></i></label>
                    <input type="radio" id="Qualitystar-3" value="3" name="QualityStar" />
                    <label for="Qualitystar-3"><i data-feather="star"></i></label>
                    <input type="radio" id="Qualitystar-4" value="2" name="QualityStar" />
                    <label for="Qualitystar-4"><i data-feather="star"></i></label>
                    <input type="radio" id="Qualitystar-5" value="1" name="QualityStar" />
                    <label for="Qualitystar-5"><i data-feather="star"></i></label>
                  </div>
                </div>

                <div class="col-md-4 col-sm-6">
                  <p class="text-grey text-700 p-sm">
                    For Service
                  </p>

                  <div class="star-container">
                    <input type="radio" id="Servicestar-1" value="5" name="ServiceStar" required/>
                    <label for="Servicestar-1"><i data-feather="star"></i></label>
                    <input type="radio" id="Servicestar-2" value="4" name="ServiceStar" checked/>
                    <label for="Servicestar-2"><i data-feather="star"></i></label>
                    <input type="radio" id="Servicestar-3" value="3" name="ServiceStar" />
                    <label for="Servicestar-3"><i data-feather="star"></i></label>
                    <input type="radio" id="Servicestar-4" value="2" name="ServiceStar" />
                    <label for="Servicestar-4"><i data-feather="star"></i></label>
                    <input type="radio" id="Servicestar-5" value="1" name="ServiceStar" />
                    <label for="Servicestar-5"><i data-feather="star"></i></label>
                  </div>
                </div>

                <div class="col-md-4 col-sm-6">
                  <p class="text-grey text-700 p-sm">
                    For Cleanliness
                  </p>

                  <div class="star-container">
                    <input type="radio" id="Cleanlinessstars-1" value="5" name="CleanlinessStar" required/>
                    <label for="Cleanlinessstars-1"><i data-feather="star"></i></label>
                    <input type="radio" id="Cleanlinessstars-2" value="4" name="CleanlinessStar" checked/>
                    <label for="Cleanlinessstars-2"><i data-feather="star"></i></label>
                    <input type="radio" id="Cleanlinessstars-3" value="3" name="CleanlinessStar" />
                    <label for="Cleanlinessstars-3"><i data-feather="star"></i></label>
                    <input type="radio" id="Cleanlinessstars-4" value="2" name="CleanlinessStar" />
                    <label for="Cleanlinessstars-4"><i data-feather="star"></i></label>
                    <input type="radio" id="Cleanlinessstars-5" value="1" name="CleanlinessStar" />
                    <label for="Cleanlinessstars-5"><i data-feather="star"></i></label>
                  </div>
                </div>

                <div class="col-md-4 col-sm-6">
                  <p class="text-grey text-700 p-sm">
                    For Comfort
                  </p>

                  <div class="star-container">
                    <input type="radio" id="Comfortstar-1" value="5" name="ComfortStar" required/>
                    <label for="Comfortstar-1"><i data-feather="star"></i></label>
                    <input type="radio" id="Comfortstar-2" value="4" name="ComfortStar" checked/>
                    <label for="Comfortstar-2"><i data-feather="star"></i></label>
                    <input type="radio" id="Comfortstar-3" value="3" name="ComfortStar" />
                    <label for="Comfortstar-3"><i data-feather="star"></i></label>
                    <input type="radio" id="Comfortstar-4" value="2" name="ComfortStar" />
                    <label for="Comfortstar-4"><i data-feather="star"></i></label>
                    <input type="radio" id="Comfortstar-5" value="1" name="ComfortStar" />
                    <label for="Comfortstar-5"><i data-feather="star"></i></label>
                  </div>
                </div>

                <div class="col-md-4 col-sm-6">
                  <p class="text-grey text-700 p-sm">
                    For Communication
                  </p>

                  <div class="star-container">
                    <input type="radio" id="Communicationstar-1" value="5" name="CommunicationStar" required/>
                    <label for="Communicationstar-1"><i data-feather="star"></i></label>
                    <input type="radio" id="Communicationstar-2" value="4" name="CommunicationStar" checked />
                    <label for="Communicationstar-2"><i data-feather="star"></i></label>
                    <input type="radio" id="Communicationstar-3" value="3" name="CommunicationStar" />
                    <label for="Communicationstar-3"><i data-feather="star"></i></label>
                    <input type="radio" id="Communicationstar-4" value="2" name="CommunicationStar" />
                    <label for="Communicationstar-4"><i data-feather="star"></i></label>
                    <input type="radio" id="Communicationstar-5" value="1" name="CommunicationStar"  />
                    <label for="Communicationstar-5"><i data-feather="star"></i></label>
                  </div>
                </div>
              </div>

            </div>

            <div class="col-md-12">
              <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-12 mt-4">
              <label for="email" class="form-label">Email*</label>
              <input type="email" class="form-input" placeholder="Email" aria-label="Email" id="email" name="email"
                required>
            </div>

            <div class="col-12 mt-4">
              <label for="review">Review*</label>
              <textarea class="form-input" rows="4" placeholder="Please enter your review" id="review"
                name="review" 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 %}