<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')
        {{-- art_list --}}
        <x-logistics.card>
            <x-logistics.section-header title="art_list" description="Rechercher des articles" />
            <div class="p-6">
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
                    <x-logistics.form-field
                        wire:model="search"
                        label="Recherche (search)"
                        id="search"
                        placeholder="Filtre de recherche..."
                    />
                    <x-logistics.form-field
                        wire:model="select"
                        label="Colonnes (select)"
                        id="select"
                        placeholder="artid,name1"
                    />
                    <x-logistics.form-field
                        wire:model="barcode"
                        label="Code-barres (barcode)"
                        id="barcode"
                        placeholder="Ex: 5411068700323"
                    />
                </div>

                <div class="mt-4 flex items-center gap-3">
                    <x-filament::button wire:click="searchArticles" icon="heroicon-o-magnifying-glass">
                        Rechercher
                    </x-filament::button>
                    <div wire:loading wire:target="searchArticles" 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->paramTableArtList()" />
            </div>
        </x-logistics.card>

        @if (count($data) > 0)
            <x-logistics.card>
                <x-logistics.section-header title="Résultats art_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 art_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

        {{-- art_getstk --}}
        <x-logistics.card>
            <x-logistics.section-header title="art_getstk" description="Vérifier le stock d'un article" />
            <div class="p-6">
                <div class="flex items-end gap-4">
                    <div class="flex-1">
                        <x-logistics.form-field
                            wire:model="stockArticleId"
                            label="Identifiant article (ARTID)"
                            id="stockArticleId"
                            placeholder="Ex: ART001"
                        />
                    </div>
                    <x-filament::button wire:click="getStock" icon="heroicon-o-cube">
                        Vérifier le stock
                    </x-filament::button>
                </div>

                <div wire:loading wire:target="getStock" class="mt-4 flex items-center gap-2">
                    <x-filament::loading-indicator class="h-4 w-4 text-primary-500" />
                    <span class="text-sm text-gray-500">Chargement...</span>
                </div>

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

                <div wire:loading.remove wire:target="getStock" class="mt-4">
                    <x-logistics.json-block :data="$stockData" :searched="$hasCheckedStock" />
                </div>
            </div>
        </x-logistics.card>
    @else
        {{-- art_add --}}
        <x-logistics.card>
            <x-logistics.section-header title="art_add" description="Créer un nouvel article" />
            <div class="p-6">
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
                    <x-logistics.form-field
                        wire:model="addArtId"
                        label="Identifiant article (ARTID)"
                        id="addArtId"
                        placeholder="Ex: ART001"
                    />
                    <x-logistics.form-field
                        wire:model="addName"
                        label="Nom (NAME1)"
                        id="addName"
                        placeholder="Ex: Clavier sans fil"
                    />
                    <x-logistics.form-field
                        wire:model="addSalePrice"
                        label="Prix de vente (SALEPRICE)"
                        id="addSalePrice"
                        placeholder="Ex: 49.99"
                    />
                </div>

                <div class="mt-4 flex items-center gap-3">
                    <x-filament::button wire:click="addArticle" icon="heroicon-o-plus-circle" color="success">
                        Créer l'article
                    </x-filament::button>
                    <div wire:loading wire:target="addArticle" 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">Création en cours...</span>
                    </div>
                </div>

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

                <div wire:loading.remove wire:target="addArticle" class="mt-4">
                    <x-logistics.json-block :data="$addResult" :searched="$hasAdded" />
                </div>
            </div>
        </x-logistics.card>

        {{-- art_mod --}}
        <x-logistics.card>
            <x-logistics.section-header title="art_mod" description="Modifier un article existant" />
            <div class="p-6">
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
                    <x-logistics.form-field
                        wire:model="modArtId"
                        label="Identifiant article (ARTID)"
                        id="modArtId"
                        placeholder="Ex: ART001"
                    />
                    <x-logistics.form-field
                        wire:model="modName"
                        label="Nouveau nom (NAME1)"
                        id="modName"
                        placeholder="Ex: Clavier Bluetooth"
                    />
                    <x-logistics.form-field
                        wire:model="modSalePrice"
                        label="Nouveau prix de vente (SALEPRICE)"
                        id="modSalePrice"
                        placeholder="Ex: 59.99"
                    />
                </div>

                <div class="mt-4 flex items-center gap-3">
                    <x-filament::button wire:click="modArticle" icon="heroicon-o-pencil-square" color="warning">
                        Modifier l'article
                    </x-filament::button>
                    <div wire:loading wire:target="modArticle" 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">Modification en cours...</span>
                    </div>
                </div>

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

                <div wire:loading.remove wire:target="modArticle" class="mt-4">
                    <x-logistics.json-block :data="$modResult" :searched="$hasModified" />
                </div>
            </div>
        </x-logistics.card>
    @endif
</x-filament-panels::page>
