@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 Bar -->
<div style="margin-bottom: 2.5rem; max-width: 500px; margin-left: auto; margin-right: auto;">
    <form action="{{ route('shop.index') }}" method="GET" style="display: flex; gap: 0.5rem;">
        <input type="text" name="search" placeholder="Buscar productos..." 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">
            <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'))
            <a href="{{ route('shop.index') }}" class="btn btn-outline" title="Limpiar búsqueda">
                Limpiar
            </a>
        @endif
    </form>
</div>

<!-- Services Section (Only shown when not searching) -->
@if(!request('search') && ($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: 4rem;">
@endif

<!-- Product Catalog -->
@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 productos</h3>
        <p style="color: var(--text-muted); margin-top: 0.25rem;">Intenta con otros términos de búsqueda o vuelve a cargar el catálogo.</p>
    </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

@endsection