@extends("theme.sneat.admin")
@section('contenido')
<meta name="csrf-token" content="{{ csrf_token() }}" />
<!-- Content -->
<h4 class="fw-bold py-2"><span class="text-muted fw-light">Materiales</span></h4>
<div class="card">
    <div class="card-header p-3">
        <div class="d-flex flex-row-reverse">
            <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
                <button type="button" class="btn btn-outline-secundary" onclick="crear();">
                    <i class='tf-icons bx bx-plus-medical'></i>
                </button>
                <div class="btn-group" role="group">
                    <button id="btnGroupDrop1" type="button" class="btn btn-outline-secundary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Exportar
                    </button>
                    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                        <a class="dropdown-item" id="tabla-excel" onclick="$('.tabla_excel').trigger('click');">Excel</a>
                        <a class="dropdown-item" id="tabla-pdf" onclick="$('.tabla_pdf').trigger('click');">PDF</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
   <div class="table-responsive-xxl text-nowrap" style="min-height:700px;">
        <table id='tabla' class="table table-bordered border-secundary table-sm table-striped w-100">
            <thead class="table-light">
                <tr>
                    <th class="text-center">ID</th>
                    <th class="text-center">Material</th>
                    <th class="text-center">Tamaño</th>
                    <th class="text-center">Grosor</th>
                    <th class="text-center">Precio</th>
                    <th class="text-center">Acciones</th>
                </tr>
            </thead>
        </table>
   </div>
</div>
<!-- / Content -->
<!-- Modal -->
<div class="modal fade" id="modalCenter" data-bs-backdrop="static" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
        <div class="modal-content">
            <form action="post" id="form" name="form">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalCenterTitle">TITULO</h5>
                    <!-- INPUT HIDDEN -->
                        <input type="hidden" name="accion_form" id="accion_form">
                        <input type="hidden" name="id_form" id="id_form">
                    <!-- FIN INPUT HIDDEN -->
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-xl">
                            <div class="card mb-4">
                                <div class="card-header d-flex justify-content-between align-items-center">
                                    <h5 class="mb-0">Datos Generales</h5>
                                    <small class="text-muted float-end">Datos Generales</small>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="mb-3 col-md-6">
                                            <label class="form-label" for="material">Material</label>
                                            <input type="text" class="form-control" id="material" name="material" placeholder="Material" />
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="mb-3 col-md-4">
                                            <label class="form-label" for="tamano">Tamaño</label>
                                            <input type="text" class="form-control" id="tamano" name="tamano" placeholder="Tamaño" />
                                        </div>
                                        <div class="mb-3 col-md-4">
                                            <label class="form-label" for="grosor">Grosor</label>
                                            <input type="text" class="form-control" id="grosor" name="grosor" placeholder="Grosor" />
                                        </div>
                                        <div class="mb-3 col-md-4">
                                            <label class="form-label" for="precio">Precio</label>
                                            <input type="text" class="form-control" id="precio" name="precio" placeholder="Precio" />
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary">Guardar</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection
@section('scripts')
<script>
    const titulo_singular = "Material";
    const titulo_pural = "Materiales";
    cargar_validaciones_custom();

    $.validator.setDefaults({
        ignore: ':hidden:not([class~=selectized]),:hidden > .selectized, .selectize-control .selectize-input input'
    });

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

