@extends('layouts.app2')

@section('content')
    <div class="bgc-white p-20 bd">
        <h2>Mantenedor de OC</h2>
        <div class="my-3 text-right">
            <a href="#" class="btn btn-primary" onclick="OcModal()">Nueva OC</a>
        </div>
        <div class="card">
            <div class="table-responsive">
                <table
                    id="OC"
                    class="table"
                    style="border-collapse: collapse; border-spacing: 0; width: 100%;white-space: nowrap !important;"
                    data-pagination="true"
                    data-url="{{ url('/pproveedores/loadOC') }}"
                    data-query-params="queryParams"
                    data-show-refresh="true"
                    data-show-footer="true"
                    data-sort-order="asc"
                    data-sort-name="rbd"
                    data-page-size="50"
                    data-checkbox-header="true"
                >
                    <thead>
                    <tr>
                        <th data-field='id'>ID OC</th>
                        <th data-field='numero_oc'>Nº OC</th>
                        <th data-field='ngirador'>Girador</th>
                        <th data-field='nombre_oc'>Nombre OC</th>
                        <th data-field='nombre_proveedores'>Nombre o Razón Social</th>
                        <th data-field='fecha_emision'>Fecha Emisión</th>
                        <th data-field='nombre_moneda'>Moneda</th>
                        <th data-field='monto' data-formatter="montoFormatter">Monto</th>
                        <th data-field='monto_interno' data-formatter="montoInternoFormatter">Monto OC Interna</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')

    <link href="{{ asset('css/vendor/select2.min.css') }}" rel="stylesheet" />
    <script src="{{ asset('js/vendor/select2.min.js') }}"></script>
    <script src="{{ asset('js/sweetalert2.js') }}"></script>
    <script src="{{ asset('js/jquery.mask.min.js') }}"></script>
    <script src="{{ asset('js/autoNumeric-min.js') }}"></script>
    <script src="{{ asset('js/jquery-validation/jquery.validate.min.js') }}"></script>
    <script src="{{ asset('js/jquery-validation/localization/messages_es.min.js') }}"></script>
    <script src="{{ asset('js/funciones.js') }}"></script>
    <style>
        .main-content {
            padding: 10px 20px 20px;
            min-height: calc(100vh - 61px);
        }
        .bootstrap-table .fixed-table-container .table th, .bootstrap-table .fixed-table-container .table td {
             font-size: 13px;
         }
        .select2-results__options {
            height: 300px;
            overflow-y: auto;
        }
        .select2-container {
            width: 100% !important;
        }
    </style>
    <script>
        $(document).ready(function(){

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

        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;
        }

        function formatNumber(num){
            return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.')
        }

        function montoInternoFormatter(value)
        {
            return formatNumber(value)
        }

        function montoFormatter(value)
        {
            return (value.length > 0) ? 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 OC" "><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 OC" ><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) {
                OcModal(row)
            },
            'click .borrar_utm': function (e, value, row, index) {
                borrar_ocModal(row.id)
            },
        }

        function OcModal(rows = null)
        {
            let title = "";
            if(rows == null) title = "Ingresar nuevo OC"; else title = "Editar información OC";
            let html =
            '<div id="ocModal" 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-oc" autocomplete="off">\
                        <input type="hidden" name="id_oc" id="id_oc" value="0">\
                        <div class="modal-body">\
                            <div class="form-group row">\
                                <label for="staticmesyear" class="col-sm-4 col-form-label">Proveedor</label>\
                                <div class="col-sm-6">\
                                    <select class="form-control" id="proveedor_oc" name="proveedor_oc" required><option value="">Seleccionar</option>\
                                        @foreach($proveedores as $v)\
                                            <option value="{{$v->id}}">{{$v->rut_proveedores." ".$v->nombre_proveedores}}</option>\
                                        @endforeach\
                                    </select>\
                                </div>\
                            </div>\
                            <div class="form-group row" style="display:none;">\
                                <label for="staticmesyear" class="col-sm-4 col-form-label">Fecha Aceptación</label>\
                                <div class="col-sm-5">\
                                    <input type="date" class="form-control" id="fecha_aceptacion_oc" name="fecha_aceptacion_oc" value="">\
                                </div>\
                            </div>\
                            <div class="form-group row">\
                                <label for="staticmesyear" class="col-sm-4 col-form-label">Nº OC</label>\
                                <div class="col-sm-6">\
                                    <input type="text" class="form-control" id="n_oc" name="n_oc" max-length="100" required>\
                                </div>\
                            </div>\
                            <div class="form-group row">\
                                <label for="staticmesyear" class="col-sm-4 col-form-label">Girador</label>\
                                <div class="col-sm-6">\
                                    <select class="form-control" id="girador_oc" name="girador_oc" required><option value="">Seleccionar</option>\
                                        @foreach($giradores as $v)\
                                            <option value="{{$v->user_id}}">{{$v->name}} {{$v->last_name}}</option>\
                                        @endforeach\
                                    </select>\
                                </div>\
                            </div>\
                            <div class="form-group row">\
                                <label for="staticmesyear" class="col-sm-4 col-form-label">Nombre Oc</label>\
                                <div class="col-sm-6">\
                                    <input type="text" class="form-control" id="nombre_oc" name="nombre_oc" max-length="150" required>\
                                </div>\
                            </div>\
                            <div class="form-group row">\
                                <label for="staticmesyear" class="col-sm-4 col-form-label">Fecha Emisión</label>\
                                <div class="col-sm-5">\
                                    <input type="date" class="form-control" id="fecha_emision_oc" name="fecha_emision_oc" required>\
                                </div>\
                            </div>\
                            <div class="form-group row">\
                                <label for="staticmesyear" class="col-sm-4 col-form-label">Moneda</label>\
                                <div class="col-sm-5">\
                                    <select class="form-control" id="moneda_oc" name="moneda_oc" required><option value="">Seleccionar</option>\
                                        @foreach($monedas as $v)\
                                            <option value="{{$v->id}}">{{$v->nombre_moneda}}</option>\
                                        @endforeach\
                                    </select>\
                                </div>\
                            </div>\
                            <div class="form-group row">\
                                <label for="staticmesyear" class="col-sm-4 col-form-label">Monto</label>\
                                <div class="col-sm-6">\
                                    <input type="text" class="form-control autonumber" id="monto_oc" name="monto_oc" data-a-sep="." data-a-dec="," data-v-min="0.00" data-v-max="999999999999999999" data-reverse="true" maxlength="19" required>\
                                </div>\
                            </div>\
                            <div class="form-group row">\
                                <label for="staticmesyear" class="col-sm-4 col-form-label">Monto OC Interna</label>\
                                <div class="col-sm-6">\
                                    <input type="text" class="form-control autonumber" data-a-sign="$ " data-a-sep="." data-a-dec="," data-v-min="0" data-v-max="999999999999999999" id="monto_interno_oc" name="monto_interno_oc" required>\
                                </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-oc">Guardar</button>\
                        </div>\
                        </form>\
                    </div>\
                </div>\
            </div>';

            $('body').append(html);
            $("#ocModal").modal({backdrop: 'static', keyboard: false});
            $("#ocModal").modal('show');
            let prov = $('#proveedor_oc');
            prov.select2({
                dropdownParent: $('.modal'),
                theme: "bootstrap",
                placeholder: "Seleccione un Proveedor",
                language: {
                    noResults: function () {
                        return "No Encontrado";
                    }
                }
            });

            if(rows != null)
            {
                $("#fecha_aceptacion_oc").val(rows.fecha_aceptacion_modal);
                $("#fecha_emision_oc").val(rows.fecha_emision_modal);
                //$("#monto_oc").val(rows.monto);
                $("#monto_oc").autoNumeric("init")
                $("#monto_oc").autoNumeric('set', rows.monto);
                $("#monto_interno_oc").autoNumeric("init")
                $("#monto_interno_oc").autoNumeric('set', rows.monto_interno);
                //$("#nombre_razon_social_oc").val(rows.nombre_proveedores);
                $("#id_oc").val(rows.id);
                $("#n_oc").val(rows.numero_oc);
                $("#nombre_oc").val(rows.nombre_oc);

                $('#girador_oc option[value="'+rows.ngirador+'"]').attr('selected','selected');
                $('#moneda_oc option[value="'+rows.moneda_id+'"]').attr('selected','selected');
                $('#girador_oc option[value="'+rows.id_girador+'"]').attr('selected','selected');
                $("#proveedor_oc").val(rows.id_proveedor);
                $("#proveedor_oc").trigger('change');
            }
            else{
                $(".autonumber").autoNumeric('init');
            }

            $('[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)
                }
            )

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

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

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

                        $("#OC").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(){

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

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

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

                    $("#OC").bootstrapTable('refresh');

                    Swal.fire({
                        title: data.titulo,
                       // text: "Se guardo la información correctamente.",
                        icon: 'success',
                    })

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

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

                return false;

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