@extends('layout')

@section('title', 'Ingresa una PQRFS | ')

@section('content')


<!-- Header -->
<header class="py-5 sticky-top" style="background-color: #C5D336">
  <div class="container h-100">
    <div class="row h-100 align-items-center">
      <div class="col-lg-12">
        <strong class="text-white mt-5"></strong>
      </div>
    </div>
  </div>
</header>

<div class="container mt-3 py-3 rounded" style="background-color: #001D62">
  <div class="row">
    <div class="col">
      <p class=" mb-3 text-light text-justify" style="font-size: 18px">
            Para Linea Comunicaciones S.A.S es muy importante contar con usted. En pro de mejorar los servicios y trámites que ofrecemos a nuestros grupos de interés, se ha diseñado el siguiente formulario, a través del cual usted podrá registrar sus Peticiones, Quejas, Reclamos y/o Sugerencias sobre temas de nuestro interés. Con el ánimo de tener una mejora continua en cada uno de nuestros procesos internos y externos.
          </p>
          <p class="text-light text-justify" style="font-size: 18px">
            Le recordamos que usted tiene la posibilidad de acceder en cualquier momento a sus datos personales y el derecho de solicitar expresamente, en cualquier momento, su corrección, actualización o supresión, en los términos establecidos por la Ley 1581 de 2012, dirigiendo una comunicación escrita al correo electrónico: <strong> lineainfo@lineacom.co</strong>
          </p>
    </div>
  </div>
</div>

