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

body{
    background:#f4f6f9;
}

/* tarjeta */
.card-reporte{
    border-radius:12px;
    box-shadow:0 8px 18px rgba(0,0,0,0.15);
}

/* botones filtro */
.filtro-btn{
    cursor:pointer;
    margin-right:5px;
}

/* lista tipo cuaderno */
.lista-agenda{
    list-style:none;
    padding:0;
}

.lista-agenda li{
    padding:15px;
    border-bottom:2px solid #e6e6e6;
    position:relative;
}

.lista-agenda li::before{
    content:"";
    position:absolute;
    left:-10px;
    top:0;
    height:100%;
    width:4px;
    background:#007bff;
}

.titulo-campo{
    font-weight:bold;
}

#reportes_diarios{
    height: 340px;       /* altura fija */
    overflow-y: auto;    /* scroll vertical */
    overflow-x: hidden;  /* evita scroll horizontal */
}

#reporte_seccion{
    height: 340px;       /* altura fija */
    overflow-y: auto;    /* scroll vertical */
    overflow-x: hidden;  /* evita scroll horizontal */
}
.contenedor-gastos {
  max-height: 300px; /* 🔥 tamaño fijo */
  overflow-y: auto;
  border: 1px solid #ddd;
  border-radius: 10px;
}

/* Scroll bonito */
.contenedor-gastos::-webkit-scrollbar {
  width: 6px;
}
.contenedor-gastos::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 10px;
}

/* Cabecera de fecha */
.divisor-fecha {
  background: #f8f9fa;
  font-weight: bold;
  font-size: 13px;
  text-align: center;
  color: #555;
}

/* Item */
.item-gasto {
  font-size: 14px;
  transition: background 0.2s;
}

.item-gasto:hover {
  background: #f5f5f5;
}

/* Monto */
.monto {
  font-weight: bold;
  color: #28a745;
}

/* Botón */
.btn-pdf {
  padding: 3px 8px;
  font-size: 12px;
}

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

    <!-- ventas -->
    <div class="col-md-6">



<div class="card card-reporte p-3">

<!-- fila titulo + filtros fecha -->
<div class="row align-items-center mb-3">

<div class="col-md-6">
<h5 class="mb-0">📒 Reporte de Turnos</h5>
</div>

<div class="col-md-6 text-right">

<input type="date" class="form-control form-control-sm d-inline-block" style="width:150px;">
<input type="date" class="form-control form-control-sm d-inline-block" style="width:150px;">

</div>

</div>


<!-- fila botones + totales -->
<div class="row align-items-center">

<!-- botones -->
<div class="col-md-4">

<span class="badge badge-primary filtro-btn" id="semana" onclick="reporte_seccion(7)">Sem</span>
<span class="badge badge-warning filtro-btn" id="quincena" onclick="reporte_seccion(15)">Quin</span>
<span class="badge badge-success filtro-btn" id="mensual" onclick="reporte_seccion(30)">Men</span>
<span class="badge badge-info filtro-btn" id="todo" onclick="reporte_seccion(0)">todo</span>
</div>

<!-- totales centrados -->
<div class="col-md-6 text-center">

<small class="font-weight-bold mr-1">
💰 Ingr: S/ 3,240.50
</small>

<small class="font-weight-bold ">
🧾 Ventas: S/ 3,240.50
</small>
<small class="font-weight-bold mr-2">
📅 Días: Sem
</small>
</div>

<!-- boton pdf -->
<div class="col-md-2 text-right">

<button class="btn btn-danger btn-sm mr-3">
<i class="fas fa-file-pdf"></i>
</button>

</div>

</div>



</div>



<div class="card card-reporte p-3" id="reportes_diarios">


</div>
<div class="card card-reporte p-3 d-none" id="reporte_seccion">


</div>




    </div>


    <!-- clientes -->
    <div class="row mt-3">

    <!-- 👥 CLIENTES -->
    <div class="col-md-6">
        <div class="card shadow border-0 rounded-lg h-100">
            <div class="card-body">

                <h6 class="text-success font-weight-bold mb-3">👥 Clientes</h6>

             <ul class="list-group list-group-flush" id="traer_clientes" style="max-height: 300px; overflow-y: auto;">
                </ul>

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

    <!-- 💳 CLIENTES POR COBRAR -->
    <div class="col-md-6">
        <div class="card shadow border-0 rounded-lg h-100">
            <div class="card-body">

                <h6 class="text-danger font-weight-bold mb-3">💳 Clientes por cobrar</h6>

                <ul class="list-group list-group-flush" id="deudas_clientes" style="max-height: 300px; overflow-y: auto;">

                

                </ul>

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

</div>

</div>


<div class="row mt-3">

    <!-- 🧾 GASTOS SIMPLES -->
    <div class="col-md-4">
        <div class="card shadow border-0 rounded-lg h-100">
            <div class="card-body">

                <h6 class="text-danger font-weight-bold mb-3">💸 Gastos simples</h6>

             <ul class="list-group list-group-flush contenedor-gastos" id="mostrar_todos_gastos_censillos">

             </ul>

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

    <!-- 📊 GASTOS DETALLADOS -->
    <div class="col-md-4">
        <div class="card shadow border-0 rounded-lg h-100">
            <div class="card-body">

                <h6 class="text-warning font-weight-bold mb-3">📊 Gastos detallados</h6>

                <ul class="list-group list-group-flush" id="gastos_especificados">

                
                    

                </ul>

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

    <!-- ⛽ COMPRAS DE COMBUSTIBLE -->
    <div class="col-md-4">
        <div class="card shadow border-0 rounded-lg h-100">
            <div class="card-body">

                <h6 class="text-primary font-weight-bold mb-3">⛽ Compras de combustible</h6>

                <ul class="list-group list-group-flush" id="detallar_combustibles_compras">

                


                </ul>

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

</div>

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

