{# show data #}
<div class="card bloc-radius bloc-border bloc-box-shadow px-0 my-2">
  <div class="card-header bloc-radius-top-left bloc-radius-top-right">
    <b>
      Sélectionnez le jour et l'heure à laquelle vous souhaitez passer l'examen
      du code.
    </b>
  </div>
  <div class="card-body">
    {% if (traficLawsType) %}
      <h4 class="text-center choosen-infos py-4">Vous souhaitez passer le <b>{{traficLawsType}}</b> <span id="chosen-date" class="px-2"></span><span id="chosen-slot" class="px-2"></span></h4>
    {% endif %}
    {% if (data['daysAndSlotsData']|length) > 0 %}
      {# nav days #}
      <div class="row m-0">
        <div class="col-12 text-center">
          <div class="scrollmenu">
            <button class="btn-sm btn-primary border-0 scrollmenu-left pr-2">
              <i class="fas fa-chevron-left"></i>
            </button>
            <div class="scrollmenu-content overflow-hidden"
              style="white-space: nowrap;">
              {% for key, value in data['daysAndSlotsData'] %}
                <div class="day-bloc bloc-radius bloc-border bloc-box-shadow p-3 d-inline-block mx-3 cursor-exam"
                  data-id="{{ key|date('dmY') }}-day"
                  data-day={{ key|date('d/m/Y') }}
                >
                  {{ key|date('d/m/Y') }}
                </div>
              {% endfor %}
            </div>
            <button class="btn-sm btn-primary border-0 scrollmenu-right pl-2">
              <i class="fas fa-chevron-right"></i>
            </button>
          </div>
        </div>
      </div>

      {# Nav slots #}
      <div class="row">
        <div class="col-md-12">
          <span class="my-2" id="day-add-spinner"></span>
          {% for key, value in data['daysAndSlotsData'] %}
            <div class="row d-none day-content" id="{{ key|date('dmY') }}-day">
              {# Title #}
              <div class="col-md-12 py-3 text-center">
                <h2>
                  {{ key|date('d/m/Y') }}
                </h2>
              </div>

              {# Slots #}
              <div class="row m-0">
                <div class="col-12 text-center">
                  <div class="scrollmenu" style='width:95% !important'>
                    <button class="btn-sm btn-primary border-0 scrollmenu-slots-left pr-2">
                      <i class="fas fa-chevron-left"></i>
                    </button>

                    <div class="scrollmenu-slots-content overflow-hidden"
                      style="white-space: nowrap;">
                        {% for keySlot, valueSlot in value %}
                            <div class="slot-bloc bloc-radius bloc-border bloc-box-shadow p-3 d-inline-block mx-2 cursor-exam"
                                data-id="{{ key|date('dmY') }}-day-{{ keySlot|date('Hi') }}-slot"
                                data-data="{{ valueSlot|json_encode }}"
                                data-slot="{{ keySlot }}"
                            >
                                {{ keySlot }}
                            </div>                      
                        {% endfor %}
                    </div>
                    <button class="btn-sm btn-primary border-0 scrollmenu-slots-right pl-2">
                      <i class="fas fa-chevron-right"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          {% endfor %}
        </div>
      </div>

      {# Nav sessions #}
      <div class="row">
        <div class="col-md-9 py-3">
            <span class="my-2" id="slot-add-spinner"></span>
            {% for key, value in data['daysAndSlotsData'] %}
              {% for keySlot, valueSlot in value %}
                <div class="row d-none slot-content m-0"
                  id="{{ key|date('dmY') }}-day-{{ keySlot|date('Hi') }}-slot">
                  {% for keySession, valueSession in valueSlot %}
                    <div class="col-md-4 py-3">
                      <div class="card bloc-radius bloc-border bloc-box-shadow">
                        <div class="card-body">
                          <h5 class="card-title text-center">
                            {{ valueSession['name'] }}
                          </h5>
                          {% if  valueSession['codeCentre'] %}
                            <p class="card-text text-center">
                              <img class="card-exam-img" src="{{ asset(valueSession['image']) }}" alt="logo-{{valueSession['companyName']}}"/>
                            </p>
                          {% endif %}
                          <p class="card-text">
                            <strong>
                              Référence :
                            </strong>
                            {{ valueSession['codeCentre'] }}
                          </p>
                          <p class="card-text">
                            <strong>
                              Adresse :
                            </strong>
                            {{ valueSession['address'] }}
                          </p>
                          {# <p class="card-text">
                            <strong>Distance :</strong>
                            {{ valueSession['distance'] }} km
                          </p> #}
                          <p class="card-text">
                            <strong>Heure de début : :</strong>
                            {{ valueSession['date']|date('H:i') }}
                          </p>
                          <p class="card-text">
                            <strong>Durée :</strong> {{ valueSession['duree'] }} minutes
                          </p>
                          <p class="card-text">
                            <strong>Places :</strong>
                            {{ valueSession['nombrePlacesDispo'] }} Place(s) disponible(s),
                            dont {{ valueSession['nombrePreInscriptions'] }} pré-inscription(s)
                            effectuée(s) et {{ valueSession['canditatsCount'] }} candidtaure(s)
                          </p>
                          <p class="card-text">
                            <strong>Nombre de places PMR :</strong>
                            {{ valueSession['nombrePlacesPMR'] }}
                          </p>
                          <p class="card-text cursor-exam text-center">
                            <a class="btn btn-primary" title="Réservez votre session"  href="{{ path('sessions_code', {code_center: valueSession['codeCentre']}) }}?driving_license_type=B&session_date={{ valueSession['date'] }}">
                                Réserver le {{ valueSession['date']|date('d/m/Y à H:i') }}
                            </a>
                          </p>
                        </div>
                      </div>
                    </div>
                  {% endfor %}
                </div>
              {% endfor %}
            {% endfor %}

        </div>
        <div class="col-md-3 py-3">
          {# student sessions content #}
          {{ include('traffic_laws_exam/includes/_maps.html.twig') }}
        </div>
      </div>
    {% endif %}
  </div>
</div>
{% block pageJavascript %}
  <script>
  let mapLoaded = false;

    function isGoogleMapsScriptLoaded() {
      const scripts = document.getElementsByTagName('script');
      for (let i = 0; i < scripts.length; i++) {
        if (scripts[i].src.includes("maps.googleapis.com/maps/api/js")) {
          return true;
        }
      }
      return false;
    }

  // Function to handle button click
    function handleButtonClick(__All_Addresses) {
      if ($("#map").length) {
        // Usage:
        if (isGoogleMapsScriptLoaded()) {
          // Google Maps API script is already loaded
          initMap(__All_Addresses); // You can call your initialization function here
        } else {
          // Load the Google Maps API script
          var googleMapsScript = document.createElement('script');
          googleMapsScript.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyBxxYzjPMABBBX-_mA1PcD0nit5SvWWXCo&libraries=places";
          googleMapsScript.async = true;
          googleMapsScript.defer = true;
          googleMapsScript.onload = function () {
            initMap(__All_Addresses); // Call your initialization function once the API is loaded
          };
          document.head.appendChild(googleMapsScript);
        }  
        return true;
      }
    }

  // Function to initialize the map and add markers
    async function initMap(__All_Addresses) {
      let mapDiv = $('#map');
      const lat = {{geoloc['lat']}};
      const lng = {{geoloc['long']}};
      //const addresses = await {{data['addresses']|raw}};

      const map = new google.maps.Map(document.getElementById("map"), {
        center: { lat: parseFloat(lat), lng: parseFloat(lng) },
        zoom: 9,
      });

      __All_Addresses.forEach((location) => {
          new google.maps.Marker({
              position: { lat: parseFloat(location['geoloc'].latitude), lng: parseFloat(location['geoloc'].longitude) },
              map: map,
              title: location['address'],
          });
      });
    }
  </script>
{% endblock %}