<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')
        {{-- ============================================================ --}}
        {{-- MODE LECTURE --}}
        {{-- ============================================================ --}}

        {{-- document_list --}}
        <x-logistics.card>
            <x-logistics.section-header title="document_list" description="Rechercher des documents" />
            <div class="p-6">
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
                    <x-logistics.form-field
                        wire:model="select"
                        label="Colonnes (select)"
                        id="select"
                        placeholder="jnl,number,thirdid,date"
                    />
                    <x-logistics.form-field
                        wire:model="thirdId"
                        label="Identifiant tiers (thirdid)"
                        id="thirdId"
                        placeholder="Ex: CUST001"
                    />
                    <div>
                        <x-logistics.form-field
                            wire:model="results"
                            label="Nombre de résultats (results)"
                            id="results"
                            placeholder="Par défaut : ~108"
                        />
                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Effectif uniquement avec un thirdid</p>
                    </div>
                </div>

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

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

        {{-- document_detail --}}
        <x-logistics.card>
            <x-logistics.section-header title="document_detail" description="Détail complet d'un document" />
            <div class="p-6">
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
                    <x-logistics.form-field
                        wire:model="detailJnl"
                        label="Code journal (jnl)"
                        id="detailJnl"
                        placeholder="Ex: VEN"
                    />
                    <x-logistics.form-field
                        wire:model="detailNumber"
                        label="Numéro de document (number)"
                        id="detailNumber"
                        placeholder="Ex: 2026/0001"
                    />
                    <div class="flex items-end">
                        <x-filament::button wire:click="getDocumentDetail" icon="heroicon-o-eye">
                            Voir le détail
                        </x-filament::button>
                    </div>
                </div>

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

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

        {{-- Document_GetStatusList --}}
        <x-logistics.card>
            <x-logistics.section-header title="Document_GetStatusList" description="Liste des statuts disponibles pour un journal" />
            <div class="p-6">
                <div class="flex items-end gap-4">
                    <div class="flex-1">
                        <x-logistics.form-field
                            wire:model="statusJnl"
                            label="Code journal (jnl)"
                            id="statusJnl"
                            placeholder="Ex: VEN"
                        />
                    </div>
                    <x-filament::button wire:click="getStatusList" icon="heroicon-o-list-bullet">
                        Obtenir les statuts
                    </x-filament::button>
                </div>

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

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

        {{-- Document_GetUnitPriceAndVat --}}
        <x-logistics.card>
            <x-logistics.section-header title="Document_GetUnitPriceAndVat" description="Prix unitaire et TVA d'un article dans un contexte donné" />
            <div class="p-6">
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
                    <x-logistics.form-field
                        wire:model="priceArtId"
                        label="Article (ARTID)"
                        id="priceArtId"
                        placeholder="Ex: ART001"
                    />
                    <x-logistics.form-field
                        wire:model="priceQty"
                        label="Quantité (QTY, format string)"
                        id="priceQty"
                        placeholder="Ex: 2"
                    />
                    <x-logistics.form-field
                        wire:model="priceJnl"
                        label="Code journal (JNL)"
                        id="priceJnl"
                        placeholder="Ex: VEN"
                    />
                    <x-logistics.form-field
                        wire:model="priceThirdId"
                        label="Identifiant tiers (THIRDID)"
                        id="priceThirdId"
                        placeholder="Ex: CUST001"
                    />
                    <x-logistics.form-field
                        wire:model="priceDate"
                        label="Date (DATE)"
                        id="priceDate"
                        placeholder="Ex: 2026-02-20"
                    />
                    <div class="flex items-end">
                        <x-filament::button wire:click="getUnitPriceAndVat" icon="heroicon-o-calculator">
                            Calculer
                        </x-filament::button>
                    </div>
                </div>

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

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

        {{-- Document_GetDueDate --}}
        <x-logistics.card>
            <x-logistics.section-header title="Document_GetDueDate" description="Calcul de la date d'échéance de paiement" />
            <div class="p-6">
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
                    <x-logistics.form-field
                        wire:model="payDelay"
                        label="Délai de paiement (paydelay)"
                        id="payDelay"
                        placeholder="Ex: 30J"
                    />
                    <x-logistics.form-field
                        wire:model="dueDateInput"
                        label="Date de départ (date)"
                        id="dueDateInput"
                        placeholder="Ex: 2026-02-20"
                    />
                    <div class="flex items-end">
                        <x-filament::button wire:click="getDueDate" icon="heroicon-o-calendar-days">
                            Calculer l'échéance
                        </x-filament::button>
                    </div>
                </div>

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

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

        {{-- Document_GetAttachListThumbnail --}}
        <x-logistics.card>
            <x-logistics.section-header title="Document_GetAttachListThumbnail" description="Miniatures des fichiers images attachés à un document" />
            <div class="p-6">
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
                    <x-logistics.form-field
                        wire:model="attachJnl"
                        label="Code journal (JNL)"
                        id="attachJnl"
                        placeholder="Ex: VEN"
                    />
                    <x-logistics.form-field
                        wire:model="attachNumber"
                        label="Numéro de document (NUMBER)"
                        id="attachNumber"
                        placeholder="Ex: 2026/0001"
                    />
                    <div class="flex items-end">
                        <x-filament::button wire:click="getAttachListThumbnail" icon="heroicon-o-photo">
                            Voir les miniatures
                        </x-filament::button>
                    </div>
                </div>

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

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

        {{-- Document_GetPDF --}}
        <x-logistics.card>
            <x-logistics.section-header title="Document_GetPDF" description="Génération de PDF d'un document (retourne le PDF en base64)" />
            <div class="p-6">
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-4">
                    <x-logistics.form-field
                        wire:model="pdfJnl"
                        label="Code journal (JNL)"
                        id="pdfJnl"
                        placeholder="Ex: 03VEN"
                    />
                    <x-logistics.form-field
                        wire:model="pdfNumber"
                        label="Numéro de document (NUMBER)"
                        id="pdfNumber"
                        placeholder="Ex: 25105397"
                    />
                    <x-logistics.form-field
                        wire:model="pdfLayout"
                        label="Mise en page (LAYOUT, numérique)"
                        id="pdfLayout"
                        placeholder="Ex: 1"
                    />
                    <div class="flex items-end">
                        <x-filament::button wire:click="getPdf" icon="heroicon-o-document-arrow-down">
                            Générer le PDF
                        </x-filament::button>
                    </div>
                </div>

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

                <div wire:loading.remove wire:target="getPdf" class="mt-4">
                    <x-logistics.json-block :data="$pdfData" :searched="$hasPdf" />
                </div>
            </div>
        </x-logistics.card>
    @else
        {{-- ============================================================ --}}
        {{-- MODE ECRITURE --}}
        {{-- ============================================================ --}}

        {{-- document_add --}}
        <x-logistics.card>
            <x-logistics.section-header title="document_add" description="Créer un nouveau document commercial" />
            <div class="p-6">
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
                    <x-logistics.form-field
                        wire:model="addThirdId"
                        label="Identifiant tiers (ThirdId)"
                        id="addThirdId"
                        placeholder="Ex: CUST001"
                    />
                    <x-logistics.form-field
                        wire:model="addDate"
                        label="Date d'encodage (Date)"
                        id="addDate"
                        placeholder="Ex: 2026-02-20"
                    />
                    <x-logistics.form-field
                        wire:model="addJnl"
                        label="Code journal (JNL)"
                        id="addJnl"
                        placeholder="Ex: VEN"
                    />
                    <x-logistics.form-field
                        wire:model="addArtIds"
                        label="Articles (Artid, séparés par virgule)"
                        id="addArtIds"
                        placeholder="Ex: ART001,ART002"
                    />
                    <x-logistics.form-field
                        wire:model="addQty"
                        label="Quantités (Qty, séparées par virgule)"
                        id="addQty"
                        placeholder="Ex: 2,5"
                    />
                    <x-logistics.form-field
                        wire:model="addSalePrice"
                        label="Prix unitaires (Saleprice, séparés par virgule)"
                        id="addSalePrice"
                        placeholder="Ex: 10.00,25.50"
                    />
                    <x-logistics.form-field
                        wire:model="addDiscount"
                        label="Réductions (Discount, optionnel)"
                        id="addDiscount"
                        placeholder="Ex: 0,10"
                    />
                    <x-logistics.form-field
                        wire:model="addVatId"
                        label="Codes TVA (Vatid, optionnel)"
                        id="addVatId"
                        placeholder="Ex: TVA21,TVA21"
                    />
                    <x-logistics.form-field
                        wire:model="addVatPc"
                        label="% TVA (Vatpc, optionnel)"
                        id="addVatPc"
                        placeholder="Ex: 21,21"
                    />
                </div>

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

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

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

        {{-- document_mod --}}
        <x-logistics.card>
            <x-logistics.section-header title="document_mod" description="Modifier un document existant" />
            <div class="p-6">
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
                    <x-logistics.form-field
                        wire:model="modNumber"
                        label="Numéro de document (number)"
                        id="modNumber"
                        placeholder="Ex: 2026/0001"
                    />
                    <x-logistics.form-field
                        wire:model="modJnl"
                        label="Code journal (JNL)"
                        id="modJnl"
                        placeholder="Ex: VEN"
                    />
                    <x-logistics.form-field
                        wire:model="modThirdId"
                        label="Identifiant tiers (Thirdid, optionnel)"
                        id="modThirdId"
                        placeholder="Ex: CUST001"
                    />
                    <x-logistics.form-field
                        wire:model="modArtIds"
                        label="Articles (Artid, séparés par virgule, optionnel)"
                        id="modArtIds"
                        placeholder="Ex: ART001,ART003"
                    />
                    <x-logistics.form-field
                        wire:model="modQty"
                        label="Quantités (Qty, séparées par virgule, optionnel)"
                        id="modQty"
                        placeholder="Ex: 3,1"
                    />
                    <x-logistics.form-field
                        wire:model="modSalePrice"
                        label="Prix unitaires (Saleprice, séparés par virgule, optionnel)"
                        id="modSalePrice"
                        placeholder="Ex: 10.00,50.00"
                    />
                </div>

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

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

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