@extends('layouts.master')
@section('title') Inicio @endsection
@section('content')
<!-- this is breadcrumbs -->
@component('components.breadcrumb')
@slot('li_1') Inicio @endslot
@slot('li_2') Panel Academico @endslot
@slot('title') Semestres @endslot
@endcomponent

<!-- start page content -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body mb-n3">
                <button type="button" class="btn btn-de-primary btn-sm px-4 mt-0 mb-3"
                    data-bs-toggle="modal"
                    data-bs-target="#modalNuevoPeriodo">
                    <i class="fas fa-plus"></i> Agregar Nuevo Semestre
                </button>
                <div class="table-responsive">
                    <table id="tablaSemestres" class="table table-striped mb-0 table-hover">
                        <thead class="thead-light">
                            <tr>
                                <th>#</th>
                                <th>Nombre</th>
                                <th>Descripción</th>
                                <th>Estado</th>

                                <th>Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($semestres as $semestre)
                            <tr>
                               <td>{{ $loop->iteration }}</td>
                                <td>{{ $semestre->nombre }}</td>
                                <td>{{ $semestre->descripcion }}</td>
                                <td>
                                    @if ($semestre->activo)
                                    <span class="badge badge-soft-success">Activo</span>
                                    @else
                                    <span class="badge badge-soft-warning">Inactivo</span>
                                    @endif
                                </td>

                                <td>
                                    <!-- Icono de editar -->
                                    <a href="#"
                                        class="text-warning"
                                        data-bs-toggle="modal"
                                        data-bs-target="#editModal"
                                        data-id="{{ $semestre->id }}"
                                        data-nombre="{{ $semestre->nombre }}"
                                        data-descripcion="{{ $semestre->descripcion }}"
                                        data-activo="{{ $semestre->activo }}">
                                        <i class="las la-pen text-secondary font-18"></i>
                                    </a>

                                    <!-- Icono de eliminar -->
                                    <a href="#"
                                        class="text-danger btn-eliminar-semestre"
                                        data-id="{{ $semestre->id }}">
                                        <i class="las la-trash-alt text-secondary font-18"></i>
                                    </a>

                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>


                </div>
            </div>
            <!--end card-body-->
        </div>
        <!--end card-->
    </div>
    <!--end col-->
</div>

<!-- Modal de agregar -->
<!-- Modal: Nuevo Semestre -->
<div class="modal fade" id="modalNuevoPeriodo" tabindex="-1" aria-labelledby="modalNuevoPeriodoLabel" aria-hidden="true">
    <div class="modal-dialog">
        <form action="{{ route('semestres.store') }}" method="POST" id="formNuevoSemestre">
            @csrf
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalNuevoPeriodoLabel">
                        <i class="fas fa-plus-circle text-primary"></i> Nuevo Semestre
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                </div>
                <div class="modal-body">
                    <!-- Nombre -->
                    <div class="mb-3">
                        <label for="nombre" class="form-label">Nombre <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="nombre" name="nombre" required>
                    </div>

                    <!-- Descripción -->
                    <div class="mb-3">
                        <label for="descripcion" class="form-label">Descripción</label>
                        <textarea class="form-control" id="descripcion" name="descripcion" rows="3"></textarea>
                    </div>

                    <!-- Estado -->
                    <div class="mb-3">
                        <label for="activo" class="form-label">Estado</label>
                        <select class="form-select" id="activo" name="activo">
                            <option value="1" selected>Activo</option>
                            <option value="0">Inactivo</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-de-primary">Guardar</button>
                </div>
            </div>
        </form>
    </div>
</div>




<!-- Modal de Edición -->

