@if ($brandSettings['automatic_dark_mode'])
<div class="relative z-[35]">
    <button id="theme-toggle" type="button" aria-label="theme-toggle"
        class="fixed bottom-0 right-0 mr-3 mb-3 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5">
        <svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
            xmlns="http://www.w3.org/2000/svg">
            <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
        </svg>
        <svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
            xmlns="http://www.w3.org/2000/svg">
            <path
                d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
                fill-rule="evenodd" clip-rule="evenodd"></path>
        </svg>
    </button>
</div>
@endif
<script src="{{ asset('js/jquery-3.7.1.min.js') }}"></script>
<script src="{{ asset('js/sweetalert2.min.js') }}"></script>
<script src="{{ asset('vendor/snackbar/snackbar.min.js') }}"></script>
<script src="{{ asset('vendor/blockui/jquery.blockUI.min.js') }}"></script>
<script src="{{ asset('vendor/blockui/custom-blockui.js') }}"></script>
<script src="{{ asset('js/leaflet.js') }}"></script>
<script src="{{ asset('js/leaflet-routing-machine.js') }}"></script>

<script>
    function noty(msg, option = 1) {
        Snackbar.show({
            text: msg.toString().toUpperCase(),
            actionText: 'Cerrar',
            actionTextColor: option == 1 ? '#ffffff' : '#ffffff',
            backgroundColor: option == 1 ? '#1abc9c' : '#e7515a',
            pos: 'top-right',
            customClass: 'rounded'
        })
    }

    /* window.addEventListener('livewire:navigated', () => {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        })
    }) */

    document.addEventListener('livewire:init', () => {

        //const modal = FlowbiteInstances.getInstance('Modal', 'modal-address');
        //modal.show();

        let map;
        let marker;

        Livewire.hook('request', ({
            fail
        }) => {
            fail(({
                status,
                preventDefault
            }) => {
                if (status === 419) {
                    preventDefault()
                    sessionCerrada()
                }
            })
        })

        Livewire.on('modal-product', action => {
            const modal = FlowbiteInstances.getInstance('Modal', 'modal-product');
            if (action == 'show') {
                modal.show();
            } else {
                modal.hide();
            }
        })

        Livewire.on('modal-address', action => {
            const modal = FlowbiteInstances.getInstance('Modal', 'modal-address');
            if (action == 'show') {
                modal.show();
            } else {
                modal.hide();
            }
        })

        Livewire.on('modal-edit-address', action => {
            const modal = FlowbiteInstances.getInstance('Modal', 'modal-edit-address');
            if (action == 'show') {
                modal.show();
            } else {
                modal.hide();
            }
        })

        Livewire.on('modal-company-time', action => {
            const modal = FlowbiteInstances.getInstance('Modal', 'modal-company-time');
            if (action == 'show') {
                modal.show();
            } else {
                modal.hide();
            }
        })

        Livewire.on('drawer-cart', action => {
            const drawerCart = FlowbiteInstances.getInstance('Drawer', 'drawer-cart');
            drawerCart.show();
        })

        Livewire.on('drawer-menu', action => {
            const drawerMenu = FlowbiteInstances.getInstance('Drawer', 'drawer-menu');
            if (action == 'show') {
                drawerMenu.show();
            } else {
                drawerMenu.hide();
            }
        })

        Livewire.on('drawer-detail', action => {
            const drawerDetail = FlowbiteInstances.getInstance('Drawer', 'drawer-detail');
            drawerDetail.show();
        })

        Livewire.on('drawer-otp', action => {
            const drawerOtp = FlowbiteInstances.getInstance('Drawer', 'drawer-otp');
            if (action == 'show') {
                drawerOtp.show();
            } else {
                drawerOtp.hide();
            }
        })

        Livewire.on('noty', msg => {
            noty(msg)
        })

        Livewire.on('noty-error', msg => {
            noty(msg, 2)
        })

        Livewire.on('change-url', params => {
            window.history.pushState({}, '', params.url);
        })

        Livewire.on('block-ui', (id) => {
            let element = $('div.block-cart')
            element.block({
                message: '<span class="text-semibold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-loader spin position-left"><line x1="12" y1="2" x2="12" y2="6"></line><line x1="12" y1="18" x2="12" y2="22"></line><line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line><line x1="16.24" y1="16.24" x2="19.07" y2="19.07"></line><line x1="2" y1="12" x2="6" y2="12"></line><line x1="18" y1="12" x2="22" y2="12"></line><line x1="4.93" y1="19.07" x2="7.76" y2="16.24"></line><line x1="16.24" y1="7.76" x2="19.07" y2="4.93"></line></svg></i> Recopilando Información</span>',
                //timeout: 86000,
                overlayCSS: {
                    backgroundColor: '#1b2024',
                    opacity: 0.8,
                    cursor: 'wait'
                },
                css: {
                    border: 0,
                    padding: '10px 15px',
                    color: '#fff',
                    '-webkit-border-radius': 2,
                    '-moz-border-radius': 2,
                    backgroundColor: '#0e1726'
                }
            })
        })

        Livewire.on('maps', (params) => {
            if (!params.showMap) {
                $('#mapContainer').show()
                map = L.map('mapid').setView([params.lat, params.lng], params.zoom)
            } else {
                $('#mapContainer').hide()
                map.remove()
                $('#mapContainer').show()
                map = L.map('mapid').setView([params.lat, params.lng], params.zoom)
            }

            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 18,
                attribution: '© OpenStreetMap'
            }).addTo(map)

            maker = L.marker([params.lat, params.lng], {
                draggable: true,
                autoPan: true
            }).addTo(map)

            maker.on('dragend', function(e) {
                let marker = e.target
                let position = marker.getLatLng()
                Livewire.dispatch('update-marker', {
                    position: position
                })
            })

            //Livewire.dispatch('selectMarker', maker.options.data);
            $('.modal').css('overflowY', 'auto')
        })

        function checkMapContainerExists(callback) {
            const interval = setInterval(() => {
                if (document.getElementById('mapid')) {
                    clearInterval(interval);
                    callback();
                }
            }, 100);
        }

        Livewire.on('mapsAddress', (params) => {

            if (map !== undefined && map._container) {
                try {
                    map.remove();
                } catch (e) {
                    console.warn('Error al eliminar mapa:', e);
                }
            }
            map = undefined;

            checkMapContainerExists(function() {
                if (
                    !params.zoom ||
                    params.lat == null ||
                    params.lng == null ||
                    isNaN(params.lat) ||
                    isNaN(params.lng)
                ) {
                    $('#mapContainer').hide();
                    return;
                }

                $('#mapContainer').show();
                $('#mapid').empty();

                map = L.map('mapid').setView([params.lat, params.lng], params.zoom);

                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    maxZoom: 18,
                    attribution: '© OpenStreetMap'}).addTo(map);

                marker = L.marker([params.lat, params.lng], {
                    draggable: true
                }).addTo(map);

                marker.on('dragend', function(e) {
                    let marker = e.target
                    let position = marker.getLatLng()
                    Livewire.dispatch('updateLatLng', {
                        lat: position.lat,
                        lng: position.lng
                    })
                })

                $('.modal').css('overflowY', 'auto');
            });
        });

        Livewire.on('maps-destroy', (params) => {
            $('#mapContainer').hide()
            map.remove()
            $('.modal').css('overflowY', 'auto')
        })

        Livewire.on('console', (msg) => {
            console.log(msg)
        })

        Livewire.on('msgSwal', (msg) => {
            swal.close()
            Swal.fire({
                title: msg,
                didOpen: () => {
                    Swal.hideLoading()
                }
            })
        })

        Livewire.on('msgSwalLoad', (msg) => {
            swal.close()
            Swal.fire({
                title: msg,
                text: 'Espera unos segundos',
                timerProgressBar: true,
                allowOutsideClick: false,
                didOpen: () => {
                    Swal.showLoading()
                }
            })
        })

        Livewire.on('msgSwalMoto', (eventConfirmed, eventDenied, eventDismissed, title) => {
            swal.close()
            Swal.fire({
                title: title,
                icon: 'error',
                showDenyButton: true,
                showCancelButton: true,
                confirmButtonText: 'Reintentar',
                denyButtonText: 'Repartidor Propio',
                cancelButtonText: 'Cerrar',
                confirmButtonColor: '#1abc9c',
                cancelButtonColor: '#e7515a',
                denyButtonColor: '#2196f3',
                didOpen: () => {
                    Swal.hideLoading()
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                        title: 'Buscando Repartidor',
                        text: 'Espera unos segundos',
                        timerProgressBar: true,
                        allowOutsideClick: false,
                        didOpen: () => {
                            Swal.showLoading()
                        }
                    })
                    Livewire.dispatch(eventConfirmed)
                } else if (result.isDenied) {
                    Swal.fire('Pedido cambiado a tus despachadores', '', 'success')
                    Livewire.dispatch(eventDenied)
                } else if (result.isDismissed) {
                    /* Swal.fire('Changes are not saved', '', 'info')
                    Livewire.dispatch(eventDismissed, id) */
                }
            })
        })

        Livewire.on('sendViewContent', params => {
            fbq('track', 'ViewContent', {
                'content_name': params.name,
                'content_category': params.category,
                'content_ids': params.id,
                'content_type': 'product',
                'value': params.value,
                'currency': 'CLP'
            });
        })

        Livewire.on('sendAddToCart', params => {
            fbq('track', 'AddToCart', {
                'content_name': params.name,
                'content_ids': params.id,
                'content_type': 'product',
                'value': params.value,
                'currency': 'CLP'
            });
        })

        Livewire.on('sendPurchase', params => {
            fbq('track', 'Purchase', {
                'content_ids': params.ids,
                'content_type': 'product',
                'num_items': params.items,
                'value': params.value,
                'currency': 'CLP'
            });
        })

        Livewire.on('sendInitiateCheckout', params => {
            fbq('track', 'InitiateCheckout', {
                'content_ids': params.ids,
                'content_type': 'product',
                'num_items': params.items,
                'value': params.value,
                'currency': 'CLP'
            });
        })

        Livewire.on('sendViewContentGTM', params => {
            console.log(params);
            dataLayer.push({
                ecommerce: null
            });
            dataLayer.push({
                event: "view_item",
                ecommerce: {
                    currency: "CLP",
                    value: params.value,
                    items: [{
                        item_id: params.id,
                        item_name: params.name,
                        item_category: params.category,
                        price: params.value,
                        quantity: 1
                    }]
                }
            });
        })

        Livewire.on('sendAddToCartGTM', params => {
            console.log(params);
            dataLayer.push({
                ecommerce: null
            });
            dataLayer.push({
                event: "add_to_cart",
                ecommerce: {
                    currency: "CLP",
                    value: params.price * params.quantity,
                    items: [{
                        item_id: params.id,
                        item_name: params.name,
                        item_category: params.category,
                        price: params.price,
                        quantity: params.quantity
                    }]
                }
            });
        })

        Livewire.on('sendInitiateCheckoutGTM', params => {
            console.log(params);
            dataLayer.push({
                ecommerce: null
            });
            dataLayer.push({
                event: "begin_checkout",
                ecommerce: {
                    currency: "CLP",
                    value: params.total,
                    items: params.items
                }
            });
        })

        Livewire.on('sendPurchaseGTM', params => {
            console.log(params);
            dataLayer.push({
                ecommerce: null
            });
            dataLayer.push({
                event: "purchase",
                ecommerce: {
                    transaction_id: params.saleId,
                    value: params.total,
                    shipping: params.delivery,
                    currency: "CLP",
                    items: params.items

                }
            });
        })

        Livewire.on('swalClose', (msg) => {
            swal.close()
        })

        Livewire.on('hide-block-load', (params) => {
            if (params.elementId) {
                let element = $('.' + params.elementId)
                element.unblock()
            } else {
                $.unblockUI()
            }
        })

        Livewire.on('confirm', (params) => {
            confirm(params.id, params.eventName, params.text, params.title, params.icon);
        })

    })

    document.addEventListener('livewire:initialized', () => {
        Livewire.dispatch('hide-block-load', {
            'elementId': null
        })
    })

    // showBlockLoad('Cargando Datos');

    function showBlockLoad(msg, elementId = null) {
        let options = {
            message: '<span class="text-semibold"> <img src="/img/Spin-1s-200px.gif" width="40px" height="40px"> <br>' +
                msg + ' </span>',
            //timeout: 86000,
            overlayCSS: {
                backgroundColor: '#1b2024',
                opacity: 0.8,
                cursor: 'wait'
            },
            css: {
                border: 0,
                padding: '10px 15px',
                color: '#fff',
                '-webkit-border-radius': 2,
                '-moz-border-radius': 2,
                backgroundColor: '#0e1726'
            }
        }

        if (elementId) {
            let element = $('.' + elementId)
            element.block(options)
        } else {
            $.blockUI(options)
        }
    }

    function confirm(id, eventName, text, title = 'Confirmar', icon = 'warning') {

        swal.close()
        Swal.fire({
            title: title,
            html: text,
            icon: icon,
            showCancelButton: true,
            cancelButtonColor: '#e7515a',
            confirmButtonColor: '#1abc9c',
            cancelButtonText: 'NO',
            confirmButtonText: 'SI',
            didOpen: () => {
                Swal.hideLoading()
            }
        }).then((result) => {
            if (result.isConfirmed) {
                Livewire.dispatch(eventName, {
                    item: id
                })
            }
            Livewire.dispatch('resetValues');
        });
    }

    function sessionCerrada() {
        let timerInterval
        Swal.fire({
            title: 'Sesión Cerrada',
            html: 'Tu sesión se encuentra cerrada, por seguridad refrescaremos la página espera unos segundos',
            timer: 10000,
            timerProgressBar: true,
            didOpen: () => {
                Swal.showLoading()
            },
            willClose: () => {
                clearInterval(timerInterval)
                window.location.href = window.location.pathname
            }
        }).then((result) => {
            /* Read more about handling dismissals below */
            if (result.dismiss === Swal.DismissReason.timer) {
                window.location.href = window.location.pathname
            }
        })
    }

    // cambio de titulo
    let titulos = ["🔥 ¡Vuelve!", "🔥 No olvides esto..."];
    let index = 0;
    let interval;

    function cambiarTitulo() {
        document.title = titulos[index];
        index = (index + 1) % titulos.length;
    }

    let tituloOriginal = document.title;

    document.addEventListener("visibilitychange", function() {
        if (document.visibilityState === 'hidden') {
            interval = setInterval(cambiarTitulo, 1500);
        } else {
            clearInterval(interval);
            document.title = tituloOriginal;
        }
    });
</script>