{% extends 'base.html' %}
 {% load static %}

 {% block script_css %}
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
 {% endblock script_css %}

  {% block main_content %}
        {% include 'breadcrumb.html' %}
        <!-- Clinics Start -->
            <div class="container-fluid py-5">
                <div class="container">
                    <div class="row g-5 align-items-top">
                        <div class="col-lg-4 wow slideInUp" data-wow-delay="0.1s">
                            <div class="section-title bg-light rounded h-100 p-5">
                                <h5 class="position-relative d-inline-block text-primary text-uppercase">Our {{ page_title }}</h5>
                                <h1 class="display-6 mb-4">Delivering Dedicated Healthcare</h1>
                            </div>
                        </div>
                        <div class="col-lg-8 wow slideInUp" data-wow-delay="0.3s">
                            <a href="#list"> <!-- Replace 'your_target_url_name' with the actual URL or URL name -->
                                <img src="{% static 'main/img/Gallery/clinics_bhuth.jpg' %}"
                                     alt="Clinic Image"
                                     class="img-fluid w-100"
                                     style="box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);">
                            </a>
                        </div>

                    </div>
                </div>
            </div>
            <!-- Clinics End -->

             <!-- LIST -->
            <div class="container-fluid py-5 wow fadeInUp" data-wow-delay="0.1s" id="list">
              <div class="container">
                <div class="row g-5 mb-5" id="itemsContainer">
                  <div class="col-lg-12">
                    <!-- Clinics Table Start -->
                    <div class="table-responsive bg-light rounded shadow p-4">
                      <table class="table table-hover table-bordered text-center align-middle">
                        <thead class="table-success">
                          <tr>
                            <th scope="col">Clinic Name</th>
                            <th scope="col">Opening Hour</th>
                            <th scope="col">Closing Hour</th>
                            <th scope="col">Days</th>
                            <th scope="col">View Details</th>
                          </tr>
                        </thead>
                        <tbody>
                          {% for centre in centres %}
                            <tr>
                              <td><a href="#" data-bs-toggle="modal" data-bs-target="#centreModal{{ centre.id }}">{{ centre.title }}</a></td>
                              <td>{{ centre.opening_hour }}</td>
                              <td>{{ centre.closing_hour }}</td>
                              <td>{{ centre.opening_days }}</td>
                              <td><a href="#" data-bs-toggle="modal" data-bs-target="#centreModal{{ centre.id }}"><i class="fas fa-eye"></i></a></td>
                            </tr>

                            <!-- Modal for each Centre -->
                                <div class="modal fade" id="centreModal{{ centre.id }}" tabindex="-1" aria-labelledby="modalLabel{{ centre.id }}" aria-hidden="true">
                                  <div class="modal-dialog modal-lg">
                                    <div class="modal-content bg-light rounded shadow">
                                      <div class="modal-header">
                                        <h5 class="modal-title" id="modalLabel{{ centre.id }}" style="text-align: left">
                                            <img src="{% static 'main/img/BhUTHlogo_dark1.png' %}" alt="Logo" height="25">
                                            <b>:</b> {{ centre.title }}
                                        </h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                                        </button>
                                      </div>
                                      <div class="modal-body p-4" style="max-height: 600px; overflow-y: auto;">
                                        {% if centre.featured_image %}
                                          <img src="{{ centre.featured_image.url }}" alt="{{ centre.title }}" class="img-fluid mb-3 rounded">
                                        {% else %}
                                          <p class="text-muted"><em>No image available.</em></p>
                                        {% endif %}
                                        <p><span class="fw-bold">Opening Hours:</span>  <button type="button" class="btn btn-dark">{{ centre.opening_hour }} - {{ centre.closing_hour }}</button></p>
                                        <p><span class="fw-bold">Opening Days:</span> <button type="button" class="btn btn-dark">{{ centre.opening_days }}</button></p>
                                        <div class="text-wrap" style="overflow-y: auto; max-height: 200px;">
                                          {{ centre.description|safe }}
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                          {% endfor %}
                        </tbody>
                      </table>
                    </div>
                    <!-- Clinics Table End -->
                  </div>
                </div>
              </div>
            </div>



    {% endblock main_content %}

  {% block script_js %}{% endblock script_js %}