{% extends 'base.html.twig' %}

{% block title %}{{ page_title }}{% endblock %}

{% block body %}
  <div class="club-house">
    <div class="club-house__map">
      <div class="map full-h" id="map"></div>
      <div class="proscreen-table p-24px gap-24px">
        <div class="d-flex align-items-center gap-4">
            <span class="pro-circle">
              <img src="{{ asset('images/club/icons/icon-golf-club-circle.svg') }}">
            </span>
          <p class="body-text fw-bold mb-0">Current players</p>
        </div>
        <div class="proscreen-table__content d-flex flex-column gap-2">
          <div class="proscreen-table__content-header justify-content-between body-text-small proscreen-black-3-text">
            <span class="size">Size</span>
            <span class="py-2 px-3">
              <img src="{{ asset('images/club/icons/icon-group-players.svg') }}">
            </span>
          </div>
          <div class="proscreen-table__content-body d-flex flex-column gap-2" id="js-round-groups">
            {% include 'club/partials/clubhouse-groups.html.twig' with {'rounds' : activeRounds} %}
          </div>
        </div>
      </div>
    </div>
    <!-- clubhouse map-->
    {% if app_card_image %}
    <div class="app-card">
      <img src="/uploads/settings/{{ app_card_image.value }}" width="311px"/>
    </div>
    {% else %}
      <div class="app-card">
        <div class="app-card__top">
          <div class="d-flex gap-12px">
            <img src="{{ asset('images/club/app-icon.svg') }}" class="img-fluid" alt="proscreen" />
            <p class="pt-2 app-card__title mb-0">
              <span>Play</span>
              <span class="fw-bold proscreen-green-text">smarter, </span>
              <span>not</span>
              <span class="fw-bold proscreen-green-text">slower</span>
              <span>with</span>
              <span class="fw-bold"> ProScreen</span>
            </p>
          </div>
          <ul class="m-0 body-text-xsmall list-unstyled tick-list">
            <li>Smooth golf on any course, anytime</li>
            <li>Track pace of play in real-time</li>
            <li>Avoid slow play penalties</li>
            <li>Join the club for a better game experience</li>
          </ul>
        </div>
        <div class="app-card__bottom">
          <div class="d-flex justify-content-between w-100">
            <div class="d-flex flex-column justify-content-between">
              <p class="app-card__bottom-title">
                <span class="fw-bold">Download</span>
                <span>OUR APP</span>
              </p>
              <div class="d-flex gap-2 flex-column">
                <img src="{{ asset('images/club/app-store.svg') }}" class="" alt="app store" />
                <img src="{{ asset('images/club/google-play.svg') }}" class="" alt="google store" />
              </div>
            </div>
            <div>
              <img src="{{ asset('images/club/qr-code.svg') }}" class="" alt="barcode" />
            </div>
          </div>
        </div>
      </div>
    {% endif %}
  </div>
{% endblock %}

