@extends('header_nuevo_generico')
@section('main')
    <style>
        .columna {
            height: 70vh; 
            display: flex;
            align-items: center;
            justify-content: center;
            overflow-y: auto; 
            border-radius: 8px; 
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
        }

        .izquierda-columnaa {
            width: 40%; 
            padding: 20px; 
            background-color: #f8f9fa; 
        }

        .derecha-columnaa {
            width: 60%; 
            padding: 20px; 
            background-color: #e9ecef; 
        }

        textarea {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            border: 1px solid #ced4da; 
            border-radius: 4px; 
            padding: 10px;
            font-family: Arial, sans-serif; 
            font-size: 14px; 
            resize: none; 
        }
        
        .outline-red {
          border: 2px solid red;
        }

        .outline-red {
          border: 2px solid green;
        }

        modal#statusSuccessModal .modal-content, 
        .modal#statusErrorsModal .modal-content {
            border-radius: 30px;
        }
        .modal#statusSuccessModal .modal-content svg, 
        .modal#statusErrorsModal .modal-content svg {
            width: 100px; 
            display: block; 
            margin: 0 auto;
        }
        .modal#statusSuccessModal .modal-content .path, 
        .modal#statusErrorsModal .modal-content .path {
            stroke-dasharray: 1000; 
            stroke-dashoffset: 0;
        }
        .modal#statusSuccessModal .modal-content .path.circle, 
        .modal#statusErrorsModal .modal-content .path.circle {
            -webkit-animation: dash 0.9s ease-in-out; 
            animation: dash 0.9s ease-in-out;
        }
        .modal#statusSuccessModal .modal-content .path.line, 
        .modal#statusErrorsModal .modal-content .path.line {
            stroke-dashoffset: 1000; 
            -webkit-animation: dash 0.95s 0.35s ease-in-out forwards; 
            animation: dash 0.95s 0.35s ease-in-out forwards;
        }
        .modal#statusSuccessModal .modal-content .path.check, 
        .modal#statusErrorsModal .modal-content .path.check {
            stroke-dashoffset: -100; 
            -webkit-animation: dash-check 0.95s 0.35s ease-in-out forwards; 
            animation: dash-check 0.95s 0.35s ease-in-out forwards;
        }

        @-webkit-keyframes dash { 
            0% {
                stroke-dashoffset: 1000;
            }
            100% {
                stroke-dashoffset: 0;
            }
        }
        @keyframes dash { 
            0% {
                stroke-dashoffset: 1000;
            }
            100%{
                stroke-dashoffset: 0;
            }
        }
        @-webkit-keyframes dash { 
            0% {
                stroke-dashoffset: 1000;
            }
            100% {
                stroke-dashoffset: 0;
            }
        }
        @keyframes dash { 
            0% {
                stroke-dashoffset: 1000;}
            100% {
                stroke-dashoffset: 0;
            }
        }
        @-webkit-keyframes dash-check { 
            0% {
                stroke-dashoffset: -100;
            }
            100% {
                stroke-dashoffset: 900;
            }
        }
        @keyframes dash-check {
            0% {
                stroke-dashoffset: -100;
            }
            100% {
                stroke-dashoffset: 900;
            }
        }
        .box00{
            width: 100px;
            height: 100px;
            border-radius: 50%;
        }
    </style>    
    <div class="container-fluid">        
        <div class="row" style="margin-top:4%;">
            <div class="col-md-3">
                <h2 class="text-fidelitas"><b>Control de edictos</b></h2>
                <!-- <button id="archivoAnterior" type="button" class="btn btn-sm btn-secondary mb-2 d-none"><i class="bi bi-arrow-left"></i> Anterior</button> -->
                <button id="siguienteArchivo" type="button" class="btn btn-sm btn-secondary mb-2"><i class="bi bi-arrow-right"></i> Siguiente</button>
                <button id="siguienteArchivoJson" type="button" class="btn btn-sm btn-secondary mb-2 d-none"><i class="bi bi-arrow-right"></i> Siguiente</button>
                <button id="limpiarEspacio" type="button" class="btn btn-sm btn-danger mb-2"><i class="bi bi-trash"></i> Limpiar espacio</button>
                <button id="btnCargarTxt" type="button" class="btn btn-sm btn-primary mb-2"><i class="bi bi-save"></i> Carga de TXT</button>
                <button id="btnCompararjsonEdicto" type="button" class="btn btn-sm btn-primary mb-2"><i class="bi bi-search"></i> Etapa comparativa</button>
                <button id="btnGenerarJsonEtp" type="button" class="btn btn-sm btn-primary mb-2 d-none"><i class="bi bi-search"></i> Etapa generacion json</button>
            </div>                       
            <div class="col-md-9 d-flex justify-content-end align-items-center">
                <div id="cargandoGeneracionJson" class="spinner-border me-2 text-fidelitas d-none" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                <div id="divCarpetaArchivos" class="me-3 mb-4">                  
                    <label class="form-label" for="archivosAnalisis">Seleciona una carpeta:</label>
                    <select class="form-select form-select-sm" id="archivosAnalisis">
                        <option name="archivoTxt" value="opcion_default_carpeta" selected>Elija una opción...</option>
                        @if(isset($carpetasAssociativas) && !empty($carpetasAssociativas))
                            @foreach($carpetasAssociativas as $ruta => $nombre)                                
                                <option name="archivoTxt" value="{{$ruta}}">{{$nombre}}</option>                                
                            @endforeach
                        @endif
                    </select>  
                </div>
                <div id="divCarpetaArchivosComp" class="me-3 mb-4 d-none">                  
                    <label class="form-label" for="archivosAnalisisComp">Seleciona una carpeta:</label>
                    <select class="form-select form-select-sm" id="archivosAnalisisComp">
                        <option name="archivoTxtComp" value="opcion_default_carpetaComp" selected>Elija una opción...</option>
                        @if(isset($carpetasAssociativasAnl) && !empty($carpetasAssociativasAnl))
                            @foreach($carpetasAssociativasAnl as $ruta => $nombre)                                
                                <option name="archivoTxtComp" value="{{$ruta}}">{{$nombre}}</option>                                
                            @endforeach
                        @endif
                    </select>  
                </div>
                <div id="divPromptSelector" class="me-3 mb-4">
                    <label class="form-label" for="id_prompt">Selecionar Prompt:</label>
                    <select class="form-select form-select-sm" id="id_prompt">
                        <option name="opcionPrompt" value="opcion_default" selected>Elija una opción...</option>
                        @if(isset($datos_prompt) && !empty($datos_prompt))
                            @foreach($datos_prompt as $prompt)
                                @if($prompt->active == 1)
                                    <option name="opcionPrompt" value="{{$prompt->id_prompt}}">{{$prompt->prompt_name}}</option>
                                @endif
                            @endforeach
                        @endif
                    </select>
                </div>
                <div id="divSelectorEstadoJson" class="me-3 mb-4 d-none">
                    <label class="form-label" for="estado_valoracion">Selecionar estado:</label>
                    <select class="form-select form-select-sm" id="estado_valoracion">
                        <option name="opcionValoracionEst" value="opcion_default_est_val" selected>Elija una opción...</option>
                        <option name="opcionValoracionEst" value="aprobado" >Apobado</option>
                        <option name="opcionValoracionEst" value="editado" >Editado</option>
                        <option name="opcionValoracionEst" value="rechazado" >Rechazado</option>                        
                    </select>
                </div>                
                <button id="generarEdictoJson"type="button" class="btn btn-sm btn-info me-3" disabled ><i class="bi bi-arrow-clockwise"></i> Generar Json</button>
                <button id="btnBuscarCarpetaJson"type="button" class="btn btn-sm btn-primary me-3 d-none"><i class="bi bi-search"></i> Buscar carpeta</button>                                                 
                <div class="me-3 mb-4">
                    <label class="form-label" for="valoracionResultadoJson">Valoración:</label>
                    <select class="form-select form-select-sm" id="valoracionResultadoJson">
                        <option name="opcionValoracion" value="opcion_default_valoracion" selected>Elija una opción...</option>                        
                        <option name="opcionValoracion" value="0">Aprobado</option>
                        <option name="opcionValoracion" value="1">Editar</option>
                        <option name="opcionValoracion" value="2">Descartado</option>                        
                    </select>
                </div>
                <button id="guardarJson" type="button" class="btn btn-sm btn-fidelitas me-3" disabled ><i class="bi bi-save"></i> Guardar</button>
                <button id="guardarComparacion" type="button" class="btn btn-sm btn-fidelitas me-3 d-none"  ><i class="bi bi-save"></i> Guardar Comparacion</button>                 
            </div>
        </div>
        <form id="frmCargarEdicto" class="frmCargarEdicto">
            <input type="hidden" id="token" name="_token" value="{{ csrf_token() }}">
            <input type="hidden" id="nombreArchivo" name="nombreArchivo" value="">                        
            <input type="hidden" id="nombreArchivo2" name="nombreArchivo2" value="">                        

            <div class="row" style="margin-top:1%;">
                <h6 id="mostrarCantidadArchivos" class="text-secondary"></h6>
                <div class="col-md-6 izquierda-columnaa columna" id="izquierda-columnaa">
                    <textarea name="editorTxt" id="editorTxt" placeholder="Sección archivo .txt..."></textarea>                 
                </div>
                <div class="col-md-6 derecha-columnaa columna" id="derecha-columnaa">
                    <textarea id="editorJson" placeholder="Sección archivo .json..." readonly></textarea>
                </div>
            </div>  
        </form>                            
    </div>
    <div id="modalNoCarpeta" class="modal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-danger"><i class="bi bi-exclamation-triangle-fill" style="color: #dc3545;"></i>Contenido no encontrado</h5>
                </div>
                <div class="modal-body">
                    <p class="text-muted">El contenido que está buscando no fue encontrado, inténtelo más tarde.</p>
                </div>           
            </div>
        </div>
    </div>
    <div id="statusSuccessModal" class="modal fade"  tabindex="-1" role="dialog" data-bs-backdrop="static" data-bs-keyboard="false"> 
		<div class="modal-dialog modal-dialog-centered modal-sm" role="document"> 
			<div class="modal-content"> 
				<div class="modal-body text-center p-lg-4"> 
					<svg version="1.1" xmlns="" viewBox="0 0 130.2 130.2">
						<circle class="path circle" fill="none" stroke="#198754" stroke-width="6" stroke-miterlimit="10" cx="65.1" cy="65.1" r="62.1" />
						<polyline class="path check" fill="none" stroke="#198754" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" points="100.2,40.2 51.5,88.8 29.8,67.5 " /> 
					</svg> 
					<h4 class="text-success mt-3">Cargado!</h4> 
					<p class="mt-3">Cargado con exito.</p>
					<!-- <button type="button" class="btn btn-sm mt-3 btn-success" data-bs-dismiss="modal">Ok</button> --> 
				</div> 
			</div> 
		</div> 
	</div>
    <div id="cargarTxtCarpeta" class="modal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Cargar Archivos</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="frmSubirArchivosTxt">
                        <input type="hidden" id="token" name="_token" value="{{ csrf_token() }}">
                        <div class="mb-3">
                            <label for="selectorCarpetasArchivos" class="form-label">Provincia</label>
                            <select class="form-select" name="selectorCarpetasArchivos" id="selectorCarpetasArchivos" required="required">
                                <option name="subirArchivoTxt" value="opcionDefaultTxt" selected>Selecciona una opción</option>
                                @if(isset($carpetasAssociativas) && !empty($carpetasAssociativas))
                                    @foreach($carpetasAssociativas as $ruta => $nombre)                                
                                        <option name="subirArchivoTxt" value="{{$ruta}}">{{$nombre}}</option>                                
                                    @endforeach
                                @endif
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="archivosMultiplesTxt" class="form-label">Cargar Archivos</label>
                            <input class="form-control" type="file" name ="archivosTxtProvincia[]" id="archivosMultiplesTxt" accept=".txt" multiple required>
                            <small class="form-text text-muted">Solo se aceptan archivos con extensión .txt.</small>
                            <div id="alertaSubidaArchivo" class="alert alert-success d-none" role="alert"></div>
                            <div id="archivosNoGrabadosContainer" class="d-none">
                                <legend class="text-danger">Archivos descartados:</legend>
                                <ul id="archivosNoGrabadosList"></ul>
                            </div>
                        </div>                    
                        </div>
                        <div class="modal-footer">                          
                            <button type="button" class="btn btn-danger" data-bs-dismiss="modal"><i class="bi bi-x-circle"></i> Cancelar</button>
                            <button type="submit" class="btn btn-primary"><i class="bi bi-upload"></i> Cargar archivo</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('funcionesJS')
    <script type="text/javascript" src="{{ URL::asset('Libreria_CA/Js/comparador_edictos.js') }}"> </script>
@endsection