Blade + Alpine

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;
use Laratribe\AdvancedFilters\Concerns\HasFilters;
use Laratribe\AdvancedFilters\Contracts\Filterable;
use Laratribe\AdvancedFilters\Filters\{DateFilter, NumericFilter, SetFilter, TextFilter};

class Product extends Model implements Filterable
{
    use HasFilters;

    protected $guarded = [];

    public $timestamps = false;

    protected function casts(): array
    {
        return ['price' => 'float', 'stock' => 'integer', 'released_at' => 'date'];
    }

    /**
     * The one place that decides what can be filtered — and therefore the allow-list.
     * Anything not declared here can never reach the query, whatever the request says.
     */
    public static function filters(): array
    {
        return [
            TextFilter::make('name', 'Name'),
            TextFilter::make('sku', 'SKU')->nullable(),
            SetFilter::make('category', 'Category')
                ->options([
                    'electronics' => 'Electronics',
                    'books' => 'Books',
                    'clothing' => 'Clothing',
                    'toys' => 'Toys',
                ])
                ->multiple(),
            SetFilter::make('status', 'Status')->options([
                'in_stock' => 'In stock',
                'low' => 'Low stock',
                'out' => 'Out of stock',
            ]),
            NumericFilter::make('price', 'Price'),
            NumericFilter::make('stock', 'Stock'),
            DateFilter::make('released_at', 'Released'),
        ];
    }
}

<?php

use App\Models\Product;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use Laratribe\AdvancedFilters\Support\FilteredQuery;

Route::get('/', fn () => view('home'))->name('demo.home');

// ── Blade + Alpine ───────────────────────────────────────────────────────────
Route::get('/blade', function (Request $request) {
    $query = FilteredQuery::for(Product::class)->fromRequest($request);

    return view('blade', [
        'products' => $query->paginate(15),
        'fields' => $query->filterDefinitions(),   // wire contract OUT
        'active' => $query->activeFilters(),      // normalised rows, for the chips
    ]);
})->name('demo.blade');

// ── Livewire ─────────────────────────────────────────────────────────────────
Route::get('/livewire', fn () => view('livewire-page'))->name('demo.livewire');

// ── JSON API (no UI at all) ──────────────────────────────────────────────────
Route::get('/api', fn () => view('api'))->name('demo.api');

Route::get('/api/products/filters', fn () => response()->json([
    'fields' => Product::filterDefinitions(),
]))->name('api.filters');

Route::match(['get', 'post'], '/api/products', fn (Request $request) => response()->json(
    FilteredQuery::for(Product::class)->fromRequest($request)->paginate(15)
))->name('api.products');

@extends('layout')
@section('title', 'Blade + Alpine — Advanced Filters')
@section('heading', 'Blade + Alpine')
@section('frontend', 'zero build step — Alpine from a CDN, package JS published to public/')

@push('head')
    <script type="module">
        import Alpine from 'https://cdn.jsdelivr.net/npm/alpinejs@3.14.1/dist/module.esm.js'
        import '{{ asset('vendor/advanced-filters/advanced-filters.js') }}?v={{ filemtime(public_path('vendor/advanced-filters/advanced-filters.js')) }}'
        window.Alpine = Alpine
        Alpine.start()
    </script>
@endpush

@section('content')
    <div class="card">
        <x-advanced-filters::panel :fields="$fields" :active="$active" :base-url="route('demo.blade')" />
    </div>

    @include('_table')

    @include('_code', [
        'intro' => 'The model below is the <strong>same file</strong> the Livewire and JSON API pages use.
                    Only the last few lines differ per page — the filtering itself is declared once.',
        'files' => [
            ['path' => 'app/Models/Product.php', 'note' => 'identical on all three pages'],
            ['path' => 'routes/web.php', 'note' => 'the /blade route'],
            ['path' => 'resources/views/blade.blade.php', 'note' => 'this page'],
        ],
    ])
@endsection