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

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

{% block body %}
  <div class="club-house">

    <!-- clubhouse header | start -->
    <div class="club-house__header">
      <div class="d-flex align-items-center gap-32px">
        <a href="javascript:;">
          <img src="{{ asset('images/club/app-logo.svg') }}" alt="ProScore Logo">
        </a>
        <p class="mb-0 body-text">{{ club.name }}</p>
      </div>
      <div class="d-flex gap-24px">
        <div class="d-flex align-items-center gap-24px">
          <div class="notification__anouncement cursor-pointer" id="notification-anouncement">
              <span>
                <img src="{{ asset('images/club/icons/icon-notification.svg') }}" alt="Notification Icon">
              </span>
            <span class="notification__label"></span>

            <div class="notification__wrapper box-shadow p-16px d-none" id="js-club-alerts">
              {% include 'club/partials/alerts.html.twig' with {'alerts' : alerts} %}
            </div>
          </div>
          <div class="user-circle" id="loginUser">
            <span class="text-white m-auto button-text">{{ app.user.firstName | first }}</span>
          </div>
          <ul class="user-menu logoutMenu p-24px list-unstyled box-shadow bg-white d-none" id="logoutMenu">
            <li class="user-menu__item">
              <a href="{{ logout_path(key = null) }}" class="user-menu__link body-text-small">
                  <span>
                    <img src="{{ asset('images/club/icons/icon-logout.svg') }}">
                  </span>
                <span>Logout</span>
              </a>
            </li>
          </ul>
        </div>
        <a href="{{ path('app_club_impersonateclubhouse', { id: club.id}) }}"
           class="ps-link d-flex gap-10px align-items-center text-decoration-none">
          <span>Launch clubhouse view</span>
          <span>
            <img src="{{ asset('images/club/icons/icon-popout.svg') }}">
            </span>
        </a>
      </div>
    </div>
    <!-- clubhouse header | end -->

    <div class="club-house__map">
      <div class="map" 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>
          <p class="button-text fw-bold mb-0 ms-auto d-flex align-items-center gap-2 cursor-pointer"
             id="current-player-hide-show">
              <span class="icon-close">
                <img src="{{ asset('images/club/icons/icon-eye-hide.svg') }}">
              </span>
            <span class="icon-show d-none">
                <img src="{{ asset('images/club/icons/icon-eye-show.svg') }}">
            </span>
            <span class="proscreen-green-text">Hide</span>
          </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-4-text">
            <span class="member">Members</span>
            <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/impersonate-groups.html.twig' with {'rounds' : activeRounds} %}
          </div>
        </div>
      </div>
      <!-- clubhouse map-->
    </div>
  </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: "impersonate-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 %}
        ];

        const groups = [
          {% for round in activeRounds %}
          {
            groupNumber: {{ round.number }},
            lat: parseFloat({{ round.latitude }}),
            lng: parseFloat({{ round.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) => {
          new AdvancedMarkerElement({
            position: {
              lat: tee.lat,
              lng: tee.lng
            },
            map,
            content: createTeeMarkerElement(tee.holeNumber, tee.par),
            title: `Hole ${tee.holeNumber} (Par ${tee.par})`,
          });
        });
        setInterval(loadGroups, 5000);

        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);
        });

        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;

                console.log(response.rounds)

                document.getElementById("js-round-groups").innerHTML = response.html.rounds;
                document.getElementById("js-club-alerts").innerHTML = response.html.alerts;
                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=impersonate');
            xhr.setRequestHeader("X-API-KEY", "wohpeeb0quae0chealuo7Hael5haeloo");
            xhr.send()
            console.log("loadGroups");
          });
        }

      } catch (error) {
        console.error("Error initializing map:", error);
      }
    }


  </script>
{% endblock %}