@extends('layouts/layoutMaster')

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

@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', 'resources/assets/vendor/libs/select2/select2.scss', 'resources/assets/vendor/libs/sweetalert2/sweetalert2.scss'])
@endsection

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

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

@section('content')
  <!-- Product List Widget -->
  <div class="card mb-6">
    <div class="card-widget-separator-wrapper">
      <div class="card-body card-widget-separator p-2">
        <div class="row gy-4 gy-sm-1">
          <div class="col-sm-6 col-lg-4">
            <div class="d-flex justify-content-between align-items-start card-widget-1 border-end pb-4 pb-sm-0">
              <div>
                <p class="mb-1">{{ __('locale.Total Products') }}</p>
                <h4 class="mb-1 text-primary">{{ $totalProduct }}</h4>
              </div>
              <span class="avatar me-sm-6">
                <span class="avatar-initial rounded"><i
                    class="icon-base ti tabler-brand-producthunt icon-28px text-heading"></i></span>
              </span>
            </div>
          </div>
          <div class="col-sm-6 col-lg-4">
            <div class="d-flex justify-content-between align-items-start card-widget-2 border-end pb-4 pb-sm-0">
              <div>
                <p class="mb-1">{{ __('locale.Publish Products') }}</p>
                <h4 class="mb-1 text-success">{{ $enabled }}</h4>

              </div>
              <span class="avatar p-2 me-lg-6">
                <span class="avatar-initial rounded"><i
                    class="icon-base ti tabler-smart-home icon-28px text-heading"></i></span>
              </span>
            </div>
          </div>
          <div class="col-sm-6 col-lg-4">
            <div class="d-flex justify-content-between align-items-start border-end pb-4 pb-sm-0 card-widget-3">
              <div>
                <p class="mb-1">{{ __('locale.Disabled Products') }}</p>
                <h4 class="mb-1 text-danger">{{ $disabled }}</h4>
              </div>
              <span class="avatar p-2 me-sm-6">
                <span class="avatar-initial rounded"><i
                    class="icon-base ti tabler-label-off icon-28px text-heading"></i></span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Product 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-4 product_status"></div>
        <div class="col-md-4 product_category"></div>
        <div class="col-md-4 product_stock"></div>
      </div>
    </div>
    <div class="card-datatable">
      <table class="datatables-products table">
        <thead class="border-top">
          <tr>
            <th></th>
            <th></th>
            <th>{{ __('locale.Product') }}</th>
            <th>{{ __('locale.Category') }}</th>
            <th>{{ __('locale.Stock') }}</th>
            <th>{{ __('locale.Sku') }}</th>
            <th>{{ __('locale.Price') }}</th>
            <th></th>
            <th>{{ __('locale.Status') }}</th>
            <th>{{ __('locale.Actions') }}</th>
          </tr>
        </thead>
      </table>
    </div>
  </div>

@endsection