@extends('layouts.app')

@section('content')
<!-- Hero Section -->
<div class="hero">
    <!-- Decorative Butterflies in Hero -->
    <svg class="hero-butterfly" style="position: absolute; top: 15%; left: 10%; width: 40px; height: 40px; fill: var(--primary-color); opacity: 0.15; transform: rotate(-15deg);" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
        <path d="M 32 40 C 22 42, 10 38, 8 28 C 6 18, 18 12, 30 22 Z"/>
        <path d="M 32 40 C 42 42, 54 38, 56 28 C 58 18, 46 12, 34 22 Z"/>
    </svg>
    <svg class="hero-butterfly" style="position: absolute; bottom: 15%; right: 10%; width: 50px; height: 50px; fill: var(--secondary-color); opacity: 0.15; transform: rotate(25deg);" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
        <path d="M 32 40 C 22 42, 10 38, 8 28 C 6 18, 18 12, 30 22 Z"/>
        <path d="M 32 40 C 42 42, 54 38, 56 28 C 58 18, 46 12, 34 22 Z"/>
    </svg>
    
    <h1 style="position: relative; z-index: 2;">{{ $settings['company_name'] ?? 'Evelyn Boutique' }}</h1>
    <p style="position: relative; z-index: 2;">{{ $settings['services_subtitle'] ?? 'Confecciones y prendas exclusivas para las niñas más bellas de tu vida.' }}</p>
</div>

<!-- Search & Filter Bar -->
<div style="margin-bottom: 2.5rem; max-width: 600px; margin-left: auto; margin-right: auto;">
    <form action="{{ route('shop.index') }}" method="GET" style="display: flex; gap: 0.5rem;">
        @if(request('category'))
            <input type="hidden" name="category" value="{{ request('category') }}">
        @endif
        <input type="text" name="search" placeholder="Buscar por nombre, SKU o descripción..." value="{{ request('search') }}" class="form-control" style="background-color: var(--bg-card); backdrop-filter: blur(var(--glass-blur));">
        <button type="submit" class="btn btn-primary" title="Buscar">
            <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
        </button>
        @if(request('search') || request('category'))
            <a href="{{ route('shop.index') }}" class="btn btn-outline" title="Ver todo el catálogo">
                Limpiar
            </a>
        @endif
    </form>
</div>

<!-- Services Section (Only shown when not searching and on all categories) -->
@if(!request('search') && !request('category') && ($settings['show_services'] ?? '1') == '1' && !$services->isEmpty())
    <section style="margin-bottom: 4rem;">
        <div style="text-align: center; margin-bottom: 2.5rem;">
            <h2 style="font-size: 2rem; font-weight: 800; color: var(--text-primary);">{{ $settings['services_title'] ?? 'Nuestros Servicios' }}</h2>
            @if(!empty($settings['services_subtitle']))
                <p style="color: var(--text-secondary); max-width: 600px; margin: 0.5rem auto 0 auto; font-size: 1.05rem;">{{ $settings['services_subtitle'] }}</p>
            @endif
            <p style="font-size: 0.85rem; color: var(--text-muted); margin-top: 0.75rem; font-style: italic;">
                *Nota: Los precios de los servicios son referenciales. Para presupuestos personalizados o más información, por favor 
                @if(!empty($settings['social_whatsapp']))
                    <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $settings['social_whatsapp']) }}" target="_blank" style="color: var(--primary-color); font-weight: 600; text-decoration: underline;">contáctanos vía WhatsApp</a>.
                @else
                    contáctanos.
                @endif
            </p>
        </div>

        <div class="catalog-grid">
            @foreach($services as $service)
                <div class="product-card glass">
                    <div class="product-image-wrapper">
                        <img src="{{ $service->image_url }}" alt="{{ $service->name }}" class="product-image">
                    </div>

                    <div class="product-info">
                        <h3 class="product-name" style="margin-bottom: 0.5rem;">{{ $service->name }}</h3>
                        <p class="product-description" style="margin-bottom: 1.25rem;">{{ $service->description }}</p>
                        
                        <div style="margin-top: auto;">
                            <div class="product-footer" style="margin-bottom: 1rem;">
                                <span class="product-price" style="font-size: 1.25rem;">
                                    {{ $service->price ? '$' . number_format($service->price, 2) : 'A convenir' }}
                                </span>
                            </div>
                            
                            <a href="{{ route('appointments.book', ['service_id' => $service->id]) }}" class="btn btn-primary btn-sm btn-block" style="display: flex; gap: 0.5rem; justify-content: center; width: 100%;">
                                <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                                Agendar Online
                            </a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </section>

    <!-- Divider -->
    <hr style="border: 0; border-top: 1px solid var(--border-color); margin-bottom: 3.5rem;">
