@extends('layouts.kaiadmin.master')

@section('template_title','Catalogo CGC')

@section('content')
<div class="container-fluid">
    <div class="card">
        <div class="card-header d-flex justify-content-between">
            <h5>Catálogo CGC</h5>
            <button class="btn btn-primary btn-sm" id="btnCreate">Nuevo</button>
        </div>

        <div class="card-body">
            <table class="table table-striped" id="tablaCGC">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Descripción</th>
                        <th>Tipo Campo</th>
                        <th>Observación</th>
                        <th>Acciones</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
@endsection
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
let table = $('#tablaCGC').DataTable({
    processing:true,
    serverSide:true,
    ajax:"{{ route('catalogoCGC.datatable') }}",
    language:{
        url:"//cdn.datatables.net/plug-ins/1.13.8/i18n/es-ES.json"
    }
});

// FORM HTML
function cgcForm(data = {}) {
    return `
    <input type="hidden" id="cgc_id" value="${data.id||''}">
    <input id="descripcionCGC" class="swal2-input" placeholder="Descripción" value="${data.descripcionCGC||''}">
    <small id="err-descripcionCGC" class="text-danger"></small>

    <input id="tipoCampo" class="swal2-input" placeholder="Tipo Campo" value="${data.tipoCampo||''}">
    <small id="err-tipoCampo" class="text-danger"></small>

    <textarea id="observacion" class="swal2-textarea" placeholder="Observación">${data.observacion||''}</textarea>
    <small id="err-observacion" class="text-danger"></small>
    `;
}

// CREATE
$('#btnCreate').click(function(){
    Swal.fire({
        title:'Nuevo CGC',
        html:cgcForm(),
        showCancelButton:true,
        confirmButtonText:'Guardar',
        preConfirm:()=>saveCGC()
    });
});

// EDIT
$(document).on('click','.btn-edit',function(){
    let id = $(this).data('id');
    $.get(`/catalogoCGC/${id}`,function(data){
        Swal.fire({
            title:'Editar CGC',
            html:cgcForm(data),
            showCancelButton:true,
            confirmButtonText:'Actualizar',
            preConfirm:()=>saveCGC(id)
        });
    });
});

// SHOW
$(document).on('click','.btn-show',function(){
    $.get(`/catalogoCGC/${$(this).data('id')}`,function(data){
        Swal.fire({
            title:'Detalle CGC',
            html:`
                <p><b>Descripción:</b> ${data.descripcionCGC}</p>
                <p><b>Tipo Campo:</b> ${data.tipoCampo}</p>
                <p><b>Observación:</b> ${data.observacion}</p>
            `
        });
    });
});

// SAVE
function saveCGC(id=null){
    $('.text-danger').text('');

    let data = {
        descripcionCGC:$('#descripcionCGC').val(),
        tipoCampo:$('#tipoCampo').val(),
        observacion:$('#observacion').val(),
        _token:'{{ csrf_token() }}'
    };

    let url = id ? `/catalogoCGC/${id}` : "{{ route('catalogoCGC.store') }}";
    if(id) data._method = 'PUT';

    return $.ajax({
        url:url,
        type:'POST',
        data:data,
        success:function(){
            Swal.fire('Éxito','Guardado correctamente','success');
            table.ajax.reload(null,false);
        },
        error:function(xhr){
            $.each(xhr.responseJSON.errors,function(k,v){
                $('#err-'+k).text(v[0]);
            });
            return false;
        }
    });
}

// DELETE
$(document).on('click','.btn-delete',function(){
    let id = $(this).data('id');

    Swal.fire({
        title:'¿Eliminar?',
        icon:'warning',
        showCancelButton:true,
        confirmButtonText:'Sí, eliminar'
    }).then((r)=>{
        if(r.isConfirmed){
            $.ajax({
                url:`/catalogoCGC/${id}`,
                type:'DELETE',
                data:{_token:'{{ csrf_token() }}'},
                success:function(){
                    Swal.fire('Eliminado','','success');
                    table.ajax.reload(null,false);
                }
            });
        }
    });
});
</script>
@endpush