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

.tank-container {
  display: flex;
  justify-content: center;
}

.tank {
  width: 90px;
  height: 150px;
  border: 4px solid #343a40;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  background: #f8f9fa;
}

.liquid {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 0%;
  background: #28a745;
  transition: height 1.5s ease-in-out;
}

/* Efecto líquido curvado */
.liquid::before {
  content: "";
  position: absolute;
  top: -15px;
  left: -50%;
  width: 200%;
  height: 30px;
  background: inherit;
  border-radius: 40%;
  animation: wave 3s infinite linear;
}

@keyframes wave {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Alerta parpadeo si está crítico */
.alerta {
  animation: parpadeo 1s infinite;
}

@keyframes parpadeo {
  0% { opacity: 1; }
  50% { opacity: 0.4; }
  100% { opacity: 1; }
}

</style>

<div class="container mt-4">
  <div class="row">

    <!-- DIESEL -->
    <div class="col-md-6 col-6 col-lg-3 mb-4">
      <div class="card shadow-sm text-center">
        <div class="card-header font-weight-bold bg-light">
          Diesel
        </div>
        <div class="card-body">

          <div class="tank-container">
            <div class="tank">
              <div class="liquid" id="nivel_diesel"></div>
            </div>
          </div>

          <h4 id="txt_diesel" class="mt-3 font-weight-bold"></h4>

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

    <!-- REGULAR -->
    <div class="col-md-6 col-6 col-lg-3 mb-4">
      <div class="card shadow-sm text-center">
        <div class="card-header font-weight-bold bg-light">
          Regular
        </div>
        <div class="card-body">

          <div class="tank-container">
            <div class="tank">
              <div class="liquid" id="nivel_regular"></div>
            </div>
          </div>

          <h4 id="txt_regular" class="mt-3 font-weight-bold"></h4>

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

    <!-- PREMIUM -->
    <div class="col-md-6 col-6 col-lg-3 mb-4">
      <div class="card shadow-sm text-center">
        <div class="card-header font-weight-bold bg-light">
          Premium
        </div>
        <div class="card-body">

          <div class="tank-container">
            <div class="tank">
              <div class="liquid" id="nivel_premium"></div>
            </div>
          </div>

          <h4 id="txt_premium" class="mt-3 font-weight-bold"></h4>

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

    <!-- GLP -->
    <div class="col-md-6 col-6 col-lg-3 mb-4">
      <div class="card shadow-sm text-center">
        <div class="card-header font-weight-bold bg-light">
          GLP
        </div>
        <div class="card-body">

          <div class="tank-container">
            <div class="tank">
              <div class="liquid" id="nivel_glp"></div>
            </div>
          </div>

          <h4 id="txt_glp" class="mt-3 font-weight-bold"></h4>

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

  </div>
</div>


<div class="container mt-4">


  <!-- Línea divisora superior -->
  <div class="row">
    <div class="col-12">
      <hr class="mb-4">
    </div>
  </div>

  <!-- FILA PRINCIPAL -->
  <div class="row">

    <!-- ISLA 1 -->
    <div class="col-md-4 mb-4 border-right">
      <div class="card shadow-sm h-100">
        <div class="card-header text-center font-weight-bold bg-light">
          ISLA 1
        </div>
        <div class="card-body">

          <div class="d-flex justify-content-between">
            <span class="font-weight-bold">DIESEL:</span>
            <span id="isla_1_diesel">  </span>
          </div>

          <div class="d-flex justify-content-between mt-2">
            <span class="font-weight-bold">REGULAR:</span>
            <span id="isla1_regular"></span>
          </div>

          <hr>

          <div class="d-flex justify-content-between">
            <span class="font-weight-bold">Total Ventas Día:</span>
            <span id="ventas_1"></span>
          </div>

          <div class="d-flex justify-content-between mt-2">
            <span class="font-weight-bold">
                Total Ganancias:
            </span>
            <span id="isla1_ventas">S/ --</span>
          </div>

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

    <!-- ISLA 2 -->
    <div class="col-md-4 mb-4 border-right">
      <div class="card shadow-sm h-100">
        <div class="card-header text-center font-weight-bold bg-light">
          ISLA 2
        </div>
        <div class="card-body">

          <div class="d-flex justify-content-between">
            <span class="font-weight-bold">DIESEL:</span>
            <span id="isla2_diesel"></span>
          </div>

          <div class="d-flex justify-content-between mt-2">
            <span class="font-weight-bold">REGULAR:</span>
            <span id="isla2_regular"></span>
          </div>

                <div class="d-flex justify-content-between mt-2">
            <span class="font-weight-bold">PRIMIUN:</span>
            <span id="isla2_primiun"></span>
          </div>

          <hr>

          <div class="d-flex justify-content-between">
            <span class="font-weight-bold">Total Ventas Día:</span>
            <span id="ventas_2"></span>
          </div>

          <div class="d-flex justify-content-between mt-2">
            <span class="font-weight-bold"> Total Ganancias:</span>
            <span id="isla2_ventas">S/ --</span>
          </div>

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

    <!-- ISLA 3 -->
    <div class="col-md-4 mb-4">
      <div class="card shadow-sm h-100">
        <div class="card-header text-center font-weight-bold bg-light">
          ISLA 3
        </div>
        <div class="card-body">

          <div class="d-flex justify-content-between">
            <span class="font-weight-bold">GLP:</span>
            <span id="isla3_glp"></span>
          </div>

     
          <hr>

          <div class="d-flex justify-content-between">
            <span class="font-weight-bold">Total Ventas Día:</span>
            <span id="ventas_3"></span>
          </div>

          <div class="d-flex justify-content-between mt-2">
            <span class="font-weight-bold">  Total Ganancias:</span>
            <span id="isla3_ventas">S/ --</span>
          </div>

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

  </div>

  <!-- DIVISOR GENERAL -->
  <div class="row">
    <div class="col-12">
      <hr class="mt-4 mb-4">
    </div>
  </div>

  <!-- RESUMEN FINAL -->
  <div class="row">

    <!-- TOTAL GENERAL -->
    <div class="col-md-6 border-right">

      <div class="card shadow-sm">
        <div class="card-header text-center font-weight-bold bg-light">
          TOTAL GENERAL DEL DÍA
        </div>

        <div class="card-body text-center">
          <h3 class="font-weight-bold">
            S/ <span id="total_ventas"></span>
          </h3>
        </div>
      </div>

    </div>

    <!-- RESUMEN POR COMBUSTIBLE -->
    <div class="col-md-6">

      <div class="card shadow-sm">
        <div class="card-header text-center font-weight-bold bg-light">
          RESUMEN POR COMBUSTIBLE
        </div>

        <div class="card-body">

          <div class="d-flex justify-content-between">
            <span class="font-weight-bold">Diesel:</span>
            <span id="total_diesel">S/</span>
          </div>

          <div class="d-flex justify-content-between mt-2">
            <span class="font-weight-bold">Regular:</span>
            <span id="total_regular">S/</span>
          </div>

          <div class="d-flex justify-content-between mt-2">
            <span class="font-weight-bold">Premium:</span>
            <span id="total_primium">S/</span>
          </div>

          <div class="d-flex justify-content-between mt-2">
            <span class="font-weight-bold">GLP:</span>
            <span id="total_glp">S/</span>
          </div>

        </div>
      </div>

    </div>

  </div>

</div>



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