<x-filament-panels::page>

    {{-- En-tete de bienvenue --}}
    <x-logistics.card>
        <div class="p-8 sm:p-10">
            <div class="max-w-3xl">
                <h1 class="text-2xl font-bold tracking-tight text-gray-950 sm:text-3xl dark:text-white">
                    Bienvenue sur API Logistics
                </h1>
                <p class="mt-3 text-base leading-relaxed text-gray-600 dark:text-gray-400">
                    Application d'exploration de l'API Logistics (Flex/ESI Gescom).
                    Ce projet permet de tester les endpoints disponibles, comprendre les structures de données
                    et servir de base pour une documentation complète de l'API.
                </p>
            </div>
        </div>
    </x-logistics.card>

    {{-- Navigation rapide --}}
    <x-logistics.card>
        <x-logistics.section-header
            title="Explorer l'API"
            description="Accédez aux différentes sections pour interroger l'API Logistics."
        />
        <div class="grid grid-cols-1 gap-4 p-6 sm:grid-cols-2 lg:grid-cols-3">

            <a href="{{ \App\Filament\Pages\TablesExplorer::getUrl() }}"
               class="group rounded-lg border border-gray-200 p-5 transition-colors hover:border-primary-300 hover:bg-primary-50 dark:border-white/10 dark:hover:border-primary-500/30 dark:hover:bg-primary-500/5">
                <div class="flex items-center gap-3">
                    <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary-50 text-primary-600 dark:bg-primary-500/10 dark:text-primary-400">
                        <x-filament::icon icon="heroicon-o-table-cells" class="h-5 w-5" />
                    </div>
                    <div>
                        <h3 class="text-sm font-semibold text-gray-950 dark:text-white">Tables</h3>
                        <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">Explorer les tables et leurs colonnes</p>
                    </div>
                </div>
            </a>

            <a href="{{ \App\Filament\Pages\Articles::getUrl() }}"
               class="group rounded-lg border border-gray-200 p-5 transition-colors hover:border-primary-300 hover:bg-primary-50 dark:border-white/10 dark:hover:border-primary-500/30 dark:hover:bg-primary-500/5">
                <div class="flex items-center gap-3">
                    <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary-50 text-primary-600 dark:bg-primary-500/10 dark:text-primary-400">
                        <x-filament::icon icon="heroicon-o-cube" class="h-5 w-5" />
                    </div>
                    <div>
                        <h3 class="text-sm font-semibold text-gray-950 dark:text-white">Articles</h3>
                        <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">Rechercher des articles et vérifier les stocks</p>
                    </div>
                </div>
            </a>

            <a href="{{ \App\Filament\Pages\Documents::getUrl() }}"
               class="group rounded-lg border border-gray-200 p-5 transition-colors hover:border-primary-300 hover:bg-primary-50 dark:border-white/10 dark:hover:border-primary-500/30 dark:hover:bg-primary-500/5">
                <div class="flex items-center gap-3">
                    <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary-50 text-primary-600 dark:bg-primary-500/10 dark:text-primary-400">
                        <x-filament::icon icon="heroicon-o-document-text" class="h-5 w-5" />
                    </div>
                    <div>
                        <h3 class="text-sm font-semibold text-gray-950 dark:text-white">Documents</h3>
                        <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">Consulter les documents par tiers</p>
                    </div>
                </div>
            </a>

            <a href="{{ \App\Filament\Pages\Journaux::getUrl() }}"
               class="group rounded-lg border border-gray-200 p-5 transition-colors hover:border-primary-300 hover:bg-primary-50 dark:border-white/10 dark:hover:border-primary-500/30 dark:hover:bg-primary-500/5">
                <div class="flex items-center gap-3">
                    <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary-50 text-primary-600 dark:bg-primary-500/10 dark:text-primary-400">
                        <x-filament::icon icon="heroicon-o-book-open" class="h-5 w-5" />
                    </div>
                    <div>
                        <h3 class="text-sm font-semibold text-gray-950 dark:text-white">Journaux</h3>
                        <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">Rechercher par type de journal</p>
                    </div>
                </div>
            </a>

            <a href="{{ \App\Filament\Pages\Tiers::getUrl() }}"
               class="group rounded-lg border border-gray-200 p-5 transition-colors hover:border-primary-300 hover:bg-primary-50 dark:border-white/10 dark:hover:border-primary-500/30 dark:hover:bg-primary-500/5">
                <div class="flex items-center gap-3">
                    <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary-50 text-primary-600 dark:bg-primary-500/10 dark:text-primary-400">
                        <x-filament::icon icon="heroicon-o-users" class="h-5 w-5" />
                    </div>
                    <div>
                        <h3 class="text-sm font-semibold text-gray-950 dark:text-white">Tiers</h3>
                        <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">Rechercher des tiers et leur historique</p>
                    </div>
                </div>
            </a>

            <a href="{{ \App\Filament\Pages\Documentation::getUrl() }}"
               class="group rounded-lg border border-gray-200 p-5 transition-colors hover:border-primary-300 hover:bg-primary-50 dark:border-white/10 dark:hover:border-primary-500/30 dark:hover:bg-primary-500/5">
                <div class="flex items-center gap-3">
                    <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary-50 text-primary-600 dark:bg-primary-500/10 dark:text-primary-400">
                        <x-filament::icon icon="heroicon-o-document-magnifying-glass" class="h-5 w-5" />
                    </div>
                    <div>
                        <h3 class="text-sm font-semibold text-gray-950 dark:text-white">Documentation</h3>
                        <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">Documentation complète de l'API</p>
                    </div>
                </div>
            </a>

        </div>
    </x-logistics.card>

    {{-- Informations techniques --}}
    <x-logistics.card>
        <x-logistics.section-header
            title="Informations techniques"
            description="Configuration et stack technique du projet."
        />
        <div class="p-6">
            <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                <div>
                    <h4 class="text-sm font-semibold text-gray-950 dark:text-white">Stack</h4>
                    <dl class="mt-3 space-y-2 text-sm">
                        <div class="flex justify-between">
                            <dt class="text-gray-500 dark:text-gray-400">Framework</dt>
                            <dd class="font-medium text-gray-700 dark:text-gray-200">Laravel 12</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-gray-500 dark:text-gray-400">Panel admin</dt>
                            <dd class="font-medium text-gray-700 dark:text-gray-200">Filament 5</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-gray-500 dark:text-gray-400">Composants réactifs</dt>
                            <dd class="font-medium text-gray-700 dark:text-gray-200">Livewire 4</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-gray-500 dark:text-gray-400">CSS</dt>
                            <dd class="font-medium text-gray-700 dark:text-gray-200">Tailwind CSS 4</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-gray-500 dark:text-gray-400">Tests</dt>
                            <dd class="font-medium text-gray-700 dark:text-gray-200">Pest 4</dd>
                        </div>
                    </dl>
                </div>
                <div>
                    <h4 class="text-sm font-semibold text-gray-950 dark:text-white">Connexion API</h4>
                    <dl class="mt-3 space-y-2 text-sm">
                        <div class="flex justify-between">
                            <dt class="text-gray-500 dark:text-gray-400">Serveur</dt>
                            <dd class="font-medium font-mono text-gray-700 dark:text-gray-200">tse-10-test.esi.local</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-gray-500 dark:text-gray-400">Méthode</dt>
                            <dd class="font-medium text-gray-700 dark:text-gray-200">POST</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-gray-500 dark:text-gray-400">Authentification</dt>
                            <dd class="font-medium font-mono text-gray-700 dark:text-gray-200">X-API-KEY</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-gray-500 dark:text-gray-400">Timeout</dt>
                            <dd class="font-medium text-gray-700 dark:text-gray-200">{{ config('logistics.timeout', 30) }}s</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-gray-500 dark:text-gray-400">Retry</dt>
                            <dd class="font-medium text-gray-700 dark:text-gray-200">{{ config('logistics.retry.times', 3) }} tentatives</dd>
                        </div>
                    </dl>
                </div>
            </div>
        </div>
    </x-logistics.card>

      {{-- Contacts en cas de problème --}}
      <x-logistics.card>
        <x-logistics.section-header
            title="Contacts en cas de problème"
            description="Contacts en cas de problème avec l'API Logistics."
        />
        <div class="p-6">
          <p class="text-gray-500 dark:text-gray-400">
            En cas de problème avec l'API Logistics, veuillez contacter le support technique à l'adresse suivante :
          </p>
          <ul class="list-disc list-inside">
            <li>Nom : Marvin</li>
            <li>Email : <a href="mailto:mpa@esi-informatique.com" class="text-primary-600 dark:text-primary-400">mpa@esi-informatique.com</a></li>
          </ul>
        </div>
      </x-logistics.card>

</x-filament-panels::page>
