{% extends 'dashboard/layout.html.twig' %}

{% block title %}Reportes{% endblock %}

{% block stylesheets %}
    <link href="{{ asset('../assets/styles/dashboard/select2.min.css') }}" rel="stylesheet"/>
{% endblock %}

{% block body %}

    <div id="wrapper">
        <div class="content">
            <div class="row">
                <div class="col-md-12" id="small-table">
                    <div class="panel_s">

                        <div class="panel-body">

                            <div class="row">
                                <div class="col-md-12">
                                    <h4 class="no-margin font-bold">
                                        Reportes
                                    </h4>
                                    <hr>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="report_client" class="control-label">
                                                    Cliente
                                                </label>
                                                <select id="report_client" required="required" class="form-control">
                                                    <option value="" selected>Seleccione...</option>
                                                    {% for customer in customers %}
                                                        <option value="{{ customer.userid }}">{{ customer.company }}</option>
                                                    {% endfor %}
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="panel-body mtop10">

                            <div class="table-responsive s_table">
                                <table class="table table-hover invoice-items-table items has-calculations no-mtop">
                                    <thead>
                                    <tr class="text-center">
                                        <th>Selección</th>
                                        <th>Factura</th>
                                        <th>Dirección</th>
                                        <th>Estado</th>
                                    </tr>
                                    </thead>
                                    <tbody class="ui-sortable" id="bodyTableInvoices">
                                    <tr class="hide select_invoice" id="rowExampleInvoice" style="cursor: pointer">
                                        <td class="">
                                            <input class="form-check-input select_invoice_radio input_radio_invoice"
                                                   type="radio"
                                                   name="invoice_radio"
                                                   value="">
                                        </td>
                                        <td class="invoice_code">
                                        </td>
                                        <td class="invoice_address">
                                        </td>
                                        <td class="invoice_state">
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>

                        </div>

                        <div class="panel-body mtop10">

                            <div class="table-responsive s_table">
                                <table class="table invoice-items-table items table-main-invoice-edit has-calculations no-mtop">
                                    <thead>
                                    <tr>
                                        <th>Artículo</th>
                                        <th>Cantidad Total</th>
                                        <th>Cantidad Entregada</th>
                                        <th>Cantidad Recibida</th>
                                        <th>Cantidad Cliente</th>
                                    </tr>
                                    </thead>
                                    <tbody class="ui-sortable" id="bodyTableItems">
                                    <tr class="hide" id="rowExampleItem">
                                        <td class="item_name">
                                        </td>
                                        <td class="item_total">
                                        </td>
                                        <td class="item_delivery">
                                        </td>
                                        <td class="item_receipt">
                                        </td>
                                        <td class="item_client">
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>

                        </div>

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

    <span class="d-none" id="urlFindInvoicesCustomer"
          data-route="{{ path('app_find_invoices_customer', {'id': -1}) }}"></span>


    <span class="d-none" id="routeGetItemsInvoice"
          data-route="{{ path('app_find_items_invoice') }}"></span>

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript" src="{{ asset('../assets/js/dashboard/select2.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('../assets/js/dashboard/sweetalert2.all.min.js') }}"></script>
    <script>

        let routeGetItemsInvoice = $('#routeGetItemsInvoice').data('route');

        /**
         * Event that get invoices of customer
         */
        $('#report_client').on("select2:select", function (e) {
            var val = $(this).val();

            if (val != null && val !== "") {

                let route = $('#urlFindInvoicesCustomer').data('route');
                route = route.replace("-1", val);
                $.ajax({
                    url: route,
                    data: ({}),
                    method: 'POST',
                    dataType: "json",
                    success: function (data) {
                        $('.invoice_add_table').remove();
                        $('.item_add_table').remove();

                        var invoicesTam = data.invoices.length;
                        console.log(data);
                        console.log(invoicesTam);

                        if (invoicesTam === 0) {
                            Swal.fire({
                                icon: 'info',
                                title: 'Atención',
                                text: 'El cliente no tiene facturas pendientes.',
                            });
                            return true;
                        }

                        for (var i = 0; i < invoicesTam; i++) {
                            let cloneRow = $('#rowExampleInvoice').clone();
                            cloneRow.removeAttr('id');
                            let numberInvoice = data.invoices[i].number;
                            let amountZerosString = "";
                            if (numberInvoice.length < 6) {
                                let amountZeros = 6 - numberInvoice.length;
                                for (let j = 0; j < amountZeros; j++) {
                                    amountZerosString = amountZerosString + '0';
                                }
                                numberInvoice = amountZerosString + numberInvoice;
                            }
                            let codeInvoice = data.invoices[i].prefix + numberInvoice;

                            let status = data.invoices[i].crm_ex_status;
                            let stateString = "En entrega";
                            if (parseInt(status) === 2) {
                                stateString = "Entregado";
                            }

                            cloneRow.find('.invoice_code').text(codeInvoice);
                            cloneRow.find('.invoice_state').text(stateString);
                            cloneRow.find('.invoice_address').text(data.invoices[i].address);
                            cloneRow.find('.input_radio_invoice').val(data.invoices[i].id);
                            cloneRow.removeClass('hide');
                            cloneRow.addClass('invoice_add_table');
                            $("#bodyTableInvoices").append(cloneRow);
                        }

                        /**
                         *
                         */
                        $('.select_invoice').on('click', function () {
                            $(this).css('background', '#7ed4f6');
                            $(this).find('.input_radio_invoice').attr('checked', true);
                            let idInvoice = $('input:radio[name=invoice_radio]:checked').val();
                            getItemsInvoice(routeGetItemsInvoice, idInvoice);
                        });

                        /**
                         *
                         */
                        $('.select_invoice_radio').on('click', function () {
                            $(this).parent().css('background', '#7ed4f6');
                        });

                    }
                });
            }

        });

        /**
         *
         * @param route
         * @param idInvoice
         */
        function getItemsInvoice(route, idInvoice) {
            $.ajax({
                url: route,
                data: ({idInvoice: idInvoice}),
                method: 'POST',
                dataType: "json",
                success: function (data) {
                    console.log(data);

                    var itemsTam = data.items.length;
                    $('.item_add_table').remove();

                    for (var i = 0; i < itemsTam; i++) {
                        let cloneRow = $('#rowExampleItem').clone();
                        cloneRow.removeAttr('id');

                        let crm_ex_quantity_delivered = data.items[i].crm_ex_quantity_delivered;
                        let crm_ex_quantity_received = data.items[i].crm_ex_quantity_received;

                        if (crm_ex_quantity_received == null) {
                            crm_ex_quantity_received = 0;
                        }

                        if (crm_ex_quantity_delivered == null) {
                            crm_ex_quantity_delivered = 0;
                        }

                        let quantityClient = parseInt(crm_ex_quantity_delivered) - parseInt(crm_ex_quantity_received);

                        cloneRow.find('.item_name').text(data.items[i].description);
                        cloneRow.find('.item_total').text(parseInt(data.items[i].qty));
                        cloneRow.find('.item_delivery').text(crm_ex_quantity_delivered);
                        cloneRow.find('.item_receipt').text(crm_ex_quantity_received);
                        cloneRow.find('.item_client').text(quantityClient);
                        cloneRow.removeClass('hide');
                        cloneRow.addClass('item_add_table');
                        $("#bodyTableItems").append(cloneRow);
                    }
                }
            });
        }


        $(document).ready(function () {

            var report_client = $('#report_client');

            report_client.select2({
                placeholder: "Seleccione...",
                "language": {
                    "formatSearching": function () {
                        return "Buscando...";
                    },
                    "errorLoading": function () {
                        return "El resultado no se pudo cargar";
                    },
                    "noResults": function () {
                        return "No se han encontrado resultados";
                    },
                    "searching": function () {
                        return "Buscando...";
                    }
                },
            });

        });

    </script>
{% endblock %}