@extends('layouts.admin')

@section('title', 'SKUs · Aromaniacs ERP')
@section('overline', 'Catalog')
@section('heading', 'SKUs')

@section('content')
    <section class="card mb-6">
        <div class="flex flex-col lg:flex-row lg:items-center gap-4 lg:justify-between">
            <form method="GET" action="{{ route('admin.skus.index') }}" class="flex flex-col md:flex-row gap-2 w-full lg:max-w-4xl">
                <input
                    type="text"
                    name="q"
                    value="{{ $search }}"
                    class="input"
                    placeholder="Search by SKU code, fragrance, or brand..."
                >

                <select name="brand_id" class="input md:max-w-xs">
                    <option value="">All brands</option>
                    @foreach ($brands as $brand)
                        <option value="{{ $brand->id }}" @selected((int) $brandId === $brand->id)>{{ $brand->name }}</option>
                    @endforeach
                </select>

                <select name="active" class="input md:max-w-xs">
                    <option value="">All statuses</option>
                    <option value="1" @selected($active === '1')>Active</option>
                    <option value="0" @selected($active === '0')>Hidden</option>
                </select>

                <div class="flex gap-2">
                    <button type="submit" class="btn btn-ghost btn-icon" title="Filter" aria-label="Filter">
                        <i class="fi fi-rr-filter" aria-hidden="true"></i>
                    </button>
                    @if ($search !== '' || $brandId || $active !== null)
                        <a href="{{ route('admin.skus.index') }}" class="btn btn-ghost btn-icon" title="Clear filters" aria-label="Clear filters">
                            <i class="fi fi-rr-cross-small" aria-hidden="true"></i>
                        </a>
                    @endif
                </div>
            </form>
        </div>
    </section>

    <section class="card">
        @if ($skus->isEmpty())
            <div class="rounded-md border border-dashed px-6 py-12 text-center" style="border-color: var(--color-ink-12);">
                <p class="text-lg">No SKUs found.</p>
                <p class="mt-1 text-sm" style="color: var(--color-ink-70);">Create fragrances and decant sizes to generate SKUs automatically.</p>
            </div>
        @else
            <table class="data-table">
                <thead>
                    <tr>
                        <th style="width: 4rem;">SL.</th>
                        <th style="width: 5rem;">Thumb</th>
                        <th>SKU</th>
                        <th>Fragrance</th>
                        <th>Brand</th>
                        <th>Size</th>
                        <th>Storefront Price</th>
                        <th>Price Override</th>
                        <th>Status</th>
                        <th style="text-align: right;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($skus as $sku)
                        <tr>
                            <td style="color: var(--color-ink-70); font-variant-numeric: tabular-nums;">
                                {{ ($skus->firstItem() ?? 1) + $loop->index }}
                            </td>
                            <td>
                                @if ($sku->effectiveImageUrl(false))
                                    <img
                                        src="{{ $sku->effectiveImageUrl(false) }}"
                                        alt="{{ $sku->code }} thumbnail"
                                        loading="lazy"
                                        style="width: 42px; height: 42px; border-radius: 8px; object-fit: cover; border: 1px solid var(--color-ink-12); background: #fff;"
                                    >
                                @else
                                    <span
                                        class="inline-flex items-center justify-center"
                                        style="width: 42px; height: 42px; border-radius: 8px; border: 1px dashed var(--color-ink-12); color: var(--color-ink-40);"
                                        title="No thumbnail"
                                        aria-label="No thumbnail"
                                    >
                                        <i class="fi fi-rr-picture" aria-hidden="true"></i>
                                    </span>
                                @endif
                            </td>
                            <td class="font-semibold">{{ $sku->code }}</td>
                            <td>{{ $sku->fragrance->name }}</td>
                            <td style="color: var(--color-ink-70);">{{ $sku->fragrance->brand->name }}</td>
                            <td>{{ $sku->decantSize->label }}</td>
                            <td>
                                @if ($sku->storefront_price !== null)
                                    ৳ {{ number_format((float) $sku->storefront_price, 2) }}
                                @else
                                    <span style="color: var(--color-ink-40);">—</span>
                                @endif
                            </td>
                            <td>
                                @if ($sku->price_override !== null)
                                    {{ number_format((float) $sku->price_override, 2) }}
                                @else
                                    <span style="color: var(--color-ink-40);">Auto</span>
                                @endif
                            </td>
                            <td>
                                @if ($sku->is_active)
                                    <span class="badge">Active</span>
                                @else
                                    <span class="badge badge-muted">Hidden</span>
                                @endif
                            </td>
                            <td>
                                <div class="flex items-center justify-end gap-2">
                                    <a href="{{ route('admin.skus.edit', $sku) }}" class="btn btn-ghost btn-icon btn-icon-sm" title="Edit SKU" aria-label="Edit SKU">
                                        <i class="fi fi-rr-pencil" aria-hidden="true"></i>
                                    </a>

                                    <form method="POST" action="{{ route('admin.skus.toggle', $sku) }}">
                                        @csrf
                                        @method('PATCH')
                                        <button type="submit" class="btn btn-ghost btn-icon btn-icon-sm" title="{{ $sku->is_active ? 'Hide SKU' : 'Activate SKU' }}" aria-label="{{ $sku->is_active ? 'Hide SKU' : 'Activate SKU' }}">
                                            <i class="fi {{ $sku->is_active ? 'fi-rr-eye-crossed' : 'fi-rr-eye' }}" aria-hidden="true"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            <div class="mt-5">
                {{ $skus->links() }}
            </div>
        @endif
    </section>
@endsection