@extends('adminlte::page')

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

@section('title', 'Intranet | Detalle de la Solicitud de Jornada Excepcional')

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

            <div class="card card-primary card-tabs">
                <div class="card-header p-0 pt-1">
                    <ul class="nav nav-tabs" id="custom-tabs-one-tab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="custom-tabs-one-home-tab" data-toggle="pill" href="#custom-tabs-one-home" role="tab" aria-controls="custom-tabs-one-home" aria-selected="true">Solicitud de Jornada Excepcional</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="custom-tabs-one-profile-tab" data-toggle="pill" href="#custom-tabs-one-profile" role="tab" aria-controls="custom-tabs-one-profile" aria-selected="false">Archivos</a>
                        </li>
                    </ul>
                </div>

                <form id="formularioDeSolicitudDeJornada">
                    @csrf
                    @method('put')
                    <div class="card-body">
                        <div class="tab-content" id="custom-tabs-one-tabContent">
                            <div class="tab-pane fade show active" id="custom-tabs-one-home" role="tabpanel" aria-labelledby="custom-tabs-one-home-tab">
                                <div class="contenedorDosCamposPorFilaEnLosFormulario">
                                    <div class="form-group">
                                        <label for="campoCorrelativoDeLaSolicitud">Correlativo</label>
                                        <input type="text" class="form-control" id="campoCorrelativoDeLaSolicitud" name="correlativo" value="{{ old('correlativo',$solicitud->correlativo) }}" readonly="true">
                                    </div>
                                    
                                    <div class="form-group">
                                        <label for="campoSolicitanteDeLaSolicitud">Nombre Solicitante</label>
                                        <input type="text" class="form-control" id="campoSolicitanteDeLaSolicitud" name="id_usuario" value="{{ old('id_usuario',$solicitud->solicitante->name) }}" readonly="true">
                                    </div>
    
                                    <div class="form-group">
                                        <label for="campoCentroDeCostoDeLaSolicitud">Centro de Costo</label>
                                        <input type="text" class="form-control" id="campoCentroDeCostoDeLaSolicitud" name="id_centro_costo" value="{{ old('id_centro_costo',$solicitud->centroDeCosto->centro_costo) }}" readonly="true">
                                    </div>
    
                                    <div class="form-group">
                                        <label for="campoContratoComercialDeLaSolicitud">Número Contrato</label>
                                        <input type="text" class="form-control" id="campoContratoComercialDeLaSolicitud" name="numero_contrato" value="{{ old('numero_contrato',$solicitud->numero_contrato) }}" readonly="true">
                                    </div>
    
                                    <div class="form-group">
                                        <label for="campoNombreContratoDeLaSolicitud">Nombre Contrato</label>
                                        <input type="text" class="form-control" id="campoNombreContratoDeLaSolicitud" name="nombre_contrato" value="{{ old('nombre_contrato',$solicitud->nombre_contrato) }}" readonly="true">
                                    </div>

                                    @if ($solicitud->servicio_vigente==true)
                                        <div class="form-group">
                                            <label for="campoVigenciaDelServicioDeLaSolicitud">Vigencia del Servicio</label>
                                            <input type="text" class="form-control" id="campoVigenciaDelServicioDeLaSolicitud" name="servicio_vigente" value="{{ old('servicio_vigente','Servicio Vigente') }}" readonly="true">
                                        </div>
                                    @else
                                        <div class="form-group">
                                            <label for="campoVigenciaDelServicioDeLaSolicitud">Vigencia del Servicio</label>
                                            <input type="text" class="form-control" id="campoVigenciaDelServicioDeLaSolicitud" name="servicio_vigente" value="{{ old('servicio_vigente','Servicio Nuevo') }}" readonly="true">
                                        </div>
                                    @endif
    
                                    <div class="form-group">
                                        <label for="campoFechaInicioaDeLaSolicitud">Fecha de Inicio del Contrato</label>
                                        <input type="date" class="form-control" id="campoFechaInicioaDeLaSolicitud" name="fecha_inicio_contrato" value="{{ old('fecha_inicio_contrato',$solicitud->fecha_inicio_contrato) }}" readonly="true">
                                    </div>

                                    <div class="form-group">
                                        <label for="campoFechaDireccionDeTrabajoDeLaSolicitud">Fecha DT</label>
                                        <input type="date" class="form-control" id="campoFechaDireccionDeTrabajoDeLaSolicitud" name="fecha_direccion_trabajo" value="{{ old('fecha_direccion_trabajo',$solicitud->fecha_direccion_trabajo) }}">
                                        <div class="invalid-feedback" id="validacionCampoFechaDireccionDeTrabajoDeLaSolicitud">
            
                                        </div>
                                    </div>
                                </div>
    
                                <div class="dt-responsive table-responsive">
                                    <table class="table table-striped table-bordered" role="grid" aria-describedby="base-style_info" id="tabla-cargos">
                                        <thead>
                                            <tr role="row">
                                                <th>#</th>
                                                <th>Cargo</th>
                                                <th>Descripción</th>
                                            </tr>
                                        </thead>
                                        <tbody id="registroDeCargos">
                                            @php
                                                $indexCargos=0;
                                            @endphp
                                            @if (count($solicitud->detalleDeCargos)>0)
                                                @foreach ($solicitud->detalleDeCargos as $detalle)
                                                    @php
                                                        $indexCargos++;
                                                    @endphp
                                                    <tr role="row" class="odd">
                                                        <td class="tabla-contador-cargos">{{$indexCargos}}</td>
                                                        <td class="tabla-nombre-cargo-cargos">{{$detalle->nombre_cargo}}</td>
                                                        <td class="tabla-descripcion-cargo-cargos">{{$detalle->descripcion_cargo}}</td>
                                                    </tr>
                                                @endforeach
                                            @else
                                                <tr id="cargosNoDisponibleEnLaTabla">
                                                    <td colspan="3" class="text-center">No hay cargos disponibles en la tabla</td>
                                                </tr>
                                            @endif
                                        </tbody>
                                    </table>
                                </div>
    
                                <div class="form-group">
                                    <label for="campoProcesoProductivoDeLaSolicitud">Descripción Detallada del Proceso Productivo</label>
                                    <textarea class="form-control" id="campoProcesoProductivoDeLaSolicitud" name="proceso_productivo" rows="3" readonly="true">{{ old('proceso_productivo',$solicitud->proceso_productivo) }}</textarea>
                                </div>
    
                                <div class="form-group">
                                    <label for="campoFundamentoCasoCalificadoDeLaSolicitud">Fundamentación del Caso Calificado <span style="font-weight: 700; font-size:11px;">(Acreditación de que se trata de procesos de trabajo continuos y de especial complejidad técnica o tecnológica, que dificultan o hacen inviable la aplicación de las reglas generales sobre distribución de jornadas y de descansos)</span></label>
                                    <textarea class="form-control" id="campoFundamentoCasoCalificadoDeLaSolicitud" name="fundamento_caso_calificado" rows="3" readonly="true">{{ old('fundamento_caso_calificado',$solicitud->fundamento_caso_calificado) }}</textarea>
                                </div>
                            </div>

                            <div class="tab-pane fade" id="custom-tabs-one-profile" role="tabpanel" aria-labelledby="custom-tabs-one-profile-tab">
                                <div class="dt-responsive table-responsive">
                                    <table class="table table-striped table-bordered" role="grid" aria-describedby="base-style_info" id="tabla-archivos">
                                        <thead>
                                            <tr role="row">
                                                <th>Acción</th>
                                                <th>Archivo</th>
                                                <th>Extensión</th>
                                                <th>Tipo</th>
                                            </tr>
                                        </thead>
                                        <tbody id="registroDeArchivos">
                                            @php
                                                $indexArchivos=0;
                                            @endphp
                                            @if (count($solicitud->archivos)>0)
                                                @foreach ($solicitud->archivos as $archivo)
                                                    <tr>
                                                        <td>
                                                            <div class="btn-group ">
                                                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                    Acciones
                                                                </button>
                                                                <div class="dropdown-menu">
                                                                    @if (validarSiElArchivoSePuedeVisualizar(strtolower($archivo->extension))==true)
                                                                        <a class="dropdown-item" href="#" onclick="visualizarArchivoRegistradoDeLaSolicitudDeJornada('{{ $archivo->nombre_archivo }}', '{{ strtolower(retornaTextoExtensionSegunExtensionDelArchivo($archivo->extension)) }}','{{ $archivo->id_solicitud_jornada }}')"><i class="fas fa-eye" aria-hidden="true"></i> Visualizar Archivo</a>
                                                                    @endif
                                                                    <a class="dropdown-item" href="{{ route('solicitud-jornada.descargar-archivo', $archivo) }}" target="_blank"><i class="fas fa-download" aria-hidden="true"></i> Descargar Archivo</a>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td>{{$archivo->nombre_archivo}}</td>
                                                        <td>{{ retornaTextoExtensionSegunExtensionDelArchivo($archivo->extension) }}</td>
                                                        <td>{{$archivo->tipo}}</td>
                                                    </tr>
                                                @endforeach
                                            @else
                                                <tr id="archivosNoDisponibleEnLaTabla">
                                                    <td colspan="4" class="text-center">No hay archivos disponibles en la tabla</td>
                                                </tr>
                                            @endif
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class=" card-footer">
                        <button type="button" class="btn btn-primary" id="botonDeEdicion" onclick="registrarFechaDeDireccionDeTrabajoDeLaSolicitudDeJornada()"><i class="fas fa-calendar-day" style="margin-right: 2px;"></i>Ingresar Fecha de Dirección de Trabajo</button>
                        <a href="{{ route('solicitud-jornada.index') }}" role="button" class="btn btn-secondary mt-1"><i class="fas fa-arrow-alt-circle-left" style="margin-right: 2px;"></i> Volver</a>
                    </div>
                </form>

            </div>

        </div>
    </div>
