<%- include('partials/_header'); %>

<style>
    .status-indicator {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 4px;
      vertical-align: middle;
    }

    .status-vigente {
      background-color: rgb(21, 162, 21);
    }

    .status-anulada {
      background-color: rgb(177, 15, 3);
    }


    .status-siniestro {
      background-color: rgb(139, 10, 141);
    }

    .status-deuda {
      background-color: rgb(237, 66, 80);
    }
  </style>



 <script type="text/javascript">
    window.onload = function () {


      var fecha1 = new Date(document.getElementById("fechatexthasta").value);
      var fecha = new Date(document.getElementById("fechatextdesde").value);

      var mes = fecha.getUTCMonth() + 1;
      var dia = fecha.getUTCDate();
      var ano = fecha.getUTCFullYear();
      var mes1 = fecha1.getUTCMonth() + 1;
      var dia1 = fecha1.getUTCDate();
      var ano1 = fecha1.getUTCFullYear();



      if (dia < 10)
        dia = '0' + dia; //agrega cero si el menor de 10
      if (mes < 10)
        mes = '0' + mes //agrega cero si el menor de 10
      if (dia1 < 10)
        dia1 = '0' + dia1; //agrega cero si el menor de 10
      if (mes1 < 10)
        mes1 = '0' + mes1 //agrega cero si el menor de 10





      document.getElementById('fechadesde').value = [ano, mes, dia].join('-');
      document.getElementById('fechahasta').value = [ano1, mes1, dia1].join('-');



    }

