@extends('documentation.application.squelette')

@section('titre')
{{ __("Déploiement") }}
@endsection

@section('menu')
<li class="nav-item">
    <a class="nav-link scrollto" href="#environnements">Environnements</a>
</li>
<li class="nav-item">
    <a class="nav-link scrollto" href="#frontend-deploy">Déploiement Frontend</a>
</li>
<li class="nav-item">
    <a class="nav-link scrollto" href="#backend-deploy">Déploiement Backend</a>
</li>
<li class="nav-item">
    <a class="nav-link scrollto" href="#configuration">Configuration</a>
</li>
<li class="nav-item">
    <a class="nav-link scrollto" href="#mise-a-jour">Processus de Mise à Jour</a>
</li>
@endsection

@section('contenu')
<div class="docs-content">
    <div class="container">
        <article class="docs-article">
            <h2 class="section-heading" id="environnements">Environnements</h2>
            <div class="section-block">
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Environnement</th>
                                <th>Frontend (PWA)</th>
                                <th>Backend (API)</th>
                                <th>Base de Données</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Production</td>
                                <td>o2switch/Ionos</td>
                                <td>Serveur dédié Ionos</td>
                                <td>MySQL sur Ionos</td>
                            </tr>
                            <tr>
                                <td>Développement</td>
                                <td>localhost:5173 <br>(Vite PWA) (selon le port ouvert au npm run dev)</td>
                                <td>localhost:8000 <br>(Laravel API) (selon la configuration locale)</td>
                                <td>MySQL local</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <h2 class="section-heading" id="frontend-deploy">Déploiement Frontend</h2>
<div class="section-block">
    <h3>1. Build de Production</h3>
    <pre><code class="language-bash">
# Installation des dépendances
npm install

# Build de production
npm run build

# Les fichiers de build se trouvent dans le dossier 'dist'
    </code></pre>

    <h3>2. Vérification de l'environnement</h3>
    <div class="callout-block callout-info">
        <div class="content">
            <h4>Variables d'environnement</h4>
            <pre><code class="language-env">
# .env
VITE_API_URL=https://api.votredomaine.com
            </code></pre>
            <p>Vérifier que :</p>
            <ul>
                <li>Le fichier .env existe</li>
                <li>VITE_API_URL pointe vers la bonne API</li>
            </ul>
        </div>
    </div>

    <h3>4. Checklist de déploiement</h3>
    <div class="table-responsive">
        <table class="table">
            <thead>
                <tr>
                    <th>Élément</th>
                    <th>À vérifier</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Variables d'environnement</td>
                    <td>
                        <ul>
                            <li>VITE_API_URL correcte</li>
                        </ul>
                    </td>
                </tr>
                <tr>
                    <td>HTTPS</td>
                    <td>
                        <ul>
                            <li>Certificat SSL valide
                            </li>
                            <li>Redirection HTTP → HTTPS
                            </li>
                            <li>Pas de contenu mixte
                                <ul>
                                    <li>Vérifier que toutes les ressources (images, scripts, styles) sont chargées en HTTPS</li>
                                    <li>Utiliser des URL relatives ou des URL commençant par // pour les ressources externes</li>
                                </ul>
                            </li>
                        </ul>
                    </td>
                </tr>
                <tr>
                    <td>Cache</td>
                    <td>
                        <ul>
                            <li>Assets statiques en cache long
                                <ul>
                                    <li>Configurer les en-têtes Cache-Control pour les fichiers statiques (JS, CSS, images)</li>
                                    <li>Définir une durée de cache appropriée (par exemple, 1 an pour les ressources versionnées)</li>
                                </ul>
                            </li>
                            <li>Fichiers PWA sans cache
                                <ul>
                                    <li>S'assurer que le fichier manifest.json n'est pas mis en cache</li>
                                    <li>Configurer le Service Worker pour ne pas mettre en cache les fichiers critiques de la PWA</li>
                                </ul>
                            </li>
                        </ul>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

            <h2 class="section-heading" id="configuration">Configuration</h2>
            <div class="section-block">
                <h3>Frontend (Vue 3)</h3>
                <pre><code class="language-typescript">
// config/index.ts
const getApiUrl = () => {
    if (import.meta.env.DEV) {
        return import.meta.env.VITE_API_URL;
    }
    
    const hostname = window.location.hostname;
    const domainMappings = {
        'application.demo-elanmaintenance.com': 'https://application-back.demoelan.com/api',
    };
    
    return domainMappings[hostname] || 'https://application-back.demoelan.com/api';
};
                </code></pre>

                <h3>Backend (Laravel)</h3>
                <div class="callout-block callout-warning">
                    <div class="content">
                        <h4>Configuration par client</h4>
                        <p>Chaque instance API a sa propre configuration avec :</p>
                        <ul>
                            <li>Base de données dédiée</li>
                            <li>Configuration CORS spécifique</li>
                            <li>Variables d'environnement propres</li>
                        </ul>
                    </div>
                </div>
            </div>

            <h2 class="section-heading" id="mise-a-jour">Processus de Mise à Jour</h2>
            <div class="section-block">
                <h3>Frontend</h3>
                <ol>
                    <li>
                        <pre><code class="language-bash">git pull origin master</code></pre>
                    </li>
                    <li>Build de la nouvelle version</li>
                    <pre><code class="language-bash">npm run build</code></pre>
                    <li>Notification aux utilisateurs (via PWA update), se fait automatiquement</li>
                </ol>
            </div>
        </article>
    </div>
</div>
@endsection