@extends('layouts.admin')

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

@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.fragrances.index') }}" class="flex flex-col md:flex-row gap-2 w-full lg:max-w-3xl">
                <input
                    type="text"
                    name="q"
                    value="{{ $search }}"
                    class="input"
                    placeholder="Search by fragrance, brand, or slug..."
                >

                <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>

                <div class="flex gap-2">
                    <button type="submit" class="btn btn-ghost btn-icon" title="Filter fragrances" aria-label="Filter fragrances">
                        <i class="fi fi-rr-filter" aria-hidden="true"></i>
                    </button>
                    @if ($search !== '' || $brandId)
                        <a href="{{ route('admin.fragrances.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>

            <a href="{{ route('admin.fragrances.create') }}" class="btn btn-primary btn-icon" title="Add fragrance" aria-label="Add fragrance">
                <i class="fi fi-rr-plus" aria-hidden="true"></i>
            </a>
        </div>
    </section>

    <section class="card">
        @if ($fragrances->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 fragrances found.</p>
                <p class="mt-1 text-sm" style="color: var(--color-ink-70);">Create a fragrance to continue catalog setup.</p>
            </div>
        @else
            @if ($errors->any())
                <div class="mb-4 rounded-md border px-4 py-3 text-sm" style="border-color: rgba(180, 35, 24, 0.35); color: #7a271a; background: rgba(180, 35, 24, 0.08);">
                    <ul class="list-disc pl-5 space-y-1">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form
                id="bulk-merchandising-form"
                method="POST"
                action="{{ route('admin.fragrances.bulk-merchandising') }}"
                class="mb-5 flex flex-col gap-3 border-b pb-5"
                style="border-color: var(--color-ink-12);"
                onsubmit="if (!document.querySelectorAll('.js-fragrance-row-check:checked').length) { window.alert('Select at least one fragrance.'); return false; } return true;"
            >
                @csrf
                <input type="hidden" name="redirect_q" value="{{ $search }}">
                <input type="hidden" name="redirect_brand_id" value="{{ $brandId ?? '' }}">

                <div class="flex flex-col gap-2 sm:flex-row sm:items-baseline sm:justify-between sm:gap-4">
                    <label for="bulk_action" class="label m-0 shrink-0" style="color: var(--color-ink-40);">Bulk action</label>
                    <p class="text-xs m-0 sm:text-right" style="color: var(--color-ink-70);">
                        Use the checkboxes in the table, then pick an action. Only selected rows are updated.
                    </p>
                </div>

                <div class="flex flex-row flex-wrap items-end gap-3">
                    <select id="bulk_action" name="bulk_action" class="input flex-1 min-w-[min(100%,14rem)] max-w-xl" required>
                            <option value="" disabled selected>Choose action…</option>
                            <optgroup label="New arrival">
                                <option value="new_arrival_on">Turn on</option>
                                <option value="new_arrival_off">Turn off</option>
                            </optgroup>
                            <optgroup label="Best seller">
                                <option value="best_seller_on">Turn on</option>
                                <option value="best_seller_off">Turn off</option>
                            </optgroup>
                            <optgroup label="Featured">
                                <option value="featured_on">Turn on</option>
                                <option value="featured_off">Turn off</option>
                            </optgroup>
                            <optgroup label="Status (upcoming)">
                                <option value="upcoming_on" @disabled(! $canToggleUpcomingBulk)>Turn on (active rows only)</option>
                                <option value="upcoming_off" @disabled(! $canToggleUpcomingBulk)>Turn off (active rows only)</option>
                            </optgroup>
                        </select>
                    <button type="submit" class="btn btn-primary shrink-0">
                        Apply to selected
                    </button>
                </div>
            </form>

            <table class="data-table">
                <thead>
                    <tr>
                        <th class="data-table__check-col">
                            <input
                                type="checkbox"
                                id="fragrance-select-all"
                                class="h-4 w-4 rounded border cursor-pointer align-middle accent-current"
                                style="border-color: var(--color-ink-12);"
                                title="Select all on this page"
                                aria-label="Select all fragrances on this page"
                            >
                        </th>
                        <th>Fragrance</th>
                        <th>Brand</th>
                        <th>Meta</th>
                        <th class="data-table__toggle-col" title="New arrival">New</th>
                        <th class="data-table__toggle-col" title="Best seller">Best</th>
                        <th class="data-table__toggle-col" title="Featured">Featured</th>
                        <th class="data-table__toggle-col" title="When on, fragrance is upcoming on the storefront">Status</th>
                        <th style="text-align: right;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($fragrances as $fragrance)
                        <tr>
                            <td class="data-table__check-col">
                                <input
                                    type="checkbox"
                                    name="ids[]"
                                    value="{{ $fragrance->id }}"
                                    form="bulk-merchandising-form"
                                    class="js-fragrance-row-check h-4 w-4 rounded border cursor-pointer accent-current"
                                    style="border-color: var(--color-ink-12);"
                                    aria-label="Select {{ $fragrance->name }}"
                                >
                            </td>
                            <td>
                                <div class="flex items-center gap-3">
                                    <img src="{{ $fragrance->resolvedImageUrl() }}" alt="{{ $fragrance->name }}" class="h-12 w-12 rounded-md object-cover"
                                         onerror="this.style.visibility='hidden'">
                                    <div>
                                        <div class="font-semibold">{{ $fragrance->name }}</div>
                                        <div style="font-size: 0.8rem; color: var(--color-ink-70);">{{ $fragrance->slug }}</div>
                                    </div>
                                </div>
                            </td>
                            <td>{{ $fragrance->brand->name }}</td>
                            <td style="color: var(--color-ink-70);">
                                {{ strtoupper((string) $fragrance->concentration?->value ?? '-') }}
                                ·
                                {{ ucfirst((string) $fragrance->gender?->value ?? '-') }}
                                ·
                                {{ $fragrance->release_year ?? '-' }}
                            </td>
                            <td class="data-table__toggle-col">
                                <form method="POST" action="{{ route('admin.fragrances.toggle-new-arrival', $fragrance) }}" class="inline-flex m-0 justify-center w-full">
                                    @csrf
                                    @method('PATCH')
                                    <button
                                        type="submit"
                                        class="admin-switch {{ $fragrance->is_new_arrival ? 'is-on' : '' }}"
                                        title="{{ $fragrance->is_new_arrival ? 'Turn off new arrival' : 'Turn on new arrival' }}"
                                        aria-label="New arrival for {{ $fragrance->name }}: {{ $fragrance->is_new_arrival ? 'on' : 'off' }}. Click to toggle."
                                        aria-pressed="{{ $fragrance->is_new_arrival ? 'true' : 'false' }}"
                                    >
                                        <span class="admin-switch__track" aria-hidden="true"></span>
                                        <span class="admin-switch__thumb" aria-hidden="true"></span>
                                    </button>
                                </form>
                            </td>
                            <td class="data-table__toggle-col">
                                <form method="POST" action="{{ route('admin.fragrances.toggle-best-seller', $fragrance) }}" class="inline-flex m-0 justify-center w-full">
                                    @csrf
                                    @method('PATCH')
                                    <button
                                        type="submit"
                                        class="admin-switch {{ $fragrance->is_best_seller ? 'is-on' : '' }}"
                                        title="{{ $fragrance->is_best_seller ? 'Turn off best seller' : 'Turn on best seller' }}"
                                        aria-label="Best seller for {{ $fragrance->name }}: {{ $fragrance->is_best_seller ? 'on' : 'off' }}. Click to toggle."
                                        aria-pressed="{{ $fragrance->is_best_seller ? 'true' : 'false' }}"
                                    >
                                        <span class="admin-switch__track" aria-hidden="true"></span>
                                        <span class="admin-switch__thumb" aria-hidden="true"></span>
                                    </button>
                                </form>
                            </td>
                            <td class="data-table__toggle-col">
                                <form method="POST" action="{{ route('admin.fragrances.toggle-featured', $fragrance) }}" class="inline-flex m-0 justify-center w-full">
                                    @csrf
                                    @method('PATCH')
                                    <button
                                        type="submit"
                                        class="admin-switch {{ $fragrance->is_featured ? 'is-on' : '' }}"
                                        title="{{ $fragrance->is_featured ? 'Turn off featured' : 'Turn on featured' }}"
                                        aria-label="Featured for {{ $fragrance->name }}: {{ $fragrance->is_featured ? 'on' : 'off' }}. Click to toggle."
                                        aria-pressed="{{ $fragrance->is_featured ? 'true' : 'false' }}"
                                    >
                                        <span class="admin-switch__track" aria-hidden="true"></span>
                                        <span class="admin-switch__thumb" aria-hidden="true"></span>
                                    </button>
                                </form>
                            </td>
                            <td class="data-table__toggle-col">
                                @if ($fragrance->is_active)
                                    <form method="POST" action="{{ route('admin.fragrances.toggle-upcoming', $fragrance) }}" class="inline-flex m-0 justify-center w-full">
                                        @csrf
                                        @method('PATCH')
                                        <button
                                            type="submit"
                                            class="admin-switch {{ $fragrance->is_upcoming ? 'is-on' : '' }}"
                                            title="{{ $fragrance->is_upcoming ? 'Turn off upcoming (mark as live)' : 'Turn on upcoming' }}"
                                            aria-label="Upcoming for {{ $fragrance->name }}: {{ $fragrance->is_upcoming ? 'on' : 'off' }}. Click to toggle."
                                            aria-pressed="{{ $fragrance->is_upcoming ? 'true' : 'false' }}"
                                        >
                                            <span class="admin-switch__track" aria-hidden="true"></span>
                                            <span class="admin-switch__thumb" aria-hidden="true"></span>
                                        </button>
                                    </form>
                                @else
                                    <span class="badge badge-muted" title="Activate fragrance to set upcoming / live">Hidden</span>
                                @endif
                            </td>
                            <td>
                                <div class="flex items-center justify-end gap-2">
                                    <a href="{{ route('admin.fragrances.edit', $fragrance) }}" class="btn btn-ghost btn-icon btn-icon-sm" title="Edit fragrance" aria-label="Edit fragrance">
                                        <i class="fi fi-rr-pencil" aria-hidden="true"></i>
                                    </a>

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

                                    <form method="POST" action="{{ route('admin.fragrances.destroy', $fragrance) }}" onsubmit="return confirm('Delete this fragrance? This cannot be undone.');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-danger btn-icon btn-icon-sm" title="Delete fragrance" aria-label="Delete fragrance">
                                            <i class="fi fi-rr-trash" aria-hidden="true"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            <div class="mt-5">
                {{ $fragrances->links() }}
            </div>

            <script>
                (function () {
                    var all = document.getElementById('fragrance-select-all');
                    var rows = document.querySelectorAll('.js-fragrance-row-check');
                    if (!all || !rows.length) return;

                    function syncHeader() {
                        var checked = document.querySelectorAll('.js-fragrance-row-check:checked').length;
                        all.checked = checked === rows.length;
                        all.indeterminate = checked > 0 && checked < rows.length;
                    }

                    all.addEventListener('change', function () {
                        rows.forEach(function (cb) {
                            cb.checked = all.checked;
                        });
                        all.indeterminate = false;
                    });

                    rows.forEach(function (cb) {
                        cb.addEventListener('change', syncHeader);
                    });
                })();
            </script>
        @endif
    </section>
@endsection