@php
$home=new \App\Http\Controllers\HomeController();
use Illuminate\Http\Request;
$request = Request::capture();
$startDate = $request->startDay ? $request->startDay : date('Y-01-01');
$endDate = $request->endDay ? $request->endDay : date('Y-12-31');
$chart = $home->chart_vente($startDate, $endDate);
$chart2 = $home->chart_achat($startDate, $endDate);
@endphp

@extends("dashboard._blank")

@section("sidebar")
@include("dashboard._sidebar")
@endsection

@section("css_add")
    <link href="{{ asset('css/dashboard-modern.css') }}" rel="stylesheet">
    <style>
        /* ===== DOCS PAGE SPECIFIC STYLES ===== */
        .docs-banner {
            background: linear-gradient(135deg, rgba(136, 177, 33, 0.95) 0%, rgba(109, 143, 26, 0.95) 100%),
                        url({{asset('images/banner_2_background.jpg')}}) center no-repeat;
            background-size: cover;
            border-radius: 16px;
            padding: 60px 40px;
            margin-bottom: 40px;
            color: white;
            box-shadow: 0 8px 24px rgba(136, 177, 33, 0.2);
            position: relative;
            overflow: hidden;
        }

        .docs-banner::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 300px;
            height: 300px;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
            border-radius: 50%;
        }

        .docs-banner-content {
            position: relative;
            z-index: 1;
        }

        .docs-banner h1 {
            font-size: 42px;
            font-weight: 700;
            margin-bottom: 16px;
            color: white;
        }

        .docs-banner p {
            font-size: 18px;
            opacity: 0.95;
            max-width: 800px;
            line-height: 1.6;
        }

        .docs-search {
            margin-top: 30px;
            max-width: 600px;
        }

        .docs-search-input {
            width: 100%;
            padding: 16px 50px 16px 20px;
            border: none;
            border-radius: 50px;
            font-size: 16px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .docs-search-input:focus {
            outline: none;
            box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
        }

        .docs-search-icon {
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            color: #718096;
        }

        /* Accordion Styles */
        .faq-accordion {
            margin-top: 30px;
        }

        .faq-item {
            background: white;
            border-radius: 12px;
            margin-bottom: 16px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .faq-item:hover {
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
        }

        .faq-question {
            padding: 24px 60px 24px 24px;
            cursor: pointer;
            position: relative;
            transition: all 0.3s ease;
            border-bottom: 1px solid transparent;
        }

        .faq-question:hover {
            background: #f7fafc;
        }

        .faq-question.active {
            background: #f7fafc;
            border-bottom-color: #e9ecef;
        }

        .faq-question-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-right: 16px;
            font-size: 18px;
            background: rgba(136, 177, 33, 0.1);
            color: #88b121;
        }

        .faq-question-title {
            font-size: 18px;
            font-weight: 600;
            color: #2d3748;
            display: inline;
            vertical-align: middle;
        }

        .faq-toggle {
            position: absolute;
            right: 24px;
            top: 50%;
            transform: translateY(-50%);
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: rgba(136, 177, 33, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .faq-toggle i {
            color: #88b121;
            transition: transform 0.3s ease;
        }

        .faq-question.active .faq-toggle i {
            transform: rotate(180deg);
        }

        .faq-answer {
            padding: 0 24px;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease, padding 0.3s ease;
        }

        .faq-answer.active {
            padding: 24px;
            max-height: 2000px;
        }

        .faq-answer p {
            font-size: 15px;
            color: #4a5568;
            line-height: 1.8;
            margin-bottom: 16px;
        }

        .faq-answer ul {
            list-style: none;
            padding-left: 0;
        }

        .faq-answer ul li {
            font-size: 15px;
            color: #4a5568;
            line-height: 1.8;
            margin-bottom: 12px;
            padding-left: 30px;
            position: relative;
        }

        .faq-answer ul li::before {
            content: '→';
            position: absolute;
            left: 0;
            color: #88b121;
            font-weight: bold;
        }

        .faq-answer span {
            color: #88b121;
            font-weight: 600;
        }

        .faq-category {
            margin-bottom: 48px;
        }

        .faq-category-title {
            font-size: 24px;
            font-weight: 600;
            color: #2d3748;
            margin-bottom: 20px;
            padding-left: 16px;
            border-left: 4px solid #88b121;
        }

        /* Stats Cards */
        .docs-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 40px;
        }

        .docs-stat-card {
            background: white;
            border-radius: 12px;
            padding: 24px;
            text-align: center;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        }

        .docs-stat-icon {
            width: 56px;
            height: 56px;
            border-radius: 12px;
            margin: 0 auto 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
        }

        .docs-stat-icon.primary {
            background: rgba(136, 177, 33, 0.1);
            color: #88b121;
        }

        .docs-stat-icon.info {
            background: rgba(52, 152, 219, 0.1);
            color: #3498db;
        }

        .docs-stat-icon.success {
            background: rgba(39, 174, 96, 0.1);
            color: #27ae60;
        }

        .docs-stat-title {
            font-size: 14px;
            color: #718096;
            margin-bottom: 8px;
        }

        .docs-stat-value {
            font-size: 28px;
            font-weight: 700;
            color: #2d3748;
        }

        /* Quick Links */
        .quick-links {
            background: white;
            border-radius: 12px;
            padding: 24px;
            margin-bottom: 40px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        }

        .quick-links-title {
            font-size: 18px;
            font-weight: 600;
            color: #2d3748;
            margin-bottom: 16px;
        }

        .quick-link-item {
            display: flex;
            align-items: center;
            padding: 12px;
            border-radius: 8px;
            margin-bottom: 8px;
            transition: all 0.3s ease;
            text-decoration: none;
            color: #4a5568;
        }

        .quick-link-item:hover {
            background: #f7fafc;
            transform: translateX(8px);
            text-decoration: none;
            color: #88b121;
        }

        .quick-link-icon {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            background: rgba(136, 177, 33, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            color: #88b121;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .docs-banner {
                padding: 40px 24px;
            }

            .docs-banner h1 {
                font-size: 28px;
            }

            .docs-banner p {
                font-size: 16px;
            }

            .faq-question {
                padding: 20px 50px 20px 20px;
            }

            .faq-question-title {
                font-size: 16px;
            }

            .faq-answer.active {
                padding: 20px;
            }
        }
    </style>
@endsection

@section("content")
<div class="right_col dashboard-container" role="main">
    <div class="col-md-12 col-xs-12">

        {{-- Banner Section --}}
        <div class="docs-banner fade-in-up">
            <div class="docs-banner-content">
                <h1><i class="fas fa-question-circle"></i> Centre d'Aide & FAQ</h1>
                <p>
                    Apprenez-en davantage sur SUNGROCERY, le fonctionnement de chaque module et les interactions client - marchand - administrateur.
                </p>
                {{-- <div class="docs-search" style="position: relative;">
                    <input type="text" class="docs-search-input" placeholder="Rechercher dans la documentation..." id="searchInput">
                    <i class="fas fa-search docs-search-icon"></i>
                </div> --}}
            </div>
        </div>

        {{-- Quick Stats --}}
        <div class="docs-stats fade-in-up">
            <div class="docs-stat-card">
                <div class="docs-stat-icon primary">
                    <i class="fas fa-book"></i>
                </div>
                <div class="docs-stat-title">Articles</div>
                <div class="docs-stat-value">9</div>
            </div>
            <div class="docs-stat-card">
                <div class="docs-stat-icon info">
                    <i class="fas fa-video"></i>
                </div>
                <div class="docs-stat-title">Tutoriels</div>
                <div class="docs-stat-value">12</div>
            </div>
            <div class="docs-stat-card">
                <div class="docs-stat-icon success">
                    <i class="fas fa-users"></i>
                </div>
                <div class="docs-stat-title">Utilisateurs Aidés</div>
                <div class="docs-stat-value">500+</div>
            </div>
        </div>

        {{-- Quick Links --}}
        <div class="quick-links fade-in-up">
            <h3 class="quick-links-title"><i class="fas fa-bolt"></i> Accès Rapide</h3>
            <div class="row">
                <div class="col-md-6">
                    <a href="#collapse1" class="quick-link-item" data-toggle="collapse">
                        <div class="quick-link-icon"><i class="fas fa-store"></i></div>
                        <span>Créer ma boutique</span>
                    </a>
                    <a href="#collapse4" class="quick-link-item" data-toggle="collapse">
                        <div class="quick-link-icon"><i class="fas fa-tags"></i></div>
                        <span>Ajouter une catégorie</span>
                    </a>
                    <a href="#collapse5" class="quick-link-item" data-toggle="collapse">
                        <div class="quick-link-icon"><i class="fas fa-box"></i></div>
                        <span>Ajouter un produit</span>
                    </a>
                </div>
                <div class="col-md-6">
                    <a href="#collapse7" class="quick-link-item" data-toggle="collapse">
                        <div class="quick-link-icon"><i class="fas fa-wallet"></i></div>
                        <span>Gérer mon portefeuille</span>
                    </a>
                    <a href="#collapse10" class="quick-link-item" data-toggle="collapse">
                        <div class="quick-link-icon"><i class="fas fa-money-bill-wave"></i></div>
                        <span>Effectuer un retrait</span>
                    </a>
                    <a href="#collapse8" class="quick-link-item" data-toggle="collapse">
                        <div class="quick-link-icon"><i class="fas fa-chart-line"></i></div>
                        <span>Maximiser mes ventes</span>
                    </a>
                </div>
            </div>
        </div>

        {{-- FAQ Accordion --}}
        <div class="faq-category fade-in-up">
            <h2 class="faq-category-title">Questions Fréquentes</h2>

            <div class="faq-accordion">
                {{-- Question 1 --}}
                <div class="faq-item">
                    <div class="faq-question" data-toggle="collapse" data-target="#collapse1">
                        <span class="faq-question-icon"><i class="fas fa-store"></i></span>
                        <span class="faq-question-title">Comment créer sa boutique ?</span>
                        <div class="faq-toggle">
                            <i class="fas fa-chevron-down"></i>
                        </div>
                    </div>
                    <div id="collapse1" class="faq-answer collapse in">
                        <p>Cliquer sur l'option <span>'BOUTIQUE'</span> du menu pour accéder à l'espace de gestion des boutiques.</p>
                        <p>Cliquer ensuite sur le bouton <span>'CRÉER UNE BOUTIQUE'</span> pour faire apparaître le modal de création de boutique.</p>
                        <p>La création de la boutique comprend 04 étapes à savoir :</p>
                        <ul>
                            <li>
                                <span>Informations sur la boutique</span>
                                <div>Cette phase vous permet de renseigner les informations de création de votre boutique tel que : Un secteur d'activité, le nom de votre boutique, une description des activités que vous effectuez.</div>
                            </li>
                            <li>
                                <span>Sélection de votre template</span>
                                <div>Cette phase vous permet d'installer le template de votre boutique</div>
                            </li>
                            <li>
                                <span>Choix d'un abonnement</span>
                                <div>Vous êtes appelé à souscrire à un abonnement. Les abonnements disponibles partent d'un montant de 500 XOF pour un mois.</div>
                            </li>
                            <li>
                                <span>Paiement de l'abonnement</span>
                                <div>Vous devez effectuer le paiement du montant de l'abonnement pour valider la souscription de votre boutique. L'option de paiement comprend le paiement par MOBILE MONEY et BANCAIRE. Une fois validé, vous serez redirigé vers la page de gestion des boutiques.</div>
                            </li>
                        </ul>
                    </div>
                </div>

                {{-- Question 2 --}}
                <div class="faq-item">
                    <div class="faq-question" data-toggle="collapse" data-target="#collapse2">
                        <span class="faq-question-icon"><i class="fas fa-calendar-plus"></i></span>
                        <span class="faq-question-title">Comment cumuler mon abonnement ?</span>
                        <div class="faq-toggle">
                            <i class="fas fa-chevron-down"></i>
                        </div>
                    </div>
                    <div id="collapse2" class="faq-answer collapse">
                        <p>Le cumul vous permet d'ajouter un nouvel abonnement à celui en cours.</p>
                        <p>À la page de gestion des boutiques, un bouton <span>CUMULER VOTRE ABONNEMENT</span> vous permet de choisir un nouvel abonnement pour incrémentation.</p>
                        <p>Vous serez amené à effectuer le paiement du montant de l'abonnement pour valider le cumul.</p>
                    </div>
                </div>

                {{-- Question 3 --}}
                <div class="faq-item">
                    <div class="faq-question" data-toggle="collapse" data-target="#collapse3">
                        <span class="faq-question-icon"><i class="fas fa-cog"></i></span>
                        <span class="faq-question-title">Comment configurer sa boutique ?</span>
                        <div class="faq-toggle">
                            <i class="fas fa-chevron-down"></i>
                        </div>
                    </div>
                    <div id="collapse3" class="faq-answer collapse">
                        <p>Accédez à la page de gestion des boutiques.</p>
                        <p>Identifiez la boutique à configurer.</p>
                        <p>Cliquer sur le bouton <span>DASHBOARD</span> pour accéder au menu de votre boutique cible.</p>
                        <p>Le <span>MENU</span> présente les options de configuration générale de votre boutique :</p>
                        <ul>
                            <li><span>CATÉGORIES</span> - Ajouter une nouvelle catégorie à votre boutique</li>
                            <li><span>PRODUITS</span> - Ajouter de nouveaux produits à votre boutique</li>
                            <li><span>COMMANDES</span> - Consulter les commandes effectuées par vos clients</li>
                            <li><span>OPTIONS</span> - Configurer les détails de votre boutique (logo, bannière, police, etc.)</li>
                            <li><span>MESSAGES</span> - Consulter les messages envoyés par vos clients</li>
                            <li><span>NEWSLETTERS</span> - Gérer l'abonnement à la newsletter et envoyer des messages de diffusion</li>
                        </ul>
                    </div>
                </div>

                {{-- Question 4 --}}
                <div class="faq-item">
                    <div class="faq-question" data-toggle="collapse" data-target="#collapse4">
                        <span class="faq-question-icon"><i class="fas fa-tags"></i></span>
                        <span class="faq-question-title">Comment ajouter une catégorie et à quoi sert-elle ?</span>
                        <div class="faq-toggle">
                            <i class="fas fa-chevron-down"></i>
                        </div>
                    </div>
                    <div id="collapse4" class="faq-answer collapse">
                        <p>Les catégories permettent de classer vos produits. Une boutique avec un bon classement de produits permet à l'utilisateur de se retrouver rapidement.</p>
                        <p><span>Étapes pour ajouter une catégorie :</span></p>
                        <ul>
                            <li>Accédez à votre page de gestion des boutiques en cliquant sur <span>BOUTIQUE</span></li>
                            <li>Choisissez une boutique et cliquez sur <span>DASHBOARD</span></li>
                            <li>Cliquez sur <span>CATÉGORIES</span> pour accéder à la page d'ajout</li>
                            <li>Cliquez sur <span>Ajouter une nouvelle catégorie</span></li>
                        </ul>
                        <p><span>Deux options vous sont proposées :</span></p>
                        <ul>
                            <li><span>Ajout depuis le catalogue SUNGROCERY</span> - Ajouter des catégories prédéfinies</li>
                            <li><span>Nouvel ajout</span> - Créer une catégorie personnalisée avec intitulé, description et caractéristiques</li>
                        </ul>
                    </div>
                </div>

                {{-- Question 5 --}}
                <div class="faq-item">
                    <div class="faq-question" data-toggle="collapse" data-target="#collapse5">
                        <span class="faq-question-icon"><i class="fas fa-box"></i></span>
                        <span class="faq-question-title">Comment ajouter un produit ?</span>
                        <div class="faq-toggle">
                            <i class="fas fa-chevron-down"></i>
                        </div>
                    </div>
                    <div id="collapse5" class="faq-answer collapse">
                        <p>Un produit s'ajoute directement à une boutique.</p>
                        <ul>
                            <li>Accédez à votre page de gestion des boutiques en cliquant sur <span>BOUTIQUE</span></li>
                            <li>Choisissez une boutique et cliquez sur <span>DASHBOARD</span></li>
                            <li>Cliquez sur <span>PRODUITS</span> pour accéder à la page d'ajout</li>
                            <li>Cliquez sur <span>Ajouter un nouveau produit</span></li>
                        </ul>
                        <p><span>Deux options disponibles :</span></p>
                        <ul>
                            <li><span>Ajout depuis le catalogue SUNGROCERY</span> - Ajouter des produits prédéfinis</li>
                            <li><span>Nouvel ajout</span> - Créer un produit personnalisé avec toutes les informations et images</li>
                        </ul>
                    </div>
                </div>

                {{-- Question 6 --}}
                <div class="faq-item">
                    <div class="faq-question" data-toggle="collapse" data-target="#collapse6">
                        <span class="faq-question-icon"><i class="fas fa-envelope"></i></span>
                        <span class="faq-question-title">À quoi sert la newsletter et comment fonctionne-t-elle ?</span>
                        <div class="faq-toggle">
                            <i class="fas fa-chevron-down"></i>
                        </div>
                    </div>
                    <div id="collapse6" class="faq-answer collapse">
                        <p>La newsletter vous permet de tenir au courant vos clients des différentes activités de votre boutique.</p>
                        <p>Partagez un produit, partagez une nouvelle, partagez vos boutiques.</p>
                        <p>Un abonnement est nécessaire pour souscrire à la newsletter. Accédez à votre boutique et suivez les étapes.</p>
                    </div>
                </div>

                {{-- Question 7 --}}
                <div class="faq-item">
                    <div class="faq-question" data-toggle="collapse" data-target="#collapse7">
                        <span class="faq-question-icon"><i class="fas fa-wallet"></i></span>
                        <span class="faq-question-title">Comment fonctionne mon portefeuille ?</span>
                        <div class="faq-toggle">
                            <i class="fas fa-chevron-down"></i>
                        </div>
                    </div>
                    <div id="collapse7" class="faq-answer collapse">
                        <p>Votre portefeuille est incrémenté une fois qu'un achat est effectué sur votre boutique.</p>
                        <p>Vous pourrez effectuer un retrait lorsque votre solde dépassera <span>10.000 XOF</span>.</p>
                    </div>
                </div>

                {{-- Question 8 --}}
                <div class="faq-item">
                    <div class="faq-question" data-toggle="collapse" data-target="#collapse10">
                        <span class="faq-question-icon"><i class="fas fa-money-bill-wave"></i></span>
                        <span class="faq-question-title">Comment et quand effectuer un retrait ?</span>
                        <div class="faq-toggle">
                            <i class="fas fa-chevron-down"></i>
                        </div>
                    </div>
                    <div id="collapse10" class="faq-answer collapse">
                        <p>Vous devez avoir atteint <span>10.000 XOF</span> au moins pour effectuer un retrait.</p>
                        <p>Le retrait s'effectue sur le solde de votre <span>PORTEFEUILLE</span>.</p>
                        <p>Pour effectuer un retrait, cliquez sur le bouton <span>Demande de retrait</span> à l'accueil de votre dashboard.</p>
                        <p>Une fois la demande effectuée, nous vous enverrons l'argent sur le moyen de récupération choisi.</p>
                    </div>
                </div>

                {{-- Question 9 --}}
                <div class="faq-item">
                    <div class="faq-question" data-toggle="collapse" data-target="#collapse8">
                        <span class="faq-question-icon"><i class="fas fa-chart-line"></i></span>
                        <span class="faq-question-title">Comment puis-je maximiser mes ventes ?</span>
                        <div class="faq-toggle">
                            <i class="fas fa-chevron-down"></i>
                        </div>
                    </div>
                    <div id="collapse8" class="faq-answer collapse">
                        <p>Vous devez partager vos produits et votre boutique sur les réseaux sociaux pour gagner en visibilité.</p>
                        <p>Aussi, activez la promotion au niveau des produits pour maximiser vos ventes.</p>
                    </div>
                </div>

                {{-- Question 10 --}}
                <div class="faq-item">
                    <div class="faq-question" data-toggle="collapse" data-target="#collapse9">
                        <span class="faq-question-icon"><i class="fas fa-exclamation-triangle"></i></span>
                        <span class="faq-question-title">Ma boutique affiche "Site web non configuré"</span>
                        <div class="faq-toggle">
                            <i class="fas fa-chevron-down"></i>
                        </div>
                    </div>
                    <div id="collapse9" class="faq-answer collapse">
                        <p>Vous devez ajouter des catégories et des produits à votre boutique pour résoudre ce problème.</p>
                        <p>Suivez les étapes décrites dans les sections <span>"Comment ajouter une catégorie"</span> et <span>"Comment ajouter un produit"</span>.</p>
                    </div>
                </div>
            </div>
        </div>

        {{-- Need More Help --}}
        <div class="dashboard-alert info fade-in-up" style="margin-top: 40px;">
            <div class="dashboard-alert-title">
                <i class="fas fa-headset"></i> Besoin d'aide supplémentaire ?
            </div>
            <div class="dashboard-alert-content">
                Notre équipe support est disponible pour vous aider. Contactez-nous via le formulaire de contact ou envoyez-nous un email à <strong>contact@sungrocery.biz</strong>
            </div>
        </div>

    </div>
</div>
@endsection

@section('script')
<script>
    $(document).ready(function() {
        // Toggle FAQ items
        $('.faq-question').on('click', function() {
            const $this = $(this);
            const $item = $this.closest('.faq-item');
            const $answer = $item.find('.faq-answer');

            // Toggle active class
            $this.toggleClass('active');
            $answer.toggleClass('active');

            // Toggle collapse
            $answer.collapse('toggle');
        });

        // Search functionality
        $('#searchInput').on('input', function() {
            const searchTerm = $(this).val().toLowerCase();

            $('.faq-item').each(function() {
                const questionText = $(this).find('.faq-question-title').text().toLowerCase();
                const answerText = $(this).find('.faq-answer').text().toLowerCase();

                if (questionText.includes(searchTerm) || answerText.includes(searchTerm)) {
                    $(this).fadeIn(300);
                } else {
                    $(this).fadeOut(300);
                }
            });
        });

        // Scroll animations
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.style.opacity = '1';
                    entry.target.style.transform = 'translateY(0)';
                }
            });
        }, observerOptions);

        document.querySelectorAll('.fade-in-up').forEach(el => {
            el.style.opacity = '0';
            el.style.transform = 'translateY(20px)';
            el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
            observer.observe(el);
        });
    });
</script>
@endsection