@extends('components.home')

@section('themeStylesheet')
    <style>
        {{ $themeStylesheet }}
    </style>
@endsection


@section('brandThemeOverrideSettings')
    <style>
        {{ $brandThemeOverrideSettings }}
    </style>
@endsection


@section('brandBackground')
    @if($brandBackground!=='' && !empty($brandBackground))
        style="background-image:url('{{ $brandBackground }}');background-size: cover;"
    @endif
@endsection

@section('content')

    <livewire:LocationPickerMap />

@endsection

<style>
    .swal2-container {
        z-index: 1000000000;
    }
    .swal2-title {
        font-size: 22px;
    }
    #swal2-checkbox[type='checkbox'] {
        -webkit-appearance:none;
        width:20px;
        height:20px;
        background:white;
        border-radius:5px;
        border:2px solid #555;
    }
    #swal2-checkbox[type='checkbox']:checked {
        background: #4e9a06;
    }
</style>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>

    /*
        Let's check if the user has previously selected a location
        The location would have been saved in Cookies as savedLocation_{directory}
        Let's check the users Cookies for a saved location
    */

    function getCookie(name) {
        let cookies = document.cookie.split("; ");
        for (let cookie of cookies) {
            let [key, value] = cookie.split("=");
            if (key === name) {
                return decodeURIComponent(value);
            }
        }
        return null;
    }

    document.addEventListener("DOMContentLoaded", function() {
        let savedLocation = getCookie("savedLocation_{{ $_GET['directory'] }}");
        if (savedLocation) {
            let loader = document.querySelector(".pageLoader-wrapper");
            if (loader) {
                loader.style.display = "block";
            }
            let redirectURL = `{{ env('APP_URL') }}/?directory={{ $_GET['directory'] }}&locationId=${savedLocation}`;
            window.location.href = redirectURL;
        }
    });



    document.addEventListener('selected', function(event) {
        console.log('Option selected:', event.detail.option);
        //myCustomFunction(event.detail.option);

        if(event.detail.option){
            swal.fire({
                text: 'Would you like to save this Location for future orders?',
                input: 'checkbox',
                inputPlaceholder: 'Yes, save my selection',
                confirmButtonText: "Continue"
            }).then((result) => {
                $(".pageLoader-wrapper").removeClass('is-hidden');
                if (result.isConfirmed) {

                    if (result.value) {
                        // Save selection
                        document.cookie = `savedLocation_{{ $_GET['directory'] }}=${event.detail.option}; path=/; max-age=${60 * 60 * 24 * 30}; SameSite=Lax`;
                    } else {
                        // Don't save selection
                    }

                    fetch('/ajax/selectLocation', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                        },
                        body: JSON.stringify({
                            locationId: event.detail.option,
                            directory: '{{ $_GET["directory"] }}',
                            sessionToken: '{!! array_key_exists('sessionToken',$_GET) ? $_GET['sessionToken'] : '' !!}'
                        })
                    })
                        .then(response => response.json())
                        .then(data => {
                            console.log(data);
                            if (data.success) {

                                let loader = document.querySelector(".pageLoader-wrapper");
                                if (loader) {
                                    loader.style.display = "block";
                                }
                                // Continue to selected location
                                let redirectURL = `{{ env('APP_URL') }}/?directory={{ $_GET['directory'] }}&locationId=${event.detail.option}`;
                                window.location.href = redirectURL;

                            } else {
                                console.error(data.error || 'Failed to set location.');
                            }
                        })
                        .catch(error => console.error('AJAX error:', error));

                    /*.then(() => {

                        let loader = document.querySelector(".pageLoader-wrapper");
                        if (loader) {
                            loader.style.display = "block";
                        }
                        // Continue to selected location
                        let redirectURL = `{{-- env('APP_URL') --}}/?directory={{-- $_GET['directory'] --}}&locationId=${event.detail.option}`;
                        window.location.href = redirectURL;*/



                    //window.location.href = `{{-- env('APP_URL') --}}/?directory={{ $_GET['directory'] }}&locationId=${event.detail.option}`;

                    //});

                } else {
                    console.log(`modal was dismissed by ${result.dismiss}`)
                }
            })
        }

    });
</script>