@extends('documentation.application.squelette')

@section('titre')
{{ __("Présentation de l'Application ELAN Providers PWA") }}
@endsection

@section('menu')
    <li class="nav-item">
        <a class="nav-link scrollto" href="#architecture">Architecture Globale</a>
    </li>
    <li class="nav-item">
        <a class="nav-link scrollto" href="#vue-ensemble">Vue d'ensemble</a>
    </li>
    <li class="nav-item">
        <a class="nav-link scrollto" href="#caracteristiques">Caractéristiques principales</a>
    </li>
    <li class="nav-item">
        <a class="nav-link scrollto" href="#auth-securite">Authentification et Sécurité</a>
    </li>
    <li class="nav-item">
        <a class="nav-link scrollto" href="#environnements">Environnements</a>
    </li>
    <li class="nav-item">
        <a class="nav-link scrollto" href="#technologies">Technologies Utilisées</a>
    </li>
@endsection

@section('contenu')
<div class="docs-content">
    <div class="container">
        <article class="docs-article">
            <header class="docs-header">
                <h1 id="architecture" class="docs-heading">Architecture Globale</h1>
            </header>
            
            <section class="docs-section">
                <a target="_blank" href="{{ asset('images/graph_elan_app.png') }}" class="lightbox-link">
                    <img src="{{ asset('images/graph_elan_app.png') }}" alt="Architecture ELAN App" class="img-fluid">
                </a>
                
                <h2 class="section-heading">Vue d'ensemble</h2>
                <p>L'application ELAN Providers est une Progressive Web App (PWA) qui combine :</p>
                <ul>
                    <li>Un frontend développé avec Vue 3 et Vite PWA</li>
                    <li>Une architecture multi-clients avec des API Laravel dédiées</li>
                    <li>Un système de gestion d'état avec Pinia</li>
                    <li>Une gestion offline via Service Worker</li>
                </ul>

                <h2 id="caracteristiques" class="section-heading">Caractéristiques principales</h2>
                <div class="callout-block callout-info">
                    <div class="content">
                        <h4>Progressive Web App</h4>
                        <ul>
                            <li>Installation sur l'écran d'accueil</li>
                            <li>Fonctionnement hors ligne</li>
                            <li>Mises à jour automatiques</li>
                            <li>Notifications push</li>
                        </ul>
                    </div>
                </div>

                <div class="callout-block callout-warning">
                    <div class="content">
                        <h4>Architecture Multi-Clients</h4>
                        <ul>
                            <li>Une seule PWA pour tous les clients</li>
                            <li>API Laravel dédiée par client</li>
                            <li>Base de données isolée par client</li>
                            <li>Gestion des URLs API dynamique</li>
                        </ul>
                    </div>
                </div>

                <h2 id="auth-securite" class="section-heading">Authentification et Sécurité</h2>
                <ul>
                    <li>Authentification JWT par client</li>
                    <li>Token stocké dans le localStorage</li>
                    <li>Vérification automatique du token</li>
                    <li>Gestion de la déconnexion</li>
                </ul>

                <h2 id="environnements" class="section-heading">Environnements</h2>
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>Environnement</th>
                            <th>Frontend (PWA)</th>
                            <th>Backend (API)</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Production</td>
                            <td>o2switch/Ionos</td>
                            <td>Serveur dédié Ionos</td>
                        </tr>
                        <tr>
                            <td>Développement</td>
                            <td>localhost:5173 (Vite PWA) (selon le port ouvert au npm run dev)</td>
                            <td>localhost:8000 (Laravel API) (selon la configuration locale)</td>
                        </tr>
                    </tbody>
                </table>

                <h2 id="technologies" class="section-heading">Technologies Utilisées</h2>
                <div class="row">
                    <div class="col-md-6">
                        <h4>Frontend</h4>
                        <ul>
                            <li>Vue 3</li>
                            <li>Vite (PWA)</li>
                            <li>TypeScript</li>
                            <li>Pinia</li>
                            <li>Tailwind CSS</li>
                            <li>Shadcn-vue</li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <h4>Backend</h4>
                        <ul>
                            <li>Laravel 11</li>
                            <li>JWT Auth</li>
                            <li>MySQL</li>
                        </ul>
                    </div>
                </div>
            </section>
        </article>
    </div>
</div>
@endsection