@extends('includes.main')

@section('main-container')
<main>
    <div class="container-fluid">
       <div class="row">
          <div class="col-12">
             <h1>Stock Report</h1>
             <div class="separator mb-5"></div>
          </div>
       </div>

       {{-- Table form --}}
       {{-- <div class="card mb-4">
         <div class="card-body">
            <h5 class="mb-4">Report Filter</h5>
            <form method="POST" id="frm-supply" action="{{ route('report.stock') }}">
               @csrf
               <div class="form-row">
                  <div class="form-group col-md-4">
                  <label>Product</label> 
                  <select name="product" id="product" class="form-control" required>
                     <option value="">Select</option>
                     @foreach ($products as $product)
                           <option value="{{ $product->id }}">{{ $product->title }}</option>
                     @endforeach
                  </select>
                  </div>
               </div>
               <button type="submit" id="btn-submit" class="btn btn-primary d-block mt-3">Filter</button>
            </form>
         </div>
      </div> --}}

       <div class="row mb-4">
         <div class="col-lg-12 col-md-12 mb-4">
            <div class="row icon-cards-row mb-4">
               <div class="col-md-4 col-lg-4 col-sm-4 col-6 mb-4">
                  <a href="#" class="card">
                     <div class="card-body text-center">
                        <img src="https://icons.iconarchive.com/icons/iconsmind/outline/128/Financial-icon.png"
                        width="128" height="128">
                        <p class="card-text font-weight-semibold mb-0">Petroll</p>
                        <p class="lead text-center">{{ $Petrols ?? 0 }}</p>
                     </div>
                  </a>
               </div>

               <div class="col-md-4 col-lg-4 col-sm-4 col-6 mb-4">
                  <a href="#" class="card">
                     <div class="card-body text-center">
                        <img src="https://icons.iconarchive.com/icons/iconsmind/outline/128/Money-2-icon.png"
                        width="128" height="128">
                        <p class="card-text font-weight-semibold mb-0">Diesel</p>
                        <p class="lead text-center">{{ $Diesel ?? 0 }}</p>
                     </div>
                  </a>
               </div>

               <div class="col-md-4 col-lg-4 col-sm-4 col-6 mb-4">
                  <a href="#" class="card">
                     <div class="card-body text-center">
                        <img src="https://icons.iconarchive.com/icons/iconsmind/outline/128/Coins-icon.png"
                                    width="128" height="128">
                        <p class="card-text font-weight-semibold mb-0">Mobil Oil</p>
                        <p class="lead text-center">00</p>
                     </div>
                  </a>
               </div>
            </div>
         </div>
       </div>
    </div>
 </main>
@endsection