<?php include "views/templates/header.php"; ?>


  <style>
    body {
      background: linear-gradient(to right, #4b6cb7, #182848);
    }



    .form-control {
      border: 2px solid #4b6cb7;
    }




    .modal-content {
      background: linear-gradient(45deg, #3498db, #c0392b);
      border: none;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    }

    /* Personaliza el encabezado del modal */
    .modal-header {
      background-color: #2980b9;
      color: #fff;
    }

    /* Personaliza los botones del modal */
    .modal-footer .btn-primary {
      background-color: #27ae60;
      border: none;
    }

    .modal-footer .btn-danger {
      background-color: #e74c3c;
      border: none;
    }

    /* Personaliza la animación de la textarea */
    #comentariosDiv {
      transition: opacity 0.3s, height 0.3s;
    }

    .modal-header {
      background: linear-gradient(45deg, #2980b9, #8e44ad);
      color: #fff;
    }

    /* Estiliza el fondo de la textarea */
    #comentarios {
      background: #f1f2f6;
    }

    /* Haz que el texto sea más grueso */
    .modal-title,
    .btn {
      font-weight: bold;
    }
  </style>
  

  <body>

  <div class="container-fluid">
    <div class="row">
        <div class="col-lg-4">
            <div class="card">
                <div class="card-header text-dark">
                    <h1>Caja <i class="fa-solid fa-cash-register" style="color: #13e105;"></i></h1>
                    <h4></h4>
                    <input type="number" id="aperurarrr" class="form-control" placeholder="Ingrese un monto">
                    <br>
                    <div id="arquecajjj">
                        <!-- Aquí se mostrarán los botones -->
                    </div>
                </div>
            </div>
            <br><br>
            <div class="card">
                <div class="card-header text-dark">
                    <h1>Ingreso/Egresos</h1>
                    <h4></h4>
                    <div class="form-group">
                        <label for="dinerioIngreso"><i class="fa-regular fa-money-bill-1 fa-beat" style="color: #1a9e00;"></i> Monto:</label>
                        <input type="number" id="dinerioIngreso" name="dinerioIngreso" class="form-control" placeholder="Ingrese un monto">
                    </div>

                    <div class="form-group">
                        <label for="tipoMovimiento"><i class="fa-solid fa-laptop"></i> Tipo de Movimiento:</label>
                        <select id="tipoMovimiento" name="tipoMovimiento" class="form-control">
                            <option value="">Selecciona una opción</option>
                            <option value="ingreso">Ingreso</option>
                            <option value="egreso">Egreso</option>
                        </select>
                    </div>
                </div>
                <div id="dentroconten">
                    
                </div>
            </div>
        </div>
    </div>
</div>



    <!-- ... modal de ingresoso  ... -->

    <div class="modal fade" id="ingresosmodal" tabindex="-1" role="dialog" aria-labelledby="my-modal-title" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header bg-primary">
            <h5 class="modal-title text-white" id="title">NUEVO</h5>
            <button class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <h2>Selecciona una opción:</h2>
            <select id="opciones" name="opciones" class="form-control">
              <option value=""></option>
              <option value="cuentaPendiente">Cobranza</option>
              <option value="sencilloACaja">Sencillo a Caja</option>
              <option value="otros">Otros</option>
            </select>

            <!-- Textarea (inicialmente oculta) con animación CSS -->
            <div class="form-group" id="comentariosDiv" name="comentariosDiv" style="transition: opacity 0.3s;">
              <label for="comentarios">Detallar</label>
              <textarea class="form-control" id="comentarios" name="comentarios" placeholder="porfavor detallar el movimiento"></textarea>
            </div>
            <!-- Fin de la Textarea -->
            <br>
            <br>
              <button class="btn btn-primary" type="button" id="btnaccion" onclick="enviarDatos();">CONFIRMAR</button>
              <button class="btn btn-danger" id="btnCancelar" type="button" data-dismiss="modal">CANCELAR</button>

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

    


    <!-- modal de egresos  -->
    <div class="modal fade" id="egresosomodal" tabindex="-1" role="dialog" aria-labelledby="my-modal-title" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header bg-primary">
            <h5 class="modal-title text-white" id="title">EGRESOS</h5>
            <button class="close ss" data-dismiss="modall" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <h2>Seleciona un movimiento</h2>
            <select id="opciones2" class="form-control">
              <option value="Seleccionaunaopción">Selecciona una opción</option>
              <option value="cuentaPendiente">Pagos</option>
              <option value="compras">Compras</option>
              <option value="adelantoPago">Adelanto de Pago</option>
              <option value="transporte">Transporte</option>
              <option value="otros">Otros</option>
            </select>

            <div class="col md-4">
              <div class="form-group">

                <select id="usuario" class="form-control " name="usuario" style="width: 250px; display: none; opacity: 0; transition: opacity 0.3s;">
                  <?= implode('', array_map(function ($row) {
                    return "<option value=\"{$row['id']}\">{$row['nombre']}</option>";
                  }, $data)) ?>
                </select>
              </div>

            </div>
            <div class="form-group" id="comentariosDivin" style="display: none; opacity: 0; transition: opacity 0.3s;">
              <label for="comentarios">Comentarios:</label>
              <textarea class="form-control" id="comentarios2" name="comentarios2" rows="4" placeholder="Escribe tus comentarios aquí"></textarea>
            </div>
            <br>
            <br>
            <button class="btn btn-primary" type="button" id="btnaccion22" onclick="registrarEgresosodinero();" style="display: none; opacity: 0; transition: opacity 0.3s;">CONFIRMAR</button>
            <button class="btn btn-primary" type="button" id="btnaccion2" onclick="pagodelpersonal();" style="display: none; opacity: 0; transition: opacity 0.3s;">CONFIRMAR</button>
            <br>
            <button class="btn btn-danger" id="btnCancelarr" type="button" data-dismiss="modall" style="width: 120px">CANCELAR</button>

             <!-- ocultar los boronoes para los egresoso-->
           
          </div>
        </div>
      </div>
    </div>


    </body>

    <script>
      const opciones23 = document.getElementById("opciones2");
      const usuario = document.getElementById("usuario");

      opciones23.addEventListener("change", function() {
        if (opciones23.value === "adelantoPago") {
          usuario.style.display = "block";
          setTimeout(() => {
            usuario.style.opacity = "1"; // Aplicar opacidad después de mostrar
          }, 100);
        } else {
          usuario.style.opacity = "0"; // Aplicar opacidad antes de ocultar
          setTimeout(() => {
            usuario.style.display = "none"; // Ocultar después de aplicar opacidad
          }, 500);
        }
      });



      // JavaScript para mostrar/ocultar la textarea con animación suave
      const opciones2 = document.getElementById("opciones2");
      const comentariosDivin = document.getElementById("comentariosDivin");

      opciones2.addEventListener("change", function() {
        if (opciones2.value === "otros" || opciones2.value === "cuentaPendiente" || opciones2.value === "compras" || opciones2.value === "transporte") {
          comentariosDivin.style.display = "block";
          setTimeout(() => {
            comentariosDivin.style.opacity = "1"; // Aplicar opacidad después de mostrar
          }, 100);
        } else {
          comentariosDivin.style.opacity = "0"; // Aplicar opacidad antes de ocultar
          setTimeout(() => {
            comentariosDivin.style.display = "none"; // Ocultar después de aplicar opacidad
          }, 500);
        }
      });






      //ocultar botones y mostrarlo 
      //ocultar botones y mostrarlo 
      //ocultar botones y mostrarlo 
      //ocultar botones y mostrarlo 
      //ocultar botones y mostrarlo 
      //ocultar botones y mostrarlo 
      //ocultar botones y mostrarlo 
      //ocultar botones y mostrarlo 
      //ocultar botones y mostrarlo 
      //ocultar botones y mostrarlo 


      const opcion = document.getElementById("opciones2");
const botonesocutos = document.getElementById("btnaccion22");
const botonesocutos2 = document.getElementById("btnaccion2"); // Agregamos el botón adicional

opcion.addEventListener("change", function() {
  if (opcion.value === "Seleccionaunaopción" || opcion.value === "otros" || opcion.value === "cuentaPendiente" || opcion.value === "compras" || opcion.value === "transporte") {
    comentariosDivin.style.display = "block";
    setTimeout(() => {
      comentariosDivin.style.opacity = "1"; // Aplicar opacidad después de mostrar
    }, 100);

    // Mostrar el botón 1
    botonesocutos.style.display = "block";
    setTimeout(() => {
      botonesocutos.style.opacity = "1"; // Aplicar opacidad después de mostrar
    }, 100);

    // Ocultar el botón 2
    botonesocutos2.style.opacity = "0"; // Aplicar opacidad antes de ocultar
    setTimeout(() => {
      botonesocutos2.style.display = "none"; // Ocultar después de aplicar opacidad
    }, 500);
  } else if (opcion.value === "adelantoPago") {
    comentariosDivin.style.display = "block";
    setTimeout(() => {
      comentariosDivin.style.opacity = "1"; // Aplicar opacidad después de mostrar
    }, 100);

    // Mostrar el botón 2
    botonesocutos2.style.display = "block";
    setTimeout(() => {
      botonesocutos2.style.opacity = "1"; // Aplicar opacidad después de mostrar
    }, 100);

    // Ocultar el botón 1
    botonesocutos.style.opacity = "0"; // Aplicar opacidad antes de ocultar
    setTimeout(() => {
      botonesocutos.style.display = "none"; // Ocultar después de aplicar opacidad
    }, 500);
  } else {
    comentariosDivin.style.opacity = "0"; // Aplicar opacidad antes de ocultar
    setTimeout(() => {
      comentariosDivin.style.display = "none"; // Ocultar después de aplicar opacidad
    }, 500);

    // Ocultar ambos botones
    botonesocutos.style.opacity = "0"; // Aplicar opacidad antes de ocultar
    botonesocutos2.style.opacity = "0"; // Aplicar opacidad antes de ocultar
    setTimeout(() => {
      botonesocutos.style.display = "none"; // Ocultar después de aplicar opacidad
      botonesocutos2.style.display = "none"; // Ocultar después de aplicar opacidad
    }, 500);
  }
});





  
    // JavaScript para mostrar el modal cuando se selecciona "egresos"
    document.getElementById("tipoMovimiento").addEventListener("change", function() {
      if (this.value === "egreso") {
        document.getElementById("opciones").value = ""; // Restablece la opción en blanco
        new bootstrap.Modal(document.getElementById("egresosomodal")).show();
      }
    });
    // JavaScript para mostrar el modal cuando se selecciona "Ingreso"
    document.getElementById("tipoMovimiento").addEventListener("change", function() {
      if (this.value === "ingreso") {
        document.getElementById("opciones").value = ""; // Restablece la opción en blanco
        new bootstrap.Modal(document.getElementById("ingresosmodal")).show();
      }
    });

    // JavaScript para recargar la página cuando se hace clic fuera del modal
    document.addEventListener('click', function(e) {
      if (e.target.classList.contains('modal')) {
        location.reload(); // Recarga la página
      }
    });

    // JavaScript para recargar la página al hacer clic en el botón "CANCELAR"
    document.querySelector('#btnCancelar').addEventListener('click', function() {
      location.reload(); // Recarga la página al hacer clic en "CANCELAR"
    });

    // JavaScript para recargar la página al hacer clic en la "x" en la parte superior del modal
    document.querySelector('.close').addEventListener('click', function() {
      location.reload(); // Recarga la página al hacer clic en la "x" en el modal
    });


     // JavaScript para recargar la página cuando se hace clic fuera del modal
     document.addEventListener('click', function(e) {
      if (e.target.classList.contains('modall')) {
        location.reload(); // Recarga la página
      }
    });
     // JavaScript para recargar la página al hacer clic en el botón "CANCELAR"
     document.querySelector('#btnCancelarr').addEventListener('click', function() {
      location.reload(); // Recarga la página al hacer clic en "CANCELAR"
    });


     // JavaScript para recargar la página al hacer clic en la "x" en la parte superior del modal
     document.querySelector('.ss').addEventListener('click', function() {
      location.reload(); // Recarga la página al hacer clic en la "x" en el modal
    });





  </script>






<?php include "views/templates/footer.php"; ?>