@extends('layouts.store.master')
@section('meta_tags')
    <meta id="errors" content="{{ $errors }}">
    <link rel="stylesheet" href="{{ asset('vendor/toastr/toastr.min.css') }}">
    <link rel="stylesheet" href="{{ asset('/css/store/checkout.css') }}">
@endsection
@section('page','Inicio')
@section('classes_body','no-mg no-pd')
@section('body')
    @include('store.medicadepot.checkout.partials.breadcrumbs')
    <form id="information_form"  onsubmit="return validateFormShipping();">
        <div style="margin-left:25px; background: rgba(165, 165, 165, .1);">
            <label style="color:#0077C8 !important"> Carrito </label> >
            <label style="color:#0077C8 !important"> información </label> >
            <label style="color:#0077C8 !important"> Envios </label> > Pago
        </div>
        @csrf
        <div class="row mx-0">

            <div class="col-md-7 col-sm-12 pt-3">

                <section class="checkout-section-text">
                    <div id="checkout_shipping_customer_info_card" class="row py-2 mx-0">
                        <div class="row">
                            <div class="col-md-3 col-sm-12 title">Contacto</div>
                            <div class="col-md-7 col-sm-12" id="contact-text"></div>
                            <div class="col-md-2 col-sm-12"><a href="{{ url('/store') . '/checkout/information?cartId=' .$cartId }}" style="color:#0077C8 !important">Cambiar</a></div>
                        </div>
                        <div class="cart-view-product-separator border-bottom my-3" style="width: 98%; margin: 0 auto"></div>
                        <div class="row">
                            <div class="col-md-3 col-sm-12 title">Enviar a</div>
                            <div class="col-md-7 col-sm-12" id="name-text"></div>
                            <div class="col-md-2 col-sm-12"><a href="{{ url('/store') . '/checkout/information?cartId=' .$cartId }}" style="color:#0077C8 !important">Cambiar</a></div>
                        </div>
                        <div class="cart-view-product-separator border-bottom my-3" style="width: 98%; margin: 0 auto"></div>
                        <div class="row">
                            <div class="col-md-3 col-sm-12 title" >Método de envío</div>
                            <div class="col-md-9 col-sm-12" id="shipping-text"></div>
                        </div>
                    </div>
                </section>
                <section class="pt-4 checkout-section-text">
                    <div id="checkout_shipping_customer_info_card" class="row py-2 mx-0 bg-light">
                        @if(!isset($_COOKIE['tokenUser']) || $_COOKIE['tokenUser'] == '' || $_COOKIE['tokenUser'] == 'null')
                        <p class="fw-bolder checkout-section-title d-inline-block" style="font-family: Helvetica-Nueue-Bold;">* Método de pago
                            <span id="payment_method_error" class="error-span d-none">(Campo requerido)</span>
                        </p>
                        <p>Todas las transacciones son seguras y están encriptadas. No almacenamos tus datos bancarios.</p>

                        <div class="row">
                            <div class="col-sm-9">
                                <label class="mr-3 py-2">
                                    <input name="payment_method" type="radio" value="Tarjeta de crédito" > Tarjeta crédito/débito
                                </label>
                                <div class="control" id="div-form">
                                    <div class="form-group col-md-8" style="margin-top:15px;margin-bottom:15px;">
                                        <label for="inputEmail4" class="title">Número de tarjeta</label>
                                        <input type="text" class="form-control" id="num_card" maxlength="19" minlength="19">
                                    </div>
                                    <div class="form-group col-md-8" style="margin-top:15px;margin-bottom:15px;">
                                        <label for="inputEmail4" class="title">Nombre de titular</label>
                                        <input type="text" class="form-control" id="name_card">
                                    </div>
                                    <div class="row col-md-12" style="margin-top:15px;margin-bottom:15px;">
                                        <div class="col-sm-4">
                                            <label for="inputEmail4" class="title">Vencimiento MM/AAAA</label>
                                            <input id="date_input" type="text" class="form-control" placeholder="MM/AAAA" size="7"  minlength="7" maxlength="7">
                                        </div>
                                        <div class="col-sm-4">
                                            <label for="inputEmail4" class="title nip">Código de seguridad</label>
                                            <input id="cvc_div" type="text" class="form-control"placeholder="&#9679;&#9679;&#9679;" size="1" minlength="3" maxlength="3">

                                        </div>
                                    </div>
                                    <div class="row col-md-12" style="margin-top:15px;margin-bottom:15px;">
                                        <div class="col-sm-1">
                                            <i class="fa fa-lock" aria-hidden="true"></i>
                                        </div>
                                        <div class="col-sm-6">
                                            <label>Pagos seguros con tus tarjetas</label>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="float-end">
                                    <img src="{{ asset('/checkout/images/visa_logo.png') }}" alt="Visa" >
                                    <img src="{{ asset('/checkout/images/mastercard_logo.png') }}" alt="MasterCard" >
                                </div>
                            </div>
                        </div>
