@extends('layouts.app')

@php
    $hasCatalogFilters = $search !== ''
        || trim((string) request()->query('category', '')) !== ''
        || $fulfillment !== 'all'
        || $sort !== 'featured';

    $catalogCanonicalParameters = ! $hasCatalogFilters && request()->integer('page') > 1
        ? ['page' => request()->integer('page')]
        : [];
@endphp

@section('title', 'Katalog Produk - GTGStore')
@section('description', 'Temukan aplikasi premium dan layanan digital pilihan dengan proses pembelian yang aman dan praktis di GTGStore.')
@section('canonical', route('storefront.products', $catalogCanonicalParameters))

@if ($hasCatalogFilters)
    @section('robots', 'noindex, follow')
@endif

@section('content')
<section class="catalog-page" data-catalog-page data-catalog-url="{{ request()->fullUrl() }}">
    <header class="catalog-hero">
        <div class="catalog-hero-inner">
            <div class="catalog-heading">
                <span class="catalog-eyebrow">Katalog Pilihan</span>

                <h1 class="catalog-title font-display">
                    Temukan produk digital
                    <span class="catalog-title-accent">yang tepat.</span>
                </h1>

                <p class="catalog-description">
                    Bandingkan pilihan, cek prosesnya, lalu checkout saat sudah yakin.
                </p>

                <form
                    method="GET"
                    action="{{ route('storefront.products') }}"
                    class="catalog-search-panel"
                    data-catalog-search-form
                    role="search"
                >
                    @if (request('category'))
                        <input type="hidden" name="category" value="{{ request('category') }}">
                    @endif
                    @if ($fulfillment !== 'all')
                        <input type="hidden" name="fulfillment" value="{{ $fulfillment }}">
                    @endif
                    @if ($sort !== 'featured')
                        <input type="hidden" name="sort" value="{{ $sort }}">
                    @endif

                    <label class="sr-only" for="catalog-search-input">Cari produk</label>

                    <div class="catalog-search">
                        <span class="catalog-search-icon" aria-hidden="true">
                            <svg viewBox="0 0 24 24" fill="none">
                                <circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="1.8"/>
                                <path d="m16.5 16.5 4 4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
                            </svg>
                        </span>

                        <input
                            id="catalog-search-input"
                            type="search"
                            name="q"
                            value="{{ $search }}"
                            placeholder="Apa yang sedang kamu cari?"
                            autocomplete="off"
                            data-catalog-search
                        >

                        <button
                            type="button"
                            class="catalog-search-clear"
                            data-catalog-search-clear
                            aria-label="Hapus pencarian"
                            @if ($search === '') hidden @endif
                        >
                            <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
                                <path d="M7 7l10 10M17 7 7 17" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
                            </svg>
                        </button>

                        <button type="submit" class="catalog-search-submit">
                            <span>Cari</span>
                            <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
                                <path d="M5 12h14m-5-5 5 5-5 5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </button>

                        <span class="catalog-search-status" data-catalog-search-status aria-hidden="true"></span>
                    </div>

                </form>

                <div class="catalog-summary" aria-live="polite">
                    <strong class="catalog-summary-number" data-catalog-result-number>{{ $products->total() }}</strong>
                    <span class="catalog-summary-label">produk tersedia</span>
                </div>
            </div>

            @if ($heroProducts->isNotEmpty())
                <div class="catalog-hero-visual" aria-label="Produk pilihan GTGStore">
                    <span class="catalog-hero-visual-orbit" aria-hidden="true"></span>

                    @foreach ($heroProducts as $heroProduct)
                        @php
                            $heroManual = $heroProduct->requiresManualFulfillment();
                        @endphp

                        <article class="catalog-floating-card catalog-floating-card-{{ $loop->iteration }}">
                            <div class="catalog-floating-card-media">
                                @if ($heroProduct->image_path)
                                    <img
                                        src="{{ $heroProduct->image_url }}"
                                        alt=""
                                        width="320"
                                        height="240"
                                        loading="{{ $loop->first ? 'eager' : 'lazy' }}"
                                        decoding="async"
                                    >
                                @else
                                    <span class="font-display">{{ $heroProduct->name[0] ?? 'G' }}</span>
                                @endif
                            </div>

                            <div class="catalog-floating-card-copy">
                                <span class="catalog-floating-card-badge {{ $heroManual ? 'is-manual' : 'is-instant' }}">
                                    {{ $heroManual ? 'Manual Admin' : 'Instan' }}
                                </span>
                                <strong>{{ $heroProduct->name }}</strong>
                                <small>{{ $heroProduct->hasVariants() ? 'Mulai ' : '' }}Rp {{ number_format($heroProduct->salePrice(), 0, ',', '.') }}</small>
                            </div>
                        </article>
                    @endforeach
                </div>
            @endif
        </div>
    </header>

    <main id="catalog-products" class="catalog-shell" data-catalog-container data-catalog-info-trigger>
        @include('storefront.partials.catalog-results')
    </main>
</section>

@include('storefront.partials.catalog-info-modal')
@endsection