@extends('adminlte::page')

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

@section('title', 'Intranet | Nuevo Examen/Inducción de Trabajo')

@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-7">

                <div class="card card-primary">
                    <div class="card-header">
                        <h3 class="card-title">Nuevo Examen/Inducción de Trabajo</h3>
                    </div>

                    <form id="formularioDeExamenDeTrabajador">
                        @csrf

                        <div class="card-body">
                            <p style="color: red;margin-bottom: 7px;" >El campo tipo de selección de batería se utilizará para indicar qué selección se realizará en la coordinación del examen/inducción cuando se elija este examen/inducción de trabajo. </p>
                            <p style="color: red;margin-bottom: 4px;">-Opción Manual: En la coordinación del examen/inducción, el usuario debe seleccionar manualmente las baterías.</p>
                            <p style="color: red;">-Opción Automática: En la coordinación del examen/inducción, cuando el usuario selecciona el examen/inducción de trabajo, se seleccionan todas las baterías del examen/inducción de trabajo sin opción de elegir.</p>

                            <div class="form-group">
                                <label>Examen/Inducción de Trabajo</label>
                                <input type="text" id="campoExamenDeTrabajador" class="form-control" name="examen" value="{{ old('examen') }}">
                                <div class="invalid-feedback" id="validacionCampoExamenDeTrabajador">

                                </div>
                            </div>

                            <div class="form-group">
                                <label>Tipo de Examen/Inducción de Trabajo</label>
                                <select class="form-control listaDespegableConBuscador" id="campoTipoDeExamenDeTrabajador" name="tipo" data-live-search="true">
                                    <option value="">--Seleccionar Tipo de Examen/Inducción--</option>
                                    @foreach ($tiposDeExamenes as $tipoDeExamen)
                                        @if (old('tipo') == $tipoDeExamen)
                                            <option selected value="{{ $tipoDeExamen }}">{{ $tipoDeExamen }}</option>
                                        @else
                                            <option value="{{ $tipoDeExamen }}">{{ $tipoDeExamen }}</option>
                                        @endif
                                    @endforeach
                                </select>
                                <div class="invalid-feedback" id="validacionCampoTipoDeExamenDeTrabajador">

                                </div>
                            </div>

                            <div class="form-group">
                                <label>Faena</label>
                                <select class="form-control listaDespegableConBuscador" id="campoFaenaDeExamenDeTrabajador" name="id_faena[]" data-live-search="true" multiple="true" data-none-selected-text="--Seleccionar Faena--">
                                    @foreach ($faenas as $faena)
                                        @if (old('id_faena') == $faena->id)
                                            <option selected value="{{ $faena->id }}">{{ $faena->faena }}</option>
                                        @else
                                            <option value="{{ $faena->id }}">{{ $faena->faena  }}</option>
                                        @endif
                                    @endforeach
                                </select>
                                <div class="invalid-feedback" id="validacionCampoFaenaDeExamenDeTrabajador">

                                </div>
                            </div>

                            <div class="form-group">
                                <label>Tipo de Selección de Batería</label>
                                <select class="form-control listaDespegableConBuscador" id="campoTipoDeSeleccionDeBateriaDeLaSolicitud" name="tipo_seleccion_bateria" data-live-search="true">
                                    <option value="">--Seleccionar Tipo de Selección de Batería--</option>
                                    <option value="Manual">Manual</option>
                                    <option value="Automatico">Automatico</option>
                                </select>
                                <div class="invalid-feedback" id="validacionCampoTipoDeSeleccionDeBateriaDeLaSolicitud">

                                </div>
                            </div>

                            <div class="form-group">
                                <label for="cargo">Batería de Examen </label>
                                <div class="input-group">
                                    <input type="text" class="form-control" id="campoSubExamenDeTrabajador">
                                    <span class="input-group-append">
                                        <button type="button" class="btn btn-primary" onclick="agregarSubExamenDeTrabajador()">Añadir</button>
                                    </span>
                                </div>
                                <div class="invalid-feedback" id="validacionCampoSubExamenDeTrabajador">

                                </div>
                            </div>

                            <div class="alert alert-danger" role="alert" style="display: none;" id="errorSubExamenTrabajador"> </div>
                            <div class="dt-responsive table-responsive">
                                <table class="table table-striped table-bordered" role="grid" aria-describedby="base-style_info" id="tabla-sub-examenes-trabajadores">
                                    <thead>
                                        <tr role="row">
                                            <th>#</th>
                                            <th>Batería de Examen</th>
                                            <th>Acción</th>
                                        </tr>
                                    </thead>
                                    <tbody id="registroDeSubExamenesDeTrabajadores">
                                        <tr id="subExamenesDeTrabajadoresNoDisponibleEnLaTabla">
                                            <td colspan="3" class="text-center">No hay sub examenes de trabajo disponibles en la tabla</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class=" card-footer">
                            <button type="button" class="btn btn-primary" id="botonDeCreacion" onclick="registrarExamenDeTrabajador()"><i class="fas fa-plus-circle" style="margin-right: 2px;"></i> Crear Examen de Trabajo</button>
                            <a href="{{ route('examen-trabajador.index') }}" role="button" class="btn btn-secondary"><i class="fas fa-arrow-alt-circle-left" style="margin-right: 2px;"></i> Volver</a>
                        </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') }}">
