@extends('layouts.app')

@section('content')
<!-- Modal Formulario -->
<div class="modal fade" id="modal-form" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
        <div class="modal-header">
            <h1 class="modal-title fs-5" id="exampleModalLabel">Proveedor</h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <form id="form-proveedor">
                <div class="mb-3">
                    <label for="NOMBRE" class="col-form-label">Nombre / Razón Social:</label>
                    <input type="text" class="form-control" id="NOMBRE" name="NOMBRE">
                </div>
                <div class="mb-3">
                    <label for="CEDULA" class="col-form-label">Cedula / RIF:</label>
                    <input type="text" class="form-control" id="CEDULA" name="CEDULA">
                </div>
                <div class="mb-3">
                    <button type="submit" class="btn btn-primary">Guardar</button>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
        </div>
        </div>
    </div>
</div>


<div class="row">
    <div class="col-md-12">
        <!-- ALERT-->
        <div class="alert au-alert-success alert-dismissible fade show au-alert au-alert--70per m-b-40" role="alert" id="alert">
            <i class="zmdi zmdi-check-circle"></i>
            <span class="content" id="alert-content">You successfully read this important alert message.</span>
            <button class="close" type="button" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">
                    <i class="zmdi zmdi-close-circle"></i>
                </span>
            </button>
        </div>
        <!-- END ALERT-->
        <hr>
        <button class="btn btn-dark btn-lg" data-bs-toggle="modal" data-bs-target="#modal-form">
            <i class="fas fa-plus"></i> 
            Registrar proveedor
        </button>
        <hr>
        <!-- DATA TABLE-->
        <div class="table-responsive m-b-40 m-t-40">
            <table class="table table-borderless table-data3">
                <thead>
                    <tr class="text-center">
                        <th>Nombre / Razón Social</th>
                        <th>Cédula / RIF</th>
                        <th>Acciones</th>
                    </tr>
                </thead>
                <tbody>
                   
                </tbody>
            </table>
        </div>
        <!-- END DATA TABLE                  -->
    </div>
</div>
@endsection

@section('scripts')
<script>
    var id_proveedor = 0;
    $('.responsive-table').hide();
    $('#alert').hide();
    $('#preloader').show();

    index();

    function index(){
        $('table').DataTable().destroy();
        $('table').DataTable({
            responsive: true,
            language: {
                url: '{{asset("json/es-ES.json")}}',
            },
            "processing": true,  // Activa el mensaje interno de carga de DataTables
            "serverSide": false,  // Desactiva el modo servidor porque solo obtendremos datos sin paginación del lado del servidor
            "ajax": {
                "url": "/api/proveedores",  // Ruta de la API en Laravel
                "type": "GET",
                "dataSrc": function(json) {
                    // Oculta el preloader y muestra la tabla cuando los datos estén listos
                    $('#preloader').hide();
                    $('.responsive-table').fadeIn();
                    return json; // Retorna los datos en formato adecuado para DataTables
                }
            },
            "columns": [
                { "data": "NOMBRE" },
                { "data": "CEDULA" },
                { "data": null, "orderable": false, "searchable": false } // Columna para los botones
            ],
            "columnDefs": [
                {
                    "targets": -1, // Última columna
                    "render": function(data, type, row) {
                        return `
                            <button class="btn btn-dark btn-sm ver" data-id="${row.CEDULA}">
                                <i class="fas fa-eye"></i>
                            </button>
                            <button class="btn btn-dark btn-sm editar" data-id="${row.CEDULA}">
                                <i class="fas fa-edit"></i>
                            </button>
                            <button class="btn btn-danger btn-sm eliminar" data-id="${row.CEDULA}">
                                <i class="fas fa-trash"></i>
                            </button>
                        `;
                    }
                }
            ],
            "order": [[0, "desc"]], // Ordena por ID de manera descendente
        });
    }

    $(document).on('submit', '#form-proveedor', function(e) {
        e.preventDefault();
        let form = new FormData(this);
        fetch('/api/proveedores', {
            method: 'POST',
            body: form
        })
        .then(response => response.json())
        .then(data => {
            $('#modal-form').modal('hide');
            $('#form-proveedor').trigger('reset');
            $('#alert-content').text(data.message);
            $('#alert').fadeIn();
            index();
        })
        .catch(error => console.error(error));
    });

    $(document).on('click', '.editar', function() {
        let id = $(this).data('id');
        fetch('/api/proveedores/' + id)
        .then(response => response.json())
        .then(data => {
            id_proveedor = data.CEDULA;
            $('#modal-form').modal('show');
            $('#NOMBRE').val(data.NOMBRE);
            $('#CEDULA').val(data.CEDULA);
            $('#form-proveedor').attr('id', 'form-proveedor-edit');
        })
        .catch(error => console.error(error));
    });

    $(document).on('submit', '#form-proveedor-edit', function(e) {
        e.preventDefault();
        let id = id_proveedor;
        let form = new FormData(this);
            form.append('_method', 'PUT');
        fetch('/api/proveedores/'+id, {
            method: 'POST',
            body: form
        })
        .then(response => response.json())
        .then(data => {
            $('#modal-form').modal('hide');
            $('#form-proveedor').trigger('reset');
            $('#alert-content').text(data.message);
            $('#alert').fadeIn();
            $('#form-proveedor-edit').attr('id', 'form-proveedor');
            index();
        })
        .catch(error => console.error(error));
    });


    $(document).on('click', '.eliminar', function() {
        let id = $(this).data('id');
        if(confirm('Estas seguro de eliminar el proveedor?')) {
            fetch('/api/proveedores/' + id, {
                method: 'DELETE'
            })
            .then(response => response.json())
            .then(data => {
                $('#alert-content').html(data.message);
                $('#alert').fadeIn();
                index();
            })
            .catch(error => console.error(error));
        }
    });

</script>
@endsection