<!--                        <div class="cart-view-product-separator border-bottom my-3" style="width: 98%; margin: 0 auto"></div>
                        <div class="row">
                            <div class="col-sm-7">
                                <label class="mr-3 py-2">
                                    <input name="payment_method" type="radio" value="Oxxo" > Pago en efectivo
                                </label>
                            </div>
                            <div class="col-sm-5">
                                <div class="float-end">
                                    <img src="{{ asset('/checkout/images/oxxo_logo.png') }}" alt="Oxxo" class="">
                                </div>
                            </div>
                        </div>
-->
<!--
                        <div class="cart-view-product-separator border-bottom my-3" style="width: 98%; margin: 0 auto"></div>
                        <div class="row">
                            <div>
                                <label class="mr-3 py-2">
                                    <input name="payment_method" type="radio" value="Mercado pago" > Mercado pago
                                </label>
                                <img src="{{ asset('/checkout/images/mercado_pago_logo.png') }}" alt="Oxxo" class="">
                            </div>
                            <p class="ml-3 mt-1" style="font-size: 0.8em">
                                Luego de hacer click en "Finalizar mi compra" serás redirigido a Mercado Pago para completar tu compra de forma segura.
                            </p>
                        </div>
-->
                        @else
                        <div class="container">
                            <div class="row">
                                <div class="col-6">

                                    <p class="fw-bolder checkout-section-title d-inline-block">* Método de pago
                                        <span id="payment_method_error" class="error-span d-none">(Campo requerido)</span>
                                    </p>
                                </div>
                                <div class="col-6" style="text-align: end;">
                                    <a href="#" onclick="changeCard();" style="color:#0077C8 !important">Cambiar</a>
                                </div>
                            </div>
                        </div>
                        <p>Todas las transacciones son seguras y están encriptadas. No almacenamos tus datos bancarios.</p>

                            <div class="row">

                                <p class="mr-3 py-2">
                                    <input name="payment_method" type="radio" value="Tarjeta de crédito" > Tarjeta crédito/débito
                                </p>


                                <div class="col-sm-12">

                                    <div class="control" id="div-form">
                                        <div id="div-normal">
                                            <div class="form-group col-md-8" style="margin-top:15px;margin-bottom:15px;">
                                                <label for="inputEmail4" class="title">Número de tarjeta</label>
                                                <input type="text" class="form-control placeholder" id="num_card" maxlength="19" minlength="19">
                                            </div>
                                            <div class="form-group col-md-8" style="margin-top:15px;margin-bottom:15px;">
                                                <label for="inputEmail4" class="title">Nombre de titular</label>
                                                <input type="text" class="form-control" id="name_card">
                                            </div>
                                            <div class="row col-md-12" style="margin-top:15px;margin-bottom:15px;">
                                                <div class="col-sm-4">
                                                    <label for="inputEmail4" class="title">Vencimiento MM/AAAA</label>
                                                    <input id="date_input" type="text" class="form-control" placeholder="MM/AAAA" size="7"  minlength="7" maxlength="7">
                                                </div>
                                                <div class="col-sm-4">
                                                    <label for="inputEmail4" class="title nip">Código de seguridad</label>
                                                    <input id="cvc_div_2" type="text" class="form-control"placeholder="&#9679;&#9679;&#9679;" size="1" minlength="3" maxlength="3">

                                                </div>
                                            </div>
                                            <div class="row col-md-12" style="margin-top:15px;margin-bottom:15px;">
                                                <div class="col-sm-1">
                                                    <i class="fa fa-lock" aria-hidden="true"></i>
                                                </div>
                                                <div class="col-sm-6">
                                                    <label>Pagos seguros con tus tarjetas</label>
                                                </div>
                                            </div>

                                        </div>
                                        <div id="div-session">

                                            <div class="col-sm-9">
                                                    <div class="row col-md-12">
                                                        <div class="form-group col-md-7">

                                                            <select id="num_card_login"  class="form-control form-control-sm mt-3">
                                                                <option disabled selected>Selecciona una opción</option>
                                                            </select>
                                                        </div>
                                                        <div class="col-sm-3">
                                                            <label for="inputEmail4">Código de seguridad</label>
                                                            <input id="cvc_div" type="text" class="form-control"placeholder="&#9679;&#9679;&#9679;" size="1" minlength="3" maxlength="3">

                                                        </div>
                                                    </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>







                                <div class="col-sm-12">
                                    <div class="float-end">
                                        <img src="{{ asset('/checkout/images/visa_logo.png') }}" alt="Visa" >
                                        <img src="{{ asset('/checkout/images/mastercard_logo.png') }}" alt="MasterCard" >
                                    </div>
                                </div>
                            </div>
