@extends('layouts.app')

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

@push('styles')
<link rel="stylesheet" href="{{ asset('css/prestataire-profile.css') }}?v={{ file_exists(public_path('css/prestataire-profile.css')) ? filemtime(public_path('css/prestataire-profile.css')) : time() }}">
@endpush

@push('scripts')
<script>
(function () {
    document.body.classList.add('prestataire-profile-immersive');

    /* Mesure les hauteurs des éléments fixes pour calculer le décalage sticky */
    function mesurer() {
        var navSite    = document.getElementById('site-navbar');
        var enTete     = document.querySelector('.shop-header');
        var barreNav   = document.querySelector('.shop-nav-bar');

        if (navSite) {
            var h = navSite.getBoundingClientRect().height;
            if (h && isFinite(h)) document.documentElement.style.setProperty('--site-nav-h', h + 'px');
        }
        if (enTete) {
            var he = enTete.getBoundingClientRect().height;
            if (he && isFinite(he)) document.documentElement.style.setProperty('--shop-header-h', he + 'px');
        }
        if (barreNav) {
            var hb = barreNav.getBoundingClientRect().height;
            if (hb && isFinite(hb)) document.documentElement.style.setProperty('--shop-nav-h', hb + 'px');
        }

        var total = (navSite  ? navSite.getBoundingClientRect().height  : 0)
                  + (enTete   ? enTete.getBoundingClientRect().height   : 0)
                  + (barreNav ? barreNav.getBoundingClientRect().height : 0)
                  + 24;

        if (total && isFinite(total)) document.documentElement.style.setProperty('--profile-sticky-offset', total + 'px');
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', mesurer, { once: true });
    } else {
        mesurer();
    }

    window.addEventListener('load', function () {
        requestAnimationFrame(function () { mesurer(); setTimeout(mesurer, 500); });
    }, { once: true });

    window.addEventListener('resize', function () { requestAnimationFrame(mesurer); }, { passive: true });
})();
</script>
@endpush

@section('content')
@php
    use Illuminate\Support\Str;

    /* ── Statistiques générales ── */
    $totalAvis     = $allReviews->count();
    $noteMoyenne   = $totalAvis > 0 ? round($allReviews->avg('rating'), 1) : 0;
    $aDesServices  = $allServices->count() > 0;
    $aDesEquipements = $allEquipments->count() > 0;
    $aDesProduits  = $allUrgentSales->count() > 0;
    $aUnMenu       = isset($foodProducts) && $foodProducts->count() > 0;
    $aDesVideos    = $prestataire->videos && $prestataire->videos->count() > 0;
    $estEnLigne    = $prestataire->user->is_online ?? false;

    /* ── Construction des onglets ── */
    $onglets = [];
    if ($aDesServices)    $onglets[] = ['id' => 'services',  'icon' => 'fa-concierge-bell', 'label' => 'Services',  'count' => $allServices->count()];
    if ($aDesEquipements) $onglets[] = ['id' => 'location',  'icon' => 'fa-tools',          'label' => 'Location',  'count' => $allEquipments->count()];
    if ($aDesProduits)    $onglets[] = ['id' => 'boutique',  'icon' => 'fa-store',           'label' => 'Boutique',  'count' => $allUrgentSales->count()];
    if ($aUnMenu)         $onglets[] = ['id' => 'menu',      'icon' => 'fa-utensils',        'label' => 'Menu',      'count' => $foodProducts->count()];
    $onglets[] = ['id' => 'avis', 'icon' => 'fa-star', 'label' => 'Avis', 'count' => $totalAvis];

    $ongletActifParDefaut = $onglets[0]['id'] ?? 'avis';

    /* ── Options de filtrage ── */
    $categoriesServices = $allServices
        ->flatMap(fn ($s) => $s->categories?->pluck('name') ?? collect())
        ->filter()->unique()->sort()->values();

    $categoriesEquipements = $allEquipments->pluck('category.name')->filter()->unique()->sort()->values();
    $etatsEquipements      = $allEquipments->pluck('condition')->filter()->unique()->values();

    $categoriesVentes = $allUrgentSales->pluck('category.name')->filter()->unique()->sort()->values();
    $etatsVentes      = collect(\App\Models\UrgentSale::CONDITION_OPTIONS)
        ->only($allUrgentSales->pluck('condition')->filter()->unique()->values()->all());

    $categoriesMenu = collect(\App\Models\FoodProduct::categories())
        ->only(($foodProducts ?? collect())->pluck('category')->filter()->unique()->values()->all());

    /* ── Avatar du prestataire ── */
    $urlAvatar = null;
    if ($prestataire->photo) {
        $urlAvatar = filter_var($prestataire->photo, FILTER_VALIDATE_URL) ? $prestataire->photo : asset('storage/' . $prestataire->photo);
    } elseif ($prestataire->user->avatar) {
        $urlAvatar = filter_var($prestataire->user->avatar, FILTER_VALIDATE_URL) ? $prestataire->user->avatar : asset('storage/' . $prestataire->user->avatar);
    } elseif ($prestataire->user->profile_photo_url) {
        $urlAvatar = $prestataire->user->profile_photo_url;
    }

    /* ── Nombre d'articles dans le panier ── */
    $nbArticlesPanier = 0;
    if (auth()->check()) {
        try {
            $panierUtilisateur = \App\Models\Cart::forUserActive(auth()->id());
            if ($panierUtilisateur) $nbArticlesPanier = $panierUtilisateur->items()->sum('quantity');
        } catch (\Exception $e) { $nbArticlesPanier = 0; }
    }

    // Variables passées aux partials (compatibilité avec les noms existants)
    $tabs = $onglets;
    $totalReviews = $totalAvis;
    $averageRating = $noteMoyenne;
    $hasServices = $aDesServices;
    $hasEquipments = $aDesEquipements;
    $hasProducts = $aDesProduits;
    $hasFood = $aUnMenu;
    $hasVideos = $aDesVideos;
    $isOnline = $estEnLigne;
    $defaultActiveTab = $ongletActifParDefaut;
    $avatarUrl = $urlAvatar;
    $cartItemCount = $nbArticlesPanier;
    $serviceCategories = $categoriesServices;
    $equipmentCategories = $categoriesEquipements;
    $equipmentConditions = $etatsEquipements;
    $urgentCategories = $categoriesVentes;
    $urgentConditions = $etatsVentes;
    $foodCategoryOptions = $categoriesMenu;
