@extends('layouts.app')
@section('title', 'Locate Us - ')
@section('description', 'Find our retail partners and nearby stores to easily get your favorite skincare products.')
@section('content')
<div id="locate-us">
    <div id="locate-us-banner" class="container-fluid px-lg-0 px-4">
        <div class="custom-container contact-us-container">
            <div class="row align-items-center mx-0">
                <div class="col-md-6 col-12 mt-md-0 mt-4">
                    <span class="banner-title montserrat-bold text-green">Locate Us</span>
                </div>
            </div>        
        </div> 
    </div>
    <div class="container-fluid px-lg-0 px-4">
        <div class="custom-container">
            <div class="row justify-content-start mx-0">
                <div class="col-12 mt-md-0 mb-md-3 mt-4 text-start">
                    <span class="montserrat-bold text-green main-title">Get o'cera today.</span>
                    <p class="main-paragraph text-grey mb-md-5 mb-3">Find o'cera products at your nearest pharmacy or purchase online for your convenience.</p>
                    <span class="montserrat-bold text-green main-title-2">Our exclusive retail partners:</span>
                </div>
                <div class="col-12 my-0 text-start">
                    <div>
                        <picture>
                            <source srcset="{{ asset('images/Locate_Us_Desktop/AMPM_Logo.webp') }}" type="image/webp">
                            <img src="{{ asset('images/Locate_Us_Desktop/AMPM_Logo.png') }}" alt="AMPM Logo" title="AMPM Logo" class="mw-100"/>
                        </picture>
                        <picture>
                            <source srcset="{{ asset('images/Locate_Us_Desktop/PMG_Logo.webp') }}" type="image/webp">
                            <img src="{{ asset('images/Locate_Us_Desktop/PMG_Logo.png') }}" alt="PMG Logo" title="PMG Logo" class="mw-100"/>
                        </picture>
                        <picture>
                            <source srcset="{{ asset('images/Locate_Us_Desktop/watsons-logo.webp') }}" type="image/webp">
                            <img src="{{ asset('images/Locate_Us_Desktop/watsons-logo.png') }}" alt="Watson Logo" title="Watson Logo" class="mw-100"/>
                        </picture>
                    </div>
                </div>
            </div>
        </div>   
    </div>
    <div class="container-fluid px-lg-0 px-4 mb-lg-5 mb-0" id="location">
        <div class="custom-container locate-store-container">
            <div class="row justify-content-start mx-0">
                <div class="col-12 mt-0 mb-md-5 mb-0 text-start">
                    <span class="montserrat-bold text-green main-title">Find a Nearby Store</span>
                </div>
                <div class="col-lg-6 col-12 my-md-0 my-4">
                    <div class="col-lg-10 my-md-0 my-2 text-start">
                        <span class="main-title-2 locate-us-title montserrat-bold text-green">Enter a ZIP/Postal code</span>
                    </div>
                    <div class="mb-md-4">
                        <form id="postcode_filter_form" method="POST" action="{{ route('locate-us-filter') }}">
                            @csrf
                            <input id="postcode_search" type="search" name="postcode" class="input-border mt-md-4 mb-md-2 mt-2 mb-4 form-control" placeholder="Enter postcode" value="{{ $postcode ?? '' }}" inputmode="numeric" pattern="[0-9]*" maxlength="5">
                        </form>
                    </div>
                    <div id="shops_filter_result">
                        @include('shops-filter', ['shops' => $shops ?? collect()])
                    </div>
                </div>
                <div class="col-lg-6 col-12 my-lg-0 my-4">
                    <div id="map" class="ratio ratio-4x3">
                        <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=3.06522233,101.60941553&amp;t=&amp;z=16&amp;ie=UTF8&amp;iwloc=B&amp;output=embed"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push('js')
    <script type="module">
        const postcode_form = $('#postcode_filter_form');
        const search_input = $('#postcode_search');
        const filter_results = $('#shops_filter_result');

        // Function to update the map
        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);
        }

        // CSRF for AJAX
        $.ajaxSetup({
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
        });

        // Debounce helper
        function debounce(fn, delay) {
            let timer;
            return function (...args) {
                clearTimeout(timer);
                timer = setTimeout(() => fn.apply(this, args), delay);
            };
        }

        // Search postcode by using ajax
        function fetchShops(postcode) {
            // Small loading state
            filter_results.css('opacity', .6);
            $.post(postcode_form.attr('action'), {postcode})
            .done(function (html) {
                filter_results.html(html);
            })
            .fail(function (xhr) {
                if (xhr.status === 419 || xhr.status === 401) {
                    window.location.reload();
                } else {
                    filter_results.html(
                        '<div class="alert alert-danger">Something went wrong. Please try again.</div>'
                    );
                }
            })
            .always(function () {
                filter_results.css('opacity', 1);
            });
        }

        $('document').ready(function(){
            // Intercept form submit (Enter key or manual submit)
            postcode_form.on('submit', function (e) {
                e.preventDefault();
                fetchShops(search_input.val());
            });

            search_input.on('input', function () {
                this.value = this.value.replace(/\D/g, ''); // remove non-numeric
            });

            // Live search on typing (optional)
            search_input.on('input', debounce(function () {
                const q = $(this).val().trim();
                if (q.length === 0 || q.length >= 5) {
                  fetchShops(q);
                }
            }, 300));

            // Add event listeners for location divs
            $('body').on("click", '.location', function(e){
                const lat = Number($(this).data("latitude"));
                const lng = Number($(this).data("longitude")); 
                updateMap({ lat, lng }); 
            });
        })
    </script>
@endpush