@endif

<!-- Product Catalog Section -->
<section id="catalog-section">
    <!-- Category Filter Pills Bar -->
    @if(!$categories->isEmpty())
        <div class="category-pills-container">
            <a href="{{ route('shop.index', request()->except('category', 'page')) }}" 
               class="category-pill-btn {{ !request('category') ? 'active' : '' }}">
                <span>✨ Todos</span>
            </a>

            @foreach($categories as $category)
                <a href="{{ route('shop.index', array_merge(request()->except('page'), ['category' => $category->slug])) }}" 
                   class="category-pill-btn {{ request('category') == $category->slug ? 'active' : '' }}">
                    <span>{{ $category->icon ?: '🏷️' }} {{ $category->name }}</span>
                    @if($category->products_count > 0)
                        <span class="pill-count">{{ $category->products_count }}</span>
                    @endif
                </a>
            @endforeach
        </div>
    @endif

    @if($selectedCategory)
        <div style="margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem;">
            <div>
                <h2 style="font-size: 1.5rem; font-weight: 800; color: var(--text-primary);">
                    {{ $selectedCategory->icon }} {{ $selectedCategory->name }}
                </h2>
                @if($selectedCategory->description)
                    <p style="color: var(--text-secondary); font-size: 0.9rem; margin-top: 0.2rem;">{{ $selectedCategory->description }}</p>
                @endif
            </div>
            <a href="{{ route('shop.index', request()->except('category')) }}" class="btn btn-outline btn-sm" style="font-size: 0.8rem;">
                ✕ Quitar filtro de categoría
            </a>
        </div>
    @endif

    @if($products->isEmpty())
        <div style="text-align: center; padding: 4rem 2rem;">
            <svg width="60" height="60" fill="none" stroke="var(--text-muted)" stroke-width="1.5" viewBox="0 0 24 24" style="margin-bottom: 1rem;"><path stroke-linecap="round" stroke-linejoin="round" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            <h3 style="font-size: 1.25rem; font-weight: 700; color: var(--text-secondary);">No se encontraron prendas en esta sección</h3>
            <p style="color: var(--text-muted); margin-top: 0.25rem;">Intenta con otra categoría o restablece los filtros de búsqueda.</p>
            <div style="margin-top: 1.5rem;">
                <a href="{{ route('shop.index') }}" class="btn btn-primary btn-sm">Ver Todas las Prendas</a>
            </div>
        </div>
    @else
        <div class="catalog-grid" id="product-container">
            @include('shop.partials.product_cards')
        </div>

        <!-- Sentinel element for Intersection Observer -->
        <div id="load-more-sentinel" style="text-align: center; padding: 2rem 0; font-weight: 600; color: var(--text-muted); font-size: 1rem; min-height: 50px;"></div>

        <script>
            document.addEventListener('DOMContentLoaded', function() {
                let nextPageUrl = '{{ $products->nextPageUrl() }}';
                const productContainer = document.getElementById('product-container');
                const sentinel = document.getElementById('load-more-sentinel');
                let isLoading = false;

                if (!nextPageUrl) {
                    sentinel.style.display = 'none';
                    return;
                }

                const observer = new IntersectionObserver((entries) => {
                    if (entries[0].isIntersecting && nextPageUrl && !isLoading) {
                        loadMoreProducts();
                    }
                }, {
                    rootMargin: '100px'
                });

                observer.observe(sentinel);

                function loadMoreProducts() {
                    isLoading = true;
                    sentinel.textContent = 'Cargando más hermosas prendas... 🌸';

                    fetch(nextPageUrl, {
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    })
                    .then(response => {
                        if (!response.ok) throw new Error('Network response was not ok');
                        return response.json();
                    })
                    .then(data => {
                        if (data.html) {
                            productContainer.insertAdjacentHTML('beforeend', data.html);
                            nextPageUrl = data.nextPageUrl;
                            
                            if (!nextPageUrl) {
                                sentinel.style.display = 'none';
                                observer.unobserve(sentinel);
                            } else {
                                sentinel.textContent = '';
                            }
                        }
                        isLoading = false;
                    })
                    .catch(error => {
                        console.error('Error al cargar productos:', error);
                        sentinel.textContent = 'Error al cargar. Inténtalo de nuevo.';
                        isLoading = false;
                    });
                }
            });
        </script>
    @endif
</section>
@endsection