<div class="content-wrapper">
    <section class="content-header">
        <h1>Detracción</h1>
    </section>

    <section class="content">
        <div class="row">
            <div class="col-md-12">

                <?php if(tiene_permiso('detraccion_crear')): ?>
                    <button type="button" class="btn btn-success" id="btnNuevoItem">
                        <i class="fa fa-plus"></i> Nueva Detracción
                    </button>
                <?php endif; ?>

                <br><br>

                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <strong>Listado de detracciones</strong>
                    </div>
                    <div class="panel-body">
                        <div class="table-responsive">
                            <table id="tablaItems" class="table table-bordered table-hover table-striped" width="100%">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Código</th>
                                        <th>Nombre</th>
                                        <th>Porcentaje</th>
                                        <th>Estado</th>
                                        <th style="width:160px;">Acciones</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>

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

<div class="modal fade" id="modalItem" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">

            <form id="formItem">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title" id="tituloModal">Nueva Detracción</h4>
                </div>

                <div class="modal-body">
                    <input type="hidden" id="item_id" name="item_id">

                    <div class="form-group">
                        <label>Código</label>
                        <input type="text" name="codigo" id="codigo" class="form-control" maxlength="5" required>
                    </div>

                    <div class="form-group">
                        <label>Nombre</label>
                        <input type="text" name="nombre" id="nombre" class="form-control" maxlength="150" required>
                    </div>

                    <div class="form-group">
                        <label>Porcentaje</label>
                        <input type="number" step="0.01" min="0" max="100" name="porcentaje" id="porcentaje" class="form-control" required>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">
                        <i class="fa fa-save"></i> Guardar
                    </button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                </div>
            </form>

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

<script>
window.addEventListener('load', function () {

    var tabla = $('#tablaItems').DataTable({
        ajax: {
            url: '<?php echo base_url("index.php/mantenimiento/detraccion/listar"); ?>',
            type: 'GET',
            dataSrc: 'data'
        },
        language: {
            lengthMenu: "Mostrar _MENU_ registros",
            zeroRecords: "No se encontraron resultados",
            info: "Mostrando registros del _START_ al _END_ de un total de _TOTAL_",
            infoEmpty: "Mostrando registros del 0 al 0",
            infoFiltered: "(filtrado de un total de _MAX_ registros)",
            search: "Buscar:",
            paginate: {
                first: "Primero",
                last: "Último",
                next: "Siguiente",
                previous: "Anterior"
            }
        },
        pageLength: 10,
        order: [[0, "desc"]]
    });

    $('#btnNuevoItem').on('click', function() {
        $('#formItem')[0].reset();
        $('#item_id').val('');
        $('#tituloModal').text('Nueva Detracción');
        $('#modalItem').modal('show');
    });

    $('#formItem').on('submit', function(e) {
        e.preventDefault();

        var item_id = $('#item_id').val();
        var url = item_id
            ? '<?php echo base_url("index.php/mantenimiento/detraccion/actualizar/"); ?>' + item_id
            : '<?php echo base_url("index.php/mantenimiento/detraccion/guardar"); ?>';

        $.ajax({
            url: url,
            type: 'POST',
            data: $(this).serialize(),
            dataType: 'json',
            success: function(resp) {
                if (resp.status) {
                    $('#modalItem').modal('hide');
                    tabla.ajax.reload(null, false);

                    Swal.fire({
                        icon: 'success',
                        title: 'Correcto',
                        text: resp.message,
                        timer: 1800,
                        showConfirmButton: false
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: resp.message
                    });
                }
            },
            error: function() {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Ocurrió un error en la petición AJAX'
                });
            }
        });
    });

    $(document).on('click', '.btn-editar', function() {
        var id = $(this).data('id');

        $.ajax({
            url: '<?php echo base_url("index.php/mantenimiento/detraccion/obtener/"); ?>' + id,
            type: 'GET',
            dataType: 'json',
            success: function(resp) {
                if (resp.status) {
                    $('#item_id').val(resp.data.id);
                    $('#codigo').val(resp.data.codigo);
                    $('#nombre').val(resp.data.nombre);
                    $('#porcentaje').val(resp.data.porcentaje);
                    $('#tituloModal').text('Editar Detracción');
                    $('#modalItem').modal('show');
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: resp.message
                    });
                }
            }
        });
    });

    $(document).on('click', '.btn-estado', function() {
        var id = $(this).data('id');
        var accion = $(this).data('accion');
        var nombre = $(this).data('nombre');

        Swal.fire({
            title: '¿Estás seguro?',
            text: 'Vas a ' + accion + ' la detracción: ' + nombre,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Sí, continuar',
            cancelButtonText: 'Cancelar'
        }).then(function(result) {
            if (result.isConfirmed) {
                $.ajax({
                    url: '<?php echo base_url("index.php/mantenimiento/detraccion/estado/"); ?>' + id,
                    type: 'POST',
                    dataType: 'json',
                    success: function(resp) {
                        if (resp.status) {
                            tabla.ajax.reload(null, false);
                            Swal.fire({
                                icon: 'success',
                                title: 'Correcto',
                                text: resp.message,
                                timer: 1800,
                                showConfirmButton: false
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: resp.message
                            });
                        }
                    },
                    error: function() {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Ocurrió un error al cambiar el estado'
                        });
                    }
                });
            }
        });
    });

});
</script>