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

@vite(["resources/css/oobaah.css"])
@section('content')
    <div class="content">
        <div class="img">
            <img src="{{asset('images/oobaah.jpg')}}" width="100%" height="100%" style="object-fit: cover;">
        </div>
        @if(!$is_registered)


            <div class="form">
                <ul class="justify-content-end mb-6" style="width: 90%; 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"></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 change-lang" id="pt"> <span class="fi fi-pt"></span> Português</a>--}}
{{--                                </div>--}}
{{--                                <div class="d-flex">--}}
{{--                                    <a class="dropdown-item change-lang" id="en"><span class="fi fi-gb"></span> English</a>--}}
{{--                                </div>--}}
{{--                                <div class="d-flex">--}}
{{--                                    <a class="dropdown-item change-lang" id="es"><span class="fi fi-es"></span> Español</a>--}}
{{--                                </div>--}}
{{--                            </li>--}}
{{--                        </ul>--}}
                    </li>
                </ul>
                <div class="logoimg">
                    <img src="{{asset('images/oobaah_logo.png')}}" width="100%">
                </div>
                <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" 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" class="required" name="privacy_policy" 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 class="col-12">
                        <button type="button" class="btn mt-2 connect-ubiquiti" style="">Submeter</button>
                        {{--<button type="submit" name="register">Submeter</button>--}}
                    </div>
                </div>
            </div>
        @else
            <div class="form">
                <header class="welcome">Welcome to</header>
                <div class="logoimg">
                    <img src="{{asset('images/CATCHME_logo_.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>
            <script>
                const redirect_url = '{{$redirect_url}}';
                var isloading = false;
                var tries = 1;

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

                // checkPage(redirect_url);
            </script>
        @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
@push('js')
    <script>
        $(document).ready(function() {
            let countries = @json($countries);
            let data = [];
            let data_lang = [];
            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> '+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;
                },
            });


            $(".change-lang").on('click', function(){
                let lang = $(this).attr('id');
                console.log(lang);

                //get atual url
                let url = window.location.href;
                console.log(url);
                //url = http://unifi.test:8000/en/teste
                //change '/en/' to '/'+lang+'/'
                url = url.replace(/\/[a-z]{2}\//, '/'+lang+'/');
                console.log(url);
                window.location.href = url;
            });

        });

        $(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;

        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 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);
                    // checkPage(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').on('keyup', function(){
            if($(this).val() !== ""){
                $(this).removeClass('is-invalid');
            }
        });

        $('#gender, #date_of_birth').on('change', function(){
            if ($(this).attr('id') === 'date_of_birth'){
                if(calcAge() >= 12){
                    $('#error-birthday').hide();
                }else {
                    $(this).addClass('is-invalid');
                    $('#error-birthday').show();
                    return false;
                }
            }

            if($(this).val() !== "" || $(this).val() != null){
                $(this).removeClass('is-invalid');
            }
        });


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

    </script>
@endpush