@stop

@section('js')
    <script src="{{ asset('js/funcionalidades-genericas.js') }}"></script>
    <script>
        $('#campoFaenaDeExamenDeTrabajador').selectpicker({
            dropupAuto: false,
        });
        $('#campoTipoDeExamenDeTrabajador').selectpicker({
            dropupAuto: false,
        });
        $('#campoTipoDeSeleccionDeBateriaDeLaSolicitud').selectpicker({
            dropupAuto: false,
        });
    </script>

    <script>
        let indexSubExamenesDeTrabajadores = 0;
    
        function uuid() {
            var dt = new Date().getTime();
            var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
                var r = (dt + Math.random() * 16) % 16 | 0;
                dt = Math.floor(dt / 16);
                return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
            });
            return uuid;
        }

        function agregarSubExamenDeTrabajador() {
            let campoSubExamenDeTrabajador = document.getElementById("campoSubExamenDeTrabajador").value.trim();
            if (campoSubExamenDeTrabajador.length > 0) {
                let filas = document.getElementById('tabla-sub-examenes-trabajadores').tBodies[0].querySelectorAll("tr");
                let subExamenSeRepetoEnElTablaDeSubExamen=false;
                filas.forEach(fila=> {
                    if (fila.querySelector(".tabla-contador-subexamenes")) {
                        let subExamenDeTrabajador = fila.querySelector(".tabla-nombre-subexamen-subexamenes").innerHTML.trim();
                        if(subExamenDeTrabajador.toLowerCase()==campoSubExamenDeTrabajador.toLowerCase()){
                            subExamenSeRepetoEnElTablaDeSubExamen=true;
                        }
                    }
                });
    
                if(subExamenSeRepetoEnElTablaDeSubExamen==true){
                    document.getElementById("campoSubExamenDeTrabajador").setAttribute("class", "form-control is-invalid");
                    document.getElementById("validacionCampoSubExamenDeTrabajador").innerHTML = "El campo batería de examen esta repetido en la tabla de baterías de examen";
                    document.getElementById("validacionCampoSubExamenDeTrabajador").style.display="block";
                }else{
                    generarLoading('{{ asset('img/logo.png') }}')
                    indexSubExamenesDeTrabajadores++;
                    let codigoUnico=uuid();
                    if (document.getElementById("subExamenesDeTrabajadoresNoDisponibleEnLaTabla")) {
                        document.getElementById("subExamenesDeTrabajadoresNoDisponibleEnLaTabla").remove();
                    }

                    document.getElementById("registroDeSubExamenesDeTrabajadores").innerHTML +=
                        '<tr role="row" class="odd">' +
                        '<td style="display:none;" class="tabla-codigo-unico-subexamenes">' + codigoUnico + '</td>' +
                        '<td class="tabla-contador-subexamenes">' + indexSubExamenesDeTrabajadores+ '</td>' +
                        '<td class="tabla-nombre-subexamen-subexamenes">' + campoSubExamenDeTrabajador  + '</td>' +
                        '<td class="tabla-accion-subexamenes">' +
                        '<button onclick="habilitarBotonConfirmarEliminacionSubExamenDeTrabajador(this)" type="button" class="btn btn-danger mr-1"><i class="fas fa-trash-alt"></i></button>' +
                        '<button onclick="eliminarFilaSubExamenDeTrabajador(this)" style="display: none;" type="button" class="btn btn-danger boton-confirmar-subexamen mr-1">Confirmar</button>' +
                        '</td>' +
                        '</tr>';
            
                    document.getElementById("campoSubExamenDeTrabajador").value = "";
                    document.getElementById("validacionCampoSubExamenDeTrabajador").innerHTML = "";
                    document.getElementById("campoSubExamenDeTrabajador").setAttribute("class", "form-control"); 
                    eliminarLoading()
                }  
            } else {
                if (campoSubExamenDeTrabajador.length > 0) {
                    document.getElementById("campoSubExamenDeTrabajador").setAttribute("class", "form-control is-valid");
                    document.getElementById("validacionCampoSubExamenDeTrabajador").innerHTML = "";
                    document.getElementById("validacionCampoSubExamenDeTrabajador").style.display="none";
                } else {
                    document.getElementById("campoSubExamenDeTrabajador").setAttribute("class", "form-control is-invalid");
                    document.getElementById("validacionCampoSubExamenDeTrabajador").innerHTML = "El campo batería de examen es obligatorio para agregarlo";
                    document.getElementById("validacionCampoSubExamenDeTrabajador").style.display="block";
                }
            }
        }

        function deshabilitarBotonesConfirmarEliminacionSubExamenDeTrabajador() {
            let botones = document.querySelectorAll(".boton-confirmar-subexamen");
            botones.forEach(elemento => {
                elemento.style.display = 'none';
            });
        }
        
        function habilitarBotonConfirmarEliminacionSubExamenDeTrabajador(boton) {
        
            if (boton.nextElementSibling.style.display == 'none') {
                deshabilitarBotonesConfirmarEliminacionSubExamenDeTrabajador();
                boton.nextElementSibling.style.display = 'inline-block';
            } else {
                if (boton.nextElementSibling.style.display == 'inline-block') {
                    deshabilitarBotonesConfirmarEliminacionSubExamenDeTrabajador();
                }
            }
        
        }
        
        function eliminarFilaSubExamenDeTrabajador(boton) {
            let elementoFila = boton.parentElement.parentElement;
            elementoFila.remove();
            indexSubExamenesDeTrabajadores = 0;
            let filas = document.getElementById('tabla-sub-examenes-trabajadores').tBodies[0].querySelectorAll("tr");
            if (filas.length > 0) {
                filas.forEach(elemento => {
                    indexSubExamenesDeTrabajadores++;
                    elemento.querySelector(".tabla-contador-subexamenes").innerHTML = indexSubExamenesDeTrabajadores;
                });
            } else {
                document.getElementById("registroDeSubExamenesDeTrabajadores").innerHTML =
                    '<tr id="subExamenesDeTrabajadoresNoDisponibleEnLaTabla">' +
                    '<td colspan="3" class="text-center">No hay sub examenes de trabajadores disponibles en la tabla</td>' +
                    '</tr>';
            }
        }
    </script>

    <script>
        function validarCamposDelFormularioDeExamenDeTrabajador(data){
            if (typeof data.responseJSON.errors.examen !== 'undefined') {
                document.getElementById("campoExamenDeTrabajador").setAttribute("class", "form-control is-invalid");
                document.getElementById("validacionCampoExamenDeTrabajador").innerHTML = data.responseJSON.errors.examen;
            } else {
                document.getElementById("campoExamenDeTrabajador").setAttribute("class", "form-control is-valid");
                document.getElementById("validacionCampoExamenDeTrabajador").innerHTML = "";
            }

            if (typeof data.responseJSON.errors.tipo !== 'undefined') {
                document.getElementById("campoTipoDeExamenDeTrabajador").classList.remove('input-success-icon');
                document.getElementById("campoTipoDeExamenDeTrabajador").classList.add('input-error-icon');
                document.getElementById("validacionCampoTipoDeExamenDeTrabajador").innerHTML = data.responseJSON.errors.tipo;
                document.getElementById("validacionCampoTipoDeExamenDeTrabajador").style.display = "block";
            } else {
                document.getElementById("campoTipoDeExamenDeTrabajador").classList.remove('input-error-icon');
                document.getElementById("campoTipoDeExamenDeTrabajador").classList.add('input-success-icon');
                document.getElementById("validacionCampoTipoDeExamenDeTrabajador").innerHTML = "";
                document.getElementById("validacionCampoTipoDeExamenDeTrabajador").style.display = "none";
            }

            if (typeof data.responseJSON.errors.tipo_seleccion_bateria !== 'undefined') {
                document.getElementById("campoTipoDeSeleccionDeBateriaDeLaSolicitud").classList.remove('input-success-icon');
                document.getElementById("campoTipoDeSeleccionDeBateriaDeLaSolicitud").classList.add('input-error-icon');
                document.getElementById("validacionCampoTipoDeSeleccionDeBateriaDeLaSolicitud").innerHTML = data.responseJSON.errors.tipo_seleccion_bateria;
                document.getElementById("validacionCampoTipoDeSeleccionDeBateriaDeLaSolicitud").style.display = "block";
            } else {
                document.getElementById("campoTipoDeSeleccionDeBateriaDeLaSolicitud").classList.remove('input-error-icon');
                document.getElementById("campoTipoDeSeleccionDeBateriaDeLaSolicitud").classList.add('input-success-icon');
                document.getElementById("validacionCampoTipoDeSeleccionDeBateriaDeLaSolicitud").innerHTML = "";
                document.getElementById("validacionCampoTipoDeSeleccionDeBateriaDeLaSolicitud").style.display = "none";
            }

            if (typeof data.responseJSON.errors.id_faena !== 'undefined') {
                document.getElementById("campoFaenaDeExamenDeTrabajador").classList.remove('input-success-icon');
                document.getElementById("campoFaenaDeExamenDeTrabajador").classList.add('input-error-icon');
                document.getElementById("validacionCampoFaenaDeExamenDeTrabajador").innerHTML = data.responseJSON.errors.id_faena;
                document.getElementById("validacionCampoFaenaDeExamenDeTrabajador").style.display = "block";
            } else {
                document.getElementById("campoFaenaDeExamenDeTrabajador").classList.remove('input-error-icon');
                document.getElementById("campoFaenaDeExamenDeTrabajador").classList.add('input-success-icon');
                document.getElementById("validacionCampoFaenaDeExamenDeTrabajador").innerHTML = "";
                document.getElementById("validacionCampoFaenaDeExamenDeTrabajador").style.display = "none";
            }

            if (typeof data.responseJSON.errors.listado_subexamenes !== 'undefined') {
                document.getElementById("errorSubExamenTrabajador").innerHTML="Debe tener al menos una batería de examen agregado para registrar el examen de trabajo.";
                document.getElementById("errorSubExamenTrabajador").style.display="block";
            } else {
                document.getElementById("errorSubExamenTrabajador").innerHTML="";
                document.getElementById("errorSubExamenTrabajador").style.display="none";
            }
        }

        function limpiarCamposDelFormularioDeExamenDeTrabajador() {
            document.getElementById("campoExamenDeTrabajador").value = "";
            document.getElementById("validacionCampoExamenDeTrabajador").innerHTML = "";
            document.getElementById("campoExamenDeTrabajador").setAttribute("class", "form-control");

            $('#campoTipoDeExamenDeTrabajador').selectpicker('val', "");
            document.getElementById("validacionCampoTipoDeExamenDeTrabajador").innerHTML = "";
            document.getElementById("campoTipoDeExamenDeTrabajador").classList.remove('input-success-icon');
            document.getElementById("campoTipoDeExamenDeTrabajador").classList.remove('input-error-icon');
            document.getElementById("validacionCampoTipoDeExamenDeTrabajador").style.display = "none";

            $('#campoTipoDeSeleccionDeBateriaDeLaSolicitud').selectpicker('val', "");
            document.getElementById("validacionCampoTipoDeSeleccionDeBateriaDeLaSolicitud").innerHTML = "";
            document.getElementById("campoTipoDeSeleccionDeBateriaDeLaSolicitud").classList.remove('input-success-icon');
            document.getElementById("campoTipoDeSeleccionDeBateriaDeLaSolicitud").classList.remove('input-error-icon');
            document.getElementById("validacionCampoTipoDeSeleccionDeBateriaDeLaSolicitud").style.display = "none";

            $('#campoFaenaDeExamenDeTrabajador').selectpicker('val', "");
            document.getElementById("validacionCampoFaenaDeExamenDeTrabajador").innerHTML = "";
            document.getElementById("campoFaenaDeExamenDeTrabajador").classList.remove('input-success-icon');
            document.getElementById("campoFaenaDeExamenDeTrabajador").classList.remove('input-error-icon');
            document.getElementById("validacionCampoFaenaDeExamenDeTrabajador").style.display = "none";

            indexSubExamenesDeTrabajadores = 0;
            document.getElementById("registroDeSubExamenesDeTrabajadores").innerHTML=
            '<tr id="subExamenesDeTrabajadoresNoDisponibleEnLaTabla">'+
            '<td colspan="3" class="text-center">No hay sub examenes de trabajadores disponibles en la tabla</td>'+
            '</tr>';
            document.getElementById("errorSubExamenTrabajador").innerHTML="";
            document.getElementById("errorSubExamenTrabajador").style.display="none";
        }

        function registrarExamenDeTrabajador() {
            document.getElementById("botonDeCreacion").setAttribute("disabled", true);
            var datosFormulario = $("#formularioDeExamenDeTrabajador").serialize();
            generarLoading('{{ asset('img/logo.png') }}')

            let filas = document.getElementById('tabla-sub-examenes-trabajadores').tBodies[0].querySelectorAll("tr");
            let listadoDeSubExamenesTrabajadores = [];
            filas.forEach(fila=> {
                if (fila.querySelector(".tabla-contador-subexamenes")) {
                    let nombreSubExamen = fila.querySelector(".tabla-nombre-subexamen-subexamenes").innerHTML.trim();
                    let codigoUnico = fila.querySelector(".tabla-codigo-unico-subexamenes").innerHTML.trim();

                    let subExamen= {
                        nombreSubExamen: nombreSubExamen,
                        codigoUnico:codigoUnico
                    };
                    listadoDeSubExamenesTrabajadores.push(subExamen);
                }
            });

            if(listadoDeSubExamenesTrabajadores.length>0){
                listadoDeSubExamenesTrabajadores = JSON.stringify(listadoDeSubExamenesTrabajadores);
            }else{
                listadoDeSubExamenesTrabajadores = "";
            }

            let formData = new FormData();
            formData.append('examen', document.getElementById("campoExamenDeTrabajador").value.trim());
            formData.append('tipo', document.getElementById("campoTipoDeExamenDeTrabajador").value.trim());
            formData.append('tipo_seleccion_bateria', document.getElementById("campoTipoDeSeleccionDeBateriaDeLaSolicitud").value.trim());
            if($('#campoFaenaDeExamenDeTrabajador').val().length>0){
                formData.append('id_faena', JSON.stringify($('#campoFaenaDeExamenDeTrabajador').val()));
            }else{
                formData.append('id_faena', "");
            }
            formData.append('listado_subexamenes', listadoDeSubExamenesTrabajadores);
            let csrf = '{{ csrf_token() }}';

            console.log(JSON.stringify($('#campoFaenaDeExamenDeTrabajador').val()))
            $.ajax({
                url: '{{ route('examen-trabajador.store') }}',
                method: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': csrf
                },
                success: function(data) {
                    limpiarCamposDelFormularioDeExamenDeTrabajador();

                    Swal.fire({
                        icon: 'success',
                        title: '¡Examen de Trabajo Creado!',
                        text: 'El examen de trabajo ' + data.examen + ' se creo con éxito',
                        confirmButtonColor: "#448aff",
                        confirmButtonText: "Confirmar"
                    })

                    document.getElementById("botonDeCreacion").removeAttribute("disabled");
                    eliminarLoading()
                },
                error: function(data) {
                    console.log(data)
                    validarCamposDelFormularioDeExamenDeTrabajador(data);
                    Swal.fire({
                        icon: 'error',
                        title: '¡Errores en el Formulario!',
                        text: 'Revise los campos del formulario. Hay campos incompletos o que no cumple con los requisitos establecidos. Asegurase de completar todos los campos obligatorios y de corregir cualquier error señalado.',
                        confirmButtonColor: "#448aff",
                        confirmButtonText: "Confirmar"
                    })
                    document.getElementById("botonDeCreacion").removeAttribute("disabled");
                    eliminarLoading()
                }
            })
        }
    </script>
@stop