@extends('layouts.layout-para-vista-sin-menus')

@section('plugins.Sweetalert2', true)
@section('plugins.Select1', true)

@section('title', 'Intranet | Ingresar Asistencias')

@section('content_header')
    <div class="container-fluid">

    </div>
@stop

@section('content')
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-lg-9">
                <div class="card card-primary" style="margin: 30px">
                    <div class="card-header">
                        <h3 class="card-title">Ingresar Asistencias</h3>
                    </div>
                    <form id="formularioDeBuscarTrabajador" enctype="multipart/form-data">
                        @csrf
                        <div class="card-body">
                            <div class="contenedorDosCamposPorFilaEnLosFormulario">

                                <div class="form-group" id="contenedorDelSeleccionadorDeArchivo">
                                    <label for="image">Seleccionar Archivo</label>
                                    <input type="file" name="image" class="form-control-file" accept="image/*"
                                        id="image">
                                    <div class="invalid-feedback" id="validacionCampoImagen"></div>
                                </div>

                                <div class="form-group">
                                    <label for="campoRutDelTrabajador">Rut del Trabajador</label>
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="campoRutDelTrabajador"
                                            name="rut_trabajador" value="{{ old('rut_trabajador') }}">
                                        <span class="input-group-append">
                                            <button type="button" class="btn btn-primary"
                                                onclick="buscarTrabajadorEnTalanaPorRut()">Buscar</button>
                                        </span>
                                        <div class="invalid-feedback" id="validacionCampoRutDelTrabajador"></div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="campoNombreDelTrabajador">Nombre del Trabajador</label>
                                    <input type="text" class="form-control" id="campoNombreDelTrabajador"
                                        name="nombre_trabajador" value="{{ old('nombre_trabajador') }}" readonly>
                                    <div class="invalid-feedback" id="validacionCampoNombreDelTrabajador"></div>
                                </div>

                                <div class="form-group">
                                    <label for="campoApellidoPaternoDelTrabajador">Apellido Paterno</label>
                                    <input type="text" class="form-control" id="campoApellidoPaternoDelTrabajador"
                                        name="apellido_paterno_trabajador" value="{{ old('apellido_paterno_trabajador') }}"
                                        readonly>
                                    <div class="invalid-feedback" id="validacionCampoApellidoPaternoDelTrabajador"></div>
                                </div>

                                <div class="form-group">
                                    <label for="campoApellidoMaternoDelTrabajador">Apellido Materno</label>
                                    <input type="text" class="form-control" id="campoApellidoMaternoDelTrabajador"
                                        name="apellido_materno_trabajador" value="{{ old('apellido_materno_trabajador') }}"
                                        readonly>
                                    <div class="invalid-feedback" id="validacionCampoApellidoMaternoDelTrabajador"></div>
                                </div>

                                <div class="form-group">
                                    <label for="campoCentroCosto">Centro de Costo</label>
                                    <input type="text" class="form-control" id="campoCentroCosto" name="centro_costo"
                                        value="{{ old('centro_costo') }}" readonly>
                                    <div class="invalid-feedback" id="validacionCampoCentroCosto"></div>
                                </div>

                                <div class="form-group">
                                    <label for="campoCargo">Cargo</label>
                                    <input type="text" class="form-control" id="campoCargo" name="cargo"
                                        value="{{ old('cargo') }}" readonly>
                                    <div class="invalid-feedback" id="validacionCargo"></div>
                                </div>

                                <div class="form-group">
                                    <label for="campoTurno">Tipo de Turno</label>
                                    <input type="text" class="form-control" id="campoTurno" name="turno"
                                        value="{{ old('jornada') }}" readonly>
                                    <div class="invalid-feedback" id="validacionTurno"></div>
                                </div>

                                <div class="form-group">
                                    <label for="campoFechaInicioTurno">Fecha Inicio Turno</label>
                                    <input type="date" class="form-control" id="campoFechaInicioTurno"
                                        name="fecha_inicio_turno" required>
                                    <div class="invalid-feedback" id="validacionFechaInicioTurno"></div>
                                </div>

                                <div class="form-group">
                                    <label for="campoFechaFinTurno">Fecha Fin Turno</label>
                                    <select class="form-control" id="campoFechaFinTurno" name="fecha_fin_turno" required>
                                        <option value="">Selecciona una fecha</option>
                                    </select>
                                    <div class="invalid-feedback" id="validacionFechaFinTurno"></div>
                                </div>

                                <input type="hidden" name="id_centro_costo" id="id_centro_costo"
                                    value="{{ old('id_centro_costo') }}">
                                <input type="hidden" name="id_usuario" id="id_usuario" value="{{ old('id') }}">
                                <input type="hidden" name="jornada" id="campoJornada" value="{{ old('jornada') }}">

                            </div>

                            <button type="button" class="btn btn-danger mb-3" id="botonDeLimpiarDatos"
                                onclick="limpiarDatosAsistencia()"><i class="fas fa-broom"
                                    style="margin-right: 2px;"></i> Limpiar Datos de Asistencia</button>

                            <div class="">
                                <button type="button" class="btn btn-success" id="botonDeCreacion"
                                    onclick="agregarAsistencia()"><i class="fas fa-plus-circle"
                                        style="margin-right: 2px;"></i>Guardar Asistencia</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@stop


