@extends('layout.qr')
@section('header')
@section('content')
@include('modal.modal_act_capacitacion')
<div class="content text-center" style="margin-left:50px; margin-right:50px;">
    <div class="card border-dark ">
        <div class="card-header" ><b>Crear Capacitación</b></div>
        <div class="card-body text-dark mt-3">
            <div class="row">
                <div class="col">
                    <label for="nombre_cap">Nombre de la Capacitación</label>
                    <input type="text" class="form-control mt-3 text-center" id="nombre_cap" name="nombre_cap">
                </div>
                <div class="col">
                    <label for="horas_cap">Horas de la Capacitación (Hrs.)</label>
                    <input type="number" class="form-control mt-3 text-center" id="horas_cap" name="horas_cap">
                </div>
            </div>
            <div class="row mt-4">
                <div class="col">
                    <button class="btn btn-success" onclick="addCapacitacion();"><i class="fa-solid fa-file-circle-plus"></i>  Ingresar Capacitación</button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="content text-center mt-4" style="margin-left:50px; margin-right:50px;">
    <div class="card border-dark ">
        <div class="card-header" ><b>Lista de Capacitaciones</b></div>
        <div class="card-body text-dark mt-3">
            <table class="table table-hover tabla_cap">
                <thead>
                    <th style="text-align: center;">Nombre</th>
                    <th style="text-align: center;">Duración (Hrs)</th>
                    <th style="text-align: center;">Acciones</th>
                </thead>
                <tbody>
                    @foreach($capacitaciones as $cap)
                        <tr>
                            <td>{{$cap->nombre}}</td>
                            <td>{{$cap->hora}}</td>
                            <td>
                                <button class="btn btn-warning" onclick="modal_cap({{$cap->id}},'{{$cap->nombre}}','{{$cap->hora}}');"><i class="fa-solid fa-pen-to-square"></i></button>
                                <button class="btn btn-danger" onclick="deleteCapacitacion({{$cap->id}})"><i class="fa-solid fa-trash"></i></button>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@section('script')
<script>
    $('.tabla_cap').DataTable({
        "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"
            }
        }
    });

    function addCapacitacion(){
        if($("#nombre_cap").val() == '' || $("#horas_cap").val() == ''){
            Swal.fire({
                        position: 'center',
                        icon: 'info',
                        title: 'Llene los campos correctamente',
                        showConfirmButton: false,
                        timer: 1500
                        });
        }
        else{
            $.ajax({
                url: "agregarCapacitacion",
                type: "post",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                },
                data: {
                  'nombre_cap':$("#nombre_cap").val(),
                  'hora_cap': $("#horas_cap").val(),
                },
                beforeSend: function() {
     
                },
                success: function(data) {
                        Swal.fire({
                        position: 'center',
                        icon: 'success',
                        title: 'Capacitación Generada Correctamente',
                        showConfirmButton: false,
                        timer: 1500
                        }).then((result) => {
                            window.location.reload();
                        })
                },
                error: function(data) {
                    console.log(data);
                }
            });
        }
    }
    
    function modal_cap(id,nombre,hora){
        $("#id_cap_mod").val(id);
        $("#hora_cap_mod").val(hora);
        $("#nombre_cap_mod").val(nombre);
        $("#modal_act_capacitacion").modal('show');
    }

    function updateCapacitacion(){
        $.ajax({
                url: "actualizarCapacitacion",
                type: "post",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                },
                data: {
                    'id':$("#id_cap_mod").val(),
                    'nombre':$("#nombre_cap_mod").val(),
                    'hora':$("#hora_cap_mod").val(),
                },
                beforeSend: function() {
     
                },
                success: function(data) {
                    Swal.fire({
                        position: 'center',
                        icon: 'success',
                        title: 'Capacitación Actualizada Correctamente',
                        showConfirmButton: false,
                        timer: 1500
                        }).then((result) => {
                            window.location.reload();
                        })
                },
                error: function(data) {
                    console.log(data);
                }
            });
    }

    function deleteCapacitacion(id){

        Swal.fire({
        title: '¿Eliminar Capacitación?',
        text: "Se eliminaran los registros asociados a esta capacitación",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Eliminar'
        }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: "eliminarCapacitacion",
                type: "post",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                },
                data: {
                    'id':id,
                },
                beforeSend: function() {

                },
                success: function(data) {
                    Swal.fire({
                        position: 'center',
                        icon: 'success',
                        title: 'Capacitación Eliminada Correctamente',
                        showConfirmButton: false,
                        timer: 1500
                        }).then((result) => {
                            window.location.reload();
                        })
                },
                error: function(data) {
                    console.log(data);
                }
            });
        }
        })
    }
</script>
@endsection
@endsection