{% extends 'admin/base.html.twig' %}

{% block title %}Guide d'accès - Boutique{% endblock %}

{% block body %}
<div class="container-fluid mt-5 pt-5">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card shadow-lg">
                <div class="card-header bg-primary text-white">
                    <h3 class="mb-0"><i class="fas fa-shopping-cart"></i> Comment accéder à la boutique ?</h3>
                </div>
                <div class="card-body p-5">
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle"></i> <strong>Important :</strong> Vous devez d'abord sélectionner un site pour accéder à sa boutique.
                    </div>

                    <h4 class="mt-4 mb-3"><i class="fas fa-route"></i> Méthode 1 : Via URL directe</h4>
                    <p>Remplacez <code>{siteId}</code> par l'ID de votre site (exemple : 1, 2, 3...) :</p>
                    <div class="input-group mb-4">
                        <span class="input-group-text">URL :</span>
                        <input type="text" class="form-control" value="http://www.izibrick.test:9000/admin/site/1/shop" readonly>
                        <button class="btn btn-outline-secondary" onclick="navigator.clipboard.writeText('http://www.izibrick.test:9000/admin/site/1/shop')">
                            <i class="fas fa-copy"></i> Copier
                        </button>
                    </div>

                    <h4 class="mt-4 mb-3"><i class="fas fa-database"></i> Méthode 2 : Trouver l'ID de votre site</h4>
                    <p>Pour connaître l'ID de votre site, exécutez cette commande SQL :</p>
                    <div class="bg-dark text-light p-3 rounded mb-3">
                        <code>SELECT id, name FROM fir_site;</code>
                    </div>
                    <p class="text-muted small">Ou regardez dans l'URL quand vous modifiez une page de votre site.</p>

                    <h4 class="mt-4 mb-3"><i class="fas fa-list"></i> Accès rapide</h4>
                    <p>Une fois sur la page boutique, vous aurez accès à :</p>
                    <ul class="list-group mb-4">
                        <li class="list-group-item">
                            <i class="fas fa-chart-line text-primary"></i> <strong>Dashboard</strong> - Statistiques de la boutique
                        </li>
                        <li class="list-group-item">
                            <i class="fas fa-box text-success"></i> <strong>Produits</strong> - Gérer vos produits
                        </li>
                        <li class="list-group-item">
                            <i class="fas fa-folder text-warning"></i> <strong>Catégories</strong> - Organiser par catégories
                        </li>
                        <li class="list-group-item">
                            <i class="fas fa-shopping-bag text-info"></i> <strong>Commandes</strong> - Voir les commandes clients
                        </li>
                        <li class="list-group-item">
                            <i class="fas fa-cog text-secondary"></i> <strong>Paramètres</strong> - Activer/configurer la boutique
                        </li>
                    </ul>

                    <div class="alert alert-warning">
                        <h5><i class="fas fa-exclamation-triangle"></i> Pour activer la boutique :</h5>
                        <ol class="mb-0">
                            <li>Accédez à <strong>Paramètres</strong></li>
                            <li>Cochez <strong>"Activer la boutique"</strong></li>
                            <li>Configurez la TVA et la devise</li>
                            <li>Enregistrez</li>
                        </ol>
                    </div>

                    <h4 class="mt-4 mb-3"><i class="fas fa-rocket"></i> Exemples d'URLs</h4>
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>Page</th>
                                <th>URL</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Dashboard boutique</td>
                                <td><code>/admin/site/1/shop</code></td>
                            </tr>
                            <tr>
                                <td>Liste produits</td>
                                <td><code>/admin/site/1/shop/products</code></td>
                            </tr>
                            <tr>
                                <td>Nouveau produit</td>
                                <td><code>/admin/site/1/shop/product/new</code></td>
                            </tr>
                            <tr>
                                <td>Paramètres</td>
                                <td><code>/admin/site/1/shop/settings</code></td>
                            </tr>
                            <tr>
                                <td>Commandes</td>
                                <td><code>/admin/site/1/shop/orders</code></td>
                            </tr>
                        </tbody>
                    </table>

                    <div class="alert alert-success mt-4">
                        <h5><i class="fas fa-lightbulb"></i> Astuce</h5>
                        <p class="mb-0">Une fois sur une page de boutique, le menu latéral gauche affichera automatiquement la section <strong>"E-commerce > Boutique"</strong> avec tous les sous-menus !</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}