function validarFechas() {

    const fechaDesdeInput = document.getElementById('fechadesde');
    const fechaHastaInput = document.getElementById('fechahasta');
    const errorMessage = document.getElementById('error-message');
    const submitBtn = document.getElementById('submitBtn');

   
    const fechaDesde = new Date(fechaDesdeInput.value);
    const fechaHasta = new Date(fechaHastaInput.value);

    
    if (fechaDesdeInput.value && fechaHastaInput.value) {
        if (fechaDesde > fechaHasta) {           
            errorMessage.textContent = '⚠️ ¡Error! La "Fecha Desde" no puede ser posterior a la "Fecha Hasta".';
            submitBtn.disabled = true; 
            return false;
        } else {
           
            errorMessage.textContent = '';
            submitBtn.disabled = false; 
            return true;
        }
    }
   
    errorMessage.textContent = '';
    submitBtn.disabled = false;
    return true;
}

    

  </script>  



  <div class="cont-1300">        

      <div class="alta-form">
      <form action="/updatepoliza/<%= data.poliza[0].Id_Poliza %>" method="post">

      <% process.env.RAMA=12 %>

      <% if (data.poliza[0].Estado == 1) { %>
          <h2>Póliza de Remolque &nbsp <span class="status-indicator status-vigente"></span>&nbsp;<label style="font-size: 12px; color: rgb(21, 162, 21);"><%= data.poliza[0].Descripcion_EstadoPoliza %></label>&nbsp; &nbsp;<span class="status-indicator status-anulada"></span>&nbsp;<a href="/front_borrar_poliza/<%= data.poliza[0].Id_Poliza %>" style="color:rgb(111, 10, 10); font-size: 12px;">Eliminar Póliza Definitivamente</a></label></h2>
        <% } else if (data.poliza[0].Estado == 3) { %>
          <h2>Póliza de Remolque &nbsp <span class="status-indicator status-anulada"></span>&nbsp;<label style="font-size: 12px; color: rgb(177, 15, 3);"><%= data.poliza[0].Descripcion_EstadoPoliza %></label> </h2>
        <% } else if (data.poliza[0].Estado == 4) { %>
          <h2>Póliza de Remolque &nbsp <span class="status-indicator status-deuda"></span>&nbsp;<label style="font-size: 12px; color:  rgb(237, 66, 80);"><%= data.poliza[0].Descripcion_EstadoPoliza %></label> </h2>
        <% } else if (data.poliza[0].Estado == 5) { %>
          <h2>Póliza de Remolque &nbsp <span class="status-indicator status-siniestro"></span>&nbsp;<label style="font-size: 12px;"><a href="/edit_siniestro/<%= data.poliza[0].Id_Poliza %>" style="color:indigo">Con Siniestro - Ver Datos del Siniestro</a></label> </h2>
        <% } %>
       
     <% if ((data) && (data.remolques.length > 0)) { %>


          <div class="form-cont">
            <div class="box">


              <div class="form-group" style="font-size: 13px;">
                <label style="font-size: 13px;">Compañia</label>
                <select id="compañia" name="compañia">
                  <option value="<%= data.poliza[0].Id_Compania %>">
                    <%= data.poliza[0].Nombre_Compania %>
                  </option>
                  <% for (var i=0; i < data.companias.length; i++) { %>
                    <option value="<%= data.companias[i].Id_Compania %>">
                      <%= data.companias[i].Nombre_Compania %>
                    </option>
                    <% } %>
                </select>
              </div>

              <div class="form-group" style="font-size: 13px;">
                <label style="font-size: 13px;">N° Póliza</label>
                <input style="font-size: 13px;" value="<%= data.poliza[0].Poliza %>" type="text" class="form-control"
                  id="poliza" name="poliza" required>
              </div>

              <div class="form-group" style="font-size: 13px;">
                <label style="font-size: 13px;">Apellido</label>
                <input style="font-size: 13px;" value="<%= data.poliza[0].Apellido %>" type="text" class="form-control"
                  id="apellido" name="apellido">
              </div>

              <div class="form-group" style="font-size: 13px;">
                <label style="font-size: 13px;">Nombre</label>
                <input style="font-size: 13px;" value="<%= data.poliza[0].Nombre %>" type="text" class="form-control"
                  id="nombre" name="nombre" >
              </div>

              <div class="form-group" style="font-size: 13px;">
                <label style="font-size: 13px;">Razon Social</label>
                <input style="font-size: 13px;" value="<%= data.poliza[0].Razon_Social %>" type="text" class="form-control" id="rsocial" name="rsocial">
              </div>

              <div class="form-group" style="font-size: 13px;">
                <label style="font-size: 13px;">DNI</label>
                <input style="font-size: 13px;" value="<%= data.poliza[0].DNI %>" type="text" class="form-control"
                  id="dni" name="dni" required>
              </div>

          <div class="form-group" style="font-size: 13px;">
                <label style="font-size: 13px;">Inicio de Vigencia</label>                
                <% mifecha=data.poliza[0].Fecha_Desde %>                     
                <% dia = mifecha.getUTCDate().toString().padStart(2, '0') %>
                <% mes = (mifecha.getUTCMonth() + 1).toString().padStart(2, '0') %>
                <% anio = mifecha.getUTCFullYear() %>
                <% fechaCorrectaDesde = `${anio}-${mes}-${dia}`; %> 
                  <input value="<%= fechaCorrectaDesde %>" id="fechatextdesde" type="hidden">
                  <input style="font-size: 13px;" class="form-control" class="form-select" value="" type="date"
                    id="fechadesde" name="fechadesde" required onchange="validarFechas()">



              </div>

              <div class="form-group" style="font-size: 13px;">
                <label style="font-size: 13px;">Fin de Vigencia</label>
                <% mifecha1=data.poliza[0].Fecha_Hasta %>                                  
                <% dia = mifecha1.getUTCDate().toString().padStart(2, '0') %>
                <% mes = (mifecha1.getUTCMonth() + 1).toString().padStart(2, '0') %>
                <% anio = mifecha1.getUTCFullYear() %>
                <% fechaCorrectaHasta = `${anio}-${mes}-${dia}`; %> 
                  <input value="<%= fechaCorrectaHasta %>" id="fechatexthasta" type="hidden">
                  <input style="font-size: 13px;" class="form-control" value="" type="date" id="fechahasta"
                    name="fechahasta" onchange="validarFechas()">
              </div>
            </div>

            <div class="box">
              <div class="form-group" style="font-size: 13px;">
                <label style="font-size: 13px;">Forma de Pago</label>
                <select id="formapago" name="formapago" style="width:110px;">
                  <option style="font-size: 13px;" value="<%= data.poliza[0].Id_FormaPago %>">
                    <%= data.poliza[0].Nombre_FormaPago %>
                  </option>
                  <% for (var i=0; i < data.formapago.length; i++) { %>
                    <option style="font-size: 13px;" value="<%= data.formapago[i].Id_FormaPago %>">
                      <%= data.formapago[i].Nombre_FormaPago %>
                    </option>
                    <% } %>
                </select>&nbsp;
                <input type="text"  value="<%= data.poliza[0].NumeroFP %>" style="width: 180px; font-size: 13px;" class="form-control" id="numerofp" name="numerofp" >
              </div>



              <div class="form-group" style="font-size: 13px;">
                <label style="font-size: 13px;">Contacto</label>
                <input style="font-size: 13px;" value="<%= data.poliza[0].Contacto %>" type="text" class="form-control"
                  id="contacto" name="contacto">
              </div>

              <div class="form-group" style="font-size: 13px;">
                <label style="font-size: 13px;">Correo</label>
                <input style="font-size: 13px;" value="<%= data.poliza[0].Correo %>" type="email"
                  pattern="^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$"
                  class="form-control" id="correo" name="correo" >
              </div>

              <div class="form-group" style="font-size: 13px;">
                <label style="font-size: 13px;">Direccion</label>
                <input style="font-size: 13px;" value="<%= data.remolques[0].Direccion %>" type="text" class="form-control"
                  id="direccion" name="direccion" required>
              </div>

              <div class="form-group" style="font-size: 13px;">
                <label style="font-size: 13px;">Modelo</label>
                <input style="font-size: 13px;" value="<%= data.remolques[0].Modelo %>" type="text" class="form-control"
                  id="modelo" name="modelo" required>
              </div>              

              <div class="form-group" style="font-size: 13px;">
                <label style="font-size: 13px;">Patente</label>
                <input style="font-size: 13px;" value="<%= data.remolques[0].Patente %>" type="text" class="form-control"
                  id="patente" name="patente" required>
              </div>

                 <div class="form-group" style="font-size: 13px;">

                   <label style="font-size: 13px;">Productor</label>
                   <select id="productor" name="productor">
                      <option style="font-size: 13px;" value="<%= data.poliza[0].Productor %>">
                       <%= data.poliza[0].Nombre_Productor %>
                  </option>
                  <% for (var i=0; i < data.productores.length; i++) { %>
                    <option style="font-size: 13px;" value="<%= data.productores[i].Id_Productor %>">
                      <%= data.productores[i].Nombre_Productor %>
                    </option>
                        <% } %>
                    </select> 
              </div>

            </div>




          </div>
    <p id="error-message" style="color: rgb(167, 3, 3);"></p>








            <br>

          <div class="botonera">
              <% if ((data.poliza[0].Estado != 6) && (data.poliza[0].Estado != 3)) { %>   
                       <hr style="border-top: 1px solid black; height: 2px; width: 100%; border: none;">    
                                      
                        <% if ((data.poliza[0].Estado != 3) && (data.poliza[0].Estado != 4)  && (data.poliza[0].Estado != 6)) { %>   

                        <a href="/front_deuda_poliza/<%= data.poliza[0].Id_Poliza %>" class="btn btn-dark" style="font-size: 15px; background-color: rgb(237, 66, 80)"><img src="/resources/img/deudora.png" width="30" height="30">&nbsp;Póliza Deudora</a>
                        <% } %>

                        <% if ((data.poliza[0].Estado != 3) && (data.poliza[0].Estado != 6)) { %>                      
                          <a href="/front_anular_poliza/<%= data.poliza[0].Id_Poliza %>"  class="btn btn-success" style="font-size: 15px;   background-color: rgb(177, 15, 3)"><img src="/resources/img/anulada.png" width="30" height="30">&nbsp;Anular Póliza</a>
                        <% } %>

                      
                        <% if ((data.poliza[0].Estado != 3) && (data.poliza[0].Estado != 5)  && (data.poliza[0].Estado != 6)) { %>     

                          <a href="/front_siniestro_poliza/<%= data.poliza[0].Id_Poliza %>"  class="btn btn-primary" style="font-size: 15px; background-color: rgb(139, 10, 141);"><img src="/resources/img/siniestro.png" width="30" height="30">&nbsp;Póliza Siniestrada</a>
                        <% } %>
                      
                        <% if ((data.poliza[0].Estado == 5)  && (data.poliza[0].Estado != 6))  { %>   

                        <a href="/front_terminar_siniestro/<%= data.poliza[0].Id_Poliza %>" class="btn btn-dark" style="font-size: 15px; background-color: rgb(21, 162, 21)"><img src="/resources/img/ok.png" width="30" height="30">&nbsp;Terminar Siniestro de la Póliza</a>
                        <% } %>

                        <% if ((data.poliza[0].Estado == 4)  && (data.poliza[0].Estado != 6))  { %>   

                        <a href="/front_terminar_deuda/<%= data.poliza[0].Id_Poliza %>" class="btn btn-dark" style="font-size: 15px; background-color: rgb(21, 162, 21)"><img src="/resources/img/ok.png" width="30" height="30">&nbsp;Terminar Deuda de la Póliza</a>
                        <% } %>

                       <hr style=" border-top: 1px solid black; height: 2px; width: 100%; border: none;">    
                  <% } %>
        
        </div> 

        <br>
            <div style="width: 100%; display: flex; justify-content: space-between;">
              <div style="text-align: felt; padding-left: 3px; ">
                <% if ((process.env.rol==1) || (process.env.rol==2)) { %>
                 <% if ((data.poliza[0].Estado != 3)  && (data.poliza[0].Estado != 6))  { %>    
                  <button type="submit" id="submitBtn" class="btn btn-secondary"
                    style="height: 39px; width:250px; background-color: darkslateblue; margin-left: 10px; font-size: 15px;">
                    Efectura los Cambios
                  </button>
                  <% } %>
                  <% } %>
              </div>

              <div style="text-align: right; text-decoration: none; padding-right: 3px;">
                <a href="javascript:window.history.back();"
                  style="height: 39px; width:250px;; background-color: darkslateblue; margin-right: 10px; font-size: 15px;"
                  class="btn btn-secondary"> Volver</a>
              </div>

            </div>
        <% }  else { %>
         <div style="
              display: flex;
              flex-direction: column; 
              align-items: center; 
              width: 100%;
              margin-top: 20px; /* Opcional: añade espacio arriba */
          ">
              <div style="
                  text-align: center; 
                  margin-bottom: 20px; /* Separa el texto del botón */
              ">
                  <label style="color: brown;">¡ERROR!,  Se Produjo un Error en la Captura de Datos de la Póliza de Remolques</label>
              </div>

              <div style="text-align: center;">
                  <a href="javascript:window.history.back();"
                    style="
                      height: 39px; 
                      width: 250px;
                      background-color: darkslateblue; 
                      font-size: 15px;
                    "
                    class="btn btn-secondary"> Volver</a>
              </div>
          </div>
        <% } %>


      </form>
    </div>
  </div>

  <script src="//cdn.jsdelivr.net/npm/sweetalert2@10"></script>

  <% if(typeof alert !="undefined" ) { %>
    <script>
      Swal.fire({
        text: '<%= alertMessage %>',
      }).then(() => {
        window.location = '<%= ruta + data.id %>'
      })            
    </script>
    <% } %>



  <%- include('partials/_footer'); %>