@extends('layouts.app')

@section('modals')
<!-- Modal -->
<div class="modal fade" id="modal-form" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Periodo</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <form id="form-add">
				@csrf
				<h4>Formulario del Periodo</h4>
				<hr>
				<br>
                <div class="row">
					<div class="form-group col-md-6">
						<label for="anio_inicio"><b>Año de inicio</b> *</label>
						<input type="date" name="anio_inicio" class="form-control" id="anio_inicio" required>
					</div>
                    <div class="form-group col-md-6">
                        <label for="anio_fin"><b>Año de fin</b> *</label>
                        <input type="date" name="anio_fin" class="form-control" id="anio_fin" required>
                    </div>
				</div>
				<div class="row">
                    <div class="form-group col-md-12">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="1" id="seleccionado" name="seleccionado">
                            <label class="form-check-label" for="seleccionado">
                                Establecer como predeterminado
                            </label>
                        </div>
                        <hr>
                        <div class="alert alert-info">
                            <p><i class="bi-info-circle"></i>  Esto se refiere a que el sistema registrara todas las inscripciones en este periodo, cuando desees consultar los periodos anteriores puedes cambiarlo.</p>
                        </div>
                    </div>
				</div>
				<hr>
				<button class="btn btn-success" id="btn-submit"><i class="fas fa-check"></i> Registrar periodo</button>
			</form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
        </div>
      </div>
    </div>
  </div>
@endsection

@section('content')

    <div class="container-fluid">
        <div class="white-box">
            <a href="#" class="btn btn-dark btn-lg" id="btn-add"><i class="fas fa-plus"></i> Crear periodo</a>                                
            <a href="{{route('home')}}" class="btn"><i class="fas fa-arrow-left"></i> Regresar al inicio</a>
        </div>
    </div>
    <hr>
    <div class="responsive-table">   
        <table class="table table-bordered" id="table-periodos">
            <thead>
                <th class="text-center">Año inicio</th>
                <th class="text-center">Año fin</th>
                <th class="text-center">Seleccionado</th>
                <th class="actions"></th>
            </thead>
            <tbody>
                
            </tbody>
        </table>
    </div>

@endsection

@section('scripts')
<script>
var id = "";
index();

$(document).on('click', '#btn-add', function(e){
	$("#form-edit").trigger('reset');
    $("#form-edit").attr('id', 'form-add');
    $('#btn-submit').attr('class', 'btn btn-success btn-lg').html('<i class="fa fa-check"></i> Registrar periodo');
	$("#modal-form").modal('show');
})

$(document).on('click', '#btn-refresh', function(e){
    index();
})

$(document).on('submit', '#form-add', function(e){
    e.preventDefault();
    let formData = new FormData(this);
    fetch('api/periodos', {
        method: 'POST',
        body: formData
    })
   .then(response => response.json())
   .then(res => {
        Swal.fire({
            position: "center",
            icon: "success",
            title: res.message,
            showConfirmButton: false,
            timer: 1500
        });
        $('#form-add').trigger('reset');
        index();
   });

})

$(document).on('submit', '#form-edit', function(e){
    e.preventDefault();
    let formData = new FormData(this);
    fetch(`api/periodos/${id}`, {
        method: 'POST',
        body: formData
    })
   .then(response => response.json())
   .then(res => {
        Swal.fire({
            position: "center",
            icon: "success",
            title: res.message,
            showConfirmButton: false,
            timer: 1500
        });
        $('#form-add').trigger('reset');
        index();
        periodoSelected();
   });

})

$(document).on('click', '.delete', function() {
    id = $(this).attr('data-id');
    Swal.fire({
        title: '¿Seguro de eliminar este registro?',
        text: "Esta acción no podrá ser revertida.",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        cancelButtonText: "Cancelar",
        confirmButtonText: '¡Si, eliminar ahora!'
    }).then((result) => {
        if (result.isConfirmed) {
            destroy(id);  
        }
    })	
})

$(document).on('click', '.edit', function() {
    id = $(this).attr('data-id');
	edit(id);  
	index();
})



function index(){
    $('#table-periodos').DataTable().destroy();
    $('#table-periodos').DataTable({
        responsive: true,
        language: {
            url: '{{asset("json/es-ES.json")}}',
        },
        "processing": true,  // Activa el mensaje interno de carga de DataTables
        "serverSide": false,  // Desactiva el modo servidor porque solo obtendremos datos sin paginación del lado del servidor
        "ajax": {
            "url": "/api/periodos",  // Ruta de la API en Laravel
            "type": "GET",
            "dataSrc": function(json) {
                // Oculta el preloader y muestra la tabla cuando los datos estén listos
                $('#preloader').hide();
                $('.responsive-table').fadeIn();
                return json; // Retorna los datos en formato adecuado para DataTables
            }
        },
        "columns": [
            { "data": "anio", "className": "text-center" },
            { "data": "nro_periodo", "className": "text-center" },
            { "data": null, "orderable": false, "searchable": false, "className": "text-right" } // Columna para los botones
        ],
        "columnDefs": [
            {
                "targets": -1, // Última columna
                "render": function(data, type, row) {
                    return `
                        <button class="btn btn-dark btn-sm editar" data-id="${row.id}">
                            <i class="fas fa-edit"></i>
                        </button>
                        <button class="btn btn-danger btn-sm eliminar" data-id="${row.id}">
                            <i class="fas fa-trash"></i>
                        </button>
                    `;
                }
            }
        ],
        "order": [[0, "desc"]], // Ordena por ID de manera descendente
    });
}

function destroy(id){
    fetch('api/periodos/'+id, {
        method: "DELETE"
    })
    .then(response => response.json())
    .then(res => {
        Swal.fire({
            position: "center",
            icon: "success",
            title: res.message,
            showConfirmButton: false,
            timer: 1500
        });
        index(); 
    })
}

function edit(id){
    fetch('api/periodos/'+id)
    .then(response => response.json())
    .then(res => {
        $('[name=anio_inicio]').val(res.data.anio_inicio.substr(0,4) + '-' + res.data.anio_inicio.substr(5,2) + '-' + res.data.anio_inicio.substr(8,2));
        $('[name=anio_fin]').val(res.data.anio_fin.substr(0,4) + '-' + res.data.anio_fin.substr(5,2) + '-' + res.data.anio_fin.substr(8,2));
        $('[name=seleccionado]').prop('checked', res.data.seleccionado == 1);
        $('#btn-submit').attr('class', 'btn btn-primary btn-lg').html('<i class="fa fa-check"></i> Actualizar registro');
		$('#form-add').attr('id', 'form-edit');
		$('#form-edit').prepend(`<input type='hidden' name="_method" value="PUT">`);
		$('#modal-form').modal('show');
    })
}
</script>
@endsection