@extends("flowdash::layouts.{$layout}", [
'title' => 'Dashboard',
'breadcrumb' => [[
'title' => 'Dashboard'
]]
])

@section('content')


<div class="{{ $containerClass ?? 'container' }} page__container">
  <div class="row card-group-row">
    <div class="col-lg-3 col-md-4 card-group-row__col">
      <div class="card card-group-row__card">
        <div class="p-2 d-flex flex-row align-items-center">
          <div class="avatar avatar-xs mr-2">
            <span class="avatar-title rounded-circle text-center bg-primary">
              <i class="material-icons text-white icon-18pt">grade</i>
            </span>
          </div>
          <a href="https://thhc.store/training.html" target="_blank" class="text-dark">
            <strong>Training</strong>
          </a>
        </div>
      </div>
    </div>
    <div class="col-lg-3 col-md-4 card-group-row__col">
      <div class="card card-group-row__card">
        <div class="p-2 d-flex flex-row align-items-center">
          <div class="avatar avatar-xs mr-2">
            <span class="avatar-title rounded-circle text-center">
              <i class="material-icons text-white icon-18pt">add_circle</i>
            </span>
          </div>
          <a href="{{ route('main-projects.create') }}" class="text-dark">
            <strong>Create New Project</strong>
            <br>
            <small class="text-muted">Start Here</small>
          </a>
        </div>
      </div>
    </div>
    <div class="col-lg-3 col-md-4 card-group-row__col">
      <div class="card card-group-row__card">
        <div class="p-2 d-flex flex-row align-items-center">
          <div class="avatar avatar-xs mr-2">
            <span class="avatar-title rounded-circle text-center bg-success">
              <i class="material-icons text-white icon-18pt">list_alt</i>
            </span>
          </div>
          <a href="{{ route('main-projects.index') }}" class="text-dark">
            <strong>Project List</strong>
          </a>
        </div>
      </div>
    </div>
    <div class="col-lg-3 col-md-4 card-group-row__col">
      <div class="card card-group-row__card">
        <div class="p-2 d-flex flex-row align-items-center">
          <div class="avatar avatar-xs mr-2">
            <span class="avatar-title rounded-circle text-center bg-info">
              <i class="material-icons text-white icon-18pt">add_shopping_cart</i>
            </span>
          </div>
          <a href="https://thhc.store/products-and-services/" target="_blank" class="text-dark">
            <strong>Buy Products</strong>
          </a>
        </div>
      </div>
    </div>
    <div class="col-lg-3 col-md-4 card-group-row__col">
      <div class="card card-group-row__card">
        <div class="p-2 d-flex flex-row align-items-center">
          <div class="avatar avatar-xs mr-2">
            <span class="avatar-title rounded-circle text-center bg-purple">
              <i class="material-icons text-white icon-18pt">contact_support</i>
            </span>
          </div>
          <a href="mailto:support@heavyhitter.club" class="text-dark">
            <strong>Support</strong>
          </a>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col">
      <div class="card">
        <div class="card-header card-header-large bg-white">
          <h4 class="card-header__title">Products Awaiting Data</h4>
        </div>
        <table class="table table-striped border-bottom mb-0">
          @foreach( $products as $product)
          <tr>
            <td style="width: 100px;">ID: {{ $product->id }}</td>
            <td>
              <div>
                <strong>{{ $product->name }}</strong>
              </div>
            </td>
            <td>

            </td>
            <td class="text-right" style="width: 200px">
              Order Id: <strong> {{ $product->invoice_id }} </strong>
            </td>
          </tr>

          @endforeach
        </table>
      </div>
    </div>
    <div class="col">
      <div class="card">
        <div class="card-header card-header-large bg-white d-flex align-items-center">
          <h4 class="card-header__title flex m-0">Project List</h4>
        </div>

        <div class="list-group tab-content list-group-flush">
          <table class="table table-striped border-bottom mb-0">
            @foreach( $projects as $project)
            <tr>
              <td style="width: 40px;">{{ $project->id }}.</td>
              <td>
                <strong>{{ $project->name }}</strong>
              </td>
              <td class="text-right" style="width: 60px">
                <a href="{{ route('locations.index', $project->id) }}" class="btn btn-primary">View Project</a>
              </td>
            </tr>
            @endforeach
          </table>

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

</div>
@endsection