<%- include('partials/_header'); %>

<script type="text/javascript">

   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">
      <h2>Nueva Póliza de Comercio</h2>
      <form action="/cargopoliza/7" method="post">
        <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">
                <% 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;" 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;" 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;" 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;" 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;" 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>
              <input style="font-size: 13px;" type="date" class="form-control" 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>
              <input style="font-size: 13px;" type="date" class="form-control" 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;">
                <% for (var i=0; i < data.formapago.length; i++) { %>
                  <option value="<%= data.formapago[i].Id_FormaPago %>">
                    <%= data.formapago[i].Nombre_FormaPago %>
                  </option>
                  <% } %>
              </select>&nbsp;
                <input type="text"  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;" 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;" 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;">Dirección</label>
              <input style="font-size: 13px;" type="text" class="form-control" id="direccion" name="direccion" required>
            </div>

            <div class="form-group" style="font-size: 13px;">
              <label style="font-size: 13px;">Código Postal</label>
              <input style="font-size: 13px;" type="text" class="form-control" id="codpos" name="codpos" required>
            </div>
            
          

            </div>




          </div>     
          <p id="error-message" style="color: rgb(167, 3, 3);"></p>

        <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)) { %>
                  
                  <button type="submit" id="submitBtn" class="btn btn-secondary"
                    style="height: 39px; width:250px; background-color: darkslateblue; margin-left: 10px; font-size: 15px;">
                    Alta de Póliza
                  </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>
      


      </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'); %>