@extends('layouts/layoutMaster')

@section('title', __('locale.Orders'))

@section('vendor-style')
  @vite(['resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss', 'resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.scss', 'resources/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.scss'])
@endsection

@section('vendor-script')
  @vite(['resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js'])
@endsection

@section('page-script')
  @vite(['resources/assets/js/orders.js'])
@endsection

@section('content')
  <!-- Order List Widget -->

  <div class="card mb-6">
    <div class="card-widget-separator-wrapper">
      <div class="card-body card-widget-separator">
        <div class="row gy-4 gy-sm-1">
          <div class="col-sm-6 col-lg-3">
            <div class="d-flex justify-content-between align-items-start card-widget-1 border-end pb-4 pb-sm-0">
              <div>
                <h4 class="mb-0 text-primary">{{ $totalOrder }}</h4>
                <p class="mb-0">{{ __('locale.Total Orders') }}</p>
              </div>
              <span class="avatar me-sm-6">
                <span class="avatar-initial bg-label-secondary rounded text-heading">
                  <i class="icon-base ti tabler-calendar-stats icon-26px text-heading"></i>
                </span>
              </span>
            </div>
            <hr class="d-none d-sm-block d-lg-none me-6" />
          </div>
          <div class="col-sm-6 col-lg-3">
            <div class="d-flex justify-content-between align-items-start card-widget-2 border-end pb-4 pb-sm-0">
              <div>
                <h4 class="mb-0 text-success">{{ $completed }}</h4>
                <p class="mb-0">{{ __('locale.Completed') }}</p>
              </div>
              <span class="avatar p-2 me-lg-6">
                <span class="avatar-initial bg-label-secondary rounded"><i
                    class="icon-base ti tabler-checks icon-26px text-heading"></i></span>
              </span>
            </div>
            <hr class="d-none d-sm-block d-lg-none" />
          </div>
          <div class="col-sm-6 col-lg-3">
            <div class="d-flex justify-content-between align-items-start border-end pb-4 pb-sm-0 card-widget-3">
              <div>
                <h4 class="mb-0 text-warning">{{ $pendingPayments }}</h4>
                <p class="mb-0">{{ __('locale.Pending Payment') }}</p>
              </div>
              <span class="avatar p-2 me-sm-6">
                <span class="avatar-initial bg-label-secondary rounded"><i
                    class="icon-base ti tabler-wallet icon-26px text-heading"></i></span>
              </span>
            </div>
          </div>
          <div class="col-sm-6 col-lg-3">
            <div class="d-flex justify-content-between align-items-start">
              <div>
                <h4 class="mb-0 text-danger">{{ $cancelled }}</h4>
                <p class="mb-0">{{ __('locale.Cancelled') }}</p>
              </div>
              <span class="avatar p-2">
                <span class="avatar-initial bg-label-secondary rounded"><i
                    class="icon-base ti tabler-alert-octagon icon-26px text-heading"></i></span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Order List Table -->
  <div class="card">
    <div class="card-header border-bottom">
      <h5 class="card-title">{{ __('locale.Filter') }}</h5>
      <div class="d-flex justify-content-between align-items-center row pt-4 gap-6 gap-md-0 g-md-6">
        <div class="col-md-3 customer"></div>
        <div class="col-md-3 order_status"></div>
        <div class="col-md-3 payment_status"></div>
        <div class="col-md-3 payment_type"></div>
      </div>
    </div>
    <div class="card-datatable table-responsive">
      <table class="datatables-order table border-top">
        <thead>
          <tr>
            <th></th>
            <th></th>
            <th>{{ __('locale.Order') }}</th>
            <th>{{ __('locale.Date') }}</th>
            <th>{{ __('locale.Customers') }}</th>
            <th>{{ __('locale.Payment') }}</th>
            <th>{{ __('locale.Status') }}</th>
            <th>{{ __('locale.Type') }}</th>
            <th>{{ __('locale.Actions') }}</th>
          </tr>
        </thead>
      </table>
    </div>
  </div>
  @include('_partials/_modals/modal-prescription')
@endsection