@extends('adminlte::page')

@section('title', 'Dashboard')
    
@section('content')

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script>
  $(function(){
    $("#fecha").datepicker({
       format: 'dd-mm-yy'
    });
  });
</script>

<br>

<div class="row g-6">    
  <div class="col">
    <form action="{{ route('statistics.index') }}" method="POST" novalidate>
      @csrf
    <div class="row g-2"> 
      <div class="col">
         <input class="form-control datepicker" placeholder="Elegir Día" id="date" name="date" type="text">
          <input
          type="submit"
          value="Buscar"
          class="btn btn-primary"/>
      </div>
    </div>
    </form>
  </div>
</div>


<div class="container text-center">
  <div class="row align-items-start">

    <div class="col">
      <h3>Fecha: {{$fecha}}</h3>
      <table class="table table-striped">
        <thead class="table-light">
          <td></td>
          <td> Inicio</td>
          <td> Ingresos</td>
          <td> Mermas</td>   
          <td> Final</td>
          <td> Valor</td>
          <td> Vendidos</td>       
          <td> Total</td>       
        </thead>
        <tbody>
          @foreach ($statistics as $data)
          <tr>
          <td>  {{$data->product_name}} </td>
           <td> {{$data->glasses_start_day}} </td>       
           <td> {{$data->revenue}} </td>       
           <td> {{$data->waste}} </td>       
           <td> {{$glasses_finished_day[$data->product_id]}} </td>       
           <td> {{$value[$data->product_id]}} </td>   
           <td> {{$cupsSold[$data->product_id]}} </td> 
           <td> ${{$total[$data->product_id]}} </td>           
          </tr>
          @endforeach
        </tbody>
      </table>
    </div>
</div>
</div>
    <div class="card" style="width: 18rem;">
      <ul class="list-group list-group-flush">
        <li class="list-group-item">Saldo Inicial: ${{$saldoInicial}}</li>
        <li class="list-group-item">Total Ventas: ${{$totalVentas}}</li>
        <li class="list-group-item">Retiro: ${{$retiro}}</li>
      </ul>
    </div>
    
    <div class="card" style="width: 18rem;">
      <ul class="list-group list-group-flush">
        <li class="list-group-item">Efectivo: ${{$totalEfectivo}}</li>
        <li class="list-group-item">Tarjeta Débito: ${{$totalTarjetaDebito}}</li>
        <li class="list-group-item">Tarjeta Crédito: ${{$totalTarjetaCredito}}</li>
      </ul>
    </div>

  <br>
    
</div>
  

@section('css')

@stop

@section('js')
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
    $( function() {
        $( ".datepicker" ).datepicker({
            dateFormat: 'yy-mm-dd',
            changeMonth: true,
            changeYear: true
        });
    });
</script>
@stop

@endsection