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

<div class="container mt-4">

  <div class="row">



  
    <div class="col-md-12 mb-5">
      
  <div class="card shadow-lg border-0">

    <div class="card-header bg-secondary text-white">
          <button class="btn btn-danger" onclick="gastos_comunes()"> <i class="fas fa-receipt mr-2"></i>Gastos</button>
          <button class="btn btn-warning"  onclick="gastos_detallar_()"> <i class="fas fa-receipt mr-2"></i>Gastos Detallados</button>

          <button class="btn btn-info"  onclick="gastos_combustibles()"> <i class="fas fa-receipt mr-2"></i>Compras de combustibles</button>
    </div>

    <div class="card-body">
      <div id="gastos_comunes">
        <div class="row align-items-end">

        <!-- TIPO DE GASTO -->
        <div class="col-md-3 mb-3">
          <label class="font-weight-bold">
            <i class="fas fa-list"></i> Tipo de pago
          </label>

          <select class="form-control"  id="gasto_modo_pago" style="width:100%">
           
           
          </select>
        </div>


        <!-- MONTO -->
        <div class="col-md-2 mb-3">
          <label class="font-weight-bold">
            <i class="fas fa-money-bill-wave"></i> Monto
          </label>

          <input type="number" class="form-control" id="gasto_monto" placeholder="S/ 0.00">
        </div>


        <!-- DETALLES -->
        <div class="col-md-6 mb-3">
          <label class="font-weight-bold">
            <i class="fas fa-align-left"></i> Detalles
          </label>

          <input type="text" class="form-control" id="gasto_detalle" placeholder="Ej: compra de aceite, pago de limpieza...">
        </div>


        <!-- BOTON -->
        <div class="col-md-1 mb-3 text-center">

          <button class="btn btn-danger btn-block shadow" onclick="registrar_gastos()">
            <i class="fas fa-plus-circle"></i>
          </button>

        </div>

      </div>
  
        
      </div>
      


    <div id="gastos_combustible" class="d-none">
        <div class="row align-items-end">
 
          <!-- combustible -->
            <!-- TIPO DE GASTO -->
          <div class="col-md-3 mb-3">
            <label class="font-weight-bold">
              <i class="fas fa-list"></i>Combustible
            </label>

           <select class="form-control" id="compras_combustibles">
                 
                </select>
          </div>

          <!-- TIPO DE GASTO -->
          <div class="col-md-3 mb-3">
            <label class="font-weight-bold">
              <i class="fas fa-list"></i> Tipo de pago
            </label>

            <select class="form-control " style="width:100%" id="modo_pago_">
            
            
            </select>
          </div>

      <!-- MONTO -->
          <div class="col-md-2 mb-3">
            <label class="font-weight-bold">
              <i class="fas fa-shopping-cart"></i> Precio Compra
            </label>

          <input type="number" class="form-control" id="precio_compra" onkeyup="calcular_total()" placeholder="S/ 0.00">

          </div>
           <div class="col-md-2 mb-3">
            <label class="font-weight-bold">
            <i class="fas fa-gas-pump"></i> Galones
            </label>

           <input type="number" class="form-control" id="galones" onkeyup="calcular_total()" placeholder="INGRESA LA CANTIDAD">
          </div>
            <div class="col-md-2 mb-3">
            <label class="font-weight-bold">
            <i class="fas fa-cash-register"></i> Precio venta
            </label>

            <input type="number" class="form-control" id="precio_venta" placeholder="S/ 0.00">
          </div>


        


          <!-- DETALLES -->
          <div class="col-md-6 mb-3">
            <label class="font-weight-bold">
              <i class="fas fa-align-left"></i> Detalles
            </label>

            <input type="text" class="form-control" id="detalles_compras_combustibles" placeholder="Ej: compra de aceite, pago de limpieza...">
          </div>

              <div class="col-md-2 mb-3">
            <label class="font-weight-bold">
              <i class="fas fa-money-bill-wave"></i> TOTAL
            </label>

            <input type="number" class="form-control" id="total" placeholder="S/ 0.00" required readonly>
                      </div>


          <!-- BOTON -->
          <div class="col-md-1 mb-3 text-center">

            <button class="btn btn-danger btn-block shadow" onclick="registrar_compras()">
              <i class="fas fa-plus-circle"></i>
            </button>

          </div>

      </div>
    </div>





     <div id="gastos_detallados" class="d-none">
        <div class="row align-items-end">
 
          <!-- combustible -->
            <!-- TIPO DE GASTO -->
          <div class="col-md-3 mb-3">
            <label class="font-weight-bold">
              <i class="fas fa-list"></i>Gastos detallados
            </label>

           <select class="form-control" id="lista_de_gastos">
                 
                </select>
          </div>

          <!-- TIPO DE GASTO -->
          <div class="col-md-3 mb-3">
            <label class="font-weight-bold">
              <i class="fas fa-list"></i> Tipo de pago
            </label>

            <select class="form-control " style="width:100%" id="modo_pago_detallado">
            
            
            </select>
          </div>

      <!-- MONTO -->
          <div class="col-md-2 mb-3">
            <label class="font-weight-bold">
             <i class="fas fa-arrow-down"></i>  Ingresa el monto
            </label>

          <input type="number" class="form-control" id="monto_dinero_detallado" placeholder="S/ 0.00">

          </div>

          <!-- DETALLES -->
          <div class="col-md-2 mb-3">
            <label class="font-weight-bold">
              <i class="fas fa-align-left"></i> Detalles
            </label>

            <input type="text" class="form-control" id="otros_detalles" placeholder="Ej: compra de aceite, pago de limpieza...">
          </div>
          <!-- BOTON -->
          <div class="col-md-1 mb-3 text-center">

            <button class="btn btn-danger btn-block shadow" onclick="registrar_detalles_gastos()">
              <i class="fas fa-plus-circle"></i>
            </button>

          </div>

      </div>
    </div>





    </div>

  </div>