</div>

<div class="modal fade" id="modalVisualizarArchivo" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <form>
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header" style="background-color: #007bff; color:white;">
                    <h5 class="modal-title" id="modalTituloVisualizarArchivo"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color:white;">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div id="modalContenidoModalVisualizarArchivo" style="text-align: center;">

                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </form>
</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>
        function visualizarArchivoRegistradoDeLaSolicitudDeJornada(nombreArchivo, tipo, idSolicitudDeJornada) {
            let rutaUrl = 'storage/solicitud-jornada/' + idSolicitudDeJornada + '/' + nombreArchivo;
            let url = '{{ asset('') }}';
            url = url + rutaUrl;

            if (tipo.toLowerCase() == "imagen") {
                document.getElementById("modalContenidoModalVisualizarArchivo").innerHTML =
                '<img src="' + url + '" style="max-width: 100%;">';
            }else if(tipo == "pdf"){
                document.getElementById("modalContenidoModalVisualizarArchivo").innerHTML =
                    '<iframe src="' + url + '" style="width:95%; height:600px;"></iframe>';
            }else if(tipo == "archivo de texto"){
                document.getElementById("modalContenidoModalVisualizarArchivo").innerHTML =
                    '<iframe src="' + url + '" style="width:95%; height:600px;"></iframe>';
            }

            document.getElementById("modalTituloVisualizarArchivo").innerHTML = nombreArchivo;
            $("#modalVisualizarArchivo").modal("show");
        }
    </script>

    <script>
        function validarCamposDelFormularioDeSolicitudDeJornada(data) {
            if (typeof data.responseJSON.errors.fecha_direccion_trabajo !== 'undefined') {
                document.getElementById("campoFechaDireccionDeTrabajoDeLaSolicitud").setAttribute("class", "form-control is-invalid");
                document.getElementById("validacionCampoFechaDireccionDeTrabajoDeLaSolicitud").innerHTML = data.responseJSON.errors.fecha_direccion_trabajo;
            } else {
                document.getElementById("campoFechaDireccionDeTrabajoDeLaSolicitud").setAttribute("class", "form-control is-valid");
                document.getElementById("validacionCampoFechaDireccionDeTrabajoDeLaSolicitud").innerHTML = "";
            }
        }
    
        function limpiarCamposDelFormularioDeSolicitudDeJornada(){
            document.getElementById("campoFechaDireccionDeTrabajoDeLaSolicitud").value = "";
            document.getElementById("validacionCampoFechaDireccionDeTrabajoDeLaSolicitud").innerHTML = "";
            document.getElementById("campoFechaDireccionDeTrabajoDeLaSolicitud").setAttribute("class", "form-control");
        }
    
        function registrarFechaDeDireccionDeTrabajoDeLaSolicitudDeJornada(){
            document.getElementById("botonDeEdicion").setAttribute("disabled", true);
            generarLoading('{{ asset('img/logo.png') }}')
    
            let formData = new FormData();
            formData.append('_method', "PUT");
            formData.append('fecha_direccion_trabajo', document.getElementById("campoFechaDireccionDeTrabajoDeLaSolicitud").value.trim());
            let csrf = '{{ csrf_token() }}';
    
            $.ajax({
                    url: '{{ route('solicitud-jornada.update-fecha-direccion-trabajo',$solicitud) }}',
                    method: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    dataType: 'json',
                    headers: {
                        'X-CSRF-TOKEN': csrf
                    },
                    success: function(data) {
                        //limpiarCamposDelFormularioDeSolicitudDeJornada();
    
                        Swal.fire({
                            icon: 'success',
                            title: '¡Fecha de Dirección de Trabajo Ingresada!',
                            text: 'La fecha de dirección de trabajo de la solicitud de jornada excepcional '+data.correlativo+' se ingreso con éxito',
                            confirmButtonColor: "#448aff",
                            confirmButtonText: "Confirmar"
                        }).then((result) => {
                            location.href="{{route('solicitud-jornada.index')}}";
                        })
                        .catch((error) => {
                            location.href="{{route('solicitud-jornada.index')}}";
                        });
    
                        document.getElementById("botonDeEdicion").removeAttribute("disabled");
                        eliminarLoading()
                    },
                    error: function(data) {
                        console.log(data)
                        validarCamposDelFormularioDeSolicitudDeJornada(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("botonDeEdicion").removeAttribute("disabled");
                        eliminarLoading()
                    }
                })
        }
    </script>
@stop