@extends('frontend.theme1.index', ['title' => 'Keanggotaan - Fitness Plus Indonesia', 'count' => $count ?? 0])
@section('css')
    <link rel="stylesheet" href="{{ asset('themes1/css/leaflet.css') }}" />
    <link rel="stylesheet" href="{{ asset('themes1/css/markercluster.css') }}" />
@endsection
@section('js')
    <script src="{{ asset('themes1/js/leaflet.js') }}"></script>
    <script src="{{ asset('themes1/js/leaflet.markercluster.js') }}"></script>
    <script>
        window.fitnessPlusLocations = @json($locations ?? []);
    </script>
    <script src="{{ asset('themes1/js/maps.js') }}"></script>
    <script>
        (function () {
            var branchSelect = document.getElementById('membership-branch-select');
            var branchList = document.querySelector('.membership-branch-list');
            var statusText = document.getElementById('membership-branch-status');

            if (!branchSelect || !branchList) {
                return;
            }

            var branchCards = Array.prototype.slice.call(
                branchList.querySelectorAll('.membership-branch-card[data-branch-key]')
            );

            if (!branchCards.length) {
                return;
            }

            var geolocationState = {
                available: typeof navigator !== 'undefined' && 'geolocation' in navigator,
                latitude: null,
                longitude: null,
            };

            var nearbyRadiusKm = 25;
            var maxVisibleBranches = 5;

            function setStatus(message) {
                if (!statusText) {
                    return;
                }

                statusText.textContent = message || '';
            }

            function dispatchMapFilter(detail) {
                if (typeof window === 'undefined' || typeof window.dispatchEvent !== 'function') {
                    return;
                }

                try {
                    window.dispatchEvent(new CustomEvent('fitnessplus:map-filter', {
                        detail: detail || {
                            mode: 'all',
                        },
                    }));
                } catch (error) {
                    // Ignore environments that cannot construct CustomEvent.
                }
            }

            function getCardCoordinates(card) {
                var latitude = parseFloat(card.dataset.latitude || '');
                var longitude = parseFloat(card.dataset.longitude || '');

                if (!Number.isFinite(latitude) || !Number.isFinite(longitude)) {
                    return null;
                }

                return {
                    latitude: latitude,
                    longitude: longitude,
                };
            }

            function syncMapWithVisibleCards() {
                var visibleCoordinates = branchCards
                    .filter(function (card) {
                        return !card.hidden;
                    })
                    .map(getCardCoordinates)
                    .filter(function (coordinate) {
                        return coordinate !== null;
                    });

                dispatchMapFilter({
                    mode: 'coordinates',
                    coordinates: visibleCoordinates,
                    fitBounds: visibleCoordinates.length > 0,
                });
            }

            function clearDistance(card) {
                var distanceElement = card.querySelector('.membership-branch-distance');

                if (!distanceElement) {
                    return;
                }

                distanceElement.hidden = true;
                distanceElement.textContent = '';
            }

            function setDistance(card, distanceKm) {
                var distanceElement = card.querySelector('.membership-branch-distance');

                if (!distanceElement) {
                    return;
                }

                distanceElement.hidden = false;
                distanceElement.textContent = distanceKm.toFixed(1) + ' km dari lokasi Anda';
            }

            function toRadians(value) {
                return value * Math.PI / 180;
            }

            function calculateDistanceInKm(lat1, lon1, lat2, lon2) {
                var earthRadiusKm = 6371;
                var deltaLat = toRadians(lat2 - lat1);
                var deltaLon = toRadians(lon2 - lon1);
                var a =
                    Math.sin(deltaLat / 2) * Math.sin(deltaLat / 2) +
                    Math.cos(toRadians(lat1)) * Math.cos(toRadians(lat2)) *
                    Math.sin(deltaLon / 2) * Math.sin(deltaLon / 2);
                var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));

                return earthRadiusKm * c;
            }

            function resetCards() {
                branchCards.forEach(function (card) {
                    card.hidden = false;
                    card.style.order = '';
                    clearDistance(card);
                });
            }

            function hideAllCards() {
                branchCards.forEach(function (card) {
                    card.hidden = true;
                    card.style.order = '';
                    clearDistance(card);
                });
            }

            function renderBranchesByMode() {
                resetCards();

                if (!geolocationState.available) {
                    hideAllCards();
                    setStatus('Geolocation tidak didukung browser ini. Tidak dapat menampilkan cabang terdekat.');
                    dispatchMapFilter({
                        mode: 'coordinates',
                        coordinates: [],
                        fitBounds: false,
                    });
                    return;
                }

                if (geolocationState.latitude === null || geolocationState.longitude === null) {
                    hideAllCards();
                    setStatus('Izinkan akses lokasi untuk menampilkan cabang terdekat.');
                    dispatchMapFilter({
                        mode: 'coordinates',
                        coordinates: [],
                        fitBounds: false,
                    });
                    return;
                }

                var nearestCandidates = branchCards.map(function (card) {
                    var latitude = parseFloat(card.dataset.latitude || '');
                    var longitude = parseFloat(card.dataset.longitude || '');

                    if (!Number.isFinite(latitude) || !Number.isFinite(longitude)) {
                        return {
                            card: card,
                            distance: Number.POSITIVE_INFINITY,
                        };
                    }

                    return {
                        card: card,
                        distance: calculateDistanceInKm(
                            geolocationState.latitude,
                            geolocationState.longitude,
                            latitude,
                            longitude
                        ),
                    };
                });

                nearestCandidates.sort(function (left, right) {
                    var leftIsNearby = Number.isFinite(left.distance) && left.distance <= nearbyRadiusKm;
                    var rightIsNearby = Number.isFinite(right.distance) && right.distance <= nearbyRadiusKm;

                    if (leftIsNearby !== rightIsNearby) {
                        return leftIsNearby ? -1 : 1;
                    }

                    var leftFinite = Number.isFinite(left.distance);
                    var rightFinite = Number.isFinite(right.distance);

                    if (leftFinite && rightFinite) {
                        return left.distance - right.distance;
                    }

                    if (leftFinite !== rightFinite) {
                        return leftFinite ? -1 : 1;
                    }

                    return 0;
                });

                var nearbyCount = 0;
                var visibleCount = 0;
                var coordinateCount = 0;

                nearestCandidates.forEach(function (entry, index) {
                    var isFiniteDistance = Number.isFinite(entry.distance);
                    var isNearby = isFiniteDistance && entry.distance <= nearbyRadiusKm;
                    var isVisible = false;

                    if (isNearby) {
                        nearbyCount += 1;

                        if (visibleCount < maxVisibleBranches) {
                            isVisible = true;
                        }
                    }

                    entry.card.style.order = String(index);
                    entry.card.hidden = !isVisible;

                    if (!isVisible) {
                        clearDistance(entry.card);
                        return;
                    }

                    visibleCount += 1;
                    setDistance(entry.card, entry.distance);

                    if (getCardCoordinates(entry.card) !== null) {
                        coordinateCount += 1;
                    }
                });

                if (nearbyCount < 1) {
                    setStatus('Tidak ada cabang dalam radius ' + nearbyRadiusKm + ' km dari lokasi Anda.');
                    dispatchMapFilter({
                        mode: 'coordinates',
                        coordinates: [],
                        fitBounds: false,
                    });
                    return;
                }

                if (coordinateCount < 1) {
                    setStatus('Koordinat cabang belum tersedia untuk ' + visibleCount + ' hasil yang ditampilkan.');
                    dispatchMapFilter({
                        mode: 'coordinates',
                        coordinates: [],
                        fitBounds: false,
                    });
                    return;
                }

                if (nearbyCount > maxVisibleBranches) {
                    setStatus('Menampilkan ' + visibleCount + ' cabang terdekat dari ' + nearbyCount + ' cabang dalam radius ' + nearbyRadiusKm + ' km.');
                } else {
                    setStatus('Menampilkan ' + visibleCount + ' cabang terdekat dalam radius ' + nearbyRadiusKm + ' km.');
                }

                syncMapWithVisibleCards();
            }

            function requestLocationAndRender() {
                if (!geolocationState.available) {
                    renderBranchesByMode();
                    return;
                }

                if (geolocationState.latitude !== null && geolocationState.longitude !== null) {
                    renderBranchesByMode();
                    return;
                }

                hideAllCards();
                setStatus('Mendeteksi lokasi Anda...');

                navigator.geolocation.getCurrentPosition(function (position) {
                    geolocationState.latitude = position.coords.latitude;
                    geolocationState.longitude = position.coords.longitude;
                    renderBranchesByMode();
                }, function () {
                    hideAllCards();
                    setStatus('Lokasi tidak diizinkan. Izinkan akses lokasi untuk menampilkan cabang terdekat.');
                    dispatchMapFilter({
                        mode: 'coordinates',
                        coordinates: [],
                        fitBounds: false,
                    });
                }, {
                    enableHighAccuracy: true,
                    timeout: 12000,
                    maximumAge: 120000,
                });
            }

            branchSelect.addEventListener('change', function () {
                requestLocationAndRender();
            });

            requestLocationAndRender();
        })();
    </script>
