@extends('storefront.layout')

@section('title', 'Wholesale Catalog')
@section('description', 'Browse current Vida Mansa wholesale pricing and availability for water dispensers, feeders, feeding mats and brushes.')

@push('head')
    <style>
        .vm-catalog-grid {
            background-image:
                linear-gradient(rgba(28, 25, 23, 0.05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(28, 25, 23, 0.05) 1px, transparent 1px);
            background-size: 34px 34px;
        }

        .vm-catalog-card-media img {
            transform-origin: center;
        }
    </style>
@endpush

@section('content')

@if (session('show_catalog_instructions'))
    <div x-data="{ open: true }"
         x-show="open"
         x-transition.opacity
         @keydown.escape.window="open = false"
         class="fixed inset-0 z-50 flex items-center justify-center bg-stone-950/75 px-5 py-8"
         role="dialog"
         aria-modal="true"
         aria-labelledby="catalog-instructions-title">
        <div @click.outside="open = false"
             x-transition.scale.origin.center
             class="max-h-[calc(100dvh-3rem)] w-full max-w-xl overflow-y-auto rounded-2xl bg-white shadow-2xl ring-1 ring-black/10">
            <div class="h-2 bg-[#ffd400]"></div>
            <div class="p-6 sm:p-8">
                <p class="text-xs font-semibold uppercase tracking-[0.22em] text-[#007a55]">How to buy</p>
                <h2 id="catalog-instructions-title" class="mt-3 text-2xl font-semibold tracking-tight text-stone-950">
                    Start with a category, then choose the color or model.
                </h2>
                <p class="mt-4 text-base leading-7 text-stone-600">
                    Select a product group, open the image you want, review the details, and add it to your cart.
                </p>
                <button type="button"
                        @click="open = false"
                        class="mt-6 inline-flex w-full items-center justify-center rounded-md bg-black px-5 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-stone-800 sm:w-auto">
                    Start browsing
                </button>
            </div>
        </div>
    </div>
@endif

{{-- Page header --}}
<section class="relative overflow-hidden bg-[#f7f8f5] border-b border-stone-200 vm-catalog-grid">
    <div class="max-w-7xl mx-auto px-6 lg:px-8 py-14 lg:py-16">
        <div class="max-w-4xl">
            <div class="inline-flex items-center gap-2 rounded-full border border-[#007a55]/20 bg-white px-3 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-[#007a55] shadow-sm">
                <span class="h-2 w-2 rounded-full bg-[#ffd400]"></span>
                Catalog
            </div>
            <h1 class="mt-5 max-w-4xl text-4xl font-semibold tracking-tight text-stone-950 md:text-5xl lg:text-6xl">
                Click the product images to view more details and place your order.
            </h1>
            <p class="mt-5 max-w-2xl text-base leading-7 text-stone-600">
                Choose a model, compare available colors, and build your order online. ${{ number_format($minimumOrder, 0) }} minimum.
            </p>
        </div>

        @if (! empty($sections))
            <nav class="mt-9 flex gap-2 overflow-x-auto pb-1" aria-label="Catalog categories">
                @foreach ($sections as $s)
                    <a href="#cat-{{ $s['category']['slug'] }}"
                       class="inline-flex shrink-0 items-center gap-2 rounded-full border border-stone-200 bg-white px-4 py-2 text-sm font-semibold text-stone-700 shadow-sm transition hover:border-[#007a55] hover:bg-[#007a55] hover:text-white">
                        <span>{{ $s['category']['label'] }}</span>
                    </a>
                @endforeach
            </nav>
        @endif
    </div>
</section>

{{-- Category sections --}}
@foreach ($sections as $s)
    <section id="cat-{{ $s['category']['slug'] }}" class="bg-white text-stone-950 border-b border-stone-200">
        <div class="max-w-7xl mx-auto px-6 lg:px-8 py-14 lg:py-20">

            <div class="mb-8 flex flex-col gap-5 md:flex-row md:items-end md:justify-between">
                <div>
                    <p class="text-xs font-semibold uppercase tracking-[0.22em] text-[#007a55]">
                        {{ count($s['groups']) }} {{ Str::plural('model', count($s['groups'])) }}
                    </p>
                    <h2 class="mt-2 text-3xl font-semibold tracking-tight md:text-4xl">
                        {{ $s['category']['label'] }}
                    </h2>
                    @if (! empty($s['category']['description']))
                        <p class="mt-3 max-w-2xl text-sm leading-6 text-stone-500">
                            <span class="block font-semibold text-stone-700">{{ $s['category']['description'] }}</span>
                            @if (! empty($s['category']['subtitle']))
                                <span class="mt-1 block">{{ $s['category']['subtitle'] }}</span>
                            @endif
                        </p>
                    @endif
                </div>
                <a href="{{ $s['browseUrl'] }}"
                   class="inline-flex items-center justify-center rounded-md bg-black text-white hover:bg-stone-800 px-5 py-2.5 text-sm font-semibold shadow-sm transition">
                    Browse &amp; filter
                </a>
            </div>

            <div class="grid gap-5">
                @foreach ($s['groups'] as $group)
                    @php
                        $variantImages = collect($group['images'])
                            ->sortBy(fn ($img) => $img['src'] === $group['hero'] ? 0 : 1)
                            ->values();
                        $firstHandle = $group['heroHandle'] ?? ($group['handles'][0] ?? null);
                        $showVariantPanel = $s['category']['slug'] !== 'accessory' && $variantImages->isNotEmpty();
                        $price = $pricePresenter->forProducts($group['products'], $customer);
                        $stockStatus = $catalogStockPresenter->forProducts($group['products']);
                    @endphp

                    <article class="group overflow-hidden rounded-2xl border border-stone-200 bg-[#fbfaf7] shadow-sm transition duration-300 hover:-translate-y-0.5 hover:shadow-xl">
                        <div class="grid lg:grid-cols-[19rem_1fr]">
                            <div class="vm-catalog-card-media relative min-h-72 overflow-hidden bg-white">
                                @if ($group['hero'] && $firstHandle)
                                    <a href="{{ route('storefront.product', ['handle' => $firstHandle]) }}" class="block h-full">
                                        <img src="{{ $group['hero'] }}"
                                             alt="{{ $group['label'] }}"
                                             class="h-full min-h-72 w-full object-cover transition duration-500 group-hover:scale-105"
                                             loading="lazy">
                                    </a>
                                @elseif ($group['hero'])
                                    <img src="{{ $group['hero'] }}"
                                         alt="{{ $group['label'] }}"
                                         class="h-full min-h-72 w-full object-cover"
                                         loading="lazy">
                                @else
                                    <div class="flex h-full min-h-72 items-center justify-center bg-stone-100 text-xs uppercase tracking-[0.2em] text-stone-400">
                                        No image
                                    </div>
                                @endif

                                <div class="absolute left-4 top-4 rounded-full bg-white/95 px-3 py-1 text-xs font-semibold text-stone-900 shadow-sm">
                                    {{ count($group['images']) }} {{ Str::plural('option', count($group['images'])) }}
                                </div>
                            </div>

                            <div class="flex min-h-72 flex-col p-5 sm:p-6">
                                <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
                                    <div>
                                        <p class="text-xs font-semibold uppercase tracking-[0.2em] text-[#007a55]">
                                            {{ $s['category']['label'] }}
                                        </p>
                                        @if ($firstHandle)
                                            <a href="{{ route('storefront.product', ['handle' => $firstHandle]) }}"
                                               class="mt-2 block text-2xl font-semibold leading-tight tracking-tight text-stone-950 transition hover:text-[#007a55]">
                                                {{ $group['label'] }}
                                            </a>
                                        @else
                                            <h3 class="mt-2 text-2xl font-semibold leading-tight tracking-tight text-stone-950">
                                                {{ $group['label'] }}
                                            </h3>
                                        @endif
                                    </div>

                                    <div class="shrink-0 rounded-xl border border-stone-200 bg-white px-4 py-3 text-left shadow-sm sm:text-right">
                                        <p class="text-[10px] font-semibold uppercase tracking-[0.18em] text-stone-400">Wholesale price</p>
                                        <p class="mt-1 text-xl font-semibold tracking-tight text-stone-950">
                                            {{ $price?->exactOrRange() ?? 'Price unavailable' }}
                                        </p>
                                        @if ($stockStatus)
                                            <span class="mt-2 inline-flex items-center rounded-full px-2.5 py-1 text-[11px] font-semibold ring-1 ring-inset {{ $stockStatus->badgeClass() }}">
                                                {{ $stockStatus->label() }}
                                            </span>
                                        @endif
                                    </div>
                                </div>

                                @if ($showVariantPanel)
                                    <div class="mt-6">
                                        <div class="mb-3 flex items-center justify-between gap-3">
                                            <p class="text-xs font-semibold uppercase tracking-[0.2em] text-stone-400">Available Colors</p>
                                            @if (count($group['images']) > 8)
                                                <span class="text-xs text-stone-400">Showing first 8</span>
                                            @endif
                                        </div>

                                        @if ($variantImages->isNotEmpty())
                                            <div class="grid grid-cols-4 gap-2 sm:grid-cols-6 lg:grid-cols-8">
                                                @foreach ($variantImages->take(8) as $img)
                                                    <a href="{{ route('storefront.product', ['handle' => $img['handle'] ?? $firstHandle]) }}"
                                                       class="aspect-square overflow-hidden rounded-xl border border-stone-200 bg-white transition hover:-translate-y-0.5 hover:border-[#007a55] hover:shadow-md">
                                                        <img src="{{ $img['src'] }}"
                                                             alt="{{ $img['alt'] ?? $group['label'] }}"
                                                             class="h-full w-full object-cover"
                                                             loading="lazy">
                                                    </a>
                                                @endforeach
                                            </div>
                                        @else
                                            <p class="rounded-xl border border-dashed border-stone-200 bg-white px-4 py-5 text-sm text-stone-500">
                                                No color variant images available.
                                            </p>
                                        @endif
                                    </div>
                                @endif

                                <div class="mt-auto pt-6">
                                    <div class="flex flex-wrap items-center gap-2 text-xs text-stone-500">
                                        <span class="rounded-full bg-white px-3 py-1 ring-1 ring-stone-200">Factory direct</span>
                                        <span class="rounded-full bg-white px-3 py-1 ring-1 ring-stone-200">Wholesale catalog</span>
                                        <span class="rounded-full bg-[#fff6bf] px-3 py-1 text-stone-800 ring-1 ring-[#ffd400]/50">${{ number_format($minimumOrder, 0) }} minimum</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </article>
                @endforeach
            </div>
        </div>
    </section>
@endforeach

@if (empty($sections))
    <section class="max-w-7xl mx-auto px-6 lg:px-8 py-20">
        <div class="rounded-2xl border border-dashed border-stone-300 bg-white p-12 text-center text-stone-500">
            No products available right now. Please check back soon.
        </div>
    </section>
@endif

{{-- Bottom CTA --}}
@if (! empty($sections))
<section class="bg-[#007a55] text-white">
    <div class="max-w-7xl mx-auto px-6 lg:px-8 py-16 text-center">
        <h2 class="text-3xl font-semibold tracking-tight text-[#ffd400] md:text-4xl">Factory-Direct Wholesale</h2>
    </div>
</section>
@endif
@endsection