@extends('public.layout.app')
@section('title','Products | PACHA PAINTS')

@section('body')
<section class="hero">
    <div class="container">

        <div class="d-flex flex-wrap justify-content-between align-items-end gap-2 mb-3">
            <div>
                <div class="pill"><i class="fa-solid fa-bucket brand-dot"></i> Products</div>
                <h2 class="fw-bold mt-2 mb-0">Browse Paint Collection</h2>
                <div class="muted">Search, filter and order online</div>
            </div>
            <a class="btn btn-brand" href="{{ route('front.order.create') }}">
                <i class="fa-solid fa-bag-shopping me-1"></i> Online Order
            </a>
        </div>

        {{-- Filters --}}
        <div class="cardx p-3 mb-3">
            <form method="GET" action="{{ route('front.products') }}" class="row g-2 align-items-end">
                <div class="col-lg-4">
                    <label class="small muted">Search</label>
                    <input class="form-control" name="q" value="{{ $q }}" placeholder="Name / Code ...">
                </div>
                <div class="col-lg-2">
                    <label class="small muted">Category</label>
                    <select class="form-select" name="cat">
                        <option value="">All</option>
                        @foreach($cats as $c)
                            <option value="{{ $c['slug'] }}" @selected($cat==$c['slug'])>{{ $c['title'] }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-lg-2">
                    <label class="small muted">Type</label>
                    <select class="form-select" name="type">
                        <option value="">Any</option>
                        <option value="interior" @selected($type=='interior')>Interior</option>
                        <option value="exterior" @selected($type=='exterior')>Exterior</option>
                        <option value="primer" @selected($type=='primer')>Primer</option>
                    </select>
                </div>
                <div class="col-lg-2">
                    <label class="small muted">Finish</label>
                    <select class="form-select" name="finish">
                        <option value="">Any</option>
                        <option value="matte" @selected($finish=='matte')>Matte</option>
                        <option value="satin" @selected($finish=='satin')>Satin</option>
                        <option value="gloss" @selected($finish=='gloss')>Gloss</option>
                        <option value="matt" @selected($finish=='matt')>Matt</option>
                    </select>
                </div>
                <div class="col-lg-2 d-flex gap-2">
                    <button class="btn btn-brand w-100"><i class="fa-solid fa-magnifying-glass me-1"></i> Filter</button>
                    <a class="btn btn-outline-secondary w-100" href="{{ route('front.products') }}">Reset</a>
                </div>
            </form>
        </div>

        {{-- Product grid --}}
        <div class="row g-3">
            @forelse($products as $p)
                <div class="col-md-6 col-lg-4">
                    <div class="cardx p-3 h-100">
                        <img class="product-img" src="{{ $p['img'] }}" alt="">
                        <div class="d-flex justify-content-between align-items-start mt-3">
                            <div>
                                <div class="fw-bold">{{ $p['title'] }}</div>
                                <div class="muted small">{{ $p['code'] }} • {{ $p['coverage'] }}</div>
                            </div>
                            <span class="badge badge-soft">{{ $p['badge'] }}</span>
                        </div>

                        <div class="row g-2 mt-2">
                            <div class="col-6"><div class="pill w-100"><i class="fa-solid fa-brush brand-dot"></i><span class="small">Finish: {{ $p['finish'] }}</span></div></div>
                            <div class="col-6"><div class="pill w-100"><i class="fa-solid fa-clock brand-dot"></i><span class="small">Dry: {{ $p['dry_time'] }}</span></div></div>
                        </div>

                        <div class="muted small mt-2">Sizes: {{ $p['sizes'] }}</div>

                        <div class="d-flex gap-2 mt-3">
                            <a class="btn btn-outline-brand btn-sm flex-grow-1"
                               href="{{ route('front.products.show',$p['slug']) }}">
                                Details
                            </a>
                            <a class="btn btn-brand btn-sm flex-grow-1"
                               href="{{ route('front.order.create', ['add'=>$p['slug']]) }}">
                                <i class="fa-solid fa-cart-plus me-1"></i> Order
                            </a>
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-12">
                    <div class="cardx p-4 text-center">
                        <div class="fw-bold">No products found</div>
                        <div class="muted">Try changing filters.</div>
                    </div>
                </div>
            @endforelse
        </div>

    </div>
</section>
@endsection