@extends('layouts.store')

@section('title', '8stores Marketplace')

@section('content')
    @if ($announcement)
        <section class="announcement-strip">
            <div>
                <span class="eyebrow">Announcement</span>
                <h2>{{ $announcement->title }}</h2>
                @if ($announcement->body)
                    <p>{!! nl2br(e($announcement->body)) !!}</p>
                @endif
            </div>
            @if ($announcement->button_text && $announcement->button_url)
                <a class="button primary" href="{{ $announcement->button_url }}">{{ $announcement->button_text }}</a>
            @endif
        </section>
    @endif

    <section class="hero">
        <div class="home-slider" data-home-slider>
            <div class="home-slider-track" data-home-slider-track>
                @foreach ($heroSlides as $slide)
                    <article class="home-slide" data-home-slide aria-hidden="{{ $loop->first ? 'false' : 'true' }}">
                        <img src="{{ $slide['image'] }}" alt="{{ $slide['title'] }}">
                        <div class="home-slide-copy">
                            <span class="eyebrow">Featured pick</span>
                            <h1>{{ $slide['title'] }}</h1>
                            <p>{{ $slide['subtitle'] }}</p>
                            <a class="button primary" href="{{ $slide['url'] }}">{{ $slide['button_text'] }}</a>
                        </div>
                    </article>
                @endforeach
            </div>

            @if (count($heroSlides) > 1)
                <button class="home-slider-control prev" type="button" data-home-slide-prev aria-label="Previous slide">&lt;</button>
                <button class="home-slider-control next" type="button" data-home-slide-next aria-label="Next slide">&gt;</button>
                <div class="home-slider-dots">
                    @foreach ($heroSlides as $slide)
                        <button class="{{ $loop->first ? 'active' : '' }}" type="button" data-home-slide-dot="{{ $loop->index }}" aria-label="Go to slide {{ $loop->iteration }}"></button>
                    @endforeach
                </div>
            @endif
        </div>

        <form class="booking-search" action="#products" data-hero-filter-form>
            <label>
                <span>What</span>
                <input type="text" placeholder="Search essentials" data-filter-search>
            </label>
            <label>
                <span>Category</span>
                <select data-filter-category>
                    <option value="All">All categories</option>
                    @foreach (array_filter($categories, fn ($category) => $category !== 'All') as $category)
                        <option value="{{ $category }}">{{ $category }}</option>
                    @endforeach
                </select>
            </label>
            <button type="submit">Search</button>
        </form>
    </section>

    <section class="shop-toolbar" id="products">
        <div>
            <span class="eyebrow">Explore</span>
            <h2>Popular picks</h2>
        </div>

        <span class="product-count" data-product-count>{{ count($products) }} products</span>
    </section>

    <section class="product-grid">
        @foreach ($products as $product)
            <article
                class="product-card"
                data-product-card
                data-category="{{ $product['category'] }}"
                data-name="{{ Str::lower($product['name']) }}"
                data-price="{{ $product['price'] }}"
            >
                <div class="product-media">
                    @if ($product['url'])
                        <a href="{{ $product['url'] }}" aria-label="View {{ $product['name'] }}">
                            <img src="{{ $product['image'] }}" alt="{{ $product['name'] }}" loading="lazy">
                        </a>
                    @else
                        <img src="{{ $product['image'] }}" alt="{{ $product['name'] }}" loading="lazy">
                    @endif
                    <span class="badge">{{ $product['category'] }}</span>
                </div>
                <div class="product-body">
                    <div>
                        <div class="product-meta">
                            <small>{{ $product['stock'] }} in stock</small>
                            <small>{{ $product['rating'] }} rating</small>
                        </div>
                        <h3>
                            @if ($product['url'])
                                <a class="product-title-link" href="{{ $product['url'] }}">{{ $product['name'] }}</a>
                            @else
                                {{ $product['name'] }}
                            @endif
                        </h3>
                    </div>
                    <div class="price-row">
                        <div class="price-stack">
                            <span class="price">{{ $product['price_display'] }}</span>
                            @if ($product['compare_price_display'])
                                <small><s>{{ $product['compare_price_display'] }}</s></small>
                            @endif
                        </div>
                        @if ($product['discount_percent'] > 0)
                            <small class="discount-badge">{{ rtrim(rtrim(number_format($product['discount_percent'], 2), '0'), '.') }}% off</small>
                        @else
                            <small>Ships fast</small>
                        @endif
                    </div>
                    @if ($product['id'])
                        <div class="product-actions">
                            <form method="POST" action="{{ route('customer.cart.store', $product['id']) }}">
                                @csrf
                                <button class="button primary" type="submit">Add to bag</button>
                            </form>
                            <form method="POST" action="{{ route('customer.favorites.toggle', $product['id']) }}">
                                @csrf
                                <button class="button ghost" type="submit">Favorite</button>
                            </form>
                        </div>
                    @else
                        <button class="button primary" type="button" disabled>Add to bag</button>
                    @endif
                </div>
            </article>
        @endforeach
    </section>

    <p class="empty-state" data-empty-products hidden>No products found in this category.</p>

    @if ($featuredProducts !== [])
        <section class="featured-products">
            <div class="shop-toolbar inline-toolbar">
                <div>
                    <span class="eyebrow">Featured</span>
                    <h2>Featured products</h2>
                </div>
            </div>

            <section class="product-grid">
                @foreach ($featuredProducts as $product)
                    <article class="product-card">
                        <div class="product-media">
                            <a href="{{ $product['url'] }}" aria-label="View {{ $product['name'] }}">
                                <img src="{{ $product['image'] }}" alt="{{ $product['name'] }}" loading="lazy">
                            </a>
                            <span class="badge">{{ $product['category'] }}</span>
                        </div>
                        <div class="product-body">
                            <div>
                                <div class="product-meta">
                                    <small>{{ $product['stock'] }} in stock</small>
                                    <small>{{ $product['rating'] }} rating</small>
                                </div>
                                <h3><a class="product-title-link" href="{{ $product['url'] }}">{{ $product['name'] }}</a></h3>
                            </div>
                            <div class="price-row">
                                <div class="price-stack">
                                    <span class="price">{{ $product['price_display'] }}</span>
                                    @if ($product['compare_price_display'])
                                        <small><s>{{ $product['compare_price_display'] }}</s></small>
                                    @endif
                                </div>
                                @if ($product['discount_percent'] > 0)
                                    <small class="discount-badge">{{ rtrim(rtrim(number_format($product['discount_percent'], 2), '0'), '.') }}% off</small>
                                @else
                                    <small>Featured</small>
                                @endif
                            </div>
                            <div class="product-actions">
                                <form method="POST" action="{{ route('customer.cart.store', $product['id']) }}">
                                    @csrf
                                    <button class="button primary" type="submit">Add to bag</button>
                                </form>
                                <form method="POST" action="{{ route('customer.favorites.toggle', $product['id']) }}">
                                    @csrf
                                    <button class="button ghost" type="submit">Favorite</button>
                                </form>
                            </div>
                        </div>
                    </article>
                @endforeach
            </section>
        </section>
    @endif

    <section class="newsletter-panel">
        <div>
            <span class="eyebrow">Newsletter</span>
            <h2>Get fresh deals and store announcements.</h2>
            <p>Subscribe for product drops, offers, and important 8Stores updates.</p>
        </div>
        <form method="POST" action="{{ route('newsletter.store') }}" class="newsletter-form">
            @csrf
            <label>
                <span class="sr-only">Email</span>
                <input name="email" type="email" placeholder="you@example.com" required>
            </label>
            <button class="button primary" type="submit">Subscribe</button>
        </form>
        @if (session('newsletter_status'))
            <p class="form-status">{{ session('newsletter_status') }}</p>
        @endif
        @error('email')
            <p class="form-error">{{ $message }}</p>
        @enderror
    </section>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const form = document.querySelector('[data-hero-filter-form]');
            const searchInput = document.querySelector('[data-filter-search]');
            const categorySelect = document.querySelector('[data-filter-category]');
            const cards = [...document.querySelectorAll('[data-product-card]')];
            const count = document.querySelector('[data-product-count]');
            const empty = document.querySelector('[data-empty-products]');
            let activeCategory = 'All';

            const applyFilters = () => {
                const search = searchInput.value.trim().toLowerCase();
                let visible = 0;

                cards.forEach((card) => {
                    const matchesCategory = activeCategory === 'All' || card.dataset.category === activeCategory;
                    const matchesSearch = !search || card.dataset.name.includes(search) || card.dataset.category.toLowerCase().includes(search);
                    const shouldShow = matchesCategory && matchesSearch;

                    card.hidden = !shouldShow;
                    visible += shouldShow ? 1 : 0;
                });

                count.textContent = `${visible} ${visible === 1 ? 'product' : 'products'}`;
                empty.hidden = visible > 0;
            };

            form.addEventListener('submit', (event) => {
                event.preventDefault();
                activeCategory = categorySelect.value;
                applyFilters();
                document.querySelector('#products').scrollIntoView({ behavior: 'smooth', block: 'start' });
            });

            [searchInput, categorySelect].forEach((field) => {
                field.addEventListener('input', () => {
                    activeCategory = categorySelect.value;
                    applyFilters();
                });
            });

            const slider = document.querySelector('[data-home-slider]');

            if (slider) {
                const track = slider.querySelector('[data-home-slider-track]');
                const slides = [...slider.querySelectorAll('[data-home-slide]')];
                const dots = [...slider.querySelectorAll('[data-home-slide-dot]')];
                const prev = slider.querySelector('[data-home-slide-prev]');
                const next = slider.querySelector('[data-home-slide-next]');
                let current = 0;

                const showSlide = (index) => {
                    if (slides.length === 0) {
                        return;
                    }

                    current = (index + slides.length) % slides.length;
                    track.style.transform = `translateX(-${current * 100}%)`;
                    slides.forEach((slide, slideIndex) => {
                        slide.setAttribute('aria-hidden', slideIndex === current ? 'false' : 'true');
                    });
                    dots.forEach((dot, dotIndex) => {
                        dot.classList.toggle('active', dotIndex === current);
                    });
                };

                prev?.addEventListener('click', () => showSlide(current - 1));
                next?.addEventListener('click', () => showSlide(current + 1));
                dots.forEach((dot) => dot.addEventListener('click', () => showSlide(Number(dot.dataset.homeSlideDot))));

                if (slides.length > 1) {
                    window.setInterval(() => showSlide(current + 1), 5500);
                }
            }
        });
    </script>
@endpush