<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')
        {{-- third_list --}}
        <x-logistics.card>
            <x-logistics.section-header title="third_list" description="Rechercher des tiers" />
            <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, obligatoire)"
                        id="search"
                        placeholder="Filtre de recherche..."
                    />
                    <x-logistics.form-field
                        wire:model="select"
                        label="Colonnes (select)"
                        id="select"
                        placeholder="custid,name"
                    />
                    <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="searchTiers" icon="heroicon-o-magnifying-glass">
                        Rechercher
                    </x-filament::button>
                    <div wire:loading wire:target="searchTiers" 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->paramTableThirdList()" />
            </div>
        </x-logistics.card>

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

        {{-- third_GetArtHistory --}}
        <x-logistics.card>
            <x-logistics.section-header title="third_GetArtHistory" description="Historique des articles d'un tiers" />
            <div class="p-6">
                <div class="flex items-end gap-4">
                    <div class="flex-1">
                        <x-logistics.form-field
                            wire:model="historyThirdId"
                            label="Identifiant tiers (thirdid)"
                            id="historyThirdId"
                            placeholder="Ex: CUST001"
                        />
                    </div>
                    <x-filament::button wire:click="getArtHistory" icon="heroicon-o-clock">
                        Voir l'historique
                    </x-filament::button>
                </div>

                <div wire:loading wire:target="getArtHistory" 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->paramTableArtHistory()" />

                <div wire:loading.remove wire:target="getArtHistory" class="mt-4">
                    <x-logistics.json-block :data="$historyData" :searched="$hasHistory" />
                </div>
            </div>
        </x-logistics.card>
    @else
        {{-- third_add --}}
        <x-logistics.card>
            <x-logistics.section-header title="third_add" description="Créer un nouveau tiers" />
            <div class="p-6">
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
                    <x-logistics.form-field
                        wire:model="addName"
                        label="Nom (NAME)"
                        id="addName"
                        placeholder="Ex: DUPONT SPRL"
                    />
                    <x-logistics.form-field
                        wire:model="addVat"
                        label="Numéro de TVA (VAT)"
                        id="addVat"
                        placeholder="Ex: BE0123456789"
                    />
                    <x-logistics.form-field
                        wire:model="addEmail"
                        label="E-mail (EMAIL)"
                        id="addEmail"
                        placeholder="Ex: contact@example.com"
                    />
                </div>

                <div class="mt-4 flex items-center gap-3">
                    <x-filament::button wire:click="addTiers" icon="heroicon-o-plus-circle" color="success">
                        Créer le tiers
                    </x-filament::button>
                    <div wire:loading wire:target="addTiers" 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->paramTableThirdAdd()" />

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

        {{-- third_mod --}}
        <x-logistics.card>
            <x-logistics.section-header title="third_mod" description="Modifier un tiers existant" />
            <div class="p-6">
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <x-logistics.form-field
                        wire:model="modCustId"
                        label="Identifiant tiers (CUSTID)"
                        id="modCustId"
                        placeholder="Ex: 0100005650"
                    />
                    <x-logistics.form-field
                        wire:model="modName"
                        label="Nouveau nom (NAME)"
                        id="modName"
                        placeholder="Ex: DUPONT SA"
                    />
                    <x-logistics.form-field
                        wire:model="modVat"
                        label="Nouveau numéro de TVA (VAT)"
                        id="modVat"
                        placeholder="Ex: BE0987654321"
                    />
                    <x-logistics.form-field
                        wire:model="modEmail"
                        label="Nouvel e-mail (EMAIL)"
                        id="modEmail"
                        placeholder="Ex: nouveau@example.com"
                    />
                </div>

                <div class="mt-4 flex items-center gap-3">
                    <x-filament::button wire:click="modTiers" icon="heroicon-o-pencil-square" color="warning">
                        Modifier le tiers
                    </x-filament::button>
                    <div wire:loading wire:target="modTiers" 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->paramTableThirdMod()" />

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