@endsection
@section('content')
    @php
        $nearbyLocations = collect($locations ?? [])->values();
        $facilityItems = [
            ['name' => 'Sauna Gratis*', 'image' => asset('themes1/images/class/frame4.png')],
            ['name' => 'Full AC', 'image' => asset('themes1/images/class/frame6.png')],
            ['name' => 'Wifi Gratis', 'image' => asset('themes1/images/class/frame7.png')],
            ['name' => 'Ruang Cardio', 'image' => asset('themes1/images/class/frame8.png')],
            ['name' => 'Area Lounge', 'image' => asset('themes1/images/class/frame9.png')],
            ['name' => 'Locker', 'image' => asset('themes1/images/class/frame10.png')],
            ['name' => 'Sauna Gratis*', 'image' => asset('themes1/images/class/frame11.png')],
            ['name' => 'Full AC', 'image' => asset('themes1/images/class/frame12.png')],
        ];
    @endphp

    <div class="tentang-page-root membership-page-root">
        <section class="tentang-location" style="background: linear-gradient(180deg, rgba(35, 30, 26, 0.14) 0%, rgba(0, 0, 0, 0.88) 180%),
    url('/themes1/images/hero/keanggotaan.png') no-repeat center center/cover;">
            <div class="container tentang-location-inner">
                <h1 class="hero-title-profile" data-text="Ke&#10;Anggotaan">Ke<br>Anggotaan</h1>
                <a class="tentang-scroll-indicator tentang-scroll-indicator--hint" href="#keanggotaan" aria-label="Scroll for more">
                    <span class="tentang-scroll-indicator-badge" aria-hidden="true">&#8595;</span>
                    <span class="tentang-scroll-indicator-text">Scroll for more</span>
                </a>
            </div>
        </section>

        <section id="keanggotaan" class="membership-nearest" aria-label="Temukan gym terdekat">
            <div class="container">
                <h2 class="tentang-section-title membership-section-title">Temukan Gym Terdekat</h2>
                <div class="membership-nearest-grid">
                    <div class="membership-map-panel">
                        <div id="map" class="membership-map" aria-label="Peta lokasi gym Fitness Plus"></div>
                    </div>

                    <aside class="membership-branch-panel" aria-label="Daftar cabang terdekat">
                        <div class="membership-branch-toolbar">
                            <label class="sr-only" for="membership-branch-select">Pilih cabang</label>
                            <select id="membership-branch-select" class="membership-branch-select" disabled>
                                <option value="nearby" selected>Terdekat dari Lokasi Saya</option>
                            </select>
                        </div>
                        <p id="membership-branch-status" class="membership-branch-status" role="status" aria-live="polite"></p>

                        <div class="membership-branch-list">
                            @forelse ($nearbyLocations as $location)
                                @php
                                    $branchName = data_get($location, 'branch_name', 'Fitness Plus');
                                    $branchPhone = data_get($location, 'phone', '-');
                                    $branchAddress = data_get($location, 'address', '-');
                                    $branchLatitude = data_get($location, 'latitude');
                                    $branchLongitude = data_get($location, 'longitude');
                                @endphp
                                <article class="membership-branch-card" data-branch-key="branch-{{ $loop->index }}" data-latitude="{{ $branchLatitude }}" data-longitude="{{ $branchLongitude }}">
                                    <div class="membership-branch-copy">
                                        <h3>{{ $branchName }}</h3>
                                        <p>{{ $branchPhone }}</p>
                                        <p>{{ $branchAddress }}</p>
                                        <p class="membership-branch-distance" hidden></p>
                                    </div>
                                    <a href="{{ route('lokasi') }}" class="membership-branch-link">Lihat Detail <span aria-hidden="true">&#8594;</span></a>
                                </article>
                            @empty
                                <article class="membership-branch-card">
                                    <div class="membership-branch-copy">
                                        <h3>Data cabang belum tersedia</h3>
                                        <p>Silakan cek kembali beberapa saat lagi.</p>
                                    </div>
                                </article>
                            @endforelse
                        </div>
                    </aside>
                </div>
            </div>
        </section>

        <section class="membership-facilities" aria-label="Fasilitas keanggotaan">
            <div class="container">
                <h2 class="tentang-section-title membership-section-title">Fasilitas</h2>
                <div class="membership-facility-marquee">
                    @foreach (['is-rtl', 'is-ltr'] as $laneDirection)
                        <div class="membership-facility-lane {{ $laneDirection }}" @if ($loop->last) aria-hidden="true" @endif>
                            <div class="membership-facility-track">
                                @for ($copy = 0; $copy < 2; $copy++)
                                    <div class="membership-facility-set">
                                        @foreach ($facilityItems as $facility)
                                            <article class="membership-facility-card">
                                                <figure class="membership-facility-media">
                                                    <img src="{{ $facility['image'] }}" alt="{{ $facility['name'] }}" loading="lazy" decoding="async">
                                                </figure>
                                                <h3>{{ $facility['name'] }}</h3>
                                            </article>
                                        @endforeach
                                    </div>
                                @endfor
                            </div>
                        </div>
                    @endforeach
                </div>
                <p class="membership-facility-note">*Di beberapa club tertentu</p>
            </div>
        </section>

        @include('frontend.theme1.partials.trialmember')
    </div>
@endsection