@extends('layouts.store.master')
@section('page','Facturación')
@section('classes_body','no-mg no-pd')
@section('body')

<section style="margin-top: 180px;">
    <div class="breadcrums wow animate__animated animate__fadeInUp">
        Inicio / Facturación
    </div>
    <div class="container-fluid p-5 wow animate__animated animate__fadeInUp">
        <form id="billing_form" onsubmit="validateBill(event)">
            @csrf
            <div class="row" style="text-align: -webkit-center">
                <div class="col-sm-12">
                    <h4><strong>Ingresa los siguientes datos para generar tu factura</strong></h4>
                    <div class="control" id="div-form">
                        <div class="form-group col-md-8" style="margin-top:15px;margin-bottom:15px;">
                            <label for="label-tax-residence" class="title">Indica en qué plataforma compraste</label>
                            <select class="form-control" name="stores" id="stores" required>
                              <option value="" disabled selected hidden>Elige una opción</option>
                            </select>
                        </div>
                        <div class="form-group col-md-8" style="margin-top:15px;margin-bottom:15px;">
                            <label for="label-order-id" class="title">Número de orden de compra</label>
                            <input type="number" class="form-control" id="order_id" required>
                            <span id="payment_method_error" class="error-span d-none">(Campo requerido)</span>
                        </div>
                        <div class="form-group col-md-8" style="margin-top:15px;margin-bottom:15px;">
                            <label for="label-email" class="title">Correo electrónico</label>
                            <input type="text" class="form-control" id="email" required>
                        </div>
                        <div class="form-group col-md-8" style="margin-top:15px;margin-bottom:15px;">
                            <label for="label-name" class="title">Nombre</label>
                            <input type="text" class="form-control" id="name" required>
                        </div>
                        <div class="form-group col-md-8" style="margin-top:15px;margin-bottom:15px;">
                            <label for="label-rfc" class="title">RFC</label>
                            <input type="text" class="form-control" id="rfc" required min="12">
                        </div>
                        <div class="form-group col-md-8" style="margin-top:15px;margin-bottom:15px;">
                            <label for="label-tax-residence" class="title">Domicilio fiscal</label>
                            <input type="number" class="form-control" id="tax-residence" required>
                        </div>
                        <div class="form-group col-md-8" style="margin-top:15px;margin-bottom:15px;">
                            <label for="label-tax-residence" class="title">Régimel fiscal</label>
                            <select class="form-control" name="tax-regimes" id="tax-regimes" required>
                                <option value="" disabled selected hidden>Elige una opción</option>
                            </select>
                        </div>
                        <div class="form-group col-md-8" style="margin-top:15px;margin-bottom:15px;">
                            <label for="label-tax-residence" class="title">Concepto de la factura</label>
                            <select class="form-control" name="invoice-concept" id="invoice-concept" required>
                              <option value="" disabled selected hidden>Elige una opción</option>
                            </select>
                        </div>
                    </div>
                    <div class="pt-3">
                        <button class="btn btn-primary" id="submit-button" style="background:#0077C8 !important;">Generar factura</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</section>
    @push('scripts')
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" 
            integrity="sha512-+NqPlbbtM1QqiK8ZAo4Yrj2c4lNQoGv8P79DPtKzj++l5jnN39rHA/xsqn8zE9l0uSoxaCdrOgFs6yjyfbBxSg==" 
            crossorigin="anonymous" 
            referrerpolicy="no-referrer"></script>
        <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
        @include('layouts.store.scripts.menu-footer');
        <script type="text/javascript" src="{{asset('/js/slick.min.js')}}"></script>
        <script src="https://wowjs.uk/dist/wow.min.js"></script>
        <script>
            new WOW().init();

            let addressData = {};
            let orderId = null;

            /**
            * Gets cfdis availabes
            * @author José Vega <jose.vega@nuvem.mx>
            * @created 05/12/2022
            * @param
            * @return void
            */
            $(document).ready(function(){
               axios.get('{{config('store.api_medshipper_url')}}biller/get-cfdis').then(function (response) {
                       $.each(response.data, function(key, value){
                         $("#invoice-concept").append('<option value=' + value.id + '>' + value.description + '</option>');
                       });
                   }).catch(function (error) {
                       console.error(error);
                       let message = error;
                   });
            });

            /**
            * Gets taxes regimes availabes
            * @author José Vega <jose.vega@nuvem.mx>
            * @created 05/12/2022
            * @param
            * @return void
            */
            $(document).ready(function(){
               axios.get('{{config('store.api_medshipper_url')}}get-taxes-regimes').then(function (response) {
                       $.each(response.data, function(key, value){
                         $("#tax-regimes").append('<option value=' + value.key + '>' + value.description + '</option>');
                       });
                   }).catch(function (error) {
                       console.error(error);
                       let message = error;
                   });
            });

            /**
            * Gets the entrepreneur's available stores
            * @author José Vega <jose.vega@nuvem.mx>
            * @created 05/12/2022
            * @param
            * @return void
            */
            $(document).ready(function(){
               axios.get('{{config('store.api_medshipper_url')}}stores/' + `${enterprisingId}`).then(function (response) {
                       $.each(response.data, function(key, value){
                         $("#stores").append('<option value=' + value.value + '>' + value.text + '</option>');
                       });
                   }).catch(function (error) {
                       console.error(error);
                       let message = error;
                   });
            });

            /**
            * Check if it is possible to generate the order invoice
            * @author José Vega <jose.vega@nuvem.mx>
            * @created 05/12/2022
            * @param event
            * @return void
            */
            function validateBill(event){
                event.preventDefault();
                $('#submit-button').prop("disabled", true);
                $('#submit-button').html(
                  `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Generando factura`
                );

                $.ajax({
                    type: "POST",
                    headers:{'X-CSRF-TOKEN':'{{ csrf_token() }}'},
                    url: '{{ config("store.api_medshipper_url") . "biller"}}',
                    data: {
                        email: $('#email').val(),
                        order: $('#order_id').val(),
                        store: $('#stores').val()
                    },
                    success: function (response) {
                        addressData = response.addressData;
                        orderId = response.orderId;
                        generateBill();                 
                    },
                    error: function(err) {
                        console.error(err);
                        if(err.responseJSON && err.responseJSON.error) swal ("Error" , err.responseJSON.error , "error");
                        else swal ("Error" , 'Ocurrió un error, intente más tarde' , "error");
                        document.getElementById('billing_form').reset(); 
                        $('#submit-button span').remove(); 
                        $('#submit-button').prop("disabled", false);
                    },
                });
            }

            /**
            * Call the api to generate the bill
            * @author José Vega <jose.vega@nuvem.mx>
            * @created 05/12/2022
            * @param
            * @return void
            */
            function generateBill(){             
                let emails = [];
                emails.push($('#email').val());

                let address = {}
                address.streetNumber = addressData.street + ' #' + addressData.outdoor_number;
                address.colony = addressData.colony;
                address.city = addressData.city;
                address.state = addressData.state;
                address.country = 'México';
                address.phone = addressData.phone;

                let data = {
                    rfc: $('#rfc').val(),
                    cp: addressData.postal_code,
                    orderId: orderId,
                    emails: emails,
                    cfdiId: $('#invoice-concept').val(),
                    address: address,
                    receiverName: $('#name').val(),
                    regime: $('#tax-regimes').val(),
                    taxAddress: $('#tax-residence').val(),
                }

                $.ajax({
                    type: "POST",
                    headers:{'X-CSRF-TOKEN':'{{ csrf_token() }}'},
                    url: '{{ config("store.api_medshipper_url") . "biller/generate-bill"}}',
                    data: data,
                    success: function (response) {
                        swal({
                            title: "Factura generada",
                            text: "¡Factura generada correctamente! En unos momentos recibirás un correo electrónico con tu factura.",
                            icon: "success",
                            button: "Ok",
                        });  
                        document.getElementById('billing_form').reset(); 
                        $('#submit-button span').remove(); 
                        $('#submit-button').prop("disabled", false);              
                    },
                    error: function(err) {
                        console.error(err);
                        swal ("Error" , 'Ocurrió un error, intente más tarde' , "error");
                        document.getElementById('billing_form').reset(); 
                        $('#submit-button span').remove(); 
                        $('#submit-button').prop("disabled", false);   
                    },
                });
            }
        </script>
    @endpush
@endsection