<x-filament-panels::page>
    <x-logistics.error-banner :message="$errorMessage" />

    {{-- Toggle Lecture / Ecriture --}}
    <div class="flex gap-2">
        <x-filament::button wire:click="$set('mode', 'read')" :color="$mode === 'read' ? 'primary' : 'gray'" icon="heroicon-o-arrow-down-tray">
            Lecture
        </x-filament::button>
        <x-filament::button wire:click="$set('mode', 'write')" :color="$mode === 'write' ? 'primary' : 'gray'" icon="heroicon-o-arrow-up-tray">
            Ecriture
        </x-filament::button>
    </div>

    @if ($mode === 'read')
        {{-- jnl_list --}}
        <x-logistics.card>
            <x-logistics.section-header title="jnl_list" description="Rechercher des journaux" />
            <div class="p-6">
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
                    <x-logistics.form-field
                        wire:model="type"
                        label="Type de journal (TYPE, obligatoire)"
                        id="type"
                        placeholder="Ex: V"
                    />
                    <x-logistics.form-field
                        wire:model="select"
                        label="Colonnes (select)"
                        id="select"
                        placeholder="Ex: jnlid,jnlname"
                    />
                    <x-logistics.form-field
                        wire:model="results"
                        label="Nombre de résultats (results)"
                        id="results"
                        type="number"
                        min="1"
                        max="100"
                    />
                </div>

                <div class="mt-4 flex items-center gap-3">
                    <x-filament::button wire:click="searchJournaux" icon="heroicon-o-magnifying-glass">
                        Rechercher
                    </x-filament::button>
                    <div wire:loading wire:target="searchJournaux" class="flex items-center gap-2">
                        <x-filament::loading-indicator class="h-4 w-4 text-primary-500" />
                        <span class="text-sm text-gray-500">Recherche en cours...</span>
                    </div>
                </div>

                <x-logistics.param-table :params="$this->paramTableJnlList()" />
            </div>
        </x-logistics.card>

        @if (count($data) > 0)
            <x-logistics.card>
                <x-logistics.section-header title="Résultats jnl_list">
                    <x-slot:actions>
                        <span class="rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium tabular-nums text-gray-600 dark:bg-white/10 dark:text-gray-300">
                            {{ count($data) }} résultat(s)
                        </span>
                    </x-slot:actions>
                </x-logistics.section-header>
                <div class="p-6">
                    <x-logistics.data-table :data="$data" />
                </div>
            </x-logistics.card>
        @elseif ($hasSearched && ! $errorMessage)
            <x-logistics.card>
                <x-logistics.section-header title="Résultats jnl_list" />
                <div class="p-6">
                    <x-logistics.empty-state
                        icon="heroicon-o-magnifying-glass"
                        title="Aucune donnée n'a été trouvée pour votre demande."
                    />
                </div>
            </x-logistics.card>
        @endif
    @else
        <x-logistics.card>
            <div class="p-6">
                <x-logistics.empty-state
                    icon="heroicon-o-arrow-up-tray"
                    title="Aucun endpoint d'écriture disponible"
                    description="La section Journaux ne dispose pas d'endpoints d'envoi de données."
                />
            </div>
        </x-logistics.card>
    @endif
</x-filament-panels::page>