<div class="container mt-5">
  <form method="POST" action="{{route('pqrfs.store')}}" onsubmit="return validateTyC()" autocomplete="off" enctype="multipart/form-data" >
    @csrf
    {{-- modal de carga --}}
    <div id="load" style="display: none" >
      <div  style="display: flex; justify-content: center; align-items: center; background-color:black; 
                position: fixed; top: 0px; left: 0px; z-index: 9999; width: 100%; height: 100%; opacity: .40">
        <div class="la-ball-pulse la-2x">
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
    </div>

    {{-- Carousel PQRFS  --}}
    <div class="row">
      <div class="col-md-12 mb-4">
        <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
          <div class="carousel-inner rounded-lg">
            <div class="carousel-item active">
              <div class="row row-cols-3 align-items-center">
                <div class="col">
                  <div class="card shadow-sm mb-1 bg-white" style="height: 10rem;">
                    <div class="card-header text-center" style="margin-bottom: -10px; background:rgb(233, 233, 233)">
                        <i class="far fa-question-circle" ></i><strong style="font-size: 14px;"> Petición </strong>
                    </div>
                    <div class="card-body overflow-auto">
                      <p class="card-text" style="font-size: 12px">Es toda solicitud que se hace en forma verbal, escrita o por cualquier otro medio, con el fin de requerir su intervención en un asunto concreto.</p>
                    </div>
                  </div>
                </div>
                <div class="col">
                  <div class="card shadow-sm mb-1 bg-white" style="height: 10rem;">
                    <div class="card-header text-center" style="margin-bottom: -10px; background:rgb(233, 233, 233)">
                        <i class="far fa-times-circle" ></i><strong style="font-size: 14px;"> Queja </strong>
                    </div>
                    <div class="card-body overflow-auto">
                      <p class="card-text" style="font-size: 12px">Poner en conocimiento, irregularidades de los diferentes procesos o personas que intervienen en la prestación de un servicio.</p>
                    </div>
                  </div>
                </div>
                <div class="col">
                  <div class="card shadow-sm mb-1 bg-white" style="height: 10rem;">
                    <div class="card-header text-center" style="margin-bottom: -10px; background:rgb(233, 233, 233)">
                        <i class="fas fa-exclamation"></i><strong style="font-size: 14px;"> Reclamo </strong>
                    </div>
                    <div class="card-body mb-2 overflow-auto">
                      <p class="card-text" style="font-size: 12px">Consiste en solicitar una explicación sobre la suspensión injustificada o la prestación deficiente de un servicio.</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="carousel-item">
              <div class="row row-cols-3 align-items-center">
                <div class="col">
                  <div class="card shadow-sm mb-1 bg-white" style="height: 10rem;">
                    <div class="card-header text-center " style="margin-bottom: -10px; background:rgb(233, 233, 233)">
                        <i class="far fa-comment-dots" ></i><strong style="font-size: 14px; "> Sugerencia </strong>
                    </div>
                    <div class="card-body mb-2 overflow-auto">
                      <p class="card-text" style="font-size: 12px">Recomendación realizada por parte de los usuarios con el fin de mejorar en la prestación de los servicios ofrecidos por Linea Comunicaciones S.A.S. Articulado al Sistema de Mejora de la compañia.</p>
                    </div>
                  </div>
                </div>
                <div class="col">
                  <div class="card shadow-sm mb-1 bg-white" style="height: 10rem;">
                    <div class="card-header text-center" style="margin-bottom: -10px; background:rgb(233, 233, 233)">
                        <i class="fas fa-search"></i><strong style="font-size: 14px; "> Consulta </strong>
                    </div>
                    <div class="card-body overflow-auto">
                      <p class="card-text" style="font-size: 13px">Consiste en examinar un asunto al pedir datos sobre algún tema en especifico o pedir un consejo.</p>
                    </div>
                  </div>
                </div>
                <div class="col">
                  <div class="card shadow-sm mb-1 bg-white" style="height: 10rem;">
                    <div class="card-header text-center" style="margin-bottom: -10px; background:rgb(233, 233, 233)">
                        <i class="far fa-check-circle" ></i><strong style="font-size: 14px; "> Felicitaciones </strong>
                    </div>
                    <div class="card-body mb-2 overflow-auto">
                      <p class="card-text" style="font-size: 12px">Acciones documentadas donde los usuarios expresan y dejan de manera escrita o verbal su satisfacción por los servicios recibidos por parte de Linea Comunicaciones S.A.S.</p>
                    </div>
                  </div>
                </div>
              </div>  
            </div>
            <div class="carousel-item">
              <div class="row row-cols-2 align-items-center">
                  <div class="col">
                  <div class="card shadow-sm mb-1 bg-white" style="height: 10rem;">
                    <div class="card-header text-center " style="margin-bottom: -10px; background:rgb(233, 233, 233)">
                        <i class="fas fa-cube" ></i><strong style="font-size: 14px;"> Incidente De Seguridad De La Información </strong>
                    </div>
                    <div class="card-body mb-2 overflow-auto">
                      <p class="card-text" style="font-size: 12px">Acceso, intento de acceso, uso, divulgación, modificación o destrucción no autorizada de información; un inpedimento en la operación normal de las redes, sistemas o recursos informaticos; o una violación a la politica integral de seguridad de la información.</p>
                    </div>
                  </div>
                </div>
                <div class="col">
                  <div class="card shadow-sm mb-1 bg-white" style="height: 10rem;">
                    <div class="card-header text-center " style="margin-bottom: -10px; background:rgb(233, 233, 233)">
                        <i class="fas fa-cube" ></i><strong style="font-size: 14px;"> Salida No Conforme </strong>
                    </div>
                    <div class="card-body mb-2 overflow-auto">
                      <p class="card-text" style="font-size: 12px">La salida no conforme es un producto, servicio o salida de un proceso que no cumple con los requerimientos o características definidos que puede ser reportado por los colaboradores, el cliente u otra parte interesada frente a la prestación del servicio de Linea Comunicaciones. S.A.S</p>
                    </div>
                  </div>
                </div>
              </div>  
            </div>
          </div>
          <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>
    </div>

    {{-- FORMULARIO --}}
    <div class="row">
      {{-- TIPO DE PQRFS --}}
      <div class="col-md-4 mt-4">
        <div class="card">
          <strong class="card-header" style="font-size: 13px">Seleccione tipo de PQRFS <a style="color: red">*</a></strong>
          <div class="card-body">
            <div id="divTipoPQRS">
              <select id="tipoPQRS" name="tipoPQRS" class="form-control form-control-sm" required>
                <option selected></option>
                @foreach ($tipos as $tipo)
                    <option value="{{$tipo->id}}">{{$tipo->name}}</option>
                @endforeach
              </select>
            </div>
          </div>
        </div>
      </div>
    </div>

    {{-- INFORMACION BASICA - Peticion, Queja, Reclamo, Sugerencia, Consulta, Felicitaciones, Inc. Seguridad --}}
    <div class="row">
      <div class="col my-3" id="divInformacionBasica" style="display:none ">
        <div class="card">
          <strong class="card-header" style="font-size: 13px">Información básica</strong>
          <div class="card-body">
            <div class="form-row">
              <div class="form-group col-md-4">
                <label for="email" style="font-size: 13px">Dirección de correo electrónico <a style="color: red">*</a></label>
                <input type="email" class="form-control form-control-sm text-lowercase" name="email" id="email" value="{{old('email')}}">
              </div>
              <div class="form-group col-md-4">
                <label for="nombre" style="font-size: 13px">Nombre de quien levanta la PQRS <a style="color: red">*</a></label>
                <input type="text" class="form-control form-control-sm text-capitalize" name="nombre" id="nombre">
              </div>
              <div class="form-group col-md-4">
                <label for="fechaSolicitud" style="font-size: 13px">Fecha de la Solicitud <a style="color: red">*</a></label>
                <input type="date" class="form-control form-control-sm" name="fechaSolicitud" id="fechaSolicitud">
              </div>
            </div>
            <div class="form-row align-items-center">
              <div class="form-group col-md-4">
                <label for="relacionConLinea" style="font-size: 13px">Relación con Línea Comunicaciones <a style="color: red">*</a></label>
                <select id="relacionConLinea" name="relacionConLinea" class="form-control form-control-sm">
                  <option selected></option>
                  @foreach ($relaciones as $relacion)
                      <option value="{{$relacion->id}}">{{$relacion->name}}</option>
                  @endforeach
                </select>
              </div>
              <div class="form-group col-md-3">
                <label for="razonSocialAreaProyecto" style="font-size: 13px"> 
                    Razón Social, Área o Proyecto <a style="color: red">*</a>
                  <i 
                    class="fas fa-exclamation-circle" 
                    title="Si es cliente o proveedor escriba la razón social de la empresa a la que pertenece &#13;Si es del personal administrativo o de campo escriba el Área o Proyecto al que pertenece &#13;Si es otro, ¿cuál?"
                    style="cursor: pointer; color: rgb(156, 155, 155)"
                    >
                  </i>
                </label>
                <input type="text" class="form-control form-control-sm text-uppercase" name="razonSocialAreaProyecto" id="razonSocialAreaProyecto">
              </div>
                <div class="form-group col-md-3">
                  <label for="cargo" style="font-size: 13px">Cargo <a style="color: red">*</a></label>
                  <input type="text" class="form-control form-control-sm text-uppercase" name="cargo" id="cargo">
              </div>
                <div class="form-group col-md-2">
                  <label for="telefono" style="font-size: 13px">Telefono <a style="color: red">*</a></label>
                  <input type="text" class="form-control form-control-sm" name="telefono" id="telefono"  minlength="7" maxlength="10">
                </div>
            </div>
            <div class="form-row">
              <div class="form-group col-md-4" id="divCiudad">
                  <label for="ciudad" style="font-size: 13px">Ciudad o Municipio <a style="color: red">*</a></label>
                  <input type="text" class="form-control form-control-sm text-uppercase" name="ciudad" id="ciudad">
              </div>
              <div class="form-group col-md-4" id="divAreaImplicada">
                <label for="areaImplicada" style="font-size: 13px">Área implicada <a style="color: red">*</a></label>
                <select id="areaImplicada" name="areaImplicada" class="form-control form-control-sm">
                  <option selected></option>
                  @foreach ($areas as $area)
                      <option value="{{$area->id}}">{{$area->name}}</option>
                  @endforeach
                </select>
              </div>
              <div class="form-group col-md-4" id="divOtraAreaImplicada" style="display: none;">
                <label for="otraAreaImplicada" style="font-size: 13px">¿Cual?</label>
                <input type="text" class="form-control form-control-sm text-capitalize" name="otraAreaImplicada" id="otraAreaImplicada">
              </div>
              
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-12" id="divDescripcion" style="display:none ">
        <div class="card">
          <strong class="card-header" style="font-size: 13px">Descripción de la PQRFS</strong>
          <div class="card-body">
            <div class="form-row">
              <div class="form-group col-md-12">
                <textarea class="form-control" name="descripcion" id="descripcion" rows="5" ></textarea>
              </div>
            </div>
            <div class="form-row">
              <div class="form-group col-md">
                <label for="archivoPQRFS"><small>Puede elegir uno o varios archivos para adjuntar</small></label>
                <div class="input-group">
                  <div class="input-group-prepend">
                    <span class="input-group-text" id="inputGroupFileAddon01"> </span>
                  </div>
                  <div class="custom-file">
                    <input type="file" class="custom-file-input" id="archivoPQRFS" name='archivoPQRFS[]' multiple aria-describedby="inputGroupFileAddon01">
                    <label class="custom-file-label" for="inputGroupFile01" id="namefile01">Elejir archivo</label>
                  </div>
                </div>
              </div>
            </div>
            <div id="adjuntosPQRFS" class="adjuntosPQRFS">
            </div>
          </div>
        </div>
      </div>
    </div>

    {{-- FORMULARIO PROPUESTA DE MEJORA --}}
    <div class="row">
      <div class="col-md my-3" id="divInnovar" style="display:none;">
        <div class="row">
          <div class="col">
            <div class="card">
              <strong class="card-header" style="font-size: 13px">Pasión Por Innovar</strong>
              <div class="card-body">
                <div class="form-row">
                  <div class="form-group col-md" id="divNombrePropuesta">
                    <label for="nombrePropuesta" style="font-size: 13px">Nombre de la Propuesta <a style="color: red">*</a></label>
                    <input type="text" class="form-control form-control-sm text-uppercase" name="nombrePropuesta" id="nombrePropuesta">
                  </div>
                  <div class="form-group col-md" id="divItem">
                    <label for="item" style="font-size: 13px">
                      Ítem al que aporta <a style="color: red">*</a>
                      <i 
                        class="fas fa-exclamation-circle" 
                        title="Muda que será trabajada ya sea para eliminar disminuir o contener el problema y mejorar los procesos."
                        style="cursor:pointer; color: rgb(156, 155, 155)"
                        >
                      </i>
                    </label>
                    <select name="item" id="item" class="form-control form-control-sm">
                      <option selected></option>
                        @foreach ($items as $item)
                            <option value="{{$item->id}}">{{$item->name}}</option>
                        @endforeach
                    </select>
                  </div>
                  <div class="form-group col-md" id="divOtroItem" style="display: none;">
                    <label for="itemOtro" style="font-size: 13px">¿Cual?</label>
                    <input type="text" class="form-control form-control-sm text-uppercase" name="itemOtro" id="itemOtro">
                  </div>
                </div>
                <div class="form-row">
                  <div class="form-group col-md-6" id="divNivelImpacto">
                    <label for="nivelImpacto" style="font-size: 13px">
                      El impacto de la propuesta es a nivel <a style="color: red">*</a>
                    </label>
                      <select name="nivelImpacto" id="nivelImpacto" class="form-control form-control-sm">
                        <option selected></option>
                        <option value="1">De toda la compañia</option>
                        <option value="2">De una área especifica</option>
                        <option value="3">De un equipo de trabajo</option>
                      </select>
                  </div>
                  <div class="form-group col-md" id="divOtroNivel" style="display: none;">
                    <label for="otroNivel" style="font-size: 13px">¿Cual?</label>
                    <input type="text" class="form-control form-control-sm text-uppercase" name="otroNivel" id="otroNivel">
                  </div>
                </div>
                <div class="form-row">
                  <div class="form-group col-md-6">
                    <label for="situacionActual" style="font-size: 13px">Cual es la situación actual soportada en datos que desea mejorar <a style="color: red">*</a></label>
                    <textarea type="text" class="form-control form-control-sm" id="situacionActual" name="situacionActual" rows="2"></textarea>
                  </div>
                  <div class="form-group col-md-6">
                    <label for="situacionFinal" style="font-size: 13px">Cual es la situación final mejora o innovación realizada <a style="color: red">*</a></label>
                    <textarea type="text" class="form-control form-control-sm" id="situacionFinal" name="situacionFinal" rows="2"></textarea>
                  </div>
                </div>
                <div class="form-row">
                  <div class="form-group col-md">
                    <label for="archivo"><small>Puede elegir uno o varios archivos para adjuntar</small></label>
                    <div class="input-group">
                      <div class="input-group-prepend">
                        <span class="input-group-text" id="inputGroupFileAddon01"> </span>
                      </div>
                      <div class="custom-file">
                        <input type="file" class="custom-file-input" id="archivoPropuesta" name='archivoPropuesta[]' multiple="" aria-describedby="inputGroupFileAddon01">
                        <label class="custom-file-label" for="inputGroupFile02" id="namefile02">Elejir archivo</label>
                      </div>
                    </div>
                  </div>
                </div>
                <div id="adjuntosPropuestas" class="adjuntosPropuestas">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    {{-- INFORMACION BASICA - SNC--}}
    <div class="row">
      <div class="col my-3" id="divInformacionBasicaSNC" style="display:none">
        <div class="card">
          <strong class="card-header" style="font-size:13px;">Información básica</strong>
          <div class="card-body">
            <div class="form-row">
              <div class="form-group col-md-4">
                <label for="emailSNC" style="font-size: 13px">Dirección de correo electrónico <a style="color: red">*</a></label>
                <input type="email" class="form-control form-control-sm text-lowercase" name="emailSNC" id="emailSNC" value="{{old('email')}}">
              </div>
              <div class="form-group col-md-4">
                <label for="nombreSNC" style="font-size: 13px">Nombre <a style="color: red">*</a></label>
                <input type="text" class="form-control form-control-sm text-capitalize" name="nombreSNC" id="nombreSNC">
              </div>
              <div class="form-group col-md-4">
                <label for="fechaOcurrencia" style="font-size: 13px">Fecha de ocurrencia <a style="color: red">*</a></label>
                <input type="date" class="form-control form-control-sm" name="fechaOcurrencia" id="fechaOcurrencia">
              </div>
            </div>
            <div class="form-row align-items-center">
              <div class="form-group col-md-3">
                <label for="proyectoSNC" style="font-size: 13px">Proyecto <a style="color: red">*</a></label>
                <select id="proyectoSNC" name="proyectoSNC" class="form-control form-control-sm">
                  <option selected></option>
                  @foreach ($proyectos as $proyecto)
                      <option value="{{$proyecto->id}}">{{$proyecto->name}}</option>
                  @endforeach
                </select>
              </div>
              <div class="form-group col-md-3" id="divOtroProyectoSNC" style="display:none;">
                <label for="otroProyectoSNC" style="font-size: 13px">¿Cual?</label>
                <input type="text" class="form-control form-control-sm text-uppercase" name="otroProyectoSNC" id="otroProyectoSNC">
              </div>
              <div class="form-group col-md-3">
                <label for="clienteSNC" style="font-size: 13px">Cliente <a style="color: red">*</a></label>
                <input type="text" class="form-control form-control-sm text-uppercase" name="clienteSNC" id="clienteSNC">
              </div>
              <div class="form-group col-md-3">
                <label for="ciudadSNC" style="font-size: 13px">Ciudad <a style="color: red">*</a></label>
                <input type="text" class="form-control form-control-sm text-uppercase" name="ciudadSNC" id="ciudadSNC">
              </div>  
              <div class="form-group col-md-3">
                <label for="tipoProblemaSNC" style="font-size: 13px">Tipo de Problema Presentado <a style="color: red">*</a></label>
                <select id="tipoProblemaSNC" name="tipoProblemaSNC" class="form-control form-control-sm">
                  <option selected></option>
                  @foreach ($tipos_problemas as $tipo_problema)
                      <option value="{{$tipo_problema->id}}">{{$tipo_problema->name}}</option>
                  @endforeach
                </select>
              </div>
            </div>
            <div class="form-row">
              <div class="form-group col-md-3">
                <label for="sitioSNC" style="font-size: 13px">Sitio <a style="color: red">*</a></label>
                <input type="text" class="form-control form-control-sm text-uppercase" name="sitioSNC" id="sitioSNC">
              </div>
              <div class="form-group col-md-3">
                <label for="nivelImpactoSNC" style="font-size: 13px">Nivel de impacto <a style="color: red">*</a></label>
                <select id="nivelImpactoSNC" name="nivelImpactoSNC" class="form-control form-control-sm">
                  <option selected></option>
                  @foreach ($niveles_impacto as $nivel_impactp)
                      <option value="{{$nivel_impactp->id}}">{{$nivel_impactp->name}}</option>
                  @endforeach
                </select>
              </div> 
              <div class="form-group col-md-3" id="divPlanDeAccion" style="display: none">
                <label for="nivelImpactoSNC" style="font-size: 13px" >¿Desea agregar sugerencias para solventar la salida no conforme?</label>
                <div class="custom-control custom-switch">
                  <input type="checkbox" class="custom-control-input" id="checkPlanAccion">
                  <label id="labelPlanAccion" class="custom-control-label" for="checkPlanAccion" style="font-size: 14px">No</label>
                </div>
              </div>  
            </div>
          </div>
        </div>
      </div>
    </div>

    {{-- CONTRAMEDIDAS --}}
    <div class="row">
      <div class="col my-3" id="divImpactoBajoSNC" style="display: none">
        <div class="card">
          <strong class="card-header" style="font-size: 13px">

            <nav class="flex-column flex-sm-row">
              <div class="nav nav-tabs flex-column flex-sm-row" id="nav-tab" role="tablist">
                <button class="nav-link flex-sm-fill active" id="contramedida1" data-toggle="tab" data-target="#nav-contramedida1" type="button" role="tab" aria-controls="nav-contramedida1" aria-selected="true"><strong>Contramedida 1</strong></button>
                <button class="nav-link flex-sm-fill" id="contramedida2" data-toggle="tab" data-target="#nav-contramedida2" type="button" role="tab" aria-controls="nav-contramedida2" aria-selected="false"><strong>Contramedida 2</strong></button>
                <button class="nav-link flex-sm-fill" id="contramedida3" data-toggle="tab" data-target="#nav-contramedida3" type="button" role="tab" aria-controls="nav-contramedida3" aria-selected="false"><strong>Contramedida 3</strong></button>
                <button class="nav-link flex-sm-fill" id="contramedida4" data-toggle="tab" data-target="#nav-contramedida4" type="button" role="tab" aria-controls="nav-contramedida4" aria-selected="false"><strong>Contramedida 4</strong></button>
                <button class="nav-link flex-sm-fill" id="contramedida5" data-toggle="tab" data-target="#nav-contramedida5" type="button" role="tab" aria-controls="nav-contramedida5" aria-selected="false"><strong>Contramedida 5</strong></button>
              </div>
            </nav>
            
            
          </strong>
          <div class="card-body">
            <div class="tab-content" id="nav-tabContent">
              <div class="tab-pane fade show active" id="nav-contramedida1" role="tabpanel" aria-labelledby="nav-contramedida1">
                <div class="form-row">
                  <div class="form-group col-md-4">
                    <label for="actividadContramedida1" style="font-size: 13px">Actividad/Acciones</label>
                    <input type="text" class="form-control form-control-sm text-uppercase" name="actividadContramedida1" id="actividadContramedida1">
                  </div>
                  <div class="form-group col-md-4">
                    <label for="tipoAccionContramedida1" style="font-size: 13px">Tipo de Acción</label>
                    <select id="tipoAccionContramedida1" name="tipoAccionContramedida1" class="form-control form-control-sm">
                      <option selected></option>
                      @foreach ($tipos_acciones as $tipo_accion)
                          <option value="{{$tipo_accion->id}}">{{$tipo_accion->name}}</option>
                      @endforeach
                    </select>
                  </div>
                  <div class="form-group col-md-4">
                    <label for="fechaCompromisoContramedida1" style="font-size: 13px">Fecha de Compromiso</label>
                    <input type="date" class="form-control form-control-sm" name="fechaCompromisoContramedida1" id="fechaCompromisoContramedida1">
                  </div>
                </div>
                <div class="form-row align-items-center">
                  <div class="form-group col-md">
                    <label for="archivoPQRFSContramedida1"><small>Puede elegir uno o varios archivos para adjuntar</small></label>
                    <div class="input-group">
                      <div class="input-group-prepend">
                        <span class="input-group-text" id="inputGroupFileAddon01Contramedida1"> </span>
                      </div>
                      <div class="custom-file">
                        <input type="file" class="custom-file-input" id="archivoSNCContramedida1" name='archivoSNCContramedida1[]' multiple="" onchange="clicAdjunto(this.id)" aria-describedby="inputGroupFileAddon01Contramedida1">
                        <label class="custom-file-label" for="inputGroupFileAddon01Contramedida1" id="namefile03Contramedida1">Elejir archivo</label>
                      </div>
                    </div>
                  </div>
                </div>
                <div id="adjuntosContramedida1" class="adjuntosContramedida1">
                </div>
              </div>
              <div class="tab-pane fade" id="nav-contramedida2" role="tabpanel" aria-labelledby="nav-contramedida2">
                <div class="form-row">
                  <div class="form-group col-md-4">
                    <label for="actividadContramedida2" style="font-size: 13px">Actividad/Acciones</label>
                    <input type="text" class="form-control form-control-sm text-uppercase" name="actividadContramedida2" id="actividadContramedida2">
                  </div>
                  <div class="form-group col-md-4">
                    <label for="tipoAccionContramedida2" style="font-size: 13px">Tipo de Acción</label>
                    <select id="tipoAccionContramedida2" name="tipoAccionContramedida2" class="form-control form-control-sm">
                      <option selected></option>
                      @foreach ($tipos_acciones as $tipo_accion)
                          <option value="{{$tipo_accion->id}}">{{$tipo_accion->name}}</option>
                      @endforeach
                    </select>
                  </div>
                  <div class="form-group col-md-4">
                    <label for="fechaCompromisoContramedida2" style="font-size: 13px">Fecha de Compromiso</label>
                    <input type="date" class="form-control form-control-sm" name="fechaCompromisoContramedida2" id="fechaCompromisoContramedida2">
                  </div>
                </div>
                <div class="form-row align-items-center">
                  <div class="form-group col-md">
                    <label for="archivoPQRFSContramedida2"><small>Puede elegir uno o varios archivos para adjuntar</small></label>
                    <div class="input-group">
                      <div class="input-group-prepend">
                        <span class="input-group-text" id="inputGroupFileAddon01Contramedida2"> </span>
                      </div>
                      <div class="custom-file">
                        <input type="file" class="custom-file-input" id="archivoSNCContramedida2" name='archivoSNCContramedida2[]' multiple="" onchange="clicAdjunto(this.id)" aria-describedby="inputGroupFileAddon01Contramedida2">
                        <label class="custom-file-label" for="inputGroupFileAddon01Contramedida2" id="namefile03Contramedida2">Elejir archivo</label>
                      </div>
                    </div>
                  </div>
                </div>
                <div id="adjuntosContramedida2" class="adjuntosContramedida2">
                </div>
              </div>
              <div class="tab-pane fade" id="nav-contramedida3" role="tabpanel" aria-labelledby="nav-contramedida3">
                <div class="form-row">
                  <div class="form-group col-md-4">
                    <label for="actividadContramedida3" style="font-size: 13px">Actividad/Acciones</label>
                    <input type="text" class="form-control form-control-sm text-uppercase" name="actividadContramedida3" id="actividadContramedida3">
                  </div>
                  <div class="form-group col-md-4">
                    <label for="tipoAccionContramedida3" style="font-size: 13px">Tipo de Acción</label>
                    <select id="tipoAccionContramedida3" name="tipoAccionContramedida3" class="form-control form-control-sm">
                      <option selected></option>
                      @foreach ($tipos_acciones as $tipo_accion)
                          <option value="{{$tipo_accion->id}}">{{$tipo_accion->name}}</option>
                      @endforeach
                    </select>
                  </div>
                  <div class="form-group col-md-4">
                    <label for="fechaCompromisoContramedida3" style="font-size: 13px">Fecha de Compromiso</label>
                    <input type="date" class="form-control form-control-sm" name="fechaCompromisoContramedida3" id="fechaCompromisoContramedida3">
                  </div>
                </div>
                <div class="form-row align-items-center">
                  <div class="form-group col-md">
                    <label for="archivoPQRFSContramedida3"><small>Puede elegir uno o varios archivos para adjuntar</small></label>
                    <div class="input-group">
                      <div class="input-group-prepend">
                        <span class="input-group-text" id="inputGroupFileAddon01Contramedida3"> </span>
                      </div>
                      <div class="custom-file">
                        <input type="file" class="custom-file-input" id="archivoSNCContramedida3" name='archivoSNCContramedida3[]' multiple="" onchange="clicAdjunto(this.id)" aria-describedby="inputGroupFileAddon01Contramedida1">
                        <label class="custom-file-label" for="inputGroupFile03" id="namefile03Contramedida3">Elejir archivo</label>
                      </div>
                    </div>
                  </div>
                </div>
                <div id="adjuntosContramedida3" class="adjuntosContramedida3">
                </div>
              </div>
              <div class="tab-pane fade" id="nav-contramedida4" role="tabpanel" aria-labelledby="nav-contramedida4">
                <div class="form-row">
                  <div class="form-group col-md-4">
                    <label for="actividadContramedida4" style="font-size: 13px">Actividad/Acciones</label>
                    <input type="text" class="form-control form-control-sm text-uppercase" name="actividadContramedida4" id="actividadContramedida4">
                  </div>
                  <div class="form-group col-md-4">
                    <label for="tipoAccionContramedida4" style="font-size: 13px">Tipo de Acción</label>
                    <select id="tipoAccionContramedida4" name="tipoAccionContramedida4" class="form-control form-control-sm">
                      <option selected></option>
                      @foreach ($tipos_acciones as $tipo_accion)
                          <option value="{{$tipo_accion->id}}">{{$tipo_accion->name}}</option>
                      @endforeach
                    </select>
                  </div>
                  <div class="form-group col-md-4">
                    <label for="fechaCompromisoContramedida4" style="font-size: 13px">Fecha de Compromiso</label>
                    <input type="date" class="form-control form-control-sm" name="fechaCompromisoContramedida4" id="fechaCompromisoContramedida4">
                  </div>
                </div>
                <div class="form-row align-items-center">
                  <div class="form-group col-md">
                    <label for="archivoPQRFSContramedida4"><small>Puede elegir uno o varios archivos para adjuntar</small></label>
                    <div class="input-group">
                      <div class="input-group-prepend">
                        <span class="input-group-text" id="inputGroupFileAddon01Contramedida4"> </span>
                      </div>
                      <div class="custom-file">
                        <input type="file" class="custom-file-input" id="archivoSNCContramedida4" name='archivoSNCContramedida4[]' multiple="" onchange="clicAdjunto()" aria-describedby="inputGroupFileAddon01Contramedida4">
                        <label class="custom-file-label" for="inputGroupFile04" id="namefile03Contramedida4">Elejir archivo</label>
                      </div>
                    </div>
                  </div>
                </div>
                <div id="adjuntosContramedida4" class="adjuntosContramedida4">
                </div>
              </div>
              <div class="tab-pane fade" id="nav-contramedida5" role="tabpanel" aria-labelledby="nav-contramedida5">
                <div class="form-row">
                  <div class="form-group col-md-4">
                    <label for="actividadContramedida5" style="font-size: 13px">Actividad/Acciones</label>
                    <input type="text" class="form-control form-control-sm text-uppercase" name="actividadContramedida5" id="actividadContramedida5">
                  </div>
                  <div class="form-group col-md-4">
                    <label for="tipoAccionContramedida5" style="font-size: 13px">Tipo de Acción</label>
                    <select id="tipoAccionContramedida5" name="tipoAccionContramedida5" class="form-control form-control-sm">
                      <option selected></option>
                      @foreach ($tipos_acciones as $tipo_accion)
                          <option value="{{$tipo_accion->id}}">{{$tipo_accion->name}}</option>
                      @endforeach
                    </select>
                  </div>
                  <div class="form-group col-md-4">
                    <label for="fechaCompromisoContramedida5" style="font-size: 13px">Fecha de Compromiso</label>
                    <input type="date" class="form-control form-control-sm" name="fechaCompromisoContramedida5" id="fechaCompromisoContramedida5">
                  </div>
                </div>
                <div class="form-row align-items-center">
                  <div class="form-group col-md">
                    <label for="archivoPQRFSContramedida5"><small>Puede elegir uno o varios archivos para adjuntar</small></label>
                    <div class="input-group">
                      <div class="input-group-prepend">
                        <span class="input-group-text" id="inputGroupFileAddon01Contramedida5"> </span>
                      </div>
                      <div class="custom-file">
                        <input type="file" class="custom-file-input" id="archivoSNCContramedida5" name='archivoSNCContramedida5[]' multiple="" onchange="clicAdjunto()" aria-describedby="inputGroupFileAddon01Contramedida5">
                        <label class="custom-file-label" for="inputGroupFile03" id="namefile03Contramedida5">Elejir archivo</label>
                      </div>
                    </div>
                  </div>
                </div>
                <div id="adjuntosContramedida5" class="adjuntosContramedida5">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    {{-- DESCRIPCION  -SNC --}}
    <div class="row">
      <div class="col-md-12 my-3" id="divDescripcionSNC" style="display:none">
        <div class="card">
          <div class="card-header"><strong style="font-size: 13px">Descripción</strong>
            <p class="text-muted"><small>Responder las siguientes preguntas ¿Qué paso? ¿Como paso?.</small></p>
          </div>
          <div class="card-body">
            <div class="form-row">
              <div class="form-group col-md-12">
                <textarea class="form-control form-control-sm" name="descripcionSNC" id="descripcionSNC" rows="5"></textarea>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>

    {{-- SEGUIMIENTO - SNC--}}
    <div class="row">
      <div class="col my-3" id="divSeguimientoSNC" style="display:none ">
        <div class="card">
          <strong class="card-header" style="font-size: 13px">Seguimiento</strong>
          <div class="card-body">
            <div class="form-row align-items-center">
              <div class="form-group col-md-4">
                <label for="observacionesSNC" style="font-size: 13px">Observaciones <a style="color: red">*</a></label>
                <input type="text" class="form-control form-control-sm text-uppercase" name="observacionesSNC" id="observacionesSNC">
              </div>
              <div class="form-group col-md-3" id="divOtraAreaImplicada" style="display: ;">
                <label for="penalizacion" style="font-size: 13px">Penalización <a style="color: red">*</a></label>
                <select id="penalizacion" name="penalizacion" class="form-control form-control-sm">
                  <option selected></option>
                  <option >Si</option>
                  <option >No</option>
                </select>
              </div>
              <div class="form-group col-md-5">
                <label for="valorPenalizacion" style="font-size: 13px">Valor Penalización</label>
                <input type="text" class="form-control form-control-sm currency" name="valorPenalizacion" id="valorPenalizacion" value="0">
              </div>             
            </div>
          </div>
        </div>
      </div>
    </div>
    
    {{-- MENSAJE NIVEL DE IMPACTO BAJO --}}
    <div class="row" style="margin-bottom: 2rem">
      <div class="col-md-12" id="mensajeNivelImpactoBajo" style="display:none">
        <div class="alert alert-info text-justify" role="alert">
          <small><strong> Mensaje Informativo </strong></small> <br>
          <ul>
            <li><small>Desde el Sistema Integrado de Gestión (SIG) nos estraemos comunicando con el responsable del cierre para continuar con el proseso. Muchas gracias</small></li>
          </ul> 
        </div>
      </div>
    </div>

    {{-- MENSAJE NIVEL DE IMPACTO MEDIO --}}
    <div class="row">
      <div class="col-md-12" id="mensajeNivelImpactoMedio" style="display:none">
        <div class="alert alert-warning text-justify" role="alert">
          <small><strong> Mensaje Informativo </strong></small> <br>
          <ul>
            <li><small>Para este nivel de impacto es necesario realizar correcciones y acciones correctivas.</small></li>
            <li><small>Desde el Sistema Integrado de Gestión (SIG) nos estraemos comunicando con el responsable del cierre para continuar con el proseso.</small></li>
          </ul> 
        </div>
      </div>
    </div>
    
    {{-- MENSAJE NIVEL DE IMPACTO ALTO --}}
    <div class="row">
      <div class="col-md-12" id="mensajeNivelImpactoAlto" style="display:none">
        <div class="alert alert-danger text-justify" role="alert">
          <small><strong> Mensaje Informativo </strong></small> <br>
          <ul>
            <li><small>Para este nivel de impacto es necesario realizar correcciones y acciones correctivas.</small></li>
            <li><small>Desde el Sistema Integrado de Gestión (SIG) nos estraemos comunicando con el responsable del cierre para continuar con el proseso.</small></li>
          </ul> 
        </div>
      </div>
    </div>

    {{-- TyC --}}
    <div class="row">
      <div class="col my-2">
        <div class="shadow p-3  bg-white rounded">
          <p><strong style="font-size: 13px"> ¿Acepta Términos y Condiciones? </strong></p>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="tyc" id="tyc1" value="Acepto" required>
            <label class="form-check-label" style="font-size: 15px" for="tyc1">
              Acepto
            </label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="tyc" id="tyc2" value="No Acepto">
            <label class="form-check-label" style="font-size: 15px" for="tyc2">
              No acepto
            </label>
          </div>
          <small class="text-muted">Al enviar este formulario, acepta nuestra Política de Privacidad y de Tratamiento de Datos, la cual podrá consultar en el siguiente  
            <a href="https://www.lineacomunicaciones.com/wp-content/uploads/2025/09/DE-001-PO-V-03-POLITICA-TRATAMIENTO-DE-DATOS-PERSONALES.pdf" target="_blank"  style="text-decoration-line: none;"> 
              enlace 
            </a>
          </small>
        </div>
      </div>
    </div>

    {{-- Btn Enviar --}}
    <div class="row">
      <div class="col"></div>
      <div class="col-md-5 mt-2 mb-5">
        <button class="btn  btn-block" id="btnSubmit" style="background-color: #001D62; color:white">
          <strong> Enviar </strong>
        </button>
      </div>
      <div class="col"></div>
    </div>

    <script>

      function clicAdjunto(input){
        // obtiene el input en la seccion de contramedidas seleccionado
        const inputFile = document.getElementById(input)
        console.log(inputFile);
        // numero de archivos seleccionados (input file multiple)
        const numberFilesSelected = inputFile.files.length;

        if (numberFilesSelected > 0) {

          var viewDivFiles = null;
          console.log("numero de archivos adjuntos: "+numberFilesSelected);

          // dependiendo de la contramedida(1, 2, 3, 4 o 5), se agrega el nombre del div padre, donde se visualizan los adjuntos seleccionados
          switch (inputFile.id) {
            case ('archivoSNCContramedida1'):
              viewDivFiles = document.querySelector(".adjuntosContramedida1");
              console.log("div padre: "+viewDivFiles.id)
              break;
          
            case ('archivoSNCContramedida2'):
              viewDivFiles = document.querySelector(".adjuntosContramedida2");
              console.log("div padre: "+viewDivFiles.id)
              break;

            case ('archivoSNCContramedida3'):
              viewDivFiles = document.querySelector(".adjuntosContramedida3");
              console.log("div padre: "+viewDivFiles.id)
              break;

            case ('archivoSNCContramedida4'):
              viewDivFiles = document.querySelector(".adjuntosContramedida4");
              console.log("div padre: "+viewDivFiles.id)
              break;

            case ('archivoSNCContramedida5'):
              viewDivFiles = document.querySelector(".adjuntosContramedida5");
              console.log("div padre: "+viewDivFiles.id)
              break;
          }

          for (let i = 0; i < numberFilesSelected; i++) {
            // se crea un div hijo a partir del padre (viewDivFiles)
            const div = document.createElement("div");
            // se le asigna un id
            div.id = viewDivFiles.id + "-" + i;
            console.log("div hijo: "+div.id);
            // se obtiene el nombre del archivo seleccionado
            const nameFile =  inputFile.files[i].name;
            console.log("nombre archivo: "+nameFile);
            
            div.classList.add(viewDivFiles.id);
            div.innerHTML = 
              `<div class='card bg-light' style='max-width: 25rem; margin-bottom:5px'>
                <div class='card-body' style='padding: 0px;'>
                  <label><small style='padding-left: 10px'>`+nameFile+`</small></label>
                  <button type='button' class='close' aria-label='Close' id="`+viewDivFiles.id+`-`+i+`" onClick="eliminarAdjunto(`+viewDivFiles.id+`, this.id, `+numberFilesSelected+`)">
                    <span aria-hidden='true' title='Eliminar' style='font-size: 18px; padding-right: 10px'>&times;</span>
                  </button>
                </div>
              </div>`
            viewDivFiles.appendChild(div);
          }
        }
      }
          

      function eliminarAdjunto(id, type, tam){

        const file = document.getElementById(type).className;
        document.getElementById(id.id).value = '';
        for (let j = 0; j < tam; j++) {
          const card = document.querySelector("#"+file+"-"+j);
          card.remove();  
        }

      }


    </script>

  </form>
</div>

@endsection