@extends('frontend.theme1.index', ['title' => 'Program Kemitraan - Fitness Plus Indonesia', 'count' => $count ?? 0])
@section('css')
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder@2.4.0/dist/Control.Geocoder.css" />
    <style>
        .kemitraan-map-container {
            position: relative;
            height: 250px;
            border-radius: 4px;
            border: 1px solid var(--kemitraan-input-border);
            overflow: hidden;
            margin-top: 6px;
        }

        .kemitraan-map-search {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 400;
            width: calc(100% - 20px);
            max-width: 250px;
            display: flex;
            gap: 6px;
        }

        .kemitraan-map-search input {
            flex: 1 1 auto;
            min-width: 0;
            padding: 10px 10px;
            border: 1px solid var(--kemitraan-input-border);
            background: var(--kemitraan-input-bg);
            color: var(--kemitraan-input-text);
            border-radius: 4px;
            font-size: 12px;
            font-family: inherit;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            transition: box-shadow 0.2s ease, border-color 0.2s ease;
        }

        body.dark-mode .kemitraan-map-search input {
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
            border-color: var(--kemitraan-input-border);
        }

        .kemitraan-map-search input::placeholder {
            color: var(--kemitraan-input-placeholder);
        }

        .kemitraan-map-search input:focus {
            outline: 2px solid rgba(196, 163, 71, 0.65);
            outline-offset: 1px;
        }

        .kemitraan-contact-field-description {
            font-size: 10px;
        }

        #kemitraan-gym-map.leaflet-container {
            background: var(--kemitraan-input-bg);
            z-index: 0;
        }

        #kemitraan-gym-map .leaflet-control-zoom a,
        #kemitraan-gym-map .leaflet-control-geocoder-form input,
        #kemitraan-gym-map .leaflet-control-geocoder-icon,
        #kemitraan-gym-map .leaflet-control-attribution {
            background: rgba(255, 255, 255, 0.96);
            color: #222a35;
            border-color: rgba(34, 42, 53, 0.18);
        }

        #kemitraan-gym-map .leaflet-control-geocoder-form input::placeholder {
            color: #667085;
        }

        #kemitraan-gym-map .leaflet-control-attribution a {
            color: #324968;
        }

        #kemitraan-gym-map .leaflet-control-geocoder-alternatives {
            background: #ffffff;
            color: #222a35;
            border: 1px solid rgba(34, 42, 53, 0.12);
        }

        #kemitraan-gym-map .leaflet-control-geocoder-alternatives a {
            color: inherit;
        }

        #kemitraan-gym-map .leaflet-popup-content-wrapper,
        #kemitraan-gym-map .leaflet-popup-tip {
            background: #ffffff;
            color: #1f2937;
        }

        body.dark-mode #kemitraan-gym-map .leaflet-control-zoom a,
        body.dark-mode #kemitraan-gym-map .leaflet-control-geocoder-form input,
        body.dark-mode #kemitraan-gym-map .leaflet-control-geocoder-icon,
        body.dark-mode #kemitraan-gym-map .leaflet-control-attribution {
            background: rgba(19, 24, 35, 0.94);
            color: #e5ebf5;
            border-color: rgba(229, 235, 245, 0.2);
        }

        body.dark-mode #kemitraan-gym-map .leaflet-control-geocoder-form input::placeholder {
            color: #9aa6be;
        }

        body.dark-mode #kemitraan-gym-map .leaflet-control-attribution a {
            color: #e5ebf5;
        }

        body.dark-mode #kemitraan-gym-map .leaflet-control-geocoder-alternatives {
            background: #151c2b;
            color: #e5ebf5;
            border: 1px solid rgba(229, 235, 245, 0.14);
        }

        body.dark-mode #kemitraan-gym-map .leaflet-popup-content-wrapper,
        body.dark-mode #kemitraan-gym-map .leaflet-popup-tip {
            background: #151c2b;
            color: #e5ebf5;
        }

        #kemitraan-gym-map .leaflet-control-geocoder-icon {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222a35' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 18px 18px;
        }

        body.dark-mode #kemitraan-gym-map .leaflet-control-geocoder-icon {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e5ebf5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
        }

        body.kemitraan-popup-open {
            overflow: hidden;
        }

        .kemitraan-submit-popup {
            position: fixed;
            inset: 0;
            z-index: 1400;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            background: rgba(12, 17, 27, 0.46);
            cursor: pointer;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transform: translate3d(0, 12px, 0) scale(0.98);
            transition: opacity 0.24s ease, transform 0.24s ease, visibility 0s linear 0.24s;
        }

        .kemitraan-submit-popup.is-open {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translate3d(0, 0, 0) scale(1);
            transition-delay: 0s;
        }

        .kemitraan-submit-popup-card {
            width: min(100%, 320px);
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.06);
            background: #2f3136;
            color: #f8fafc;
            box-shadow: 0 22px 44px rgba(0, 0, 0, 0.34);
            padding: 34px 18px 18px;
            position: relative;
            cursor: default;
            text-align: center;
            overflow: visible;
        }

        .kemitraan-submit-popup-badge {
            position: absolute;
            top: 0;
            left: 50%;
            width: 40px;
            height: 40px;
            border-radius: 999px;
            transform: translate(-50%, -50%);
            display: flex;
            align-items: center;
            justify-content: center;
            background: #67e58b;
            color: #1d2a22;
            box-shadow: 0 10px 24px rgba(103, 229, 139, 0.28);
            font-size: 24px;
            font-weight: 700;
        }

        .kemitraan-submit-popup-card.is-error {
            border-color: rgba(255, 107, 107, 0.18);
        }

        .kemitraan-submit-popup-card.is-error .kemitraan-submit-popup-badge {
            background: #ff5f63;
            color: #ffffff;
            box-shadow: 0 10px 24px rgba(255, 95, 99, 0.28);
        }

        .kemitraan-submit-popup-close {
            display: none;
        }

        .kemitraan-submit-popup-title {
            margin: 0 0 6px;
            font-size: 13px;
            font-weight: 700;
            line-height: 1.35;
            color: #ffffff;
        }

        .kemitraan-submit-popup-text {
            margin: 0;
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.45;
            font-size: 11px;
        }

        .kemitraan-submit-popup-actions {
            margin-top: 14px;
        }

        .kemitraan-submit-popup-actions .free-trial-submit {
            width: 100%;
            margin-top: 0;
            padding: 8px 16px;
            background: #ffffff;
            color: #111111;
        }

        .kemitraan-submit-popup-actions .free-trial-submit:hover {
            background: #f2f2f2;
        }

        .kemitraan-contact-actions .free-trial-submit.is-loading,
        .kemitraan-contact-actions .free-trial-submit:disabled {
            opacity: 0.78;
            cursor: not-allowed;
        }

        body.dark-mode .kemitraan-submit-popup {
            background: rgba(2, 6, 15, 0.66);
        }

        body.dark-mode .kemitraan-submit-popup-card {
            background: #2a2c31;
            border-color: rgba(255, 255, 255, 0.06);
            color: #f8fafc;
            box-shadow: 0 24px 54px rgba(0, 0, 0, 0.5);
        }

        body.dark-mode .kemitraan-submit-popup-card.is-error {
            border-color: rgba(255, 107, 107, 0.18);
        }

        body.dark-mode .kemitraan-submit-popup-title {
            color: #f8fafc;
        }

        body.dark-mode .kemitraan-submit-popup-text {
            color: #cbd5e1;
        }

        body.dark-mode .kemitraan-submit-popup-actions .free-trial-submit {
            background: #ffffff;
            color: #111111;
        }
    </style>