@endphp

<div class="prestataire-profile-page">

    {{-- En-tête avec avatar, nom, statut et bouton contact --}}
    @include('prestataires.partials._header')

    {{-- Barre de navigation par onglets --}}
    @include('prestataires.partials._nav')

    <div class="shop-tabs-content">
        {{-- Onglet Services --}}
        @if($aDesServices)
            @include('prestataires.partials._services')
        @endif

        {{-- Onglet Location de matériel --}}
        @if($aDesEquipements)
            @include('prestataires.partials._location')
        @endif

        {{-- Onglet Boutique (ventes) --}}
        @if($aDesProduits)
            @include('prestataires.partials._boutique')
        @endif

        {{-- Onglet Menu (restauration) --}}
        @if($aUnMenu)
            @include('prestataires.partials._menu')
        @endif

        {{-- Onglet Avis clients --}}
        @include('prestataires.partials._avis')

        {{-- Section À propos --}}
        @if($prestataire->description)
            @include('prestataires.partials._about')
        @endif

        {{-- Section Vidéos --}}
        @if($aDesVideos)
            @include('prestataires.partials._videos')
        @endif
    </div>

    {{-- Bouton flottant Suivre / Ne plus suivre --}}
    @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" aria-label="Ne plus suivre">
                            <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" aria-label="Suivre">
                            <i class="far fa-heart"></i>
                        </button>
                    </form>
                @endif
            </div>
        @endif
    @endauth
</div>

{{-- Modal vidéo (si pas de section vidéos, on le met quand même pour éviter les erreurs JS) --}}
@if(!$aDesVideos)
    <div id="video-modal" class="video-modal">
        <div class="video-modal-content">
            <button class="video-modal-close" onclick="fermerModalVideo()">
                <i class="fas fa-times"></i>
            </button>
            <video id="modal-video" controls playsinline></video>
        </div>
    </div>
@endif