// TABLA    
    var table = $('#tabla').DataTable({
        processing: true,
        serverSide: true,
        lengthMenu: [[25, 50, 100, 500, 1000],[25, 50, 100, 500, "1000"]],
        dom: "rtB<'row mx-0 '<'col-sm-6'l><'col-sm-6'p>>",
        ajax: "{{ URL::to('/') }}/materiales/listado",
        columns: [
            { data: 'id', 'class':'text-center' },
            { data: 'material', 'class':'text-center' },
            { data: 'tamano', 'class':'text-center' },
            { data: 'grosor', 'class':'text-center' },
            { data: 'precio', 'class':'text-center' },
            {
                "data": null,
                "width": "100px",
                "className" : "text-center",
                "render": function(data, type, row, meta) {
                    return `
                        <div class="dropdown">
                            <button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown" aria-expanded="false">
                                <i class="bx bx-dots-vertical-rounded"></i>
                            </button>
                            <div class="dropdown-menu" style="">
                                <a class="dropdown-item ver" data-id="${row.id}" href="javascript:ver(${row.id});"><i class="tf-icons bx bx-show-alt me-1"></i> Ver</a>
                                <a class="dropdown-item editar" data-id="${row.id}" href="javascript:editar(${row.id});"><i class="tf-icons bx bx-edit me-1"></i> Editar</a>
                                <a class="dropdown-item eliminar" data-id="${row.id}" href="javascript:eliminar(${row.id});"><i class="tf-icons bx bx-x me-1"></i> Eliminar</a>
                            </div>
                        </div>`;
                },
                "orderable": false
            },
        ],
        buttons: [
            {
                extend: 'excel',
                footer: true,
                exportOptions: { 
                    columns: 'th:not(:last-child)'
                },
                className: 'tabla_excel d-none',
            },
            {
                extend: 'pdfHtml5',
                footer: true,			
                exportOptions: { 
                    columns: 'th:not(:last-child)',
                },
                className: 'tabla_pdf d-none',
            }
        ],
        language: {
            "sProcessing":     "Procesando...",
            "sLengthMenu":     "Mostrar _MENU_ registros",
            "sZeroRecords":    "No se encontraron resultados",
            "sEmptyTable":     "Ningún dato disponible en esta tabla",
            "sInfo":           "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
            "sInfoEmpty":      "Mostrando registros del 0 al 0 de un total de 0 registros",
            "sInfoFiltered":   "(filtrado de un total de _MAX_ registros)",
            "sInfoPostFix":    "",
            "sSearch":         "Buscar:",
            "sUrl":            "",
            "sInfoThousands":  ",",
            "sLoadingRecords": "Cargando...",
            "oPaginate": {
                "sFirst":    "Primero",
                "sLast":     "Último",
                "sNext":     "Siguiente",
                "sPrevious": "Anterior"
            },
            "oAria": {
                "sSortAscending":  ": Activar para ordenar la columna de manera ascendente",
                "sSortDescending": ": Activar para ordenar la columna de manera descendente"
            }
        },
        initComplete: function(){
            $('.dt-buttons').hide();
        }   
    });

    $('#tabla thead tr').clone(true).find('th').removeClass('sorting_asc sorting_asc sorting').off('click').end().insertBefore('#tabla thead tr');
        
    $('#tabla thead tr:eq(0) th').each(function (i){
        var title = $(this).text();
        if(title != 'Acciones'){
            $(this).html('<input type="text" class="form-control" placeholder="'+title+'" />');
        
            $('input', this).on('keyup change', function(){
                if(table.column(i).search() !== this.value){
                    table.column(i).search(this.value).draw();
                }
            });
        }else{
            $(this).html('');
        }
    });
// FIN TABLA