@endsection
@section('js')
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script src="https://unpkg.com/leaflet-control-geocoder@2.4.0/dist/Control.Geocoder.js"></script>
    <script>
        (function () {
            var gymMaps = {};

            function initKemitraanSubmitPopup() {
                var popup = document.getElementById('kemitraan-submit-popup');

                if (!popup) {
                    return;
                }

                var popupCard = popup.querySelector('.kemitraan-submit-popup-card');
                var popupBadgeIcon = popup.querySelector('.kemitraan-submit-popup-badge-icon');
                var popupClose = popup.querySelector('.kemitraan-submit-popup-close');
                var popupTitle = popup.querySelector('.kemitraan-submit-popup-title');
                var popupText = popup.querySelector('.kemitraan-submit-popup-text');
                var popupActionButton = popup.querySelector('.kemitraan-submit-popup-actions [data-kemitraan-popup-close]');
                var lastFocusedElement = null;

                var closeButtons = Array.prototype.slice.call(
                    popup.querySelectorAll('[data-kemitraan-popup-close]')
                );

                function closePopup() {
                    popup.classList.remove('is-open');
                    popup.setAttribute('aria-hidden', 'true');
                    document.body.classList.remove('kemitraan-popup-open');

                    window.setTimeout(function () {
                        if (!popup.classList.contains('is-open')) {
                            popup.hidden = true;
                        }
                    }, 240);

                    if (lastFocusedElement && typeof lastFocusedElement.focus === 'function') {
                        lastFocusedElement.focus();
                    }
                }

                function openPopup(title, message, isError) {
                    lastFocusedElement = document.activeElement;

                    if (popupTitle) {
                        popupTitle.textContent = title;
                    }

                    if (popupText) {
                        popupText.textContent = message;
                    }

                    if (popupCard) {
                        popupCard.classList.toggle('is-error', Boolean(isError));
                    }

                    if (popupBadgeIcon) {
                        popupBadgeIcon.innerHTML = isError ? '!' : '&#10003;';
                    }

                    if (popupActionButton) {
                        popupActionButton.textContent = isError ? 'Ulangi' : 'OK';
                    }

                    popup.hidden = false;
                    popup.setAttribute('aria-hidden', 'false');
                    document.body.classList.add('kemitraan-popup-open');

                    window.requestAnimationFrame(function () {
                        popup.classList.add('is-open');

                        if (popupActionButton) {
                            popupActionButton.focus();
                        } else if (popupClose) {
                            popupClose.focus();
                        }
                    });
                }

                closeButtons.forEach(function (button) {
                    button.addEventListener('click', closePopup);
                });

                popup.addEventListener('click', function (event) {
                    if (event.target === popup) {
                        closePopup();
                    }
                });

                document.addEventListener('keydown', function (event) {
                    if (event.key === 'Escape' && !popup.hasAttribute('hidden')) {
                        closePopup();
                    }
                });

                gymMaps.openSubmitPopup = openPopup;
                gymMaps.closeSubmitPopup = closePopup;

                if (!popup.hidden) {
                    popup.setAttribute('aria-hidden', 'false');
                    document.body.classList.add('kemitraan-popup-open');
                    popup.classList.add('is-open');
                } else {
                    popup.setAttribute('aria-hidden', 'true');
                    popup.classList.remove('is-open');
                }
            }

            function initKemitraanAjaxSubmit(contactSection) {
                if (typeof window.fetch !== 'function') {
                    return;
                }

                var forms = Array.prototype.slice.call(
                    contactSection.querySelectorAll('.kemitraan-contact-form')
                );

                var csrfMeta = document.querySelector('meta[name="csrf-token"]');
                var csrfToken = csrfMeta ? csrfMeta.getAttribute('content') : '';

                forms.forEach(function (form) {
                    form.addEventListener('submit', function (event) {
                        event.preventDefault();

                        if (form.dataset.submitting === 'true') {
                            return;
                        }

                        form.dataset.submitting = 'true';

                        var submitButton = form.querySelector('button[type="submit"]');
                        var originalLabel = submitButton ? submitButton.textContent : 'Kirim';

                        if (submitButton) {
                            submitButton.disabled = true;
                            submitButton.classList.add('is-loading');
                            submitButton.textContent = 'Mengirim...';
                        }

                        var formData = new FormData(form);
                        var headers = {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        };

                        if (csrfToken) {
                            headers['X-CSRF-TOKEN'] = csrfToken;
                        }

                        fetch(form.getAttribute('action') || window.location.href, {
                            method: 'POST',
                            body: formData,
                            headers: headers,
                            credentials: 'same-origin'
                        })
                            .then(function (response) {
                                return response
                                    .json()
                                    .catch(function () {
                                        return {};
                                    })
                                    .then(function (data) {
                                        return {
                                            ok: response.ok,
                                            status: response.status,
                                            data: data
                                        };
                                    });
                            })
                            .then(function (result) {
                                if (result.ok && result.data && result.data.success) {
                                    if (typeof gymMaps.openSubmitPopup === 'function') {
                                        gymMaps.openSubmitPopup(
                                            'Pengajuan Berhasil Dikirim',
                                            result.data.message || 'Form kemitraan berhasil dikirim. Kami akan menghubungi Anda segera.',
                                            false
                                        );
                                    }

                                    form.reset();

                                    var locationInput = form.querySelector('input[name="gym_location"]');
                                    if (locationInput) {
                                        locationInput.value = '';
                                    }

                                    var searchInput = form.querySelector('.kemitraan-map-search input');
                                    if (searchInput) {
                                        searchInput.value = '';
                                    }

                                    return;
                                }

                                var errorMessage = 'Terjadi kesalahan saat mengirim form. Silakan coba lagi nanti.';

                                if (result.status === 422 && result.data && result.data.errors) {
                                    var keys = Object.keys(result.data.errors);
                                    var firstKey = keys.length ? keys[0] : null;

                                    if (firstKey && result.data.errors[firstKey] && result.data.errors[firstKey][0]) {
                                        errorMessage = result.data.errors[firstKey][0];
                                    }
                                } else if (result.data && typeof result.data.message === 'string' && result.data.message !== '') {
                                    errorMessage = result.data.message;
                                }

                                if (typeof gymMaps.openSubmitPopup === 'function') {
                                    gymMaps.openSubmitPopup('Pengajuan Gagal Dikirim', errorMessage, true);
                                }
                            })
                            .catch(function () {
                                if (typeof gymMaps.openSubmitPopup === 'function') {
                                    gymMaps.openSubmitPopup(
                                        'Pengajuan Gagal Dikirim',
                                        'Terjadi gangguan jaringan. Silakan coba lagi.',
                                        true
                                    );
                                }
                            })
                            .finally(function () {
                                form.dataset.submitting = 'false';

                                if (submitButton) {
                                    submitButton.disabled = false;
                                    submitButton.classList.remove('is-loading');
                                    submitButton.textContent = originalLabel;
                                }
                            });
                    });
                });
            }

            function initKemitraanContact() {
                var contactSection = document.querySelector('.kemitraan-contact');

                initKemitraanSubmitPopup();

                if (!contactSection) {
                    return;
                }

                var tabButtons = Array.prototype.slice.call(
                    contactSection.querySelectorAll('.kemitraan-contact-tab[data-partnership-type]')
                );
                var attachmentInput = contactSection.querySelector('.kemitraan-upload-input');
                var attachmentText = contactSection.querySelector('.kemitraan-upload-text');

                tabButtons.forEach(function (button) {
                    button.addEventListener('click', function () {
                        var targetId = button.getAttribute('aria-controls');

                        tabButtons.forEach(function (tab) {
                            var isActive = tab === button;
                            tab.classList.toggle('is-active', isActive);
                            tab.setAttribute('aria-selected', isActive ? 'true' : 'false');
                        });

                        var panels = Array.prototype.slice.call(
                            contactSection.querySelectorAll('.kemitraan-contact-card[role="tabpanel"]')
                        );
                        panels.forEach(function (panel) {
                            if (panel.id === targetId) {
                                panel.removeAttribute('hidden');
                                // Initialize map when panel is shown
                                if (panel.id === 'panel-new-gym' && !gymMaps.initialized) {
                                    setTimeout(function () {
                                        initGymLocationMap();
                                    }, 100);
                                }
                            } else {
                                panel.setAttribute('hidden', '');
                            }
                        });
                    });
                });

                if (attachmentInput && attachmentText) {
                    attachmentInput.addEventListener('change', function () {
                        if (attachmentInput.files && attachmentInput.files[0]) {
                            attachmentText.textContent = attachmentInput.files[0].name;
                            return;
                        }

                        attachmentText.textContent = 'Masukkan Berkas Lampiran (Jika Ada)';
                    });
                }

                initKemitraanAjaxSubmit(contactSection);
            }

            function initGymLocationMap() {
                if (gymMaps.initialized) return;
                gymMaps.initialized = true;

                var mapContainer = document.getElementById('kemitraan-gym-map');
                if (!mapContainer) return;

                // Initialize map centered on Indonesia
                var map = L.map(mapContainer, {
                    attributionControl: false
                }).setView([-6.2088, 106.8456], 12);

                var lightBaseLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
                    subdomains: 'abcd',
                    maxZoom: 20
                });

                var darkBaseLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
                    subdomains: 'abcd',
                    maxZoom: 20
                });

                var activeBaseLayer = null;
                var activeMapTheme = '';

                function isDarkModeEnabled() {
                    return Boolean(document.body && document.body.classList.contains('dark-mode'));
                }

                function applyMapTheme() {
                    var nextTheme = isDarkModeEnabled() ? 'dark' : 'light';

                    if (nextTheme === activeMapTheme) {
                        return;
                    }

                    if (activeBaseLayer) {
                        map.removeLayer(activeBaseLayer);
                    }

                    activeBaseLayer = nextTheme === 'dark' ? darkBaseLayer : lightBaseLayer;
                    activeBaseLayer.addTo(map);
                    activeMapTheme = nextTheme;
                }

                applyMapTheme();

                if (document.body && typeof MutationObserver !== 'undefined') {
                    gymMaps.themeObserver = new MutationObserver(function (mutations) {
                        for (var i = 0; i < mutations.length; i += 1) {
                            if (mutations[i].attributeName === 'class') {
                                applyMapTheme();
                                break;
                            }
                        }
                    });

                    gymMaps.themeObserver.observe(document.body, {
                        attributes: true,
                        attributeFilter: ['class']
                    });
                }

                // Custom marker icon
                var customIcon = L.icon({
                    iconUrl: '/themes1/images/logo/location-pin.png',
                    iconSize: [32, 40],
                    iconAnchor: [16, 40],
                    popupAnchor: [0, -40]
                });

                // Marker for selected location
                var selectedMarker = null;

                // Add geocoder control (search)
                var geocoder = L.Control.geocoder({
                    defaultMarkGeocode: false,
                    showResultIcons: false
                }).addTo(map);

                var locationInput = document.getElementById('ng-location');
                var searchInput = document.querySelector('.kemitraan-map-search input');

                // Handle geocoder result
                geocoder.on('resultselected', function (e) {
                    var bbox = e.result.bbox;
                    var latLng = L.latLng(e.result.center.lat, e.result.center.lng);

                    // Remove old marker
                    if (selectedMarker) {
                        map.removeLayer(selectedMarker);
                    }

                    // Add new marker with custom icon
                    selectedMarker = L.marker(latLng, { icon: customIcon }).addTo(map);
                    selectedMarker.bindPopup(e.result.name).openPopup();

                    // Update input field
                    locationInput.value = e.result.name || e.result.html;
                    searchInput.value = e.result.name;
                    map.fitBounds(bbox);
                });

                // Map click event for manual location selection
                map.on('click', function (e) {
                    var latLng = e.latlng;

                    // Remove old marker
                    if (selectedMarker) {
                        map.removeLayer(selectedMarker);
                    }

                    // Add new marker with custom icon
                    selectedMarker = L.marker(latLng, { icon: customIcon }).addTo(map);
                    selectedMarker.bindPopup(
                        'Lat: ' + latLng.lat.toFixed(4) + '<br>Lng: ' + latLng.lng.toFixed(4)
                    ).openPopup();

                    // Update input with coordinates
                    locationInput.value = latLng.lat.toFixed(6) + ', ' + latLng.lng.toFixed(6);
                });

                // Search input event
                if (searchInput) {
                    searchInput.addEventListener('keypress', function (e) {
                        if (e.key === 'Enter') {
                            e.preventDefault();
                            geocoder._geocode(this.value);
                        }
                    });
                }

                gymMaps.map = map;
                gymMaps.selectedMarker = selectedMarker;
            }

            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', initKemitraanContact);
                return;
            }

            initKemitraanContact();
        })();
    </script>