{% block javascripts %}
  {{ parent() }}
  <script>

    async function initMap() {
      try {
        // Request needed libraries
        const { Map } = await google.maps.importLibrary("maps");
        const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

        // Initialize map
        const map = new Map(document.getElementById("map"), {
          center: { lat: {{ club.latitude }}, lng: {{ club.longitude }} }, // Default center
          zoom: 17,
          mapTypeId: "satellite",
          mapId: "clubhouse-map", // Replace with your Map ID
        });

        // Array of tee data (hole number, par, and position)
        const tees = [
          {% for hole in club.holes %}
            {
              holeNumber: {{ hole.number }},
              par: {{ hole.par }},
              lat: {{ hole.tee_latitude }},
              lng: {{ hole.tee_longitude }}
            },
          {% endfor %}
        ];

        // Function to create a tee marker element
        const createTeeMarkerElement = (holeNumber) => {
          const element = document.createElement("div");
          element.innerHTML = `
          <div class="map__tee">
            <svg width="24" height="38" viewBox="0 0 24 38" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0_75_1430)">
                <path d="M0.000647878 11.9662C-0.0611168 5.43665 5.32653 0.017615 11.9601 4.35134e-05C18.6412 -0.0175279 23.7871 5.28905 23.9936 11.5322C24.2159 18.2234 18.9112 23.7812 12.2618 23.8849C5.4483 23.9938 0.065942 18.7154 0.000647878 11.9662Z" fill="#50B8E4"/>
                <path d="M6.10279 23.9552C6.88102 24.2171 7.61691 24.5105 8.37749 24.7126C11.3175 25.498 14.1993 25.2977 17.0069 24.1222C17.614 23.8674 17.6351 23.8199 17.734 24.579C17.801 25.0974 17.6316 25.5665 17.1393 25.802C15.664 26.5136 14.8646 27.7946 14.2275 29.1986C13.2357 31.3809 12.9216 33.7109 12.791 36.076C12.7681 36.4854 12.7346 36.8966 12.754 37.3043C12.7751 37.7084 12.5863 37.9228 12.221 37.9755C11.951 38.0142 11.6669 38.0054 11.3969 37.9667C11.0457 37.9158 10.8993 37.6961 10.8922 37.3201C10.8551 34.9708 10.6398 32.6443 9.89161 30.3969C9.48573 29.181 8.96691 28.0125 8.08808 27.0601C7.68749 26.6261 7.21102 26.236 6.70455 25.932C5.92808 25.4646 5.68985 24.8356 6.09926 23.9552H6.10279Z" fill="#50B8E4"/>
              </g>
            </svg>
            <span class="map__tee-si">${holeNumber}</span>
          </div>
        `;
          return element;
        };

        const createGroupMarkerElement = (groupNumber) => {
          const element = document.createElement("div");
          element.innerHTML = `
          <div class="map__tee">
            <svg width="24" height="38" viewBox="0 0 24 38" fill="none" xmlns="http://www.w3.org/2000/svg">
              <defs>
                <clipPath id="clip0_75_1430">
                  <rect width="24" height="38" fill="white"/>
                </clipPath>
              </defs>
            </svg>
            <span class="map__tee-par">${groupNumber}</span>
          </div>
        `;
          return element;
        };
        // Loop through tees and create markers
        tees.forEach((tee) => {
          console.log('tee', tee);
          new AdvancedMarkerElement({
            position: {
              lat: tee.lat,
              lng: tee.lng
            },
            map,
            content: createTeeMarkerElement(tee.holeNumber, tee.par),
            title: `Hole ${tee.holeNumber} (Par ${tee.par})`,
          });
        });

        // loop through groups
        const groups = [
          {% for round in activeRounds %}
          {
            groupNumber: {{ round.number }},
            lat: parseFloat({{ round.latitude }}),
            lng: parseFloat({{ round.longitude }})
          },
          {% endfor %}
        ];
        let groupMarkers = [];
        groups.forEach((group) => {
          const marker = new AdvancedMarkerElement({
            position: {
              lat: group.lat,
              lng: group.lng
            },
            map,
            content: createGroupMarkerElement(group.groupNumber),
            title: `Group ${group.groupNumber}`,
          });
          groupMarkers.push(marker);
        });

        setInterval(loadGroups, 5000);

        function clearMarkers() {
          for (let i = 0; i < groupMarkers.length; i++) {
            groupMarkers[i].setMap(null);
          }
          groupMarkers = [];
        }

        function loadGroups() {
          $(function () {
            let xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
              if (xhr.readyState === XMLHttpRequest.DONE) {

                let response = JSON.parse(xhr.responseText),
                  rounds = response.rounds;

                document.getElementById("js-round-groups").innerHTML = response.html.rounds;

                updateNotificationCount();
                clearMarkers();
                rounds.forEach((group) => {
                  const marker = new AdvancedMarkerElement({
                    position: {
                      lat: group.latitude,
                      lng: group.longitude
                    },
                    map,
                    content: createGroupMarkerElement(group.number),
                    title: `Group ${group.number}`,
                  });
                  groupMarkers.push(marker);

                });
              }
            };
            xhr.open('POST', '/api/clubs/{{ club.id }}/active-rounds?view=clubhouse');
            xhr.setRequestHeader("X-API-KEY", "wohpeeb0quae0chealuo7Hael5haeloo");
            xhr.send()
            console.log("loadGroups");
          });
        }
        // Loop through tees and create markers

      } catch (error) {
        console.error("Error initializing map:", error);
      }
    }
  </script>
{% endblock %}