@extends('layouts.app2')

@section('content')
    <div class="bgc-white p-20 bd">
        <h2>Mantenedor de UTM</h2>
        <div class="my-3 text-right">
            <a href="#" class="btn btn-primary" onclick="utmModal()"><i class="fas fa-plus"></i> Nueva UTM</a>
        </div>
        <div class="card">
            <div class="table-responsive">
                <table
                    id="table-utm"
                    class="table"
                    data-pagination="true"
                    data-url="{{ url('/pproveedores/loadUTMData') }}"
                    data-query-params="queryParams"
                    data-show-refresh="true"
                    data-show-footer="false"
                    data-sort-order="desc"
                    data-sort-name="id"
                    data-page-size="50"
                    data-checkbox-header="true"
                >
                    <thead>
                    <tr>
                        <th data-field='id'>ID</th>
                        <th data-field='mes'>Mes</th>
                        <th data-field='year'>Año</th>
                        <th data-field='valor' data-formatter="valorFormatter">Valor ($)</th>
                        <th data-field='operate' data-formatter="accFormatter" data-events="operateEvents">Acciones</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@push('post-scripts')
    <script src="{{ asset('js/autoNumeric-min.js') }}"></script>
    <script src="{{ asset('js/jquery.mask.min.js') }}"></script>
    <script src="{{ asset('js/sweetalert2.js') }}"></script>

    <style>
        .main-content {
            padding: 10px 20px 20px;
            min-height: calc(100vh - 61px);
        }
    </style>
    <script>

        $(".autonumber").autoNumeric("init")

        function addCommas(nStr)
        {
            nStr += '';
            x = nStr.split('.');
            x1 = x[0];
            x2 = x.length > 1 ? '.' + x[1] : '';
            var rgx = /(\d+)(\d{3})/;
            while (rgx.test(x1)) {
                x1 = x1.replace(rgx, '$1' + '.' + '$2');
            }
            return x1 + x2;
        }

        var tabla = $('#table-utm').bootstrapTable({
            pagination: true, search: true
        });

        $(document).ready(function() {
            loadInputMask()
        });

        function loadInputMask()
        {
            $('[data-toggle="input-mask"]').each(
                function(a,e){
                    var t=$(e).data("maskFormat"),n=$(e).data("reverse");
                    null!=n?$(e).mask(t,{reverse:n}):$(e).mask(t)
                }
            )
        }

        function valorFormatter(value)
        {
            return addCommas(value)
        }

        function accFormatter (value, row, index) {

            let botones = [];
            let editar = ""
            let borrar = "";

            editar = '<a href="javascript:void(0)" class="ml-2 editar_utm" title="Editar UTM" "><i class="fas fa-edit fa-lg"></i></a>';
            botones.push(editar);

            borrar = '<a href="javascript:void(0)" class="ml-2 borrar_utm" title="Eliminar UTM" ><i class="fas fa-trash-alt fa-lg" style="color:red;"></i></a>';
            botones.push(borrar);

        return botones.join('');

        }

        window.operateEvents = {

            'click .editar_utm': function (e, value, row, index) {
                utmModal(row)
            },
            'click .borrar_utm': function (e, value, row, index) {
                borrar_utmModal(row.id)
            },
        }

    function borrar_utmModal(id)
    {
        Swal.fire({
        title: 'Atención',
        text: "¿Desea eliminar la información de este UTM?",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Borrar'
        }).then((result) => {
            if (result.value) {

                $.ajax({
                    url: "{{ route('pproveedores.borrar_utm') }}", data: {id: id}, type: "POST", beforeSend: function () {
                        //msgLoading();
                    }, headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                }).done(function (data, textStatus, jqXHR) {

                    $("#table-utm").bootstrapTable('refresh');
                    Swal.fire({
                        title: 'Información eliminada',
                        text: "Los datos se eliminaron correctamente.",
                        icon: 'success',
                    })

                    $('.click').click();

                }).fail(function (jqXHR, textStatus, errorThrown) {
                    //console.log(jqXHR.responseText)
                });
            }
        })
    }

    function utmModal(rows = null)
    {
        let title = "";
        if(rows == null) title = "Ingresar nueva UTM"; else title = "Editar información UTM";
        let html =
        '<div id="utmModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="confirm-modal" aria-hidden="true">\
            <div class="modal-dialog modal-dialog-centered modal-lg">\
                <div class="modal-content">\
                    <div class="modal-header">\
                        <h5 class="modal-title">'+title+'</h5>\
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">\
                        <span aria-hidden="true">&times;</span>\
                    </div>\
                    <form id="form-UTM" autocomplete="off">\
                    <input type="hidden" name="id_utm" id="id_utm" value="0">\
                    <div class="modal-body">\
                        <div class="form-group row">\
                            <label for="staticmesyear" class="col-sm-4 col-form-label">Seleccionar Mes/Año</label>\
                            <div class="col-sm-5">\
                                <input type="month" class="form-control" id="mes_year" name="mes_year" max="2030-01">\
                            </div>\
                        </div>\
                        <div class="form-group row">\
                            <label for="staticmesyear" class="col-sm-4 col-form-label">Valor</label>\
                            <div class="col-sm-6">\
                                <input type="text" class="form-control" id="utm_valor" name="utm_valor" data-toggle="input-mask" data-mask-format="000.000.000.000.000" data-reverse="true">\
                            </div>\
                        </div>\
                    </div>\
                    <div class="modal-footer">\
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>\
                        <button type="submit" class="btn btn-primary" id="guardar-utm">Guardar</button>\
                    </div>\
                    </form>\
                </div>\
            </div>\
        </div>';

        $('body').append(html);
        $("#utmModal").modal({backdrop: 'static', keyboard: false});
        $("#utmModal").modal('show');

        if(rows != null)
        {
            $("#mes_year").val(rows.fecha_unformat);
            $("#utm_valor").val(rows.valor);
            $("#id_utm").val(rows.id);
        }

        loadInputMask();

        $('#utmModal').on('hidden.bs.modal', function (e) {
            $(this).remove();
        });

    }

    $(function(){
        $(document).on("submit", "form#form-UTM", function(event) {
            event.preventDefault();

            let form = $("#form-UTM").serializeArray();

            $.ajax({
                url: "{{ route('pproveedores.guardar_utm') }}", data: form, type: "POST", beforeSend: function () {
                    //msgLoading();
                }, headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            }).done(function (data, textStatus, jqXHR) {

                $("#table-utm").bootstrapTable('refresh');

                Swal.fire({
                    title: 'Nuevo valor UTM creado',
                    text: "Se guardo la información correctamente.",
                    icon: 'success',
                })

                $('.close').click();

            }).fail(function (jqXHR, textStatus, errorThrown) {
                //console.log(jqXHR.responseText)
            });

            return false;

        });
    });
    </script>
@endpush