@endsection
@section('content')
    <div class="tentang-page-root kemitraan-page-root">
        @php
            $kemitraanFlashMessage = session('success') ?? session('error');
            $kemitraanFlashIsError = session()->has('error');
        @endphp
        <div id="kemitraan-submit-popup" class="kemitraan-submit-popup @if ($kemitraanFlashMessage) is-open @endif" role="dialog" aria-modal="true" aria-labelledby="kemitraan-submit-popup-title" aria-hidden="{{ $kemitraanFlashMessage ? 'false' : 'true' }}" @if (!$kemitraanFlashMessage) hidden @endif>
            <div class="kemitraan-submit-popup-card @if ($kemitraanFlashIsError) is-error @endif">
                <div class="kemitraan-submit-popup-badge" aria-hidden="true">
                    <span class="kemitraan-submit-popup-badge-icon">@if ($kemitraanFlashIsError)!@else&#10003;@endif</span>
                </div>
                <button type="button" class="kemitraan-submit-popup-close" data-kemitraan-popup-close aria-label="Tutup notifikasi">&times;</button>
                <h3 id="kemitraan-submit-popup-title" class="kemitraan-submit-popup-title">
                    {{ $kemitraanFlashIsError ? 'Pengajuan gagal!' : 'Data Anda telah kami terima!' }}
                </h3>
                <p class="kemitraan-submit-popup-text">{{ $kemitraanFlashMessage }}</p>
                <div class="kemitraan-submit-popup-actions">
                    <button type="button" class="free-trial-submit" data-kemitraan-popup-close>{{ $kemitraanFlashIsError ? 'Ulangi' : 'OK' }}</button>
                </div>
            </div>
        </div>

        <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/kemitraan.png') no-repeat center center/cover;">
            <div class="container tentang-location-inner">
                <h1 class="hero-title-profile" data-text="Program&#10;Kemitraan">Program<br>Kemitraan</h1>
                <a class="tentang-scroll-indicator tentang-scroll-indicator--hint" href="#kemitraan" 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="kemitraan" class="kemitraan-benefits" aria-label="Manfaat Program Kemitraan">
            <div class="container">
                <h3 class="tentang-section-title">Manfaat Program Kemitraan</h3>
                <ul class="kemitraan-benefits-list">
                    <li><br>Potensi pendapatan yang menarik dengan dukungan merek yang kuat.</li>
                    <li><br>Akses ke pelatihan dan sumber daya untuk membantu Anda sukses.</li>
                    <li><br>Kesempatan untuk menjadi bagian dari komunitas fitness yang berkembang.</li>
                </ul>
            </div>
        </section>

        <section class="kemitraan-contact" aria-label="Form Hubungi Kami">
            <div class="container">
                <h2 class="tentang-section-title kemitraan-contact-title">Hubungi Kami</h2>

                <div class="kemitraan-contact-tabs" role="tablist" aria-label="Jenis kemitraan">
                    <button type="button" class="kemitraan-contact-tab is-active" role="tab" aria-selected="true" data-partnership-type="sponsorship" aria-controls="panel-sponsorship">
                        Sponsorship / Co-Branding
                    </button>
                    <button type="button" class="kemitraan-contact-tab" role="tab" aria-selected="false" data-partnership-type="new-gym" aria-controls="panel-new-gym">
                        Buka Gym Baru
                    </button>
                </div>

                {{-- Panel: Sponsorship / Co-Branding --}}
                <div id="panel-sponsorship" class="kemitraan-contact-card" role="tabpanel" aria-labelledby="tab-sponsorship">
                    <form class="kemitraan-contact-form" action="{{ route('kemitraan.submit') }}" method="post" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="partnership_type" value="sponsorship">

                        <div class="kemitraan-contact-grid">
                            <div class="kemitraan-contact-column">
                                <div class="kemitraan-contact-field">
                                    <label for="sp-first-name">Nama Depan</label>
                                    <input id="sp-first-name" type="text" name="first_name" placeholder="Masukkan Nama" required>
                                </div>

                                <div class="kemitraan-contact-field">
                                    <label for="sp-last-name">Nama Belakang</label>
                                    <input id="sp-last-name" type="text" name="last_name" placeholder="Masukkan Nama" required>
                                </div>

                                <div class="kemitraan-contact-field">
                                    <label for="sp-whatsapp">No. Whatsapp</label>
                                    <div class="kemitraan-contact-phone-row">
                                        <select id="sp-phone-code" name="phone_code" aria-label="Kode negara nomor Whatsapp">
                                            <option value="+62" selected>+62</option>
                                            <option value="+60">+60</option>
                                            <option value="+65">+65</option>
                                        </select>
                                        <input id="sp-whatsapp" type="tel" name="whatsapp" placeholder="Masukkan No. Whatsapp" required>
                                    </div>
                                </div>

                                <div class="kemitraan-contact-field">
                                    <label for="sp-email">Email Aktif</label>
                                    <input id="sp-email" type="email" name="email" placeholder="Masukkan Email Aktif" required>
                                </div>

                                <div class="kemitraan-contact-field">
                                    <label for="sp-contact-time">Ketersediaan Untuk Dihubungi</label>
                                    <select id="sp-contact-time" name="contact_availability" required>
                                        <option value="">Pilih Ketersediaan Untuk Dihubungi</option>
                                        <option value="pagi">Pagi (08:00 - 11:00)</option>
                                        <option value="siang">Siang (11:00 - 15:00)</option>
                                        <option value="sore">Sore (15:00 - 19:00)</option>
                                    </select>
                                </div>
                            </div>

                            <div class="kemitraan-contact-column">
                                <div class="kemitraan-contact-field">
                                    <label for="sp-scheme">Skema Kerjasama</label>
                                    <textarea id="sp-scheme" name="scheme" rows="5" placeholder="Masukkan Skema Kerjasama secara Singkat" required></textarea>
                                </div>

                                <div class="kemitraan-contact-field">
                                    <label for="sp-attachment">Lampiran</label>
                                    <span class="kemitraan-contact-field-description">Jika Anda memiliki proposal atau dokumen pendukung lainnya, silakan lampirkan di sini. *PDF or *DOC</span>
                                    <label class="kemitraan-upload-box" for="sp-attachment">
                                        <input id="sp-attachment" class="kemitraan-upload-input" type="file" name="attachment" accept=".pdf,.doc,application/pdf,application/msword">
                                        <span class="kemitraan-upload-icon" aria-hidden="true">&#128462;</span>
                                        <span class="kemitraan-upload-text">Masukkan Berkas Lampiran (Jika Ada)</span>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="kemitraan-contact-actions">
                            <button type="submit" class="free-trial-submit">Kirim</button>
                        </div>
                    </form>
                </div>

                {{-- Panel: Buka Gym Baru --}}
                <div id="panel-new-gym" class="kemitraan-contact-card" role="tabpanel" aria-labelledby="tab-new-gym" hidden>
                    <form class="kemitraan-contact-form" action="{{ route('kemitraan.submit') }}" method="post" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="partnership_type" value="new-gym">

                        <div class="kemitraan-contact-grid">
                            <div class="kemitraan-contact-column">
                                <div class="kemitraan-contact-field">
                                    <label for="ng-first-name">Nama Depan</label>
                                    <input id="ng-first-name" type="text" name="first_name" placeholder="Masukkan Nama" required>
                                </div>

                                <div class="kemitraan-contact-field">
                                    <label for="ng-last-name">Nama Belakang</label>
                                    <input id="ng-last-name" type="text" name="last_name" placeholder="Masukkan Nama" required>
                                </div>

                                <div class="kemitraan-contact-field">
                                    <label for="ng-whatsapp">No. Whatsapp</label>
                                    <div class="kemitraan-contact-phone-row">
                                        <select id="ng-phone-code" name="phone_code" aria-label="Kode negara nomor Whatsapp">
                                            <option value="+62" selected>+62</option>
                                            <option value="+60">+60</option>
                                            <option value="+65">+65</option>
                                        </select>
                                        <input id="ng-whatsapp" type="tel" name="whatsapp" placeholder="Masukkan No. Whatsapp" required>
                                    </div>
                                </div>

                                <div class="kemitraan-contact-field">
                                    <label for="ng-email">Email Aktif</label>
                                    <input id="ng-email" type="email" name="email" placeholder="Masukkan Email Aktif" required>
                                </div>
                            </div>

                            <div class="kemitraan-contact-column">
                                <div class="kemitraan-contact-field">
                                    <label for="ng-contact-time">Waktu Menghubungi</label>
                                    <select id="ng-contact-time" name="contact_time" required>
                                        <option value="">Pilih Waktu Menghubungi</option>
                                        <option value="pagi">Pagi hari</option>
                                        <option value="siang">Siang hari</option>
                                        <option value="sore">Sore hari</option>
                                    </select>
                                </div>

                                <div class="kemitraan-contact-field">
                                    <label for="ng-investment">Nominal Investasi</label>
                                    <select id="ng-investment" name="investment">
                                        <option value="">Pilih Nominal Investasi</option>
                                        <option value="1">Rp 1 - 2 Milyar</option>
                                        <option value="2">Rp 2 - 3 Milyar</option>
                                        <option value="3">Rp 3 - 4 Milyar</option>
                                        <option value="4">&gt; Rp 4 Milyar</option>
                                    </select>
                                </div>

                                <div class="kemitraan-contact-field">
                                    <label for="ng-has-property">Apakah Anda memiliki asset / property untuk digunakan?</label>
                                    <select id="ng-has-property" name="has_property">
                                        <option value="">Pilih</option>
                                        <option value="ya">Ya</option>
                                        <option value="tidak">Tidak</option>
                                    </select>
                                </div>

                                <div class="kemitraan-contact-field">
                                    <label for="ng-location">Lokasi Gym</label>
                                    <div class="kemitraan-map-search">
                                        <input type="text" placeholder="Cari lokasi..." aria-label="Cari lokasi untuk gym">
                                    </div>
                                    <div id="kemitraan-gym-map" class="kemitraan-map-container"></div>
                                    <input id="ng-location" type="hidden" name="gym_location" placeholder="Masukkan Lokasi Gym">
                                </div>
                            </div>
                        </div>

                        <div class="kemitraan-contact-actions">
                            <button type="submit" class="free-trial-submit">Kirim</button>
                        </div>
                    </form>
                </div>

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