@extends('layouts.app', ['activePage' => 'clientes', 'titlePage' => __('Catalogos/Clientes')])

@section('content')


<div class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4">
                                <h4 class="card-title">Proveedores</h4>
                                <!--<p class="card-category"> Here is a subtitle for this table</p>-->
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 mt-3 text-right">
                                <button type="button" class="btn btn-primary" id="addProveedor">
                                    Nuevo proveedor
                                </button>
                            </div>
                        </div>
                        <div class="row ">
                            <table class="table table-bordered table-hover" width="100%" id="gridProveedores">
                                <thead>
                                    <!-- <th class="text-capitalize  text-white text-xxs font-weight-bolder opacity-7">
                                        </th> -->
                                    <th class="text-white text-xxs font-weight-bolder opacity-7">ID</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Nombre</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">RFC</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Moneda</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Identificacion Fiscal</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Correo</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Tasa IVA</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Acciones</th>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="modalDetalles" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title font-weight-normal" id="titleModalDetalles">Contactos cliente</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <div class="modal-body">
                <table class="table table-bordered table-hover mt-3" id="gridDetalles">
                    <thead>
                        <th class="text-white  text-xxs font-weight-bolder opacity-7">Nombre</th>
                        <th class="text-white  text-xxs font-weight-bolder opacity-7">Correo</th>
                        <th class="text-white  text-xxs font-weight-bolder opacity-7">Teléfono principal</th>
                        <th class="text-white  text-xxs font-weight-bolder opacity-7">Teléfono alterno</th>
                    </thead>
                    <tbody id="listContactosDetalles">

                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="modalProveedores" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title font-weight-normal" id="titleModal">Agregar proveedor</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <form id="form-save-proveedor" method="post">
                <input type="hidden" id="idProveedor" name="idProveedor">
                <div class="modal-body">
                    <div class="input-group input-group-static ">
                        <label for="">Nombre: <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="Nombre" name="Nombre" required>
                    </div>

                    <div class="input-group input-group-static">
                        <label for="">RFC: </label>
                        <input type="text" class="form-control RFC_IND" id="RFC" name="RFC" required>
                    </div>
                    <div class="input-group input-group-static">
                        <label for="">Moneda: <span class="text-danger">*</span></label>
                        <select class="form-control " id="Moneda" name="Moneda" style="width: 100%" required>
                            <option value="">-[Seleccione una opción]-</option>
                            @foreach ($data['monedas'] as $co)
                            <option value="{{$co->Id}}">{{$co->Descripcion}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="input-group input-group-static ">
                        <label for="">Identificación fiscal: </label>
                        <input type="text" class="form-control RFC_IND" id="IdentificacionFiscal" name="IdentificacionFiscal" required>
                    </div>
                    <div class="input-group input-group-static">
                        <label for="">Correo: <span class="text-danger">*</span></label>
                        <input type="email" class="form-control" id="Email" name="Email" required>
                    </div>

                    <div class="input-group input-group-static">
                        <label for="">Tasa IVA: <span class="text-danger">*</span></label>
                        <select class="form-control " id="TasaIVA" name="TasaIVA" style="width: 100%" required>
                            <option value="">-[Seleccione una opción]-</option>
                            @foreach ($data['tasaiva'] as $co)
                            <option value="{{$co->TasaIVA}}">{{$co->TasaIVA}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                    <button type="submit" class="btn btn-primary">Guardar</button>
                </div>
            </form>
        </div>
    </div>
</div>


<script>
    $(document).ready(function() {
        $('.dropify').dropify();

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });


        loadGrid();
    });




    function loadGrid() {
        //$('#').DataTable();
        $('#gridProveedores').dataTable().fnDestroy();
        $('#gridProveedores td').css('white-space', 'initial');
        var table = $('#gridProveedores').DataTable({
            lengthMenu: [10, 15, 20, 50, 100],
            dom: 'Bfrtip',
            processing: true,
            responsive: true,
            scrollX: true,
            scrollY: '50vh',
            scrollCollapse: true,
            ajax: {
                url: "{{url('catalogos/proveedores/get_proveedores')}}",
                type: "POST",
            },
            columns: [

                {
                    data: "Id"
                },
                {
                    data: "Nombre"
                },
                {
                    data: "RFC"
                },
                {
                    data: "moneda.Descripcion"
                },
                {
                    data: "IdentificacionFiscal"
                },
                {
                    data: "Email"
                },
                {
                    data: "TasaIVA"
                },
                {
                    data: "acciones"
                },

            ],

            order: [
                [0, "desc"]
            ],
            buttons: [{
                    extend: 'copyHtml5',
                    text: '<i class="fa fa-files-o"></i>',
                    titleAttr: 'Copiar'
                },
                {
                    extend: 'excelHtml5',
                    text: '<i class="fa fa-file-excel-o"></i>',
                    titleAttr: 'Excel'
                },
                {
                    extend: 'csvHtml5',
                    text: '<i class="fa fa-file-text-o"></i>',
                    titleAttr: 'CSV'
                },
                {
                    extend: 'pdfHtml5',
                    text: '<i class="fa fa-file-pdf-o"></i>',
                    titleAttr: 'PDF'
                }

            ],
        });

        // $('#gridProveedores tbody').on('click', 'td.details-control', function() {
        //     var tr = $(this).closest('tr');
        //     var row = table.row(tr);

        //     if (row.child.isShown()) {
        //         // This row is already open - close it
        //         row.child.hide();
        //         tr.removeClass('shown');
        //     } else {
        //         // Open this row
        //         row.child(format(row.data())).show();
        //         tr.addClass('shown');
        //     }
        // });
    }

    $('.RFC_IND').on('keyup', function() {
        if ($(this).val().length > 0) {
            $('.RFC_IND:not(#' + $(this).get(0).id + ')').prop('disabled', true);
            return;
        }
        $('.RFC_IND').prop('disabled', false);

    });

    $('#addProveedor').click(function() {
        $('#idProveedor').val('');
        $('#Nombre').val('');
        $('#RFC').val('');
        $('#RFC').prop('disabled', false);
        $('#Moneda').val('').trigger('change');
        $('#IdentificacionFiscal').val('');
        $('#IdentificacionFiscal').prop('disabled', false);
        $('#Email').val('');
        $('#TasaIVA').val('');
        $('#modalProveedores').modal('show')
        $('#titleModal').text('Agregar proveedor')


    })

    // $('#Email').keyup(function() {

    //     var validRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+.(?:\.[a-zA-Z0-9-]+)*$/;

    //     if (this.value.match(validRegex)) {

    //         $(this).css('color', 'green');
    //         $(this).attr('valid', true);
    //         return true;

    //     } else {
    //         $(this).focus();
    //         $(this).css('color', 'red');
    //         $(this).attr('valid', false);
    //         return false;
    //     }

    // })

    $("#form-save-proveedor").on("submit", function(e) {
        e.preventDefault();
        var f = $(this);
        var formData = new FormData(document.getElementById("form-save-proveedor"));

        $('#loadingSave').modal('show');
        $.ajax({
                url: "{{ url('catalogos/proveedores/save_proveedor')}}",
                type: "post",
                data: formData,
                cache: false,
                contentType: false,
                processData: false
            })
            .done(function(resp) {
                setTimeout(() => {
                    showNotification('thumb_up', 'top', 'center', 'success', '¡BIEN!', resp.mensaje, 3000)
                    $('#gridProveedores').DataTable().ajax.reload();
                    $('#modalProveedores').modal('hide');
                }, 2000);

            }).fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
                setTimeout(() => {
                    $('#loadingSave').modal('hide')
                }, 2000);
            });

    });

    function editarProveedor(id) {
        $.ajax({
                url: "{{url('catalogos/proveedores/get_proveedor')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    Id: id,
                }
            })
            .done(function(resp) {
                $('#idProveedor').val(resp.data['Id']);
                $('#Nombre').val(resp.data['Nombre']);
                $('#RFC').val(resp.data['RFC']);
                $('#Moneda').val(resp.data['Moneda']).trigger('change');
                $('#IdentificacionFiscal').val(resp.data['IdentificacionFiscal']);
                $('#Email').val(resp.data['Email']);
                $('#TasaIVA').val(resp.data['TasaIVA']);
                $('#titleModal').text('Editar proveedor')
                $('#modalProveedores').modal('show')
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    }

    function eliminarProveedor(id) {
        Swal.fire({
            title: '¿Estas seguro de eliminar el proveedor?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            cancelButtonText: 'Cancelar',
            confirmButtonText: 'Si, ¡hazlo!'
        }).then((result) => {
            if (result.value) {
                $('#loadingLoad').modal('show')

                $.ajax({
                        url: "{{url('catalogos/proveedores/delete_proveedor')}}",
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            Id: id,
                        }
                    })
                    .done(function(resp) {
                        setTimeout(() => {
                            showNotification('thumb_up', 'top', 'center', 'success', '¡BIEN!', resp.mensaje, 3000)
                            $('#gridProveedores').DataTable().ajax.reload();
                        }, 2000);
                    })
                    .fail(function() {
                        console.log("error");
                    })
                    .always(function() {
                        console.log("complete");
                        setTimeout(() => {
                            $('#loadingLoad').modal('hide')
                        }, 2000);
                    });
            }
        })
    }
</script>
@endsection