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

@vite(["resources/css/catchme.css"])
@section('content')
<div class="content">
    <div class="img">
        <img src="{{asset('images/CatchMe.jpeg')}}" 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"></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/CATCHME_logo_.svg')}}">
        </div>
        <header class="wifitext">GET YOUR WIFI HERE</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" 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 = [];
            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;

        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