@extends('crm.master')

@section('title', 'Products')

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">

  <!-- Page Header -->
  <div class="row mb-4">
    <div class="col-12">
      <div class="d-flex align-items-center justify-content-between">
        <div>
          <h4 class="mb-1">Products</h4>
          <p class="text-muted mb-0">Manage your product catalogue</p>
        </div>
        <a href="{{ route('crm.products.create') }}" class="btn btn-primary">
          <i class="icon-base ti tabler-plus me-2 icon-14px"></i>
          Add Product
        </a>
      </div>
    </div>
  </div>

  <!-- Alerts -->
  @include('crm.components.alerts')

  <!-- Filter Bar -->
  <div class="card mb-4">
    <div class="card-body">
      <form method="GET" action="{{ route('crm.products.index') }}" class="row g-3 align-items-end">
        <div class="col-md-4">
          <label class="form-label">Search</label>
          <input type="text" name="search" class="form-control" placeholder="Search by name..." value="{{ request('search') }}">
        </div>
        <div class="col-md-3">
          <label class="form-label">Category</label>
          <select name="category_id" class="form-select">
            <option value="">All Categories</option>
            @foreach($categories as $cat)
              <option value="{{ $cat->id }}" {{ request('category_id') == $cat->id ? 'selected' : '' }}>
                {{ $cat->name }}
              </option>
            @endforeach
          </select>
        </div>
        <div class="col-md-2">
          <label class="form-label">Status</label>
          <select name="status" class="form-select">
            <option value="">All Statuses</option>
            <option value="active"   {{ request('status') === 'active'   ? 'selected' : '' }}>Active</option>
            <option value="inactive" {{ request('status') === 'inactive' ? 'selected' : '' }}>Inactive</option>
            <option value="draft"    {{ request('status') === 'draft'    ? 'selected' : '' }}>Draft</option>
          </select>
        </div>
        <div class="col-md-auto">
          <button type="submit" class="btn btn-secondary">Filter</button>
          <a href="{{ route('crm.products.index') }}" class="btn btn-label-secondary ms-1">Reset</a>
        </div>
      </form>
    </div>
  </div>

  <!-- Products Table -->
  <div class="card crm-grid-card">
    <div class="table-responsive crm-grid-wrap">
      <table class="table table-hover crm-grid-table">
        <thead>
          <tr>
            <th class="bg-secondary text-white">#</th>
            <th class="bg-secondary text-white">Name</th>
            <th class="bg-secondary text-white">SKU</th>
            <th class="bg-secondary text-white">Category</th>
            <th class="bg-secondary text-white">Tags</th>
            <th class="bg-secondary text-white">Inventory</th>
            <th class="bg-secondary text-white">Status</th>
          </tr>
        </thead>
        <tbody>
          @forelse($products as $key => $product)
            <tr>
              <td>{{ $products->firstItem() + $key }}</td>
              <td>
                <a href="{{ route('crm.products.edit', $product->hash_id) }}" class="fw-semibold text-primary">
                  {{ $product->name }}
                </a>
              </td>
              <td><code>{{ $product->sku }}</code></td>
              <td>{{ $product->category->name ?? '—' }}</td>
              <td>
                @forelse($product->tags as $tag)
                  <span class="badge bg-label-primary me-1">{{ $tag->name }}</span>
                @empty
                  <span class="text-muted">—</span>
                @endforelse
              </td>
              <td>
                @if($product->inventory_type === 'assets')
                  <span class="badge bg-label-info">Assets</span>
                @else
                  <span class="badge bg-label-secondary">Simple</span>
                  @if($product->inventory_amount !== null)
                    <small class="text-muted ms-1">{{ $product->inventory_amount }}</small>
                  @endif
                @endif
              </td>
              <td>
                @if($product->status === 'active')
                  <span class="badge bg-success">Active</span>
                @elseif($product->status === 'inactive')
                  <span class="badge bg-danger">Inactive</span>
                @else
                  <span class="badge bg-warning text-dark">Draft</span>
                @endif
              </td>
            </tr>
          @empty
            <tr>
              <td colspan="8" class="text-center py-5">
                <p class="text-muted mb-2">No products found</p>
                <a href="{{ route('crm.products.create') }}" class="btn btn-primary btn-sm">
                  Add First Product
                </a>
              </td>
            </tr>
          @endforelse
        </tbody>
      </table>
    </div>

    @if($products->hasPages())
      <div class="card-footer d-flex justify-content-end">
        {{ $products->links() }}
      </div>
    @endif
  </div>

</div>
@endsection