@extends('layouts.auth', [
    'activePage' => 'login'
])

@vite(["resources/css/goodfellas.css"])
@section('content')
<div class="content">
    <div class="img">
        <img src="{{asset('images/goodfella.jpg')}}" width="100%" height="100%" style="object-fit: cover;">
    </div>
    @if(!$is_registered)
        <div class="form">
{{--        <ul class="lang justify-content-end mb-6" style="width: 95%; display: flex">--}}
{{--            <li class="nav-item dropdown pe-3 d-flex align-items-center">--}}
{{--                <a href="javascript:;" class="nav-link text-white p-0" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">--}}
{{--                    <i class="fas fa-globe-europe text-dark"></i>--}}
{{--                </a>--}}
{{--                <ul class="dropdown-menu dropdown-menu-end px-2 py-3 me-sm-n4" aria-labelledby="dropdownMenuButton" style="top: 0 !important; right: 15px !important;">--}}
{{--                    <li class="mb-2">--}}
{{--                        <div class="d-flex">--}}
{{--                            <a class="dropdown-item" onclick="SetLocation('pt')"><img src="https://flagcdn.com/16x12/pt.png"> Português</a>--}}
{{--                        </div>--}}
{{--                        <div class="d-flex">--}}
{{--                            <a class="dropdown-item" onclick="SetLocation('en')"><img src="https://flagcdn.com/16x12/gb.png"> English</a>--}}
{{--                        </div>--}}
{{--                    </li>--}}
{{--                </ul>--}}
{{--            </li>--}}
{{--        </ul>--}}
{{--        <header class="welcome">Welcome to</header>--}}
        <div class="logoimg">
            <img src="{{asset('images/GF_Logo_Verde.svg')}}">
        </div>
        <header class="wifitext">GET YOUR WIFI</header>
        <div class="form-group" style="width: 70%">
            <input type="hidden" class="form-control" id="id_ubiquiti" value="{{$id_ubiquiti}}"/>
            <input type="hidden" class="form-control" id="store_id" value="{{$storeID}}"/>
            @if(isset($_GET['ap']))
                <input type="hidden" class="form-control" id="ap_mac" value="{{$_GET['ap']}}"/>
            @endif
            @if(isset($_GET['id']))
                <input type="hidden" class="form-control" id="guest_mac" value="{{$_GET['id']}}"/>
            @endif
            @if(isset($_GET['url']))
                <input type="hidden" class="form-control" id="requested_url" value="{{$_GET['url']}}"/>
            @endif

            <div class="form-floating mb-3">
                <input type="text" class="form-control" style="padding-top: 2vh !important;" placeholder="Nome" id="name"/>
                <label for="name">Nome</label>
            </div>

            <div class="form-floating mb-3">
                <input type="email" class="form-control" style="padding-top: 2vh !important;" placeholder="E-mail" id="email"/>
                <label for="email">E-mail</label>
            </div>

            <div style="display: flex">
                <div class="form-floating mb-3" style="display: flex; width: 15%">
                    <select class="country" name="country">
                    </select>
                </div>

                <div class="form-floating mb-3" style="display: flex; width: 85%">
                    <input type="tel" class="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"/>
                    <label for="phone">Telemóvel</label>
                </div>
            </div>

            <div class="form-floating mb-3">
                <input class="form-control" type="date" style="padding-top: 2vh !important;" value="" id="date_of_birth" required />
                <label for="date_of_birth">Data de nascimento</label>
                <label id="error-birthday" style="color: red; margin-top: 0; font-weight: bold; display: none">O uso deste WI-FI só é permitido para maiores de 12 anos.</label>

            </div>

            <div class="form-floating mb-3">
                <select class="form-control" id="gender" style="padding-top: 2vh !important;" aria-label="{{__('clients.select_gender')}}">
                    <option value="" selected disabled>{{__('clients.select_gender')}}</option>
                    <option value="1">{{__('clients.male')}}</option>
                    <option value="2">{{__('clients.female')}}</option>
                    <option value="3">{{__('clients.other')}}</option>
                </select>
                <label for="gender">{{__('clients.select_gender')}}</label>
            </div>
        </div>

        <div class="row align-middle" style="width: 70%">
            <div class="checkboxes col-12">
                <label for="confirmcheckbox"><input type="checkbox" name="newsconfirm" id="confirmcheckbox"><span>Receber noticias de novidades, ofertas exclusivas e eventos especias.</span></label>
                @if($privacy_policy != '')
                    <label for="privacy_policy"><input type="checkbox" name="privacy_policy" class="required" id="privacy_policy" required><span>Eu li e concordo com os <a style="text-decoration: underline" href="#" data-bs-toggle="modal" data-bs-target="#privacy_policy_modal">Termos e condições.</a></span></label>
                    <label id="error" style="color: red; margin-top: 0; font-weight: bold; display: none">É obrigatório este campo estar selecionado.</label>
                @else
                    <label style="display: none" for="privacy_policy"><input type="hidden" name="privacy_policy" id="privacy_policy"><span>Eu li e concordo com os <a style="text-decoration: underline" href="#" data-bs-toggle="modal" data-bs-target="#privacy_policy_modal">Termos e condições.</a></span></label>
                @endif
            </div>
        </div>
        <div class="col-12">
            <button type="button" class="btn mt-2 connect-ubiquiti" style="background-color: black; color: white">Submeter</button>
            {{--<button type="submit" name="register">Submeter</button>--}}
        </div>
    </div>
        @push('js')
            <script>
                $(document).ready(function() {
                    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: '500px',
                        data: data,
                        escapeMarkup: function(markup) {
                            return markup;
                        },
                        templateResult: function(data) {
                            return data.html;
                        },
                        templateSelection: function(data) {
                            return data.text;
                        },
                    });
                });

                $(document).on('change', '.country', function(){
                    const phone = $(this).closest('.form-group').find('.phone');
                    const country_code = $(this).val();

                    $.ajax({
                        url: "/api-bo/get-country-number",
                        type: 'GET',
                        data: {
                            country_code: country_code
                        },
                        success: function (data) {
                            phone.prop('disabled', true);
                            phone.val('+'+data);
                            phone.prop('disabled', false);
                        },
                        error: function (data) {
                            console.log(data);
                        }
                    });
                });


                function calcAge(){
                    const date_of_birth = $('#date_of_birth').val();
                    const today = new Date();
                    const birthDate = new Date(date_of_birth);
                    let age = today.getFullYear() - birthDate.getFullYear();
                    const m = today.getMonth() - birthDate.getMonth();
                    if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())){
                        age--;
                    }
                    return age;
                }
                var isloading = false;
                var tries = 1;

                var xhr = null;

                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
                        });
                }

                //button bmv click
                $('button.connect-ubiquiti').on('click', function(){
                    $(this).html('<i class="fas fa-spinner fa-spin"></i>');
                    $(this).attr('disabled', true);

                    const button = $(this);

                    const name = $('#name');
                    const email = $('#email');
                    const country = $('.country');
                    const phone = $('#phone');
                    const date_of_birth = $('#date_of_birth');
                    const gender = $('#gender');
                    const privacy_policy = $('#privacy_policy');

                    @if(isset($_GET['ap']))
                    const ap_mac = $('#ap_mac');
                    @endif
                    @if(isset($_GET['id']))
                    const guest_mac = $('#guest_mac');
                    @endif
                    @if(isset($_GET['id']))
                    const requested_url = $('#requested_url');
                    @endif

                    //check if inputs are empty
                    if (name.val() === ""){
                        name.addClass('is-invalid');
                        name.focus();

                        $(this).html('Submeter');
                        $(this).attr('disabled', false);
                        return false;
                    }
                    if (email.val() === ""){
                        email.addClass('is-invalid');
                        email.focus();

                        $(this).html('Submeter');
                        $(this).attr('disabled', false);
                        return false;
                    }
                    if (phone.val() === ""){
                        phone.addClass('is-invalid');
                        phone.focus();

                        $(this).html('Submeter');
                        $(this).attr('disabled', false);
                        return false;
                    }

                    if(date_of_birth.val() === ''){
                        date_of_birth.addClass('is-invalid');
                        date_of_birth.focus();

                        $(this).html('Submeter');
                        $(this).attr('disabled', false);
                        return false;
                    }
                    if(calcAge() < 12){
                        date_of_birth.addClass('is-invalid');
                        date_of_birth.focus();
                        $('#error-birthday').show();

                        $(this).html('Submeter');
                        $(this).attr('disabled', false);
                        return false;
                    }

                    if(gender.val() === '' || gender.val() === null){
                        gender.addClass('is-invalid');
                        gender.focus();

                        $(this).html('Submeter');
                        $(this).attr('disabled', false);
                        return false;
                    }

                    if(privacy_policy.hasClass('required')){
                        if(!privacy_policy.is(':checked')){
                            $('#error').show();

                            $(this).html('Submeter');
                            $(this).attr('disabled', false);
                            return false;
                        }
                    }

                    $.ajax({
                        url: "/ubiquiti/connect",
                        type: 'POST',
                        data: {
                            _token: "{{csrf_token()}}",
                            id_ubiquiti: $('#id_ubiquiti').val(),
                            store_id: $('#store_id').val(),
                            country_code: country.val(),
                            name: name.val(),
                            email: email.val(),
                            phone: phone.val(),
                            date_of_birth: date_of_birth.val(),
                            gender: gender.val(),
                            newsconfirm: $('#confirmcheckbox').is(':checked'),
                            @if(isset($_GET['ap']))
                            ap_mac: ap_mac.val(),
                            @endif
                                @if(isset($_GET['ap']))
                            guest_mac: guest_mac.val(),
                            @endif
                                @if(isset($_GET['ap']))
                            requested_url: requested_url.val(),
                            @endif
                        },
                        success: function (data) {
                            console.log(data);
                            // pingURL(data.redirect_url);

                            checkWebsite(data.redirect_url)
                                .then(websiteIsReachable => {
                                    console.error(websiteIsReachable);
                                    if (websiteIsReachable) {
                                        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');
                                    }
                                }
                            }
                        }
                    });
                });

                $('#name, #email, #phone, #date_of_birth').on('keyup', function(){
                    if($(this).val() !== ""){
                        $(this).removeClass('is-invalid');
                    }
                });

                $('#gender, #date_of_birth').on('change', function(){
                    if($(this).val() !== "" || $(this).val() != null){
                        $(this).removeClass('is-invalid');
                        $('#error-birthday').hide();
                    }
                });

                $('#privacy_policy').on('change', function(){
                    if($(this).is(':checked')){
                        $('#error').hide();
                    }
                });

            </script>
        @endpush
    @else
        <div class="form">
            <header class="welcome">Welcome to</header>
            <div class="logoimg">
                <img src="{{asset('images/EPL_LOGO_HORIZONTAL_BLACK.svg')}}">
            </div>
            <header class="wifitext">AGUARDE ENQUANTO O AUTENTICAMOS NA REDE!</header>
            <span style="font-size: 20px"><i class="fas fa-spinner fa-spin"></i></span>
        </div>
        @push('js')
            <script type="module">
                const redirect_url = '{{$redirect_url}}';
                var tries = 1;

                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);
                    }
                }

                // makeRequest();

                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);
                        }
                    });

            </script>


        @endpush
    @endif
</div>

<!-- Modal -->
<div class="modal fade" id="privacy_policy_modal" tabindex="-1" role="dialog" aria-labelledby="privacy_policy_modalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="privacy_policy_modalLabel">{{__('stores.privacy_policy')}}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    <span style="color: black" aria-hidden="true">&times;</span>

                </button>
            </div>
            <div class="modal-body">
                {!! $privacy_policy !!}
            </div>
        </div>
    </div>
</div>
@endsection