<!--
                            <div class="cart-view-product-separator border-bottom my-3" style="width: 98%; margin: 0 auto"></div>
                            <div class="row">
                                <div class="col-sm-7">
                                    <p class="mr-3 mb-0 py-2">
                                        <input name="payment_method" type="radio" value="Oxxo" > Pago en efectivo
                                    </p>
                                </div>
                                <div class="col-sm-5">
                                    <div class="float-end">
                                        <img src="{{ asset('/checkout/images/oxxo_logo.png') }}" alt="Oxxo" class="">
                                    </div>
                                </div>
                            </div>
-->
<!--
                                <div class="cart-view-product-separator border-bottom my-3" style="width: 98%; margin: 0 auto"></div>
                            <div class="row">
                                <div class="col-sm-7">
                                    <p class="mr-3 mb-0 py-2">
                                        <input name="payment_method" type="radio" value="Mercado pago" > Mercado pago
                                    </p>
                                </div>

                                <div class="col-sm-5">
                                    <div class="float-end">
                                        <img src="{{ asset('/checkout/images/mercado_pago_logo.png') }}" alt="Mercado_pago" class="">
                                    </div>
                                </div>

                                <p class="ml-3 mt-1" style="font-size: 0.8em">
                                    Luego de hacer click en "Finalizar mi compra" serás redirigido a Mercado Pago para completar tu compra de forma segura.
                                </p>
                            </div>
-->
                        @endif
                    </div>
                </section>
                <section class="pt-4 checkout-section-text" id="needBilling">
                    <label class="mr-3 mb-2 d-block py-2 fw-bolder checkout-section-title" style="font-family: Helvetica-Nueue-Bold;">
                        ¿Necesitas factura? <input id="billing_checkbox" name="billing_required" type="checkbox" value="1" class="ml-2">
                    </label>
                    <div id="billing_inputs_container" class="row d-none">
                        <div class="col-md-6 col-sm-12">
                            <div class="form-group">
                                <label for="payment_billing_rfc">* RFC</label>
                                <input id="payment_billing_rfc" name="billing[rfc]" type="text" class="form-control form-control-sm"
                                maxlength="13" value="">
                                <span id="billing_rfc_error" class="error-span d-none">Campo requerido</span>
                            </div>
                        </div>
                        <div class="mt-3">
                            <p class="fw-bolder checkout-section-title">* Dirección de la facturación</p>
                            <label class="mr-3 d-block" id="same_shipment_address">
                                <input name="billing[address_option]" type="radio" value="1">
                                La misma dirección de envío
                            </label>
                            <label class="mr-3 d-block py-2">
                                <input name="billing[address_option]" type="radio" value="2">
                                Usar una dirección de facturación diferente
                            </label>
                            <span id="billing_address_option_error" class="error-span d-none">Campo requerido</span>

                            <div class="control" id="div-form-address">
                                @include('store.medicadepot.checkout.payment.partials.new_shipping_form')
                            </div>
                        </div>
                    </div>
                </section>
                <div>
                    <button type="submit" id="finalizar_mi_compra" class="btn btn-sm btn-primary float-end px-4 mt-4" style="background:#0077C8 !important;">Finalizar mi compra</button>
                    <a href="#" id="procesando_compra" class="btn btn-sm btn-primary float-end px-4 mt-4 disabled" disabled style="background:#0077C8 !important; display: none;">Procesando compra...</a>
                </div>
            </div>
            <div class="col-md-5 col-sm-12 pt-3 px-0">
                @include('store.medicadepot.checkout.partials.shopping_cart')
            </div>
        </div>
    </form>
    <h5 class="section-title">También te podría interesar</h5>
