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

@section('content')


<div class="{{ $containerClass ?? 'container' }} page__container">

  <div class="row card-group-row">
    <div class="col-xl-3 col-md-6 card-group-row__col">
      <div class="card card-group-row__card card-body flex-row align-items-center">
        <div class="flex">
          <div class="text-amount">{{ $inQueue->count() }}</div>
          <div class="text-muted mt-1">Orders in Queue</div>
        </div>
        test
      </div>
    </div>
    <div class="col-xl-3 col-md-6 card-group-row__col">
      <div class="card card-group-row__card card-body flex-row align-items-center">
        <div class="flex">
          <div class="text-amount">{{ $inProgress->count() }}</div>
          <div class="text-muted mt-1">Orders in Progress</div>

        </div>
      </div>
    </div>
    <div class="col-xl-3 col-md-6 card-group-row__col">
      <div class="card card-group-row__card card-body flex-row align-items-center">
        <div class="flex">
          <div class="text-amount">{{ $inQA->count() }}</div>
          <div class="text-muted mt-1">Orders In Quality Control</div>
          <!-- <div class="text-stats text-success">51.5% <i class="material-icons">arrow_upward</i></div> -->
        </div>
      </div>
    </div>
    <div class="col-xl-3 col-md-6 card-group-row__col">
      <div class="card card-group-row__card card-body flex-row align-items-center">
        <div class="flex">
          <div class="text-amount">{{ $inIssue->count() }}</div>
          <div class="text-muted mt-1">Orders In Issue</div>
          <!-- <div class="text-stats text-success">51.5% <i class="material-icons">arrow_upward</i></div> -->
        </div>
      </div>
    </div>

    <div class="col-xl-3 col-md-6 card-group-row__col">
      <div class="card card-group-row__card card-body flex-row align-items-center">
        <div class="flex">
          <div class="text-amount">{{ $inQueue30->count() }}</div>
          <div class="text-muted mt-1">Orders Over 30 Days After Submitting Details</div>
          <!-- <div class="text-stats text-success">51.5% <i class="material-icons">arrow_upward</i></div> -->
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-lg">
      <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">Orders In Queue</h4>
        </div>
        <div>
          <div>
            <div id="tabla" class="table-responsive border-bottom">
              <div class="search-form search-form--light m-3">
                <input type="text" class="form-control search" placeholder="Search">
                <button class="btn" type="button"><i class="material-icons">search</i></button>
              </div>
              <table class="table">
                <thead class="thead">
                  <tr>
                    <th class="sort" data-sort="id">System ID</th>
                    <th class="sort" data-sort="invoice">Order ID</th>
                    <th class="sort" data-sort="name">Product Name</th>
                    <th class="sort" data-sort="submit">Submit at</th>
                    <th>Actions</th>
                  </tr>
                </thead>
                <tbody class="list">
                  @foreach($inQueue as $order)
                  <tr>
                    <td class="id">{{ $order->id }}</td>
                    <td class="invoice">{{ $order->invoice_id }}</td>
                    <td class="name">{{ $order->name }}</td>
                    <td class="submit">{{ $order->submit_at  }} - @php
                      if(strtotime($order->submit_at) < strtotime('-30 days')){ echo '<span class="badge badge-danger ml-auto">Delayed</span>' ; } @endphp </td>
                    <td>
                      <x-showbuttom :order=" $order " />
                    </td>
                  </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
            <div class="card-footer text-center border-0">
              <a class="text-muted" href="{{ route('admin.listQueue') }}">View All</a>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>

  <div class="row">
    <div class="col-lg">
      <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">Orders in Progress</h4>
        </div>
        <div class="list-group tab-content list-group-flush">
          <div>
            <div id="tabla" class="table-responsive border-bottom">
              <div class="search-form search-form--light m-3">
                <input type="text" class="form-control search" placeholder="Search">
                <button class="btn" type="button"><i class="material-icons">search</i></button>
              </div>
              <table class="table">
                <thead class="thead">
                  <tr>
                    <th class="sort" data-sort="id">System ID</th>
                    <th class="sort" data-sort="invoice">Order ID</th>
                    <th class="sort" data-sort="name">Product Name</th>
                    <th class="sort" data-sort="submit">Submit at</th>
                    <th>Actions</th>
                  </tr>
                </thead>
                <tbody class="list">
                  @foreach($inProgress as $order)
                  <tr>
                    <td class="id">{{ $order->id }}</td>
                    <td class="invoice">{{ $order->invoice_id }}</td>
                    <td class="name">{{ $order->name }}</td>
                    <td class="submit">{{ $order->submit_at  }} - @php
                      if(strtotime($order->submit_at) < strtotime('-30 days')){ echo '<span class="badge badge-danger ml-auto">Delayed</span>' ; } @endphp </td>
                    <td>
                      <x-showbuttom :order=" $order " />
                    </td>
                  </tr>
                  @endforeach
                </tbody>
              </table>
            </div>


            <div class="card-footer text-center border-0">
              <a class="text-muted" href="{{ route('admin.listProgress') }}">View All</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-lg">
      <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">Orders in Quality Control</h4>
        </div>
        <div>
          <div>
            <div id="tabla" class="table-responsive border-bottom">
              <div class="search-form search-form--light m-3">
                <input type="text" class="form-control search" placeholder="Search">
                <button class="btn" type="button"><i class="material-icons">search</i></button>
              </div>
              <table class="table">
                <thead class="thead">
                  <tr>
                    <th class="sort" data-sort="id">System ID</th>
                    <th class="sort" data-sort="invoice">Order ID</th>
                    <th class="sort" data-sort="name">Product Name</th>
                    <th class="sort" data-sort="submit">Submit at</th>
                    <th>Actions</th>
                  </tr>
                </thead>
                <tbody class="list">
                  @foreach($inQA as $order)
                  <tr>
                    <td class="id">{{ $order->id }}</td>
                    <td class="invoice">{{ $order->invoice_id }}</td>
                    <td class="name">{{ $order->name }}</td>
                    <td class="submit">{{ $order->submit_at  }} </td>
                    <td>
                      <x-showbuttom :order=" $order " />
                    </td>
                  </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
            <div class="card-footer text-center border-0">
              <a class="text-muted" href="{{ route('admin.listQA') }}">View All</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-lg">
      <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">Orders in Issue</h4>
        </div>
        <div>
          <div>
            <div id="tabla" class="table-responsive border-bottom">
              <div class="search-form search-form--light m-3">
                <input type="text" class="form-control search" placeholder="Search">
                <button class="btn" type="button"><i class="material-icons">search</i></button>
              </div>
              <table class="table">
                <thead class="thead">
                  <tr>
                    <th class="sort" data-sort="id">System ID</th>
                    <th class="sort" data-sort="invoice">Order ID</th>
                    <th class="sort" data-sort="name">Product Name</th>
                    <th class="sort" data-sort="submit">Submit at</th>
                    <th>Actions</th>
                  </tr>
                </thead>
                <tbody class="list">
                  @foreach($inIssue as $order)
                  <tr>
                    <td class="id">{{ $order->id }}</td>
                    <td class="invoice">{{ $order->invoice_id }}</td>
                    <td class="name">{{ $order->name }}</td>
                    <td class="submit">{{ $order->submit_at  }} </td>
                    <td>
                      <x-showbuttom :order=" $order " />
                    </td>
                  </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
            <div class="card-footer text-center border-0">
              <a class="text-muted" href="{{ route('admin.listIssue') }}">View All</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-lg">
      <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">Orders In Queue 30 days</h4>
        </div>
        <div>
          <div>
            <div id="tabla" class="table-responsive border-bottom">
              <div class="search-form search-form--light m-3">
                <input type="text" class="form-control search" placeholder="Search">
                <button class="btn" type="button"><i class="material-icons">search</i></button>
              </div>
              <table class="table">
                <thead class="thead">
                  <tr>
                    <th class="sort" data-sort="id">System ID</th>
                    <th class="sort" data-sort="invoice">Order ID</th>
                    <th class="sort" data-sort="name">Product Name</th>
                    <th class="sort" data-sort="submit">Submit at</th>
                    <th>Actions</th>
                  </tr>
                </thead>
                <tbody class="list">
                  @foreach($inQueue30 as $order)
                  <tr>
                    <td class="id">{{ $order->id }}</td>
                    <td class="invoice">{{ $order->invoice_id }}</td>
                    <td class="name">{{ $order->name }}</td>
                    <td class="submit">{{ $order->submit_at  }} - @php
                      if(strtotime($order->submit_at) <= strtotime('-30 days')){ echo '<span class="badge badge-danger ml-auto">Delayed</span>' ; } @endphp </td>
                    <td>
                      <x-showbuttom :order=" $order " />
                    </td>
                  </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<script>
  var options = {
    valueNames: ['id', 'invoice', 'name', 'submit']
  };
  var tabla = new List('tabla', options);
</script>
@endsection

@section('head')
<!-- Flatpickr -->
<link type="text/css" href="{{ mix('css/vendor/flatpickr.css') }}" rel="stylesheet">
<link type="text/css" href="{{ mix('css/vendor/flatpickr-airbnb.css') }}" rel="stylesheet">

<!-- Vector Maps -->
<link type="text/css" href="{{ mix('vendor/jqvmap/jqvmap.min.css') }}" rel="stylesheet">
@endsection

@section('footer')
<!-- Global Settings -->
<script src="{{ mix('js/settings.js') }}" defer></script>
@endsection