<script>
(function () {
    var onglets  = Array.from(document.querySelectorAll('.shop-nav-tab'));
    var panneaux = Array.from(document.querySelectorAll('.tab-panel'));
    var barreNav = document.querySelector('.shop-nav-bar');
    var racine   = document.documentElement;
    var ongletParDefaut = @json($ongletActifParDefaut);

    /* ── Fonctions utilitaires ── */

    /** Normalise un texte : minuscules, sans accents, sans espaces superflus */
    function normaliserTexte(valeur) {
        return String(valeur || '').toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '').trim();
    }

    /** Convertit une valeur en nombre, retourne null si invalide */
    function convertirEnNombre(valeur) {
        var s = String(valeur || '').trim();
        if (!s) return null;
        var n = parseFloat(s.replace(',', '.'));
        return Number.isFinite(n) ? n : null;
    }

    /** Calcule le décalage vertical pour le défilement sous les éléments sticky */
    function obtenirDecalageSticky() {
        var css = parseFloat(getComputedStyle(racine).getPropertyValue('--profile-sticky-offset'));
        if (Number.isFinite(css) && css > 0) return css;

        var navSite  = document.getElementById('site-navbar');
        var enTete   = document.querySelector('.shop-header');
        var navBout  = document.querySelector('.shop-nav-bar');

        return (navSite ? navSite.getBoundingClientRect().height : 0)
             + (enTete  ? enTete.getBoundingClientRect().height  : 0)
             + (navBout ? navBout.getBoundingClientRect().height : 0)
             + 24;
    }

    /* ── Gestion des onglets ── */

    /** Active un onglet par son identifiant */
    function activerOnglet(idOnglet, options) {
        options = options || {};
        var defiler       = options.scroll !== false;
        var majHash       = options.updateHash !== false;

        var ongletCible  = onglets.find(function (o) { return o.dataset.tab === idOnglet; });
        var panneauCible = document.getElementById('panel-' + idOnglet);
        if (!ongletCible || !panneauCible) return;

        /* Basculer les classes actives */
        onglets.forEach(function (o)  { o.classList.toggle('active', o === ongletCible); });
        panneaux.forEach(function (p) { p.classList.toggle('active', p === panneauCible); });

        /* Centrer l'onglet dans la barre de navigation */
        ongletCible.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });

        /* Mettre à jour le hash dans l'URL */
        if (majHash) history.replaceState(null, '', '#panel-' + idOnglet);

        /* Défiler vers le panneau */
        if (defiler) {
            requestAnimationFrame(function () {
                var haut = panneauCible.getBoundingClientRect().top + window.pageYOffset - obtenirDecalageSticky();
                window.scrollTo({ top: Math.max(0, haut), behavior: 'smooth' });
            });
        }
    }

    /* Écouter le clic sur chaque onglet */
    onglets.forEach(function (onglet) {
        onglet.addEventListener('click', function () { activerOnglet(onglet.dataset.tab); });
    });

    /* Activer l'onglet depuis le hash de l'URL ou celui par défaut */
    var hashOnglet = window.location.hash.startsWith('#panel-') ? window.location.hash.replace('#panel-', '') : null;
    if (hashOnglet && document.getElementById('panel-' + hashOnglet)) {
        activerOnglet(hashOnglet, { scroll: true, updateHash: false });
    } else {
        activerOnglet(ongletParDefaut, { scroll: false, updateHash: false });
    }

    /* ── Système de filtrage ── */

    var configsFiltres = {
        services: {
            mots: ['service', 'services'],
            cartes: Array.from(document.querySelectorAll('.filterable-card[data-filter-group="services"]')),
            vide: document.getElementById('empty-services'),
            resultats: document.getElementById('results-services'),
            champs: {
                search:   document.querySelector('[data-filter-input="services-search"]'),
                category: document.querySelector('[data-filter-input="services-category"]'),
                pricing:  document.querySelector('[data-filter-input="services-pricing"]'),
                maxPrice: document.querySelector('[data-filter-input="services-max-price"]')
            },
            correspond: function (carte, etat) {
                var recherche  = normaliserTexte(carte.dataset.search);
                var categories = String(carte.dataset.category || '').split(' ').filter(Boolean);
                var modePrix   = carte.dataset.priceMode || '';
                var prix       = parseFloat(carte.dataset.price || '');

                if (etat.search && !recherche.includes(etat.search)) return false;
                if (etat.category && !categories.includes(etat.category)) return false;
                if (etat.pricing && modePrix !== etat.pricing) return false;
                if (etat.maxPrice !== null && (!Number.isFinite(prix) || prix > etat.maxPrice)) return false;
                return true;
            }
        },
        location: {
            mots: ['équipement', 'équipements'],
            cartes: Array.from(document.querySelectorAll('.filterable-card[data-filter-group="location"]')),
            vide: document.getElementById('empty-location'),
            resultats: document.getElementById('results-location'),
            champs: {
                search:    document.querySelector('[data-filter-input="location-search"]'),
                category:  document.querySelector('[data-filter-input="location-category"]'),
                condition: document.querySelector('[data-filter-input="location-condition"]'),
                maxPrice:  document.querySelector('[data-filter-input="location-max-price"]')
            },
            correspond: function (carte, etat) {
                if (etat.search && !normaliserTexte(carte.dataset.search).includes(etat.search)) return false;
                if (etat.category && String(carte.dataset.category || '') !== etat.category) return false;
                if (etat.condition && String(carte.dataset.condition || '') !== etat.condition) return false;
                var prix = parseFloat(carte.dataset.price || '');
                if (etat.maxPrice !== null && (!Number.isFinite(prix) || prix > etat.maxPrice)) return false;
                return true;
            }
        },
        boutique: {
            mots: ['annonce', 'annonces'],
            cartes: Array.from(document.querySelectorAll('.filterable-card[data-filter-group="boutique"]')),
            vide: document.getElementById('empty-boutique'),
            resultats: document.getElementById('results-boutique'),
            champs: {
                search:    document.querySelector('[data-filter-input="boutique-search"]'),
                category:  document.querySelector('[data-filter-input="boutique-category"]'),
                condition: document.querySelector('[data-filter-input="boutique-condition"]'),
                stock:     document.querySelector('[data-filter-input="boutique-stock"]'),
                maxPrice:  document.querySelector('[data-filter-input="boutique-max-price"]')
            },
            correspond: function (carte, etat) {
                if (etat.search && !normaliserTexte(carte.dataset.search).includes(etat.search)) return false;
                if (etat.category && String(carte.dataset.category || '') !== etat.category) return false;
                if (etat.condition && String(carte.dataset.condition || '') !== etat.condition) return false;
                if (etat.stock && String(carte.dataset.stock || '') !== etat.stock) return false;
                if (etat.maxPrice !== null && parseFloat(carte.dataset.price || '') > etat.maxPrice) return false;
                return true;
            }
        },
        menu: {
            mots: ['plat', 'plats'],
            cartes: Array.from(document.querySelectorAll('.filterable-card[data-filter-group="menu"]')),
            vide: document.getElementById('empty-menu'),
            resultats: document.getElementById('results-menu'),
            champs: {
                search:   document.querySelector('[data-filter-input="menu-search"]'),
                category: document.querySelector('[data-filter-input="menu-category"]'),
                preorder: document.querySelector('[data-filter-input="menu-preorder"]'),
                maxPrice: document.querySelector('[data-filter-input="menu-max-price"]')
            },
            correspond: function (carte, etat) {
                if (etat.search && !normaliserTexte(carte.dataset.search).includes(etat.search)) return false;
                if (etat.category && String(carte.dataset.category || '') !== etat.category) return false;
                if (etat.preorder && String(carte.dataset.preorder || '') !== etat.preorder) return false;
                if (etat.maxPrice !== null && parseFloat(carte.dataset.price || '') > etat.maxPrice) return false;
                return true;
            }
        },
        avis: {
            mots: ['avis', 'avis'],
            cartes: Array.from(document.querySelectorAll('.filterable-card[data-filter-group="avis"]')),
            vide: document.getElementById('empty-avis'),
            resultats: document.getElementById('results-avis'),
            champs: {
                search: document.querySelector('[data-filter-input="avis-search"]'),
                rating: document.querySelector('[data-filter-input="avis-rating"]')
            },
            correspond: function (carte, etat) {
                if (etat.search && !normaliserTexte(carte.dataset.search).includes(etat.search)) return false;
                if (etat.rating !== null && parseInt(carte.dataset.rating || '0', 10) < etat.rating) return false;
                return true;
            }
        }
    };

    /** Lit l'état actuel de tous les champs de filtre d'un groupe */
    function lireEtatFiltres(config) {
        var etat = {};
        Object.keys(config.champs).forEach(function (cle) {
            var champ = config.champs[cle];
            if (!champ)                  { etat[cle] = null; return; }
            if (champ.type === 'number') { etat[cle] = convertirEnNombre(champ.value); return; }
            etat[cle] = cle === 'search' ? normaliserTexte(champ.value) : (champ.value || '');
        });
        return etat;
    }

    /** Applique les filtres sur un groupe de cartes */
    function appliquerFiltres(groupe) {
        var config = configsFiltres[groupe];
        if (!config || !config.cartes.length) return;

        var etat = lireEtatFiltres(config);
        var visibles = 0;

        config.cartes.forEach(function (carte) {
            var afficher = config.correspond(carte, etat);
            carte.classList.toggle('is-filter-hidden', !afficher);
            if (afficher) visibles++;
        });

        if (config.vide)      config.vide.hidden = visibles !== 0;
        if (config.resultats) config.resultats.textContent = visibles + ' ' + (visibles > 1 ? config.mots[1] : config.mots[0]);
    }

    /* Initialiser les écouteurs et appliquer les filtres au chargement */
    Object.keys(configsFiltres).forEach(function (groupe) {
        var config = configsFiltres[groupe];
        Object.keys(config.champs).forEach(function (cle) {
            var champ = config.champs[cle];
            if (!champ) return;
            champ.addEventListener(champ.tagName === 'SELECT' ? 'change' : 'input', function () { appliquerFiltres(groupe); });
        });
        appliquerFiltres(groupe);
    });

    /* ── Boutons afficher/masquer les filtres ── */
    document.querySelectorAll('[data-filter-toggle]').forEach(function (btn) {
        btn.addEventListener('click', function () {
            var groupe  = btn.getAttribute('data-filter-toggle');
            var filtres = document.getElementById('filters-' + groupe);
            if (!filtres) return;
            filtres.classList.toggle('open');
            btn.classList.toggle('active', filtres.classList.contains('open'));
        });
    });

    /* Boutons réinitialiser les filtres */
    document.querySelectorAll('[data-filter-reset]').forEach(function (btn) {
        btn.addEventListener('click', function () {
            var groupe = btn.getAttribute('data-filter-reset');
            var config = configsFiltres[groupe];
            if (!config) return;
            Object.keys(config.champs).forEach(function (cle) { if (config.champs[cle]) config.champs[cle].value = ''; });
            appliquerFiltres(groupe);
        });
    });

    /* ── Ajout au panier en AJAX ── */
    document.querySelectorAll('.add-to-cart-form').forEach(function (formulaire) {
        formulaire.addEventListener('submit', function (e) {
            e.preventDefault();
            var bouton = formulaire.querySelector('button');
            var htmlOriginal = bouton.innerHTML;

            bouton.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
            bouton.disabled = true;

            fetch(formulaire.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(formulaire))
            })
            .then(function (r) { return r.json().then(function (d) { return { ok: r.ok, data: d }; }); })
            .then(function (res) {
                if (!res.ok) throw new Error(res.data.message || 'Erreur');

                bouton.innerHTML = '<i class="fas fa-check"></i> Ajouté';
                bouton.classList.add('added');

                var compteurPanier    = document.getElementById('cart-count');
                var indicateurPanier  = document.getElementById('cart-indicator');
                if (compteurPanier && res.data.cartCount !== undefined) compteurPanier.textContent = res.data.cartCount;
                if (indicateurPanier) indicateurPanier.classList.add('visible');

                afficherNotification(res.data.message || 'Ajouté au panier', 'success');

                setTimeout(function () { bouton.innerHTML = htmlOriginal; bouton.classList.remove('added'); bouton.disabled = false; }, 2000);
            })
            .catch(function (erreur) {
                bouton.innerHTML = '<i class="fas fa-exclamation-circle"></i>';
                afficherNotification(erreur.message || 'Une erreur est survenue', 'error');
                setTimeout(function () { bouton.innerHTML = htmlOriginal; bouton.disabled = false; }, 2000);
            });
        });
    });

    /** Affiche une notification temporaire (toast) */
    function afficherNotification(message, type) {
        var notif = document.createElement('div');
        notif.className = 'cart-toast ' + type;
        notif.innerHTML = '<i class="fas fa-' + (type === 'success' ? 'check-circle' : 'exclamation-triangle') + '"></i> ' + message;
        document.body.appendChild(notif);
        requestAnimationFrame(function () { notif.classList.add('visible'); });
        setTimeout(function () {
            notif.classList.remove('visible');
            setTimeout(function () { notif.remove(); }, 300);
        }, 2500);
    }

    /* ── Lecteur vidéo en modal ── */
    document.querySelectorAll('.js-video-card').forEach(function (carte) {
        carte.addEventListener('click', function () {
            var modal = document.getElementById('video-modal');
            var video = document.getElementById('modal-video');
            video.src = carte.dataset.videoUrl;
            modal.classList.add('active');
            video.play().catch(function () {});
            document.body.style.overflow = 'hidden';
        });
    });

    /** Ferme le modal vidéo */
    function fermerModalVideo() {
        var modal = document.getElementById('video-modal');
        var video = document.getElementById('modal-video');
        if (modal) modal.classList.remove('active');
        if (video) { video.pause(); video.src = ''; }
        document.body.style.overflow = '';
    }

    window.closeVideoModal = fermerModalVideo;
    window.fermerModalVideo = fermerModalVideo;

    var modalVideo = document.getElementById('video-modal');
    if (modalVideo) {
        modalVideo.addEventListener('click', function (e) {
            if (e.target.id === 'video-modal') fermerModalVideo();
        });
    }

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

    /* ── Effet au défilement sur la barre de navigation ── */
    window.addEventListener('scroll', function () {
        if (barreNav) barreNav.classList.toggle('scrolled', window.pageYOffset > 150);
    }, { passive: true });
})();
</script>
@endsection