@extends('layouts.app')
@section('og_title', "Contact Us - ")
@push('css')
    @vite(['resources/sass/public/contact-us.scss'])
@endpush
@section('content')
    <div id="contact-us-section" class="contact-us-section custom-margin-top-header">
        <div class="contact-banner position-relative">
            <div class="banner-background">
                <picture>
                    <source srcset="{{ asset('images/contact-us/contact-banner.webp') }}" type="image/webp">
                    <img src="{{ asset('images/contact-us/contact-banner.png') }}" alt="Contact Us" class="w-100" width="1920" height="834" />
                </picture>
            </div>
            <div class="banner-content-wrapper">
                <div class="container-fluid px-0">
                    <div class="row align-items-center g-0">
                        <div class="col-lg-6" data-aos="fade-left" data-aos-duration="1000" data-aos-delay="100">
                            <div class="text-content custom-text-max-width ps-md-4 pe-md-1">
                                <h1 class="banner-title fw-regular mb-4 fs-2">{{ __('contact-us.form_china_to_world') }}</h1>
                                <p class="banner-description fw-light fs-4 mb-0">
                                    {{ __('contact-us.brand_journey') }}
                                </p>
                                <div class="image-container-mobile d-block d-lg-none order-2 mt-4 mb-4">
                                    <div class="image-wrapper">
                                        <picture>
                                            <source srcset="{{ asset('images/contact-us/hairology-intro.webp') }}" type="image/webp">
                                            <img src="{{ asset('images/contact-us/hairology-intro.png') }}" alt="Hairology Introduction" class="w-100 rounded-lg" width="800" height="450" />
                                        </picture>
                                    </div>
                                </div>
                                <div class="data-source mt-0 mt-lg-4 py-0 py-lg-4 order-3">
                                    <p class="source-text fw-light fs-7 mb-0">{{ __('contact-us.data_source') }}</p>
                                    <ul class="mb-0">
                                        <li class="source-text fw-light fs-7 mb-0">{{ __('contact-us.data_source_point_1') }}</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6 pe-0 d-none d-lg-block" data-aos="fade-left" data-aos-duration="1000" data-aos-delay="300">
                            <div class="image-container">
                                <div class="image-wrapper position-relative overflow-hidden">
                                    <picture>
                                        <source srcset="{{ asset('images/contact-us/hairology-intro.webp') }}" type="image/webp">
                                        <img src="{{ asset('images/contact-us/hairology-intro.png') }}" alt="Hairology Introduction" class="w-100 h-100" width="800" height="450" />
                                    </picture>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="hairology-lounge-section position-relative">
        <div class="lounge-background">
            <picture>
                <source srcset="{{ asset('images/contact-us/lounge-background.webp') }}" type="image/webp">
                <img src="{{ asset('images/contact-us/lounge-background.png') }}" alt="Hairology Lounge" class="w-100" width="1920" height="834" />
            </picture>
            <div class="image-overlay"></div>
        </div>
        <div class="lounge-content-wrapper">
            <div class="container">
                <div class="row justify-content-center text-center">
                    <div class="col-xl-6 col-lg-8 col-sm-10 col-12" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200">
                        <div class="lounge-content">
                            <h2 class="lounge-title fw-regular mb-3 fs-3 fs-md-2 text-white">{{ __('contact-us.hairology_lounge') }}</h2>
                            <p class="lounge-description fw-light px-3 px-md-5 fs-6 fs-md-4 text-white mb-0">
                                {{ __('contact-us.explore_locations') }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @if( $branches->isNotEmpty() )
    <div class="store-locator-section py-4">
        <div class="container custom-container-padding-mobile">
            @if( false ) {{-- $branches->count() > 1  --}}
                <div class="row justify-content-center mb-4">
                    <div class="col-lg-3 col-10 mb-3 mb-lg-0">
                        <div class="filter-group">
                            <select class="form-select" id="country-select">
                                <option value="" selected disabled>Select Country</option>
                                <option value="malaysia">Malaysia</option>
                                <option value="singapore">Singapore</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-lg-4 col-10 mb-3 mb-lg-0">
                        <div class="filter-group">
                            <div class="input-group">
                                <input type="text" class="form-control" id="postal-code-search" placeholder="Enter ZIP/Postal code">
                                <button class="btn btn-search" type="button">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-10">
                        <div class="filter-group">
                            <select class="form-select" id="region-select">
                                <option value="" selected disabled>Select Region</option>
                                <option value="all">All Regions</option>
                                <option value="selangor">Selangor</option>
                                <option value="singapore">Singapore Central</option>
                            </select>
                        </div>
                    </div>
                </div>
            @endif
            <div class="row justify-content-center">
                <div class="col-12 col-xl-10">
                    <div class="row g-0 overflow-hidden">
                        <div class="col-lg-5">
                            <div class="stores-list-wrapper ps-0 ps-lg-4">
                                <div class="stores-list" id="stores-list">
                                    @foreach( $branches as $key => $branch )
                                        <div class="store-item mb-4 mb-lg-0" data-country="{{ strtolower($branch->country->code ?? '') }}" data-region="{{ strtolower($branch->state ?? '') }}" data-postal="{{ $branch->postcode ?? '' }}" data-lat="{{ $branch->latitude ?? '' }}" data-lng="{{ $branch->longitude ?? '' }}">
                                            @if($branch->latitude && $branch->longitude)
                                            <div class="store-map d-block d-lg-none">
                                                <iframe frameborder="0" scrolling="no" marginheight="0" marginwidth="0" 
                                                    src="https://maps.google.com/maps?width=600&amp;height=400&amp;hl=en&amp;q={{ $branch->latitude }}, {{ $branch->longitude }}&amp;t=&amp;z=16&amp;ie=UTF8&amp;iwloc=B&amp;output=embed">
                                                </iframe>
                                            </div>
                                            @endif
                                            <div class="store-content ps-4 pe-0 py-3">
                                                <div class="store-header d-flex justify-content-between align-items-start mb-3">
                                                    <h4 class="store-title fw-semibold mb-0 fs-5">{{ $branch->getNameByLocale() }}</h4>
                                                </div>
                                                <div class="store-info">
                                                    <p class="store-address fw-light fs-5 mb-1">{{ $branch->getAddressByLocale() }}</p>
                                                    <p class="store-location fw-light fs-5 mb-2 mb-lg-3">{{ $branch->country->getNameByLocale() }}</p>
                                                    <div class="store-contact-actions d-flex flex-row flex-lg-column">
                                                        <div class="store-phone mb-0 mb-lg-4 d-lg-flex d-block">
                                                            @if($branch->phone)
                                                            <div class="pe-4 mb-3 mb-lg-0">
                                                                <picture>
                                                                    <source srcset="{{ asset('images/contact-us/phone-icon.webp') }}" type="image/webp">
                                                                    <img src="{{ asset('images/contact-us/phone-icon.png') }}" alt="Store Landline" class="whatsapp-icon me-2" width="40" height="40" />
                                                                </picture>
                                                                <a href="tel:{{ $branch->getCountryCodePhoneAttribute() }}" rel="{{ $branch->getNameByLocale() }} Phone Call Link" class="fw-light fs-5 text-decoration-none text-deep-black">
                                                                    {{ $branch->getFormattedPhoneAttribute() }}
                                                                </a>
                                                            </div>
                                                            @endif
                                                            @if( $branch->getFormattedWhatsappPhoneAttribute() )
                                                            <div class="my-2 my-lg-0">
                                                                <picture>
                                                                    <source srcset="{{ asset('images/contact-us/whatsapp-icon.webp') }}" type="image/webp">
                                                                    <img src="{{ asset('images/contact-us/whatsapp-icon.png') }}" alt="WhatsApp" class="whatsapp-icon me-2" width="40" height="40" />
                                                                </picture>
                                                                <a href="{{ $branch->whatsappUrl() }}" rel="{{ $branch->getNameByLocale() }} WhatsApp Link" class="fw-light fs-5 text-decoration-none text-deep-black" target="_blank">
                                                                    {{ $branch->getFormattedWhatsappPhoneAttribute() }}
                                                                </a>
                                                            </div>
                                                            @endif
                                                        </div>
            
                                                        @if($branch->latitude && $branch->longitude)
                                                        <div class="store-actions d-flex justify-content-start">
                                                            <button class="btn btn-icon open-waze me-0 me-lg-3" data-lat="{{ $branch->latitude }}" data-lng="{{ $branch->longitude }}">
                                                                <picture>
                                                                    <source srcset="{{ asset('images/contact-us/waze-icon.webp') }}" type="image/webp">
                                                                    <img src="{{ asset('images/contact-us/waze-icon.png') }}" alt="Waze" class="waze-icon" width="40" height="40" />
                                                                </picture>
                                                            </button>
                                                            <button class="btn btn-icon open-google-maps" data-lat="{{ $branch->latitude }}" data-lng="{{ $branch->longitude }}">
                                                                <picture>
                                                                    <source srcset="{{ asset('images/contact-us/maps-icon.webp') }}" type="image/webp">
                                                                    <img src="{{ asset('images/contact-us/maps-icon.png') }}" alt="Google Maps" class="maps-icon" width="40" height="40" />
                                                                </picture>
                                                            </button>
                                                        </div>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-7 d-none d-lg-block">
                            <div class="map-outer-wrapper h-100 d-flex align-items-center justify-content-center">
                                <div class="map-container rounded-4 border">
                                    <div class="google-map-wrapper h-100 w-100">
                                        <div class="google-map h-100 w-100 rounded-4" id="map">
                                            @php
                                                $first_branch = $branches->first();
                                            @endphp
                                            @if($first_branch && $first_branch->latitude && $first_branch->longitude)
                                            <iframe frameborder="0" scrolling="no" marginheight="0" marginwidth="0" 
                                                src="https://maps.google.com/maps?width=600&amp;height=300&amp;hl=en&amp;q={{ $first_branch->latitude }}, {{ $first_branch->longitude }}&amp;t=&amp;z=16&amp;ie=UTF8&amp;iwloc=B&amp;output=embed">
                                            </iframe>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif
@endsection

@push('js')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const countrySelect = document.getElementById('country-select');
    const regionSelect = document.getElementById('region-select');
    const postalCodeSearch = document.getElementById('postal-code-search');
    const searchBtn = document.getElementById('search-btn');
    const storesList = document.getElementById('stores-list');
    const storeItems = storesList.querySelectorAll('.store-item');

    function openWaze(lat, lng) {
        const url = `https://waze.com/ul?ll=${lat},${lng}&navigate=yes`;
        window.open(url, '_blank');
    }

    function openGoogleMaps(lat, lng) {
        const url = `https://www.google.com/maps/search/?api=1&query=${lat},${lng}`;
        window.open(url, '_blank');
    }

    function updateMap(new_Location) {
        var new_iframe = `<iframe id="map" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?width=600&amp;height=400&amp;hl=en&amp;q=${new_Location.lat},${new_Location.lng}&amp;t=&amp;z=16&amp;ie=UTF8&amp;iwloc=B&amp;output=embed"></iframe>`;
        $('#map').html(new_iframe);
    }

    function filterStores() {
        const selectedCountry = countrySelect?.value;
        const selectedRegion = regionSelect?.value;
        const searchPostal = postalCodeSearch?.value.trim().toLowerCase();

        storeItems.forEach(store => {
            const storeCountry = store.dataset.country;
            const storeRegion = store.dataset.region;
            const storePostal = store.dataset.postal;

            let showStore = true;

            if (selectedCountry && storeCountry !== selectedCountry) {
                showStore = false;
            }

            if (selectedRegion && selectedRegion !== 'all' && storeRegion !== selectedRegion) {
                showStore = false;
            }

            if (searchPostal && !storePostal.includes(searchPostal)) {
                showStore = false;
            }

            store.style.display = showStore ? 'block' : 'none';
        });

        updateMapToFirstVisibleStore();
    }

    function updateMapToFirstVisibleStore() {
        const visibleStores = Array.from(storeItems).filter(store => 
            store.style.display !== 'none'
        );

        if (visibleStores.length > 0) {
            const firstStore = visibleStores[0];
            const lat = firstStore.dataset.lat;
            const lng = firstStore.dataset.lng;
            
            if (lat && lng) {
                updateMap({lat, lng});
            }
        }
    }

    if (countrySelect) countrySelect.addEventListener('change', filterStores);
    if (regionSelect) regionSelect.addEventListener('change', filterStores);
    if (searchBtn) searchBtn.addEventListener('click', filterStores);
    
    if (postalCodeSearch) {
        postalCodeSearch.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                filterStores();
            }
        });
    }

    storeItems.forEach(store => {
        store.addEventListener('click', function(e) {
            if (!e.target.closest('.store-actions')) {
                const lat = this.dataset.lat;
                const lng = this.dataset.lng;
                if (lat && lng) {
                    updateMap({lat, lng});
                }
            }
        });
    });

    document.querySelectorAll('.open-waze').forEach(btn => {
        btn.addEventListener('click', function(e) {
            e.stopPropagation();
            const lat = this.dataset.lat;
            const lng = this.dataset.lng;
            openWaze(lat, lng);
        });
    });
    
    document.querySelectorAll('.open-google-maps').forEach(btn => {
        btn.addEventListener('click', function(e) {
            e.stopPropagation();
            const lat = this.dataset.lat;
            const lng = this.dataset.lng;
            openGoogleMaps(lat, lng);
        });
    });
});
</script>
@endpush