@extends('layouts.app')

@section('title', $prestataire->user->name . ' - Prestataire')

@push('styles')
<link rel="stylesheet" href="{{ asset('css/prestataire-profile.css') }}?v={{ time() }}">
<style>
/* Header violet + nav blanche collées sans aucun espace */
.prestataire-profile-page {
    background: var(--bg-light, #f8fafc);
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Supprimer la bordure/ombre de la navbar pour coller au header violet */
#site-navbar,
nav#site-navbar,
nav#site-navbar.bg-white.shadow-sm {
    border-bottom: none !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    border: none !important;
}

/* Shop header sticky sous la navbar fixe */
.shop-header {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 70px !important;
    z-index: 45 !important;
    margin: 0 !important;
    box-shadow: none !important;
    border-top: none !important;
}
.shop-header-content {
    padding: 12px 16px !important;
}
.shop-nav-bar {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: calc(70px + var(--shop-header-h, 56px)) !important;
    z-index: 40 !important;
    background: white !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    margin: 0 !important;
    border-top: none !important;
}

/* Mobile : garantir zéro espace entre nav blanche et header violet */
@media (max-width: 768px) {
    main {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    .prestataire-profile-page {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    .shop-header {
        margin-top: 0 !important;
        border-radius: 0 !important;
    }
}
@media (min-width: 640px) {
    .shop-header {
        top: 80px !important;
    }
    .shop-nav-bar {
        top: calc(80px + var(--shop-header-h, 56px)) !important;
    }
}

/* Mode app mobile — safe area adjustments */
@supports (padding-top: env(safe-area-inset-top)) {
    body.app-mode .shop-header {
        top: calc(70px + env(safe-area-inset-top)) !important;
    }
    body.app-mode .shop-nav-bar {
        top: calc(70px + var(--shop-header-h, 56px) + env(safe-area-inset-top)) !important;
    }
}
@media (display-mode: standalone) {
    @supports (padding-top: env(safe-area-inset-top)) {
        .shop-header {
            top: calc(70px + env(safe-area-inset-top)) !important;
        }
        .shop-nav-bar {
            top: calc(70px + var(--shop-header-h, 56px) + env(safe-area-inset-top)) !important;
        }
    }
}

/* Toast notifications panier */
.cart-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    z-index: 9999;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.cart-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.cart-toast.success {
    background: #065f46;
    color: white;
}
.cart-toast.error {
    background: #991b1b;
    color: white;
}
</style>
@endpush

@push('scripts')
<script>
/* Mesurer les hauteurs réelles des barres sticky */
(function () {
    function measure() {
        var siteNav = document.getElementById('site-navbar');
        var shopH = document.querySelector('.shop-header');
        if (siteNav) {
            var h = siteNav.getBoundingClientRect().height;
            if (h && isFinite(h)) document.documentElement.style.setProperty('--site-nav-h', h + 'px');
        }
        if (shopH) {
            var sh = shopH.getBoundingClientRect().height;
            if (sh && isFinite(sh)) document.documentElement.style.setProperty('--shop-header-h', sh + 'px');
        }
    }
    /* Mesurer au DOMContentLoaded */
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', measure, { once: true });
    } else {
        measure();
    }
    /* Re-mesurer après chargement complet (CSS différés chargés) */
    window.addEventListener('load', function () {
        requestAnimationFrame(function() {
            measure();
            /* Re-mesurer encore après 500ms pour les polices/CSS tardifs */
            setTimeout(measure, 500);
        });
    }, { once: true });
    window.addEventListener('resize', function () { requestAnimationFrame(measure); }, { passive: true });
})();
</script>
@endpush

@section('content')
@php
    $totalReviews = $allReviews->count();
    $averageRating = $totalReviews > 0 ? round($allReviews->avg('rating'), 1) : 0;
    $hasProducts = $allUrgentSales->count() > 0;
    $hasFood = isset($foodProducts) && $foodProducts->count() > 0;
    $hasVideos = $prestataire->videos && $prestataire->videos->count() > 0;
    $hasServices = $allServices->count() > 0;
    $hasEquipments = $allEquipments->count() > 0;
    $isOnline = $prestataire->user->is_online ?? false;
    
    // Calcul des tabs actifs
    $tabs = [];
    if($hasServices) $tabs[] = ['id' => 'services', 'icon' => 'fa-concierge-bell', 'label' => 'Services', 'count' => $allServices->count()];
    if($hasEquipments) $tabs[] = ['id' => 'location', 'icon' => 'fa-tools', 'label' => 'Location', 'count' => $allEquipments->count()];
    if($hasProducts) $tabs[] = ['id' => 'boutique', 'icon' => 'fa-store', 'label' => 'Boutique', 'count' => $allUrgentSales->count()];
    if($hasFood) $tabs[] = ['id' => 'menu', 'icon' => 'fa-utensils', 'label' => 'Menu', 'count' => $foodProducts->count()];
    $tabs[] = ['id' => 'avis', 'icon' => 'fa-star', 'label' => 'Avis', 'count' => $totalReviews];
@endphp

<div class="prestataire-profile-page">
    
    {{-- HEADER COMPACT --}}
    <div class="shop-header">
        <div class="shop-header-content">
            <a href="{{ url()->previous() !== url()->current() ? url()->previous() : route('services.index') }}" class="shop-back-btn">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
            </a>
            
            <div class="shop-seller">
                <div class="shop-seller-avatar">
                    @php
                        $avatarUrl = null;
                        if ($prestataire->photo) {
                            $avatarUrl = filter_var($prestataire->photo, FILTER_VALIDATE_URL) ? $prestataire->photo : asset('storage/' . $prestataire->photo);
                        } elseif ($prestataire->user->avatar) {
                            $avatarUrl = filter_var($prestataire->user->avatar, FILTER_VALIDATE_URL) ? $prestataire->user->avatar : asset('storage/' . $prestataire->user->avatar);
                        } elseif ($prestataire->user->profile_photo_url) {
                            $avatarUrl = $prestataire->user->profile_photo_url;
                        }
                    @endphp
                    @if($avatarUrl)
                        <img src="{{ $avatarUrl }}" alt="{{ $prestataire->user->name }}">
                    @else
                        <div class="shop-avatar-placeholder">{{ strtoupper(substr($prestataire->user->name, 0, 1)) }}</div>
                    @endif
                    @if($prestataire->isVerified())
                        <span class="shop-verified">✓</span>
                    @endif
                </div>
                <div class="shop-seller-info">
                    <h1 class="shop-seller-name">{{ $prestataire->user->name }}</h1>
                    <div class="shop-seller-meta">
                        <span class="shop-status {{ $isOnline ? 'online' : '' }}">{{ $isOnline ? '● En ligne' : '○ Hors ligne' }}</span>
                        @if($totalReviews > 0)
                            <span class="shop-rating">★ {{ $averageRating }} ({{ $totalReviews }})</span>
                        @endif
                    </div>
                </div>
            </div>
            
            @auth
                @if(auth()->user()->isClient())
                    <a href="{{ route('client.messaging.start', $prestataire) }}" class="shop-contact-btn">
                        <i class="fas fa-comment-dots"></i>
                    </a>
                @endif
            @else
                <a href="{{ route('login') }}" class="shop-contact-btn">
                    <i class="fas fa-sign-in-alt"></i>
                </a>
            @endauth
        </div>
    </div>

    {{-- BARRE DE NAVIGATION FLOTTANTE STICKY --}}
    <nav class="shop-nav-bar">
        <div class="shop-nav-container">
            @foreach($tabs as $index => $tab)
                <button class="shop-nav-tab {{ $index === 0 ? 'active' : '' }}" data-tab="{{ $tab['id'] }}">
                    <i class="fas {{ $tab['icon'] }}"></i>
                    <span>{{ $tab['label'] }}</span>
                    @if($tab['count'] > 0)
                        <span class="tab-badge">{{ $tab['count'] }}</span>
                    @endif
                </button>
            @endforeach
        </div>
    </nav>

    {{-- CONTENU PAR ONGLETS --}}
    <div class="shop-tabs-content">
        
        {{-- TAB: SERVICES --}}
        @if($hasServices)
        <section class="tab-panel active" id="panel-services">
            <div class="panel-header">
                <h2><i class="fas fa-concierge-bell"></i> Nos Services</h2>
                <p>Découvrez nos prestations professionnelles</p>
            </div>
            <div class="services-grid">
                @foreach($allServices as $service)
                <article class="service-card">
                    <a href="{{ route('services.show', $service) }}" class="service-image">
                        @if($service->images && $service->images->count() > 0)
                            <img src="{{ asset('storage/' . $service->images->first()->image_path) }}" alt="{{ $service->title }}" loading="lazy">
                        @else
                            <div class="service-no-image">
                                <i class="fas fa-concierge-bell"></i>
                            </div>
                        @endif
                        @if($service->images && $service->images->count() > 1)
                            <span class="image-count"><i class="fas fa-images"></i> {{ $service->images->count() }}</span>
                        @endif
                    </a>
                    <div class="service-body">
                        <h3><a href="{{ route('services.show', $service) }}">{{ $service->title }}</a></h3>
                        <p class="service-desc">{{ Str::limit($service->description, 80) }}</p>
                        <div class="service-footer">
                            <div class="service-price">
                                @if($service->price)
                                    <span class="price-value">{{ number_format($service->price, 0, ',', ' ') }} €</span>
                                @else
                                    <span class="price-quote">Sur devis</span>
                                @endif
                            </div>
                            <a href="{{ route('services.show', $service) }}" class="btn-service">
                                Réserver <i class="fas fa-arrow-right"></i>
                            </a>
                        </div>
                    </div>
                </article>
                @endforeach
            </div>
        </section>
        @endif

        {{-- TAB: LOCATION / ÉQUIPEMENTS --}}
        @if($hasEquipments)
        <section class="tab-panel {{ !$hasServices ? 'active' : '' }}" id="panel-location">
            <div class="panel-header teal">
                <h2><i class="fas fa-tools"></i> Location de Matériel</h2>
                <p>Équipements professionnels disponibles à la location</p>
            </div>
            <div class="equipment-grid">
                @foreach($allEquipments as $equipment)
                <article class="equipment-card">
                    <a href="{{ route('equipment.show', $equipment) }}" class="equipment-image">
                        @if($equipment->main_photo)
                            <img src="{{ asset('storage/' . $equipment->main_photo) }}" alt="{{ $equipment->name }}" loading="lazy">
                        @else
                            <div class="equipment-no-image">
                                <i class="fas fa-tools"></i>
                            </div>
                        @endif
                        @if($equipment->is_available)
                            <span class="availability-badge available">Disponible</span>
                        @else
                            <span class="availability-badge unavailable">Réservé</span>
                        @endif
                    </a>
                    <div class="equipment-body">
                        <h3><a href="{{ route('equipment.show', $equipment) }}">{{ $equipment->name }}</a></h3>
                        <p class="equipment-desc">{{ Str::limit($equipment->description, 70) }}</p>
                        <div class="equipment-pricing">
                            @if($equipment->price_per_hour)
                                <span class="rate"><strong>{{ number_format($equipment->price_per_hour, 0, ',', ' ') }} €</strong>/h</span>
                            @endif
                            @if($equipment->price_per_day)
                                <span class="rate"><strong>{{ number_format($equipment->price_per_day, 0, ',', ' ') }} €</strong>/jour</span>
                            @endif
                        </div>
                        <a href="{{ route('equipment.show', $equipment) }}" class="btn-equipment">
                            <i class="fas fa-calendar-check"></i> Réserver
                        </a>
                    </div>
                </article>
                @endforeach
            </div>
        </section>
        @endif

        {{-- TAB: BOUTIQUE --}}
        @if($hasProducts)
        <section class="tab-panel" id="panel-boutique">
            <div class="panel-header orange">
                <h2><i class="fas fa-store"></i> Notre Boutique</h2>
                <p>{{ $allUrgentSales->count() }} articles disponibles</p>
            </div>
            
            {{-- Indicateur panier flottant dans la boutique --}}
            @auth
            @php
                $cartItemCount = 0;
                try {
                    $userCart = \App\Models\Cart::forUserActive(auth()->id());
                    if ($userCart) {
                        $cartItemCount = $userCart->items()->sum('quantity');
                    }
                } catch (\Exception $e) {}
            @endphp
            <div class="cart-indicator {{ $cartItemCount > 0 ? 'visible' : '' }}" id="cart-indicator">
                <a href="{{ route('client.cart.index') }}" class="cart-btn">
                    <i class="fas fa-shopping-cart"></i>
                    <span class="cart-count" id="cart-count">{{ $cartItemCount }}</span>
                    <span class="cart-text">Voir le panier</span>
                </a>
            </div>
            @endauth

            <div class="boutique-grid">
                @foreach($allUrgentSales as $sale)
                @php
                    $availableQty = ($sale->quantity ?? 1) - ($sale->reserved_quantity ?? 0) - ($sale->sold_quantity ?? 0);
                @endphp
                <article class="product-card-boutique" data-product-id="{{ $sale->id }}">
                    <a href="{{ route('urgent-sales.show', $sale) }}" class="product-image-wrap">
                        @if($sale->photos && count($sale->photos) > 0)
                            @php $firstPhoto = $sale->photos[0]; @endphp
                            @if(filter_var($firstPhoto, FILTER_VALIDATE_URL))
                                <img src="{{ $firstPhoto }}" alt="{{ $sale->title }}" loading="lazy">
                            @else
                                <x-media-image :path="$firstPhoto" :alt="$sale->title" class="w-full h-full object-cover" />
                            @endif
                        @else
                            <div class="product-no-image">
                                <i class="fas fa-shopping-bag"></i>
                            </div>
                        @endif
                        @if($availableQty <= 3 && $availableQty > 0)
                            <span class="stock-badge low">Plus que {{ $availableQty }}!</span>
                        @elseif($availableQty <= 0)
                            <span class="stock-badge out">Épuisé</span>
                        @endif
                    </a>
                    <div class="product-body">
                        <h3><a href="{{ route('urgent-sales.show', $sale) }}">{{ $sale->title }}</a></h3>
                        <p class="product-desc">{{ Str::limit($sale->description, 60) }}</p>
                        <div class="product-bottom">
                            <div class="product-price-tag">
                                <span class="current-price">{{ number_format($sale->price, 2, ',', ' ') }} €</span>
                            </div>
                            @if($availableQty > 0)
                                @auth
                                    @php
                                        $sellerId = (int) ($sale->prestataire?->user_id ?? 0);
                                        $isOwnSale = (int) auth()->id() === $sellerId;
                                        $hasOnlinePayment = ($sale->payment_requirement ?? 'none') === 'full';
                                        $hasStripeConnect = !empty($sale->prestataire?->stripe_account_id);
                                        $canAddToCart = !$isOwnSale
                                            && $hasOnlinePayment
                                            && $hasStripeConnect
                                            && \Illuminate\Support\Facades\Route::has('client.cart.add.urgent-sale');
                                    @endphp

                                    @if($canAddToCart)
                                        <form method="POST" action="{{ route('client.cart.add.urgent-sale', $sale) }}" class="add-to-cart-form">
                                            @csrf
                                            <input type="hidden" name="quantity" value="1">
                                            <button type="submit" class="btn-add-cart">
                                                <i class="fas fa-cart-plus"></i>
                                                <span>Ajouter</span>
                                            </button>
                                        </form>
                                    @elseif($isOwnSale)
                                        <span class="btn-out-of-stock">Votre annonce</span>
                                    @else
                                        <a href="{{ route('urgent-sales.show', $sale) }}" class="btn-add-cart">
                                            <i class="fas fa-comments"></i>
                                            <span>{{ $hasOnlinePayment ? 'Contacter' : 'Réserver' }}</span>
                                        </a>
                                    @endif
                                @else
                                    <a href="{{ route('login') }}" class="btn-add-cart">
                                        <i class="fas fa-sign-in-alt"></i>
                                        <span>Connexion</span>
                                    </a>
                                @endauth
                            @else
                                <span class="btn-out-of-stock">Épuisé</span>
                            @endif
                        </div>
                    </div>
                </article>
                @endforeach
            </div>
        </section>
        @endif

        {{-- TAB: MENU FOOD --}}
        @if($hasFood)
        <section class="tab-panel" id="panel-menu">
            <div class="panel-header green">
                <h2><i class="fas fa-utensils"></i> Notre Menu</h2>
                <p>Commandez et faites-vous livrer</p>
            </div>
            
            {{-- Lien vers la page complète de commande --}}
            <div class="menu-cta">
                <a href="{{ route('food.menu', $prestataire) }}" class="btn-full-menu">
                    <i class="fas fa-book-open"></i>
                    Voir le menu complet & Commander
                    <i class="fas fa-arrow-right"></i>
                </a>
            </div>

            <div class="menu-grid">
                @foreach($foodProducts->take(12) as $product)
                <article class="menu-item-card">
                    <div class="menu-item-image">
                        @if($product->image)
                            <img src="{{ asset('storage/' . $product->image) }}" alt="{{ $product->name }}" loading="lazy">
                        @else
                            <div class="menu-no-image">🍽️</div>
                        @endif
                    </div>
                    <div class="menu-item-body">
                        <h3>{{ $product->name }}</h3>
                        @if($product->description)
                            <p>{{ Str::limit($product->description, 50) }}</p>
                        @endif
                        <div class="menu-item-footer">
                            <span class="menu-price">{{ number_format($product->price, 2, ',', ' ') }} €</span>
                            <a href="{{ route('food.menu', $prestataire) }}" class="btn-order-item">
                                <i class="fas fa-plus"></i> Commander
                            </a>
                        </div>
                    </div>
                </article>
                @endforeach
            </div>

            @if($foodProducts->count() > 12)
            <div class="see-more-wrap">
                <a href="{{ route('food.menu', $prestataire) }}" class="btn-see-more">
                    Voir les {{ $foodProducts->count() - 12 }} autres plats
                    <i class="fas fa-arrow-right"></i>
                </a>
            </div>
            @endif
        </section>
        @endif

        {{-- TAB: AVIS --}}
        <section class="tab-panel" id="panel-avis">
            <div class="panel-header gold">
                <h2><i class="fas fa-star"></i> Avis Clients</h2>
                <div class="rating-summary">
                    <span class="big-rating">{{ $averageRating }}</span>
                    <div class="rating-details">
                        <div class="stars-display">
                            @for($i = 1; $i <= 5; $i++)
                                <i class="fas fa-star {{ $i <= round($averageRating) ? 'filled' : '' }}"></i>
                            @endfor
                        </div>
                        <span class="reviews-count">{{ $totalReviews }} avis</span>
                    </div>
                </div>
            </div>

            {{-- Formulaire avis --}}
            @auth
                @if(auth()->user()->client && !$existingReview && $hasInteracted)
                <div class="review-form-section">
                    <h3>Donnez votre avis</h3>
                    <form action="{{ route('reviews.store') }}" method="POST" class="review-form">
                        @csrf
                        <input type="hidden" name="prestataire_id" value="{{ $prestataire->id }}">
                        <div class="star-rating-input">
                            @for($i = 5; $i >= 1; $i--)
                                <input type="radio" name="rating" value="{{ $i }}" id="star{{ $i }}" required>
                                <label for="star{{ $i }}"><i class="fas fa-star"></i></label>
                            @endfor
                        </div>
                        <textarea name="comment" placeholder="Partagez votre expérience avec ce prestataire..." rows="4" maxlength="500"></textarea>
                        <button type="submit" class="btn-submit-review">
                            <i class="fas fa-paper-plane"></i> Publier mon avis
                        </button>
                    </form>
                </div>
                @endif
            @endauth

            {{-- Liste des avis --}}
            @if($totalReviews > 0)
            <div class="reviews-list">
                @foreach($allReviews as $review)
                <article class="review-card">
                    <div class="review-header">
                        <div class="reviewer-avatar">
                            {{ strtoupper(substr($review->client->name ?? 'A', 0, 1)) }}
                        </div>
                        <div class="reviewer-info">
                            <span class="reviewer-name">{{ $review->client->name ?? 'Client' }}</span>
                            <div class="review-stars">
                                @for($i = 1; $i <= 5; $i++)
                                    <i class="fas fa-star {{ $i <= $review->rating ? 'filled' : '' }}"></i>
                                @endfor
                            </div>
                        </div>
                        <span class="review-date">{{ $review->created_at->diffForHumans() }}</span>
                    </div>
                    @if($review->comment)
                        <p class="review-text">{{ $review->comment }}</p>
                    @endif
                </article>
                @endforeach
            </div>
            @else
            <div class="no-reviews">
                <i class="fas fa-comment-slash"></i>
                <p>Aucun avis pour le moment</p>
                <span>Soyez le premier à donner votre avis !</span>
            </div>
            @endif
        </section>

        {{-- SECTION: À propos (toujours visible en bas) --}}
        @if($prestataire->description)
        <section class="about-section">
            <h3><i class="fas fa-info-circle"></i> À propos</h3>
            <p>{{ $prestataire->description }}</p>
            @if($prestataire->city || $prestataire->phone)
            <div class="about-contact-info">
                @if($prestataire->city)
                    <span><i class="fas fa-map-marker-alt"></i> {{ $prestataire->city }}</span>
                @endif
                @auth
                    @if($prestataire->phone && ($prestataire->phone_visible ?? true))
                        <a href="tel:{{ $prestataire->phone }}"><i class="fas fa-phone"></i> {{ $prestataire->phone }}</a>
                    @endif
                @endauth
            </div>
            @endif
        </section>
        @endif

        {{-- Vidéos (si existantes) --}}
        @if($hasVideos)
        <section class="videos-section">
            <h3><i class="fas fa-video"></i> Nos Vidéos</h3>
            <div class="videos-scroll">
                @foreach($prestataire->videos as $video)
                <div class="video-thumb js-video-card" data-video-url="{{ asset('storage/' . $video->video_path) }}">
                    @if($video->thumbnail)
                        <img src="{{ asset('storage/' . $video->thumbnail) }}" alt="{{ $video->title }}" loading="lazy">
                    @else
                        <video src="{{ asset('storage/' . $video->video_path) }}" preload="metadata" muted></video>
                    @endif
                    <div class="video-play"><i class="fas fa-play"></i></div>
                </div>
                @endforeach
            </div>
        </section>
        @endif

    </div>

    {{-- BOUTON FLOTTANT FOLLOW --}}
    @auth
        @if(auth()->user()->isClient())
        <div class="floating-action">
            @if(auth()->user()->client && auth()->user()->client->isFollowing($prestataire->id))
                <form action="{{ route('client.prestataire-follows.unfollow', $prestataire) }}" method="POST" class="floating-form">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="floating-btn danger">
                        <i class="fas fa-heart"></i>
                    </button>
                </form>
            @else
                <form action="{{ route('client.prestataire-follows.follow', $prestataire) }}" method="POST" class="floating-form">
                    @csrf
                    <button type="submit" class="floating-btn secondary">
                        <i class="far fa-heart"></i>
                    </button>
                </form>
            @endif
        </div>
        @endif
    @endauth

</div>

{{-- Modal Vidéo --}}
<div id="video-modal" class="video-modal">
    <div class="video-modal-content">
        <button class="video-modal-close" onclick="closeVideoModal()"><i class="fas fa-times"></i></button>
        <video id="modal-video" controls playsinline></video>
    </div>
</div>

<script>
// Navigation par onglets
document.querySelectorAll('.shop-nav-tab').forEach(tab => {
    tab.addEventListener('click', () => {
        // Retirer la classe active de tous les onglets
        document.querySelectorAll('.shop-nav-tab').forEach(t => t.classList.remove('active'));
        document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
        
        // Ajouter la classe active à l'onglet cliqué
        tab.classList.add('active');
        const panelId = 'panel-' + tab.dataset.tab;
        const panel = document.getElementById(panelId);
        if (panel) {
            panel.classList.add('active');
            // Scroll vers le haut du contenu avec offset pour la navbar
            const navBar = document.querySelector('.shop-nav-bar');
            const navHeight = navBar ? navBar.offsetHeight : 60;
            const panelTop = panel.getBoundingClientRect().top + window.pageYOffset - navHeight - 20;
            window.scrollTo({ top: panelTop, behavior: 'smooth' });
        }
    });
});

// Gestion du panier (AJAX pour ajouter sans recharger)
document.querySelectorAll('.add-to-cart-form').forEach(form => {
    form.addEventListener('submit', async (e) => {
        e.preventDefault();
        const btn = form.querySelector('button');
        const originalHtml = btn.innerHTML;
        
        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
        btn.disabled = true;
        
        try {
            const response = await fetch(form.action, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    'Accept': 'application/json',
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: new URLSearchParams(new FormData(form))
            });
            
            const data = await response.json();
            
            if (response.ok) {
                btn.innerHTML = '<i class="fas fa-check"></i> Ajouté';
                btn.classList.add('added');
                
                // Mettre à jour le compteur du panier
                const cartCount = document.getElementById('cart-count');
                const cartIndicator = document.getElementById('cart-indicator');
                if (cartCount && data.cartCount !== undefined) {
                    cartCount.textContent = data.cartCount;
                }
                if (cartIndicator) {
                    cartIndicator.classList.add('visible');
                }

                // Toast de succès
                const toast = document.createElement('div');
                toast.className = 'cart-toast success';
                toast.innerHTML = '<i class="fas fa-check-circle"></i> ' + (data.message || 'Ajouté au panier');
                document.body.appendChild(toast);
                requestAnimationFrame(() => toast.classList.add('visible'));
                setTimeout(() => { toast.classList.remove('visible'); setTimeout(() => toast.remove(), 300); }, 2500);
                
                // Animation de succès
                setTimeout(() => {
                    btn.innerHTML = originalHtml;
                    btn.classList.remove('added');
                    btn.disabled = false;
                }, 2000);
            } else {
                throw new Error(data.message || 'Erreur');
            }
        } catch (error) {
            btn.innerHTML = '<i class="fas fa-exclamation-circle"></i>';
            // Afficher le message d'erreur
            const errorMsg = error.message || 'Une erreur est survenue';
            const toast = document.createElement('div');
            toast.className = 'cart-toast error';
            toast.innerHTML = '<i class="fas fa-exclamation-triangle"></i> ' + errorMsg;
            document.body.appendChild(toast);
            requestAnimationFrame(() => toast.classList.add('visible'));
            setTimeout(() => { toast.classList.remove('visible'); setTimeout(() => toast.remove(), 300); }, 3000);
            setTimeout(() => {
                btn.innerHTML = originalHtml;
                btn.disabled = false;
            }, 2000);
        }
    });
});

// Video modal
document.querySelectorAll('.js-video-card').forEach(card => {
    card.addEventListener('click', () => {
        const modal = document.getElementById('video-modal');
        const video = document.getElementById('modal-video');
        video.src = card.dataset.videoUrl;
        modal.classList.add('active');
        video.play();
        document.body.style.overflow = 'hidden';
    });
});

function closeVideoModal() {
    const modal = document.getElementById('video-modal');
    const video = document.getElementById('modal-video');
    modal.classList.remove('active');
    video.pause();
    video.src = '';
    document.body.style.overflow = '';
}

document.getElementById('video-modal')?.addEventListener('click', e => {
    if (e.target.id === 'video-modal') closeVideoModal();
});

document.addEventListener('keydown', e => {
    if (e.key === 'Escape') closeVideoModal();
});

// Highlight de la nav au scroll
const navBar = document.querySelector('.shop-nav-bar');
let lastScroll = 0;
window.addEventListener('scroll', () => {
    const currentScroll = window.pageYOffset;
    if (currentScroll > 150) {
        navBar.classList.add('scrolled');
    } else {
        navBar.classList.remove('scrolled');
    }
    lastScroll = currentScroll;
});
</script>
@endsection