@extends('master')

@section('seo_title', 'Checkout')
@section('seo_keywords', '')
@section('seo_description', '')

@section('content')

    @include('layout.breadcrumbs', ['page_title' => 'Checkout'])

    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta name="locale" content="{{ app()->getLocale() }}">

    <section class="checkout-page pt-4">
        <!-- contents -->
        <div class="container">
            <!-- mobile back button -->
            <a href="javascript:history.go(-1)" title="" class="float-start me-3 d-inline-block d-md-none fs-3">
                <i class="fa-solid fa-arrow-left mt-1"></i>
            </a>
            <!-- end mobile back button -->

            @if (empty($cart->items))
                @include('cart.cart-empty')
            @else
                <h1 class="mb-2">@lang('messages.FINISH_YOUR_ORDER')</h1>
                @guest
                    <p class="mb-3 text-center text-lg-start">
                        @lang('messages.ALREADY_REGISTERED?')
                        <a title="@lang('messages.LOGIN_TO_YOUR_ACCOUNT')" data-bs-toggle="offcanvas" href="#loginOffcanvas" role="button" aria-controls="loginOffcanvas">
                            <u>@lang('messages.SIGN_IN_TO_YOUR_ACCOUNT')</u>
                        </a>
                    </p>
                @endguest

                <!-- user data -->
                <div class="row form-finish form-entrega">
                    <!-- left/top column -->
                    <div class="col-12 col-lg-7">
                        @include('checkout.user-data')

                        @include('checkout.address')

                        @include('checkout.shipment')

                        @include('checkout.payment')

                        @include('checkout.observations')
                    </div>
                    <!-- end left/top column -->

                    <!-- right/bottom column -->
                    <div class="col-12 col-lg-4 offset-lg-1">
                        <div class="sidebar position-sticky">
                            <!-- Resumo da encomenda -->
                            <div class="header-col-card">
                                <div class="title-header-col-card text-center mb-2">
                                    <h4 class="fw-bold">@lang('messages.YOUR_SHOPPING_CART')</h4>
                                </div>
                            </div>

                            @include('checkout.summary')
                        </div>
                    </div>
                    <!-- end right/bottom column -->
                </div>
            @endif
        </div>
        <!-- end user data -->
        <!-- end contents -->

        @if (!empty($cart->items))
            <!-- back button -->
            <div class="container d-none d-lg-block">
                @include('layout.back-button')
            </div>
            <!-- end back button -->
        @endif
    </section>

    <script>
        var ajax;
        var alertHtml;
        var parseLaravelError;
        var floatingMessage;
        var __;

        /* Variables to autofill options */
        window.isLogged = {{ Auth::check() ? 'true' : 'false' }};
        window.idSelectedMorada = null;
        window.idSelectedExpedicao = null;
        window.idSelectedPagamento = null;
        window.idSelectedPais = null;
        window.idSelectedDistrito = null;

        function openLoginBox() {
            let login = $('.loginBox');
            if (login.length) {
                login.toggle();
            }
        }

        function getDataFromInput(element) {
            var returnStr = "";
            element = $(element);

            if (element.length > 0 && element.val() != "" && typeof element.val() != "undefined") {
                returnStr = element.val();
            }

            return returnStr;
        }

        document.addEventListener("DOMContentLoaded", function() {
            // Global functions
            ajax = window._ajax;
            alertHtml = window.alertHtml;
            parseLaravelError = window.parseLaravelError;
            floatingMessage = window.floatingMessage;
            __ = window.__;

            $(window).on('load', () => {
                window.invokeFacebookPixel('InitiateCheckout');
                window.__GA3StartCheckout({!! json_encode($productsGA3) !!});

                if (window.idSelectedPais != "" && window.idSelectedMorada == "") {
                    $('.form-entrega select#pais').val(window.idSelectedPais).trigger("change");

                    if (window.idSelectedDistrito != "") {
                        setTimeout(function() {
                            $('.form-entrega select#distrito').val(window.idSelectedDistrito).trigger("change");
                        }, 150);
                    }
                }

                if (window.idSelectedMorada != "") {
                    var radios = $('input:radio[name=entrega]');
                    radios.filter('[value="' + window.idSelectedMorada + '"]').prop('checked', true).trigger("change");
                }
            });

            $('.btn-validate-finish-order').click(e => {
                let button = $('.btn-validate-finish-order');
                let btnOriginalHtml = button.html();
                var nome = $('input#nome');
                var email = $('input#email');
                var telemovel = $('input#telemovel');
                var nif = $('input#nif');
                var observacoes = $('textarea#observacoes');
                var entrega = $('input[name="entrega"]:checked');
                var expedicao = $('input[name="expedicao"]:checked');
                var pagamento = $('input[name="pagamento"]:checked');
                var morada = $('.morada-checkout input#morada');
                var codPostal = $('.morada-checkout input#codPostal');
                var localidade = $('.morada-checkout input#localidade');
                var pais = $('.morada-checkout select#pais');
                var distrito = $('.morada-checkout select#distrito');
                var cpfCnpj = $('#cpf-container #cpf_cnpj');

                if (button.prop('disabled') == false) {
                    button.prop('disabled', true);
                    button.html(`<i class="fas fa-spinner fa-2x fa-spin"></i>`);

                    // Nome
                    if (
                        nome.val() != "" &&
                        email.val() != "" &&
                        telemovel.val() != ""
                    ) {
                        // Morada
                        var procede = true;
                        if (isLogged) {
                            if (entrega.length == 0 || entrega.val() == "" || typeof entrega.val() == "undefined") {
                                procede = false;
                                floatingMessage(__('messages.SELECT_THE_DELIVERY_ADDRESS'), "danger");
                            }
                        } else {
                            if (
                                morada.val() == "" ||
                                codPostal.val() == "" ||
                                localidade.val() == "" ||
                                pais.val() == ""
                            ) {
                                procede = false;
                                floatingMessage(__('messages.FILL_THE_DELIVERY_ADDRESS'), "danger");
                            }
                        }

                        if (!procede) {
                            // Restaura o estado do botão ao detectar erro
                            button.html(btnOriginalHtml);
                            button.prop('disabled', false);
                        }

                        // Veificar Preechimento do Distrito para Canada, Brasil e USA
                        if (procede) {
                            const countryCodeISO3 = getDataFromInput(pais);
                            if (countryCodeISO3 == "CAN" || countryCodeISO3 == "BRA" /* || countryCodeISO3 == "USA" */) {
                                let distritoValue = getDataFromInput(distrito);

                                if (distritoValue == "" || typeof distritoValue == "undefined")
                                    procede = false;
                                    if (countryCodeISO3 == "CAN") {
                                        floatingMessage(__('messages.QUANDO_O_PAIS_E_CANADA_DISTRITO'), "danger");
                                    } else if (countryCodeISO3 == "BRA") {
                                        floatingMessage(__('messages.QUANDO_O_PAIS_E_BRASIL_DISTRITO'), "danger");
                                    }
                                    button.html(btnOriginalHtml);
                                    button.prop('disabled', false);

                            }
                        }

                        // Brasil CPF/CNPJ
                        if (procede) {
                            if (getDataFromInput(pais) == "BRA") {
                                let cpf = getDataFromInput(cpfCnpj);

                                if (cpf == "" || typeof cpf == "undefined") {
                                    procede = false;
                                    floatingMessage(__('messages.WHEN_BRAZIL_CPF'), "danger");
                                    button.html(btnOriginalHtml);
                                    button.prop('disabled', false);
                                }
                            }
                        }

                        // Entrega
                        if (procede) {
                            if (expedicao.length == 0 || expedicao.val() == "" || typeof expedicao.val() == "undefined") {
                                procede = false;
                                floatingMessage(__('messages.SELECT_THE_SHIPPING_METHOD'), "danger");
                                button.html(btnOriginalHtml);
                                button.prop('disabled', false);
                            }
                        }

                        // Pagamento
                        if (procede) {
                            if (pagamento.length == 0 || pagamento.val() == "" || typeof pagamento.val() == "undefined") {
                                procede = false;
                                floatingMessage(__('messages.SELECT_THE_PAYMENT_METHOD'), "danger");
                                button.html(btnOriginalHtml);
                                button.prop('disabled', false);
                            }
                        }

                        if (procede) {
                            let post = {
                                nome: getDataFromInput(nome),
                                email: getDataFromInput(email),
                                telefone: '',
                                telemovel: getDataFromInput(telemovel),
                                nif: getDataFromInput(nif),
                                observacoes: getDataFromInput(observacoes),
                                expedicao: getDataFromInput(expedicao),
                                pagamento: getDataFromInput(pagamento),
                                entrega: getDataFromInput(entrega),
                                morada: getDataFromInput(morada),
                                codPostal: getDataFromInput(codPostal),
                                localidade: getDataFromInput(localidade),
                                distrito: getDataFromInput(distrito),
                                pais: getDataFromInput(pais),
                                cpf_cnpj: getDataFromInput(cpfCnpj),
                            };

                            ajax('checkout/finish-order', post)
                                .done(function(r) {
                                    if (r.success) {
                                        window.location.href = r.url;
                                    } else {
                                        var msg = typeof r.message != "undefined" ? r.message : __('messages.ERRO_GERAL');
                                        floatingMessage(msg, "danger");

                                        button.html(btnOriginalHtml);
                                        button.prop('disabled', false);
                                        button.removeAttr('disabled');
                                    }
                                })
                                .fail((x, r, t) => {
                                    console.log(x, r, t);
                                    let messageString = parseLaravelError(x);

                                    floatingMessage(messageString, "danger");
                                    button.html(btnOriginalHtml);
                                    button.prop('disabled', false);
                                    button.removeAttr('disabled');
                                });
                        }
                    } else {
                        button.html(btnOriginalHtml);
                        button.prop('disabled', false);
                        button.removeAttr('disabled');

                        floatingMessage(__('messages.CAMPOS_OBRIGATORIOS_EM_BRANCO'), "danger");
                    }
                }
            });
        }, false);
    </script>


@endsection