</div>












    <!-- ===================== -->
    <!-- CLIENTES -->
    <!-- ===================== -->
    <div class="col-md-12 mb-5">

      <div class="card shadow-lg border-0">

       <div class="card-header bg-dark text-white position-relative text-center">

  <h5 class="mb-0">
    <i class="fas fa-users mr-2"></i> Ventas a clientes
  </h5>
  <div id="cantidad_lista_registrado">
   
  </div>
  

</div>

        <div class="card-body">

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

            <!-- CLIENTE -->
            <div class="col-md-3 mb-2">
              <label class="font-weight-bold">
                <i class="fas fa-user"></i> Seleccionar Cliente
              </label>
              <button class="btn btn-info btn-sm px-2 py-1" data-toggle="modal" data-target="#modal_cliente">
                <i class="fas fa-plus-circle"></i>
              </button>
             <div class="form-group position-relative mt-2">

              <input type="text" class="form-control" id="clientes_disponibles" placeholder="Buscar cliente...">

              <div id="lista_clientes" class="list-group position-absolute w-100 shadow" style="z-index:1000;"></div>

              </div>
              <input type="hidden" id="cargar_id_clientes">
            </div>

            <input type="hidden" id="subtotal_cliente_hidden">
            <input type="hidden" id="total_cliente_hidden">
            <!-- GALONES -->
            <div class="col-md-2 mb-2">
              <div class="form-group">
                <label class="font-weight-bold"><i class="fas fa-gas-pump"></i> Combustible</label>

                <select class="form-control" id="tipo_combustible_cliente_">
                 
                </select>
              </div>
            </div>
            <!-- GALONES -->
            <div class="col-md-3 mb-4">
              <label class="font-weight-bold">
                <i class="fas fa-gas-pump"></i> Galones
              </label>
             <input type="number" class="form-control" id="cantidad_galones_cliente_" placeholder="0.00">
            </div>

            <!-- DESCUENTO -->
            <div class="col-md-3 mb-4">
              <label class="font-weight-bold">
                <i class="fas fa-percentage"></i> Descuento X Galon
              </label>
              <input type="number" class="form-control" placeholder="S/ 0.00" id="descuento_cliente_">
            </div>

            <!-- SUBTOTAL -->
            <div class="col-md-2 mb-2">
              <label class="font-weight-bold">
                <i class="fas fa-calculator"></i> Sub Total
              </label>
           <input type="text" class="form-control bg-light" id="subtotal_cliente_" readonly>
            </div>

            <!-- TOTAL -->
              <div class="col-md-2 mb-2">
                <label class="font-weight-bold">
                <i class="fas fa-money-bill-wave"></i> Total
                </label>
                <input type="text" class="form-control bg-light" id="total_cliente_" readonly>
              </div>


                   <!-- total descuento  -->
              <div class="col-md-2 mb-2">
                <label class="font-weight-bold">
                <i class="fas fa-money-bill-wave"></i> Descuento
                </label>
                <input type="text" id="monto_descontado" class="form-control bg-light" readonly>
              </div>

                 <!-- COBRANZA -->
              <div class="col-md-2 mb-2 d-none" id="fecha_de_pago">
                <label class="font-weight-bold">
                <i class="fas fa-money-bill-wave"></i> Fecha de cobranza
                </label>
                <input type="date" class="form-control bg-light" id="cobranza" value="0">
              </div>
  <!-- FIADO O CHAS  -->

            <div class="mb-3">

              <button type="button" id="interruptor_estado" class="btn btn-success">
              <i class="fas fa-cash-register"></i> Cash
              </button>

              <input type="hidden" id="estado_valor" value="0">

              </div>
            <!-- BOTON -->
            <div class="col-md-1 mb-3 text-center">

              <button class="btn btn-success btn-block shadow" onclick="vender_cliente()">
                <i class="fas fa-check"></i>
              </button>

            </div>

          </div>

        </div>

      </div>

    </div>












    
    <div class="col-md-12 mb-5">

      <div class="card shadow-lg border-0">

        <div class="card-header bg-primary text-white">

          <div class="d-flex justify-content-between align-items-center">

            <h5 class="mb-0">
              <i class="fas fa-cash-register mr-2"></i>
              Cuadre de Ventas
            </h5>

            <span class="badge badge-light">
              <i class="fas fa-calculator"></i> Caja
            </span>

          </div>

        </div>

            <div class="card-body">

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

            <div class="text-right mt-3">
                <button class="btn btn-warning btn-lg" onclick="recopilar_datos()">Cerrar</button>
            </div>

          </div>
      </div>

    </div>








    

    <!-- ===================== -->
    <!-- CUADRE DE PAGOS -->
    <!-- ===================== -->


























    <div class="modal fade" id="modal_cliente" tabindex="-1">

  <div class="modal-dialog modal-lg">
    
    <div class="modal-content">

      <!-- HEADER -->
      <div class="modal-header bg-primary text-white">

        <h5 class="modal-title">
          <i class="fas fa-user-plus mr-2"></i>
          Registrar Cliente
        </h5>

        <button type="button" class="close text-white" data-dismiss="modal">
          <span>&times;</span>
        </button>

      </div>


      <!-- BODY -->
      <div class="modal-body">

        <div class="row">

          <!-- DNI / RUC -->
          <div class="col-md-4 mb-3">
            <label class="font-weight-bold">
              <i class="fas fa-id-card"></i> DNI / RUC
            </label>
            <input type="number" class="form-control" placeholder="Ingrese DNI o RUC">
          </div>


          <!-- NOMBRE -->
          <div class="col-md-8 mb-3">
            <label class="font-weight-bold">
              <i class="fas fa-building"></i> Nombre / Empresa
            </label>
            <input type="text" class="form-control" placeholder="Nombre del cliente o empresa">
          </div>


          <!-- DIRECCION -->
          <div class="col-md-8 mb-3">
            <label class="font-weight-bold">
              <i class="fas fa-map-marker-alt"></i> Direcci¨Žn
            </label>
            <input type="text" class="form-control" placeholder="Direcci¨Žn del cliente">
          </div>


          <!-- CELULAR -->
          <div class="col-md-4 mb-3">
            <label class="font-weight-bold">
              <i class="fas fa-phone"></i> Celular
            </label>
            <input type="number" class="form-control" placeholder="N¨˛mero celular">
          </div>

        </div>

      </div>


      <!-- FOOTER -->
      <div class="modal-footer">

        <button class="btn btn-secondary" data-dismiss="modal">
          <i class="fas fa-times"></i> Cancelar
        </button>

        <button class="btn btn-success">
          <i class="fas fa-save"></i> Registrar Cliente
        </button>

      </div>

    </div>

  </div>

</div>






<!-- NUEVO MODAL DE LISTA DE VENTAS -->
<div class="modal fade" id="modalListaVentas" tabindex="-1" role="dialog" aria-labelledby="modalListaVentasLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">

      <!-- HEADER -->
      <div class="modal-header bg-primary text-white">
        <h5 class="modal-title" id="modalListaVentasLabel">
          <i class="fas fa-list"></i> Lista de Ventas
        </h5>
        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <!-- BODY -->
      <div class="modal-body">
        <div class="table-responsive">
          <table class="table table-bordered table-hover">
            <thead class="thead-light">
              <tr>
                <th>Cliente</th>
                <th>Combustible</th>
                <th>Galones</th>
                <th>Descuento</th>
                <th>Total</th>
                <th>Tipo</th>
              </tr>
            </thead>
            <tbody id="listaVentasBody">
              <!-- Datos ficticios -->
              
          
            </tbody>
          </table>
        </div>
      </div>

      <!-- FOOTER -->
      <div class="modal-footer">
        <button class="btn btn-secondary" data-dismiss="modal">
          <i class="fas fa-times"></i> Cerrar
        </button>
      </div>

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





  </div>

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