<?php include "views/templates/header.php";?>
<style>
.gasto-item {
  transition: all 0.2s ease;
}

.gasto-item:hover {
  background: #f8f9fa;
  transform: scale(1.01);
}
.tarjeta-hover {
  transition: all 0.25s ease;
  border-radius: 12px;
}

.tarjeta-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.icono {
  background: #f8f9fa;
  width: 60px;
  height: 60px;
  margin: auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}


</style>
<div class="row">

  <!-- 🔥 IZQUIERDA -->
  <div class="col-md-6">
    
    <h5 class="mb-3 text-primary">
      <i class="fas fa-wallet mr-2"></i> Capital
    </h5>

    <div class="row" id="mostrar_activos"></div>

    <div class="container mt-5">
    
    <h3 class="mb-4">Transferir</h3>

    <div class="row align-items-end">
        
        <!-- Select origen -->
        <div class="col-md-3">
            <label>Desde</label>
            <select class="form-control">
                <option value="efectivo">Efectivo</option>
                <option value="yape">Yape</option>
                <option value="visa">Visa</option>
            </select>
        </div>

        <!-- Select destino -->
        <div class="col-md-3">
            <label>Hacia</label>
            <select class="form-control">
                <option value="efectivo">Efectivo</option>
                <option value="yape">Yape</option>
                <option value="visa">Visa</option>
            </select>
        </div>

        <!-- Monto -->
        <div class="col-md-3">
            <label>Monto</label>
            <input type="number" class="form-control" placeholder="Ingrese monto">
        </div>

        <!-- Botón transferir -->
        <div class="col-md-3">
            <label>&nbsp;</label>
            <button class="btn btn-primary btn-block">
                Transferir
            </button>
        </div>

    </div>

    <hr class="my-5">

    <h4 class="mb-3">Retiro</h4>

    <div class="row align-items-end">

        <!-- Select retiro -->
        <div class="col-md-3">
            <label>Cuenta</label>
            <select class="form-control">
                <option value="efectivo">Efectivo</option>
                <option value="yape">Yape</option>
                <option value="visa">Visa</option>
            </select>
        </div>

        <!-- Monto retiro -->
        <div class="col-md-3">
            <label>Monto</label>
            <input type="number" class="form-control" placeholder="Monto a retirar">
        </div>

        <!-- Detalle -->
        <div class="col-md-3">
            <label>Detalle</label>
            <input type="text" class="form-control" placeholder="Descripción">
        </div>

        <!-- Botón retiro -->
        <div class="col-md-3">
            <label>&nbsp;</label>
            <button class="btn btn-danger btn-block">
                Retirar
            </button>
        </div>

    </div>

</div>

  </div>

  <!-- 🔥 DIVISOR -->
  <div class="col-md-1 d-flex justify-content-center">
    <div style="width:2px; background:linear-gradient(to bottom,#007bff,#28a745); height:100%; border-radius:5px;"></div>
  </div>

  <!-- 🔥 DERECHA -->
  <div class="col-md-5">
    
    <h5 class="mb-3 text-success">
      <i class="fas fa-chart-line mr-2"></i> Ventas del día
    </h5>

    <div class="row" id="ventas_diarias"></div>

    <!-- GASTOS -->
    <div class="col-md-12 mt-3">

      <!-- HEADER -->
      <div class="card text-white mb-2" style="background:linear-gradient(45deg,#dc3545,#ff6b6b);">
        <div class="card-body p-2 text-center">
          <h6 class="mb-0">
            <i class="fas fa-receipt mr-2"></i> Gastos
          </h6>
        </div>
      </div>

      <!-- LISTA -->
      <div class="card shadow-sm" >
      <div class="card-body p-0" 
            id="gastos_diarios" 
            style="max-height: 150px; overflow-y: auto; overflow-x: hidden;">
        </div>
      </div>

    </div>

    
    <!-- COMBUSTIBLES -->
    <div class="col-md-12 mt-3">

      <!-- HEADER -->
      <div class="card text-white mb-2" style="background:linear-gradient(45deg,#dc3545,#ff6b6b);">
        <div class="card-body p-2 text-center">
          <h6 class="mb-0">
            <i class="fas fa-receipt mr-2"></i> Compras
          </h6>
        </div>
      </div>

      <!-- LISTA -->
      <div class="card shadow-sm" >
      <div class="card-body p-0" 
            id="gastos_combustible" 
            style="max-height: 150px; overflow-y: auto; overflow-x: hidden;">
        </div>
      </div>


       <div class="card shadow-sm" >
          <button class="btn btn-success" onclick="cerrar_el_dia()">Cerrar</button>
      </div>

    </div>

  </div>

</div>











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