// ACCIONES
    crear = function(){
        limpiar_form();
        $(".modal-title").html("<strong>Crear "+titulo_singular+"</strong>");
        $("#accion_form").val("crear");
        $("#id_form").val('');
        $(".modal-footer").show();
        $('#modalCenter').modal('show');
    };

    ver = function(id){
        limpiar_form();
        $(".modal-title").html("<strong>Ver "+titulo_singular+" #"+id.toString().padStart(3,'0')+"</strong>");
        $("#accion_form").val("ver");
        $("#id_form").val(id);
        $(".modal-footer").hide();
        $.ajax({
            url: '{{ URL::to('/') }}/materiales/detalle',
            type: 'POST',
            data: {id},
            success: function(response){
                console.log(response);
                
                $.each(response, function(key, value){
                    var $el = $('[name="' + key + '"]');
                    if ($el.is('input[type="radio"]')){
                        $el.prop('checked', true);
                    }else if($el.is('select')){
                        $('#'+key)[0].selectize.setValue(value);
                        $el.filter('[value="' + value + '"]');
                    }else{
                        $el.val(value);
                    }
                    $el.prop('disabled',true);
                });

                $('#modalCenter').modal('show');
            },
            error: function(xhr, status, error) {
                console.error(xhr.responseText);
            }
        });
    };

    editar = function(id){
        limpiar_form();
        $(".modal-title").html("<strong>Editar "+titulo_singular+" #"+id.toString().padStart(3,'0')+"</strong>");
        $("#accion_form").val("editar");
        $("#id_form").val(id);
        $(".modal-footer").show();
        $.ajax({
            url: '{{ URL::to('/') }}/materiales/detalle',
            type: 'POST',
            data: {id},
            success: function(response){
                console.log(response);
                
                $.each(response, function(key, value){
                    var $el = $('[name="' + key + '"]');
                    if ($el.is('input[type="radio"]')){
                        $el.prop('checked', true);
                    }else if($el.is('select')){
                        $('#'+key)[0].selectize.setValue(value);
                        $el.filter('[value="' + value + '"]');
                    }else{
                        $el.val(value);
                    }
                    if(key == 'rut'){
                        $el.prop('disabled',true);
                    }else{
                        $el.prop('disabled',false);
                    }
                });
                $('#modalCenter').modal('show');
            },
            error: function(xhr, status, error) {
                console.error(xhr.responseText);
            }
        });
    };

    limpiar_form = function(){
        $('#material').val('').prop('disabled',false);
        $('#tamano').val('').prop('disabled',false);
        $('#grosor').val('').prop('disabled',false);
        $('#precio').val('').prop('disabled',false);
        $(".modal-footer").show();
    }

    eliminar = function(id){
        Swal.fire({
            title: '¿ Estas seguro que desea eliminar el registro #'+(id.toString().padStart(3,'0'))+' ?',
            text: "¡ No podrás revertir esto !",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: '¡ Sí, bórralo !'
        }).then((result) => {
            if (result.isConfirmed){
                $.ajax({
                    url: '{{ URL::to('/') }}/materiales/eliminar',
                    type: 'POST',
                    data: {id},
                    success: function(response){
                        console.log(response);
                        
                        Swal.fire(
                        'Eliminado!',
                        'Tu registro ha sido eliminado.',
                        'success');
                        table.ajax.reload();
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr.responseText);
                    }
                });
            }
        });
    };
// FIN ACCIONES

    $("#form").validate({
		rules: {
            material : {
				required: true,
			},
            tamano : {
				required: false,
			},
            grosor : {
				required: false,
			},
            precio : {
				required: true,
			},
		},
		messages:{
            material : {
				required: 'Campo requerido',
			},
            tamano : {
				required: 'Campo requerido',
			},
            grosor : {
				required: 'Campo requerido',
			},
            precio : {
				required: 'Campo requerido',
			},
		},
		submitHandler: function(form){
            var formData = new FormData(form);

            $.ajax({
                url: '{{ URL::to('/') }}/materiales/guardar',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response){
                    console.log(response);
                    $('#modalCenter').modal('hide');
                    if(response.response){
                        Swal.fire({
                            position: 'top-end',
                            icon: 'success',
                            title: '¡Excelente! La información ha sido guardada correctamente.',
                            showConfirmButton: false,
                            timer: 1500
                        });
                        table.ajax.reload();
                    }else{
                        Swal.fire({
                            position: 'top-end',
                            icon: 'error',
                            title: response.message,
                            showConfirmButton: false,
                            timer: 1500
                        });
                    }
                },
                error: function(xhr, status, error) {
                    console.error(xhr.responseText);
                }
            });
		}
	});
</script>
@endsection