<!-- Modal: Editar Semestre -->
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <form id="formEditarSemestre" method="POST">
            @csrf
            @method('PUT')
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fas fa-edit text-warning"></i> Editar Semestre</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                </div>
                <div class="modal-body">
                    <!-- Campo oculto para ID -->
                    <input type="hidden" id="edit_id">

                    <!-- Nombre -->
                    <div class="mb-3">
                        <label for="edit_nombre" class="form-label">Nombre</label>
                        <input type="text" class="form-control" id="edit_nombre" name="nombre" required>
                    </div>

                    <!-- Descripción -->
                    <div class="mb-3">
                        <label for="edit_descripcion" class="form-label">Descripción</label>
                        <textarea class="form-control" id="edit_descripcion" name="descripcion" rows="3"></textarea>
                    </div>

                    <!-- Estado -->
                    <div class="mb-3">
                        <label for="edit_activo" class="form-label">Estado</label>
                        <select class="form-select" id="edit_activo" name="activo">
                            <option value="1">Activo</option>
                            <option value="0">Inactivo</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-de-warning">Actualizar</button>
                </div>
            </div>
        </form>
    </div>
</div>




<!--end row-->


@endsection
@section('script')
<!-- jQuery y DataTables -->

<!-- jQuery y DataTables -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

<!-- DataTables Buttons -->
<script src="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.colVis.min.js"></script>

<!-- DataTables CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.3.6/css/buttons.dataTables.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>

let tablaSemestres;