<!--
    //======================================================================
    //  Undeveloped section
    //======================================================================

    /*
    * The following commented lines do not delete please
    * It has not been fully developed, so it will not yet be presented in production.
    */
-->
    {{--@include('layouts.store.related_products')--}}
    @include('layouts.store.newsletter')
    <h5 class="section-title">Conoce nuestras marcas</h5>
    @include('layouts.store.brand_carousel')
@endsection
@push('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script src="{{ asset('vendor/select2/js/select2.full.min.js') }}"></script>
    <script src="{{ asset('vendor/toastr/toastr.min.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>
    <script>

        /**
        * Gets the value to know whether or not to show the biller
        *
        * @author Emmanuel Bautista <emmanuel.bautista@nuvem.mx>
        * @created 10/03/2022
        * @param
        * @return void
        */
        $(document).ready(function () {
            let apiBaseUrl = $('meta[name=api-base-url]').attr('content');
            let enterprisingId = $('meta[name=enterprising-id]').attr('content');

            if (enterprisingId) {
                axios.get(`${apiBaseUrl}is-biller-activated/${enterprisingId}`)
                .then(response => {
                    if(response.data == "null" || response.data == null || response.data != 1){
                        //$('#needBilling').remove();
                    }
                }).catch( error => {
                    console.error(error);
                });
            }
        });

        /**
         * Billing checkbox change event
         *
         * @author Giovanny González <giovanny.gonzalez@nuvem.mx>
         * created 05/04/2021
         * @params
         * @return void
         *
         */
        document.getElementById('billing_checkbox').addEventListener('change', function(event) {
            toggleBillingFieldsDisplay();
        });

        /**
         * Determines if billing fields should be shown or not
         *
         * @author Giovanny González <giovanny.gonzalez@nuvem.mx>
         * created 05/04/2021
         * @params
         * @return void
         *
         */
        function toggleBillingFieldsDisplay() {
            checked = document.getElementById('billing_checkbox').checked;
            let $billingInputsContainer = document.getElementById('billing_inputs_container');
            if(checked) $billingInputsContainer.classList.remove('d-none');
            else $billingInputsContainer.classList.add('d-none');
        }

        const errorFields = {
            'payment_method': 'payment_method_error',
            'billing.rfc': 'billing_rfc_error',
            'billing.address_option': 'billing_address_option_error'
        };
        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById('checkout_breadcrumb_information')
                    .querySelector('span:first-child').classList.add('completed-checkout-step');
            document.getElementById('checkout_breadcrumb_shipping')
                    .querySelector('span:first-child').classList.add('completed-checkout-step');
            document.getElementById('checkout_breadcrumb_payment')
                    .querySelector('span:first-child').classList.add('active-checkout-breadcrumb');

            toggleBillingFieldsDisplay();

            let errors = JSON.parse(document.getElementById('errors').content);
            let errorsKeys = Object.keys(errors);
            console.error(errorsKeys);
            errorsKeys.forEach((key) => {
                document.getElementById(errorFields[key]).classList.remove('d-none');
            });
        });

        /**
         * show div
         *
         * @author Luis Peña <luis.pena@nuvem.mx>
         * created 05/04/2021
         *
         */
        $(document).ready(function() {
            $('#date_input').mask("99/2099");
            $('#num_card').mask("#### #### #### ####");
            $("#div-form").hide();
            $("#div-form-address").hide();

            /**
             * show div
             *
             * @author Luis Peña <luis.pena@nuvem.mx>
             * created 05/04/2021
             *
             */
            $("input[name$='payment_method']").click(function() {
                var test = $(this).val();
                if (test == 'Tarjeta de crédito') {
                    $("#div-form").show();
                    flagCard = 0;
                    changeCard();
                }else{
                    $("#div-form").hide();
                }
            });

            /**
             * show div new address
             *
             * @author Luis Peña <luis.pena@nuvem.mx>
             * created 01/05/2021
             *
             */
            $("input[name$='billing[address_option]']").click(function() {
                var test = $(this).val();
                if (test == 2) {
                    $("#div-form-address").show();
                }else{
                    $("#div-form-address").hide();
                }
            });




        });

        var postalCodeTimeout;
        var $postalCodeSelect2;

        document.addEventListener('DOMContentLoaded', function() {
        $postalCodeSelect2 = $('#shipping_suburb').select2({
            placeholder: "Seleccionar...",
            disabled: true
        });
        })

        /**
         * Setting everythig up on dom content loaded
         *
         * @author luis peña <luis.pena@nuvem.mx>
         * @created 29/04/2022
         * @params
         * @return void
         *
         */
        document.addEventListener('DOMContentLoaded', function() {
            let $deliveryType = document.querySelector('input[name=delivery_type]:checked');
            if($deliveryType && $deliveryType.value === 's') showShippingForm();
            else if($deliveryType && $deliveryType.value === 'p') showPickupForm();
        });


        /**
         * postal Code debounced event handler
         *
         * @author luis peña <luis.pena@nuvem.mx>
         * @created 29/04/2022
         * @params
         * @return void
         *
         */
        var postalCodeEventHandler = function(event) {

            if(event.key !== 'Backspace' && isNaN(Number(event.key))) event.preventDefault();

            clearTimeout(postalCodeTimeout);
            postalCodeTimeout = setTimeout(function() {
                getPostalCodeInformation(event.target.value);
            }, 500);
        }

        /**
         * gets suburs, state and city from postal code
         *
         * @author luis peña <luis.pena@nuvem.mx>
         * @created 29/04/2022
         * @params number postalCode
         * @return void
         *
         */
        function getPostalCodeInformation(postalCode)
        {
        $postalCodeSelect2.empty();
        $postalCodeSelect2.prop('disabled', true);
        document.getElementById('shipping_city').value = '';
        document.getElementById('shipping_state').value = '';

        let req = new XMLHttpRequest();
        req.responseType = 'json';
        req.open('GET', `/api/v1/sepomex/postal-code-information/${postalCode}`);
        req.onload = function() {
            fillLocationFields(req.response.data);
            $postalCodeSelect2.prop('disabled', false);
        }
        req.send();
        }

        /**
         * fills location fields on shipping form
         *
         * @author luis peña <luis.pena@nuvem.mx>
         * @created 29/04/2022
         * @params array data
         * @return void
         *
         */
        function fillLocationFields(data)
        {
        let $shippingSuburbSelect = document.getElementById('shipping_suburb');
        $shippingSuburbSelect.innerText = '';
        $shippingSuburbSelect.append(document.createElement('option'));
        data.forEach((entry) => {
            let $opt = document.createElement('option');
            $opt.dataset.municipality = entry.D_mnpio;
            $opt.dataset.state = entry.d_estado;
            $opt.value = $opt.innerText = entry.d_asenta;
            $shippingSuburbSelect.append($opt);
        })
        }

        /**
         * Postal code only numbers
         *
         * @author luis peña <luis.pena@nuvem.mx>
         * @created 29/04/2022
         * @params
         * @return void
         *
         */
        document.getElementById('shipping_post_code').addEventListener('keydown', postalCodeEventHandler);


        /**
         * Selected suburb event handler
         *
         * @author luis peña <luis.pena@nuvem.mx>
         * @created 29/04/2022
         * @params
         * @return void
         *
         */
        $('#shipping_suburb').on('change', function() {
        let selectedSuburb = $(this).find(':selected')[0].dataset;
        document.getElementById('shipping_city').value = selectedSuburb.municipality;
        document.getElementById('shipping_state').value = selectedSuburb.state;
        });

        /**
         * Phone only numbers and dashes
         *
         * @author luis peña <luis.pena@nuvem.mx>
         * @created 29/04/2022
         * @params
         * @return void
         *
         */
        document.getElementById('shipping_phone').addEventListener('keydown', function(event) {
            if(event.key === 'Backspace') return;
            if((isNaN(Number(event.key)) && event.key != '-')) event.preventDefault();
        });

    </script>
    @include('store.medicadepot.checkout.scripts.paymentjs')
    @include('layouts.store.scripts.menu-footer')
@endpush