@section('footer')
    <div class="float-right d-none d-sm-inline">
        Intranet
    </div>
    <strong>Copyright © 2021 <a href="http://guinezingenieria.cl/">GuiñezIngeniería.cl</a>.</strong>
@stop

@section('css')
    <link rel="stylesheet" href="{{ asset('css/estilo-generico.css') }}">
    <style>
        .celda-color-azul {
            background-color: #007bff;
            color: white;
        }

        .celda-color-gris {
            background-color: #C0BDB4;
        }
    </style>
@stop

@section('js')
    <script src="{{ asset('js/funcionalidades-genericas.js') }}"></script>

    <script>
        function buscarTrabajadorEnTalanaPorRut() {
            let rut = document.getElementById("campoRutDelTrabajador").value.trim();
            if (rut.length > 0) {
                let formData = new FormData();
                formData.append('rut', rut.replace(/\./g, ''));
                let csrf = '{{ csrf_token() }}';

                $.ajax({
                    url: '{{ route('asistencia.obtener-trabajador-talana') }}',
                    method: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    dataType: 'json',
                    headers: {
                        'X-CSRF-TOKEN': csrf
                    },
                    success: function(data) {
                        if (data.estado === "con_datos") {
                            document.getElementById("campoNombreDelTrabajador").value = data.datos.nombre;
                            document.getElementById("campoApellidoPaternoDelTrabajador").value = data.datos
                                .apellido_paterno;
                            document.getElementById("campoApellidoMaternoDelTrabajador").value = data.datos
                                .apellido_materno;
                            document.getElementById("campoCentroCosto").value = data.datos.centro_de_costo
                                .centro_costo;
                            document.getElementById("campoCargo").value = data.datos.cargo;
                            document.getElementById("campoTurno").value = data.datos.jornada;
                            document.getElementById("id_centro_costo").value = data.datos.id_centro_costo;
                            document.getElementById("id_usuario").value = data.datos.id;

                            let jornada = data.datos.jornada;
                            let jornadaFormato = jornada;
                            if (jornada === "5") {
                                jornadaFormato = "5x2";
                            } else if (jornada === "4") {
                                jornadaFormato = "4x4";
                            } else if (jornada === "7") {
                                jornadaFormato = "7x7";
                            }

                            document.getElementById("campoTurno").value = jornadaFormato;
                            document.getElementById("campoJornada").value = jornada;

                            calcularJornadaSegunTurno(jornadaFormato);

                            document.getElementById("campoRutDelTrabajador").setAttribute("readonly", "true");
                            document.getElementById("validacionCampoRutDelTrabajador").innerHTML = "";
                        } else if (data.estado === "sin_datos") {
                            document.getElementById("validacionCampoRutDelTrabajador").innerHTML =
                                "El trabajador no existe en la nómina.";
                        }
                    },
                    error: function(xhr) {
                        console.log(xhr);
                        alert("Hubo un error al buscar el trabajador. Inténtalo de nuevo.");
                    }
                });
            } else {
                document.getElementById("validacionCampoRutDelTrabajador").innerHTML = "El campo Rut es obligatorio.";
            }
        }


        function calcularJornadaSegunTurno(tipoTurno) {
            const partes = tipoTurno.split('x');
            let jornadaCalculada = 0;

            if (partes.length === 2) {
                const diasTrabajo = parseInt(partes[0]);
                const diasDescanso = parseInt(partes[1]);

                jornadaCalculada = diasTrabajo + diasDescanso;
                document.getElementById("campoJornada").value = jornadaCalculada;
            }
        }

        function limpiarDatosAsistencia() {
            document.getElementById("formularioDeBuscarTrabajador").reset();
            document.getElementById("campoRutDelTrabajador").removeAttribute("readonly");
            resetValidation();

            const selectFechaFinTurno = document.getElementById("campoFechaFinTurno");
            selectFechaFinTurno.value = "";
        }

        function resetValidation() {
            const fields = document.querySelectorAll('.form-control');
            fields.forEach(field => {
                field.classList.remove('is-invalid', 'is-valid');
            });
            const feedbacks = document.querySelectorAll('.invalid-feedback');
            feedbacks.forEach(feedback => {
                feedback.innerHTML = '';
            });
        }

        function agregarAsistencia() {
            const botonCreacion = document.getElementById("botonDeCreacion");
            botonCreacion.setAttribute("disabled", true);

            const camposRequeridos = [
                "campoRutDelTrabajador", "campoNombreDelTrabajador", "campoApellidoPaternoDelTrabajador",
                "campoApellidoMaternoDelTrabajador", "campoCentroCosto", "campoCargo", "campoTurno", "image"
            ];

            let mensaje = '';
            const hayErrores = camposRequeridos.some(campoId => {
                const campo = document.getElementById(campoId);
                const vacio = campoId === "image" ? campo.files.length === 0 : campo.value.trim() === '';
                if (vacio) mensaje += `El campo ${campo.labels[0].innerText} es requerido.\n`;
                return vacio;
            });

            if (hayErrores) {
                Swal.fire({
                    icon: 'error',
                    title: '¡Error!',
                    text: mensaje
                });
                botonCreacion.removeAttribute("disabled");
                return;
            }

            Swal.fire({
                title: '¿Está seguro?',
                text: "Se agregará la asistencia del trabajador",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: '¡Sí, agregar!',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    const tipoTurno = document.getElementById("campoTurno").value;
                    const campoJornada = document.getElementById("campoJornada");

                    if (tipoTurno === "5") {
                        campoJornada.value = "5x2";
                    } else if (tipoTurno === "4") {
                        campoJornada.value = "4x4";
                    } else if (tipoTurno === "7") {
                        campoJornada.value = "7x7";
                    }

                    console.log('Valor de campoJornada:', campoJornada.value);

                    const formData = new FormData(document.getElementById("formularioDeBuscarTrabajador"));
                    const csrf = '{{ csrf_token() }}';

                    $.ajax({
                        type: 'POST',
                        dataType: 'json',
                        url: '{{ route('asistencia.store') }}',
                        data: formData,
                        processData: false,
                        contentType: false,
                        headers: {
                            'X-CSRF-TOKEN': csrf
                        },
                        success: function(data) {
                            if (data.estado === "existe") {
                                Swal.fire({
                                    icon: 'error',
                                    title: '¡Error!',
                                    text: 'No es posible agregar la asistencia'
                                });
                            } else if (data.estado === "registrado") {
                                Swal.fire({
                                        icon: 'success',
                                        title: '¡Asistencia Agregada!',
                                        text: `La asistencia fue registrada correctamente.`
                                    })
                                    .then(() => location.reload());
                            }
                        },
                        error: function(xhr) {
                            console.log(xhr);
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: 'Hubo un problema al procesar la solicitud.'
                            });
                            botonCreacion.removeAttribute("disabled");
                        }
                    });
                } else {
                    botonCreacion.removeAttribute("disabled");
                }
            });
        }
    </script>
    <script>
        $(document).ready(function() {
            $('#formAsistencia').on('submit', function(event) {
                var fechaInicio = $('#fecha_inicio_turno').val();
                var fechaFin = $('#fecha_fin_turno').val();

                var regex = /^\d{4}-\d{2}-\d{2}$/;
                if (!regex.test(fechaInicio) || !regex.test(fechaFin)) {
                    alert('El formato de fecha debe ser YYYY-MM-DD');
                    event.preventDefault();
                }
            });
        });

        function actualizarFechaFinTurno() {
            const fechaInicioTurno = document.getElementById("campoFechaInicioTurno").value;
            const tipoTurno = document.getElementById("campoTurno").value;

            if (fechaInicioTurno && tipoTurno) {
                const inicio = new Date(fechaInicioTurno);
                inicio.setHours(0, 0, 0, 0); 

                let diasTrabajo = 0;
                let diasDescanso = 0;
                let jornadaReal = ''; 

                if (tipoTurno === "5x2") {
                    jornadaReal = "5";
                    diasTrabajo = 5;
                    diasDescanso = 2;
                } else if (tipoTurno === "4x4") {
                    jornadaReal = "4";
                    diasTrabajo = 4;
                    diasDescanso = 4;
                } else if (tipoTurno === "7x7") {
                    jornadaReal = "7"; 
                    diasTrabajo = 7;
                    diasDescanso = 7;
                }
                
                diasTrabajo = 30;
                diasDescanso = 0;

                document.getElementById("campoJornada").value = jornadaReal;

                const selectFechaFinTurno = document.getElementById("campoFechaFinTurno");
                selectFechaFinTurno.innerHTML = ""; 

                const opcionVacia = document.createElement("option");
                opcionVacia.value = "";
                opcionVacia.textContent = "Selecciona una fecha";
                selectFechaFinTurno.appendChild(opcionVacia);

                const fechasFinTurno = [];
                let fechaFin = new Date(inicio);

                for (let i = 0; i < 2; i++) {
                    const fechaFinCalculada = new Date(fechaFin);
                    fechaFinCalculada.setDate(fechaFin.getDate() + diasTrabajo); 

                    const dia = fechaFinCalculada.getDate().toString().padStart(2, '0');
                    const mes = (fechaFinCalculada.getMonth() + 1).toString().padStart(2, '0');
                    const anio = fechaFinCalculada.getFullYear();

                    const fechaFormateada = `${dia}-${mes}-${anio}`;
                    fechasFinTurno.push(fechaFormateada);

                    fechaFin.setDate(fechaFin.getDate() + diasTrabajo + diasDescanso);
                }

                fechasFinTurno.forEach(fecha => {
                    const option = document.createElement("option");
                    option.value = fecha;
                    option.textContent = fecha;
                    selectFechaFinTurno.appendChild(option);
                });
            }
        }

        document.getElementById("campoFechaInicioTurno").addEventListener("change", function() {
            actualizarFechaFinTurno();
        });
    </script>
@stop