$(document).ready(function(){

/* =====================================================
   INICIALIZAR DATATABLE
===================================================== */

tablaSemestres = $("#tablaSemestres").DataTable({
    responsive:true,
    lengthChange:true,
    autoWidth:false,
    buttons:[
        {
            extend:'collection',
            text:'Opciones',
            buttons:[
                {extend:'copy',text:'Copiar'},
                {extend:'csv',text:'CSV'},
                {extend:'excel',text:'Excel',title:'Semestres Académicos'},
                {extend:'pdf',text:'PDF'},
                {extend:'print',text:'Imprimir'}
            ]
        },
        {
            extend:'colvis',
            text:'Visibilidad de Columna'
        }
    ],
    language:{
        search:"Buscar:",
        lengthMenu:"Mostrar _MENU_ registros por página",
        info:"Mostrando _START_ a _END_ de _TOTAL_ entradas",
        paginate:{
            first:"Primero",
            previous:"Anterior",
            next:"Siguiente",
            last:"Último"
        }
    }
});

tablaSemestres.buttons().container().appendTo('#tablaSemestres_wrapper .col-md-6:eq(0)');


/* =====================================================
   REGISTRAR SEMESTRE
===================================================== */

$('#formNuevoSemestre').submit(function(e){

    e.preventDefault();

    let form = $(this);
    let url = form.attr('action');

    $.ajax({

        url:url,
        type:'POST',
        data:form.serialize(),

        success:function(response){

            let s = response.semestre;

            let estado = s.activo
                ? '<span class="badge badge-soft-success">Activo</span>'
                : '<span class="badge badge-soft-warning">Inactivo</span>';

            let acciones = `
                <a href="#"
                    class="text-warning"
                    data-bs-toggle="modal"
                    data-bs-target="#editModal"
                    data-id="${s.id}"
                    data-nombre="${s.nombre}"
                    data-descripcion="${s.descripcion ?? ''}"
                    data-activo="${s.activo}">
                    <i class="las la-pen text-secondary font-18"></i>
                </a>

                <a href="#"
                    class="text-danger btn-eliminar-semestre"
                    data-id="${s.id}">
                    <i class="las la-trash-alt text-secondary font-18"></i>
                </a>
            `;

            tablaSemestres.row.add([
                s.id,
                s.nombre,
                s.descripcion ?? '',
                estado,
                acciones
            ]).draw(false);

            Swal.fire({
                icon:'success',
                title:'¡Registrado!',
                text:'El semestre fue registrado correctamente.',
                timer:2000,
                showConfirmButton:false
            });

            $('#modalNuevoPeriodo').modal('hide');

            form[0].reset();
        },

        error:function(xhr){

            let errores = xhr.responseJSON?.errors;
            let mensaje = 'Hubo un error al registrar.';

            if(errores){
                mensaje = Object.values(errores).join('<br>');
            }

            Swal.fire({
                icon:'error',
                title:'Error',
                html:mensaje
            });

        }

    });

});


/* =====================================================
   GUARDAR FILA A EDITAR
===================================================== */

let filaEditar = null;


/* =====================================================
   CARGAR DATOS EN MODAL EDITAR
===================================================== */

$('#editModal').on('show.bs.modal',function(event){

    let button = $(event.relatedTarget);

    filaEditar = button.closest('tr');

    $('#edit_id').val(button.data('id'));
    $('#edit_nombre').val(button.data('nombre'));
    $('#edit_descripcion').val(button.data('descripcion'));
    $('#edit_activo').val(button.data('activo'));

});


/* =====================================================
   ACTUALIZAR SEMESTRE
===================================================== */

$('#formEditarSemestre').submit(function(e){

    e.preventDefault();

    let id = $('#edit_id').val();

    $.ajax({

        url:`/semestres/${id}`,
        type:'POST',

        data:{
            _token:$('input[name="_token"]').val(),
            _method:'PUT',
            nombre:$('#edit_nombre').val(),
            descripcion:$('#edit_descripcion').val(),
            activo:$('#edit_activo').val()
        },

        success:function(response){

            let s = response.semestre;

            let estado = s.activo
                ? '<span class="badge badge-soft-success">Activo</span>'
                : '<span class="badge badge-soft-warning">Inactivo</span>';

            let acciones = `
                <a href="#"
                    class="text-warning"
                    data-bs-toggle="modal"
                    data-bs-target="#editModal"
                    data-id="${s.id}"
                    data-nombre="${s.nombre}"
                    data-descripcion="${s.descripcion ?? ''}"
                    data-activo="${s.activo}">
                    <i class="las la-pen text-secondary font-18"></i>
                </a>

                <a href="#"
                    class="text-danger btn-eliminar-semestre"
                    data-id="${s.id}">
                    <i class="las la-trash-alt text-secondary font-18"></i>
                </a>
            `;

            tablaSemestres.row(filaEditar).data([
                s.id,
                s.nombre,
                s.descripcion ?? '',
                estado,
                acciones
            ]).draw(false);

            Swal.fire({
                icon:'success',
                title:'¡Actualizado!',
                text:'El semestre se actualizó correctamente.',
                timer:2000,
                showConfirmButton:false
            });

            $('#editModal').modal('hide');

        },

        error:function(xhr){

            let errores = xhr.responseJSON?.errors;
            let mensaje = 'Ocurrió un error al actualizar.';

            if(errores){
                mensaje = Object.values(errores).join('<br>');
            }

            Swal.fire({
                icon:'error',
                title:'Error',
                html:mensaje
            });

        }

    });

});


/* =====================================================
   ELIMINAR SEMESTRE
===================================================== */

$('#tablaSemestres').on('click','.btn-eliminar-semestre',function(e){

    e.preventDefault();

    let id = $(this).data('id');
    let fila = $(this).closest('tr');

    Swal.fire({
        title:'¿Eliminar semestre?',
        text:'Esta acción no se puede deshacer.',
        icon:'warning',
        showCancelButton:true,
        confirmButtonColor:'#d33',
        cancelButtonColor:'#6c757d',
        confirmButtonText:'Sí, eliminar',
        cancelButtonText:'Cancelar'
    }).then((result)=>{

        if(result.isConfirmed){

            $.ajax({

                url:`/semestres/${id}`,
                type:'POST',

                data:{
                    _token:'{{ csrf_token() }}',
                    _method:'DELETE'
                },

                success:function(){

                    tablaSemestres.row(fila).remove().draw();

                    Swal.fire({
                        icon:'success',
                        title:'¡Eliminado!',
                        text:'El semestre fue eliminado correctamente.',
                        timer:2000,
                        showConfirmButton:false
                    });

                },

                error:function(){

                    Swal.fire({
                        icon:'error',
                        title:'Error',
                        text:'No se pudo eliminar el semestre.'
                    });

                }

            });

        }

    });

});

});

</script>

@endsection