@vite(["resources/css/LoginPage.css"])

{!! $template !!}

<div id="privacy_policy_modal" class="custom-modal">
    <div class="custom-modal-content">
        <div class="custom-modal-header">
            <h2>Política de Privacidade</h2>
            <span class="custom-modal-close">&times;</span>
        </div>
        <div class="custom-modal-body">
            {!! $privacy_policy !!}
        </div>
    </div>
</div>






{{--<link href="{{ asset('assets/captive/bootstrap.min.css') }}" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">--}}
<link href="{{ asset('assets/captive/flag-icons/css/flag-icons.min.css') }}" rel="stylesheet" />
<link href="{{ asset('assets/captive/select2/select2.min.css') }}" rel="stylesheet" />
<link href="{{ asset('assets/captive/fontawesome-free-5.15.4-web/css/all.css') }}" rel="stylesheet" />

<script src="{{ asset('assets/captive/jquery.min.js') }}" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="{{ asset('assets/captive/select2/select2.min.js') }}"></script>
<script src="{{ asset('assets/js/core/bootstrap.min.js') }}"></script>
<script src="{{ asset('assets/captive/fontawesome-free-5.15.4-web/js/all.js') }}" crossorigin="anonymous"></script>

<script>
    //detectar o campo tel e substituir o input por um código meu
    $(document).ready(function($){
        $('form').append('<input type="hidden" class="form-control" id="id_ubiquiti" name="id_ubiquiti" value="{{$id_ubiquiti}}"/>');
        $('form').append('<input type="hidden" class="form-control" id="store_id" name="store_id" value="{{$storeID}}"/>');

        const urlParams = new URLSearchParams(window.location.search);
        if(urlParams.get('ap')) $('form').append('<input type="hidden" class="form-control" id="ap_mac" name="ap_mac" value="'+urlParams.get('ap')+'"/>');
        if(urlParams.get('id')) $('form').append('<input type="hidden" class="form-control" id="guest_mac" name="guest_mac" value="'+urlParams.get('id')+'"/>');
        if(urlParams.get('url')) $('form').append('<input type="hidden" class="form-control" id="requested_url" name="requested_url" value="'+urlParams.get('url')+'"/>');



        $('button[type="submit"]').before(
            `
            <div class="checkboxes" style="text-align: justify; margin-bottom: 10px; margin-top: 10px">
                    <label for="confirmcheckbox"><input type="checkbox" name="newsconfirm" id="confirmcheckbox"><span>Receber noticias de novidades, ofertas exclusivas e eventos especias.</span></label>
            </div>
            `
        );
        const privacy_policy = ``;
        //validar se $privacy_policy é != ''
        if(privacy_policy !== ''){
            $('button[type="submit"]').before(
                `
                <div class="checkboxes" style="text-align: justify; margin-bottom: 10px" >
                    <label for="privacyconfirm"><input type="checkbox" name="privacyconfirm" id="privacyconfirm" required><span>Li e aceito a <a target="_blank" id="privacycheckbox" style="cursor: pointer">Política de Privacidade</a></span></label>
                </div>
                `
            );
        }

        //obter uma <label>
        const css = $('label').first().parent().attr('style');
        $('#privacyconfirm').next('span').attr('style', css+'; font-weight: bold');
        $('#confirmcheckbox').next('span').attr('style', css+' ; font-weight: bold');



        $name_input = $('input[name="name"]');
        $phone_input = $('input[name="phone"]');

        $phone_input.closest('div').html(`
            <div class="custom-input-group">
                <div class="custom-input-group-prepend" style="max-width: 15%">
                    <select class="country" name="country"> </select>
                </div>
                <input type="tel" class="custom-form-control phone" name="phone" style="padding-top: 2vh !important; border-bottom-left-radius: 0 !important; border-top-left-radius: 0 !important;" placeholder="Telemóvel" id="phone" value="+351"/>
            </div>
            `)
        $('input[name="phone"]').attr('style', $name_input.attr('style')).css('border-top-left-radius', '0').css('border-bottom-left-radius', '0')
        $('.custom-input-group-prepend').css('border-top-left-radius', $name_input.css('border-top-left-radius')).css('border-bottom-left-radius', $name_input.css('border-bottom-left-radius'))


        let countries = @json($countries);
        let data = [];
        for (let key in countries) {
            //check if key == PT and select it
            if(key === 'PT'){
                data.push({
                    id: key,
                    text: '<span class="fi fi-'+key.toLowerCase()+'"></span> <span style="display: none">'+countries[key]+'</span>',
                    html: '<span class="fi fi-'+key.toLowerCase()+'"></span> '+countries[key],
                    selected: true
                });
            }else {
                data.push({
                    id: key,
                    text: '<span class="fi fi-' + key.toLowerCase() + '"></span>  <span style="display: none">'+countries[key]+'</span>',
                    html: '<span class="fi fi-' + key.toLowerCase() + '"></span> ' + countries[key]
                });
            }
        }
        $(".country").select2({
            width: '250px',
            data: data,
            escapeMarkup: function(markup) {
                return markup;
            },
            templateResult: function(data) {
                return data.html;
            },
            templateSelection: function(data) {
                return data.text;
            },
        });


        //Modal de política de privacidade
        const modal = document.getElementById("privacy_policy_modal");
        const openBtn = document.getElementById("privacycheckbox");
        const closeBtn = document.getElementsByClassName("custom-modal-close")[0];
        openBtn.onclick = function() {
            modal.classList.add("show");
            setTimeout(function() {
                modal.style.opacity = "1";
            }, 10); // Delay para a transição funcionar corretamente
        }
        closeBtn.onclick = function() {
            modal.style.opacity = "0";
            setTimeout(function() {
                modal.classList.remove("show");
            }, 500); // O tempo deve corresponder ao tempo da transição (0.5s)
        }
        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.opacity = "0";
                setTimeout(function() {
                    modal.classList.remove("show");
                }, 500); // Fechamento com o mesmo tempo da transição
            }
        }
    });

    let countries_codes = @json($countries_code);
    $(document).on('change', '.country', function(){
        const phone = $(this).closest('.custom-input-group').find('.phone');
        const country_code = $(this).val();

        //validar qual é o country_code e pesquisar no array countries_codes o código do país
        const code = countries_codes[country_code];
        phone.val('+'+code);
    });

    //Não permitir que o utilizador apague o código do país do input .phone
    $(document).on('input', '.phone', function(){
        const phone = $(this);
        const country_code = phone.closest('.custom-input-group').find('.country').val();
        const code = countries_codes[country_code];
        const value = phone.val();
        if(!value.startsWith('+'+code)){
            phone.val('+'+code);
        }
    });


    $('form').submit(function(e){
        e.preventDefault();
        let custom_fields = $(this).serializeArray();
        custom_fields = custom_fields.filter(function(item){
            return item.name !== 'name' && item.name !== 'phone' && item.name !== 'email' && item.name !== 'country' && item.name !== 'id_ubiquiti' && item.name !== 'store_id' && item.name !== 'ap_mac' && item.name !== 'guest_mac' && item.name !== 'requested_url' && item.name !== 'newsconfirm' && item.name !== 'privacyconfirm';
        });

        //obter o button submit e desativar e colocar um icon a rodar
        let button = $(this).find('button[type="submit"]');
        button.html('<i class="fas fa-spinner fa-spin"></i>');
        button.attr('disabled', true);

        $.ajax({
            url: "/ubiquiti/connect",
            type: 'POST',
            data: {
                _token: "{{csrf_token()}}",
                //foreach serializeArray
                name: $(this).find('input[name="name"]').val(),
                phone: $(this).find('input[name="phone"]').val(),
                email: $(this).find('input[name="email"]').val(),
                country_code: $(this).find('select[name="country"]').val(),
                id_ubiquiti: $(this).find('input[name="id_ubiquiti"]').val(),
                store_id: $(this).find('input[name="store_id"]').val(),
                ap_mac: $(this).find('input[name="ap_mac"]').val(),
                guest_mac: $(this).find('input[name="guest_mac"]').val(),
                requested_url: $(this).find('input[name="requested_url"]').val(),
                newsconfirm: $(this).find('input[name="newsconfirm"]').is(':checked'),
                custom_fields: custom_fields
            },
            success: function (data) {
                console.log(data);

                button.html('Submeter');
                button.attr('disabled', false);
                location.reload();


                checkWebsite(data.redirect_url)
                    .then(websiteIsReachable => {
                        if (websiteIsReachable) {

                            if(/iPhone|iPad|iPod|Macintosh/.test(navigator.userAgent)){



                                $('#u_body').html(`<div class="container" style="text-align: center">
                                    <h1>Você já está conectado!</h1>
                                    <p>Irá ser reencaminhado para uma página de confirmação, dentro de 5s</p>
                                    <br>
                                </div>`);

                                //set timeout 5s
                                setTimeout(function(){
                                    window.location.href = 'https://captive.apple.com'
                                }, 5000);


                            }else{
                                window.location.href = data.redirect_url; // Redirect to the website
                            }


                        } else {
                            console.error('Website is not reachable.');
                            checkWebsite(data.redirect_url);
                        }
                    });
            },
            error: function (data) {
                console.log(data);
                button.html('Submeter');
                button.attr('disabled', false);

                alert(data.responseJSON.message);
                //
                //
                // //set class "is-invalid" to inputs
                // if(data.responseJSON.errors){
                //     for (let key in data.responseJSON.errors) {
                //         if(data.responseJSON.errors.hasOwnProperty(key)){
                //             $('#'+key).addClass('is-invalid');
                //         }
                //     }
                // }
            }
        });
    })

    const redirect_url = '{{$redirect_url}}';
    let tries = 1;


    const is_registered = `false`;

    if(is_registered === 'true') {

        $('form').replaceWith(`<header style="font-size: 1.55vw;margin-top: 1.3vw; margin-bottom: 3.15vw;">AGUARDE ENQUANTO O AUTENTICAMOS NA REDE!</header>
            <span style="font-size: 30px"><i class="fas fa-spinner fa-spin"></i></span>`);

        async function pingURL(url) {
            return new Promise((resolve, reject) => {
                var img = new Image();

                // Adiciona um timestamp para evitar o cache
                img.src = url + '?tries=' + tries + '&timestamp=' + Date.now();

                img.onload = function() {
                    console.log('resolved')
                    resolve('Site está online');
                };

                img.onerror = function() {
                    reject('Site está offline');
                };

                img.className = "try_load";

                document.body.appendChild(img)

                // Adiciona um timeout de 5 segundos
                setTimeout(function () {
                    $('.try_load').attr('src', '')
                    reject('Timeout');
                }, 5000);
            });
        }

        async function makeRequest() {
            try {
                await pingURL(redirect_url).then(() => location.href = redirect_url).catch(() => {
                    tries++;
                    makeRequest();
                });
            }catch (err) {
                console.log(err);
            }
        }

        function checkWebsite(url) {

            // return await fetch("https://code.jquery.com/jquery-3.7.1.min.js")
            //     .then(x => x.text())
            //     .then(x => console.log(x.substring(4, 15) === "jQuery v3.7"))

            return fetch('https://code.jquery.com/jquery-3.7.1.min.js')
                .then(response => {
                    console.error(response)
                    if (response.ok) {
                        return true; // Website is reachable
                    } else {
                        return false; // Website is not reachable
                    }
                })
                .catch(error => {
                    console.error('Error checking website:', error);
                    return false; // Error occurred, website is not reachable
                });
        }

        checkWebsite(redirect_url)
            .then(websiteIsReachable => {
                console.error(websiteIsReachable);
                if (websiteIsReachable) {
                    window.location.href = redirect_url; // Redirect to the website
                } else {
                    console.error('Website is not reachable.');
                    checkWebsite(redirect_url);
                }
            });

    }else{

        function checkPage(url) {
            const script = document.createElement('script');

            // Set the source to the target server with the callback parameter
            script.src = url + '?try=' + tries;

            // Set up event handlers
            script.onload = function () {
                //redirect to the requested url
                location.href = url;
            };

            // Attach the script to the document
            document.body.appendChild(script);
            isloading = true;

            setTimeout(function(){
                if(isloading){
                    tries++;
                    checkPage(url);
                    console.log('Trying to connect to '+url+' for the '+tries+' time');
                }
            }, 5000);

            return script;
        }

        function pingURL(url) {

            var settings = {

                // Defines the configurations
                // for the request
                cache: false,
                dataType: "jsonp",
                async: true,
                crossDomain: true,
                url: url,
                method: "GET",
                headers: {
                    accept: "application/json",
                    "Access-Control-Allow-Origin": "*",
                },

                // Defines the response to be made
                // for certain status codes
                statusCode: {
                    200: function (response) {
                        location.href = url;
                    },
                    400: function (response) {
                        pingURL(url);
                    },
                    0: function (response) {
                        pingURL(url);
                    },
                },
                timeout: 5000,
                error: function(x, textStatus, m) {
                    if (textStatus==="timeout") {
                        pingURL(url);
                    }
                }
            };

            //Sends the request and observes the response
            $.ajax(settings);
        }

        function checkWebsite(url) {

            // return await fetch("https://code.jquery.com/jquery-3.7.1.min.js")
            //     .then(x => x.text())
            //     .then(x => console.log(x.substring(4, 15) === "jQuery v3.7"))

            return fetch('https://code.jquery.com/jquery-3.7.1.min.js')
                .then(response => {
                    console.error(response)
                    if (response.ok) {
                        return true; // Website is reachable
                    } else {
                        return false; // Website is not reachable
                    }
                })
                .catch(error => {
                    console.error('Error checking website:', error);
                    return false; // Error occurred, website is not reachable
                });
        }
    }

</script>