@extends('layouts.app')

@section('title', 'Products & Services')

@section('content')
    <x-breadcrumbs :items="[
        ['label' => 'Dashboard', 'url' => route('dashboard')],
        ['label' => 'Products & Services'],
    ]" />

    <x-page-header title="Products & Services" subtitle="Manage products & services">
        @can('create', \App\Models\Product::class)
            <a href="{{ route('products.create') }}" class="btn btn-primary btn-sm">
                <i class="bi bi-plus-lg me-1"></i> Add Product
            </a>
        @endcan
    </x-page-header>

    <div class="vem-filter-bar">
        <form method="GET" action="{{ route('products.index') }}" class="row g-3 align-items-end">
            <div class="col-md-4">
                <label class="form-label" for="search">Search</label>
                <input type="search" name="search" id="search" class="form-control form-control-sm" value="{{ request('search') }}" placeholder="Name or code...">
            </div>
            <div class="col-md-3">
                <label class="form-label" for="category_id">Category</label>
                <select name="category_id" id="category_id" class="form-select form-select-sm">
                    <option value="">All categories</option>
                    @foreach ($categories as $category)
                        <option value="{{ $category->id }}" @selected((string) request('category_id') === (string) $category->id)>{{ $category->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label" for="status">Status</label>
                <select name="status" id="status" class="form-select form-select-sm">
                    <option value="">All</option>
                    <option value="active" @selected(request('status') === 'active')>Active</option>
                    <option value="inactive" @selected(request('status') === 'inactive')>Inactive</option>
                </select>
            </div>
            <div class="col-md-3 d-flex gap-2">
                <button type="submit" class="btn btn-primary btn-sm">Filter</button>
                <a href="{{ route('products.index') }}" class="btn btn-outline-secondary btn-sm">Reset</a>
            </div>
        </form>
    </div>

    <x-card flush>
        @if ($products->isEmpty())
            <x-empty-state icon="box-seam" title="No products yet" description="Add products and services for packages and documents.">
                @can('create', \App\Models\Product::class)
                    <a href="{{ route('products.create') }}" class="btn btn-primary btn-sm">Add Product</a>
                @endcan
            </x-empty-state>
        @else
            <x-table :headers="['Name', 'Category', 'Price', 'Charge Basis', 'Status', 'Actions']">
                @foreach ($products as $product)
                    <tr>
                        <td>
                            <a href="{{ route('products.show', $product) }}" class="fw-medium">{{ $product->name }}</a>
                            <div class="text-muted small">{{ $product->code }}</div>
                        </td>
                        <td>{{ $product->category->name ?? '—' }}</td>
                        <td><x-money :amount="$product->default_price" /></td>
                        <td>{{ $product->default_charge_basis->label() }}</td>
                        <td><x-badge :status="$product->is_active ? 'active' : 'inactive'" :label="$product->is_active ? 'Active' : 'Inactive'" /></td>
                        <td>
                            <div class="btn-group btn-group-sm">
                                <a href="{{ route('products.show', $product) }}" class="btn btn-outline-primary">View</a>
                                @can('update', $product)
                                    <a href="{{ route('products.edit', $product) }}" class="btn btn-outline-secondary">Edit</a>
                                @endcan
                            </div>
                        </td>
                    </tr>
                @endforeach
            </x-table>
            @if ($products->hasPages())
                <div class="p-3 border-top">{{ $products->links() }}</div>
            @endif
        @endif
    </x-card>
@endsection
