@php
    $invoiceDescription = implode(' – ', array_filter([
        optional($operation->type)->name,
        $operation->name,
        optional($operation->media)->name,
    ]));
    if ($operation->publish_date) {
        $invoiceDescription .= ' du ' . $operation->publish_date;
    }
    $invoiceInitPrice = number_format($operation->total_price ?? 0, 2, '.', '');
    $isUpdate = (bool) $operation->invoice_number;
@endphp

<div id="modal_invoice" class="kt-modal kt-modal-top hidden" data-kt-modal="true">
    <div class="kt-modal-content max-w-[1200px] w-full"
        x-data="{
            invoiceType:   '{{ $isUpdate ? $operation->invoice_type   : 'standard' }}',
            invoiceDate:   '{{ $isUpdate ? $operation->invoice_date   : '' }}',
            paymentDate:   '{{ $isUpdate ? $operation->payment_date   : '' }}',
            additionalInfo:'{{ $isUpdate ? addslashes($operation->invoice_detail ?? '') : '' }}',
            paidAmount:    '{{ $isUpdate ? ($operation->discount_amount ?? '') : '' }}',
            paidInfo:      '{{ $isUpdate ? addslashes($operation->discount_info ?? '') : '' }}',
            invoice_brand: '{{ $isUpdate ? addslashes($operation->invoice_brand ?? '') : '' }}',
            lines: @if($isUpdate)
                @js($operation->invoiceDetails->map(fn($d) => [
                    'ref'         => $d->reference,
                    'description' => $d->description,
                    'pu_ht'       => $d->unit_price,
                    'quantite'    => $d->quantity,
                    'tva'         => $d->tva ? 'oui' : 'non',
                ]))
            @else
                [{ ref: 'PART', description: @js($invoiceDescription), pu_ht: '{{ $invoiceInitPrice }}', quantite: 1, tva: 'oui' }]
            @endif,
            init() {
                @if(!$isUpdate)
                const today = new Date();
                const fmt = d => d.toLocaleDateString('fr-FR', { day:'2-digit', month:'2-digit', year:'numeric' });
                this.invoiceDate = fmt(today);
                const pay = new Date(today); pay.setDate(pay.getDate() + 30);
                this.paymentDate = fmt(pay);
                @endif
            },
            getMontantHT(line) {
                return ((parseFloat(line.pu_ht) || 0) * (parseInt(line.quantite) || 0)).toFixed(2);
            },
            addLine() {
                this.lines.push({ ref: '', description: '', pu_ht: '', quantite: 1, tva: 'oui' });
            },
            removeLine(i) {
                this.lines.splice(i, 1);
            }
        }"
    >
        <div class="kt-modal-header">
            <h3 class="kt-modal-title">{{ $isUpdate ? 'Modifier la facture' : 'Génération de facture' }}</h3>
            <button type="button" class="kt-modal-close" aria-label="Close modal" data-kt-modal-dismiss="#modal_invoice">
                <i class="ki-outline ki-cross text-lg"></i>
            </button>
        </div>

        <form method="POST"
            action="{{ $isUpdate
                ? route('admin.operations.invoice.update', $operation)
                : route('admin.operations.invoice.store', $operation) }}"
        >
            @csrf
            @if($isUpdate) @method('PUT') @endif

        <div class="kt-modal-body flex flex-col gap-5">

            {{-- Type --}}
            <div class="flex items-center gap-6">
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="radio" name="invoice_type" x-model="invoiceType" value="standard" class="kt-radio">
                    <span class="text-sm font-medium">Facture classique</span>
                </label>
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="radio" name="invoice_type" x-model="invoiceType" value="exchange" class="kt-radio">
                    <span class="text-sm font-medium">Facture d'échange</span>
                </label>
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="radio" name="invoice_type" x-model="invoiceType" value="pepitjobs" class="kt-radio">
                    <span class="text-sm font-medium">Pep'IT Jobs</span>
                </label>
            </div>

            {{-- Marque concernée --}}
            <div x-show="invoiceType === 'exchange'" x-transition class="flex flex-col gap-1">
                <label class="text-xs font-semibold uppercase text-gray-500">Marque concernée</label>
                <input type="text" name="invoice_brand" x-model="invoice_brand" class="kt-input">
            </div>

            <div class="border-t border-border"></div>

            {{-- Dates --}}
            <div class="flex gap-4 items-end">
                <div class="flex flex-col gap-1 w-44 shrink-0">
                    <label class="text-xs font-semibold uppercase text-gray-500">Date de Facture</label>
                    <div class="kt-input">
                        <i class="ki-outline ki-calendar"></i>
                        <input class="grow" type="text" name="invoice_date"
                            data-kt-date-picker="true"
                            data-kt-date-picker-input-mode="true"
                            data-kt-date-picker-date-format="DD/MM/YYYY"
                            data-kt-date-picker-locale="fr-FR"
                            data-kt-date-picker-first-weekday="1"
                            placeholder="JJ/MM/AAAA"
                            :value="invoiceDate"
                            @change="invoiceDate = $event.target.value"
                            readonly>
                    </div>
                </div>
                <div class="flex flex-col gap-1 w-44 shrink-0">
                    <label class="text-xs font-semibold uppercase text-gray-500">Date de règlement</label>
                    <div class="kt-input">
                        <i class="ki-outline ki-calendar"></i>
                        <input class="grow" type="text" name="payment_date"
                            data-kt-date-picker="true"
                            data-kt-date-picker-input-mode="true"
                            data-kt-date-picker-date-format="DD/MM/YYYY"
                            data-kt-date-picker-locale="fr-FR"
                            data-kt-date-picker-first-weekday="1"
                            placeholder="JJ/MM/AAAA"
                            :value="paymentDate"
                            @change="paymentDate = $event.target.value"
                            readonly>
                    </div>
                </div>
                <div class="flex flex-col gap-1 flex-1">
                    <label class="text-xs font-semibold uppercase text-gray-500">Informations complémentaires</label>
                    <input type="text" name="invoice_detail" x-model="additionalInfo" class="kt-input">
                </div>
            </div>

            {{-- Montant réglé --}}
            <div class="flex gap-4 items-end">
                <div class="flex flex-col gap-1 w-44 shrink-0">
                    <label class="text-xs font-semibold uppercase text-gray-500">Montant déjà réglé</label>
                    <input type="number" step="0.01" name="discount_amount" x-model="paidAmount" class="kt-input" placeholder="0.00">
                </div>
                <div class="flex flex-col gap-1 flex-1">
                    <label class="text-xs font-semibold uppercase text-gray-500">Information sur le montant réglé</label>
                    <input type="text" name="discount_info" x-model="paidInfo" class="kt-input">
                </div>
            </div>

            <div class="border-t border-border"></div>

            {{-- Lignes --}}
            <div class="flex flex-col gap-3">
                <h4 class="text-sm font-semibold text-primary">Ligne(s) de la facture</h4>

                <div class="grid gap-2 text-xs font-semibold uppercase text-gray-500" style="grid-template-columns: 80px 1fr 130px 90px 80px 120px 36px;">
                    <span>Réf.</span>
                    <span>Description</span>
                    <span>PU HT</span>
                    <span>Quantité</span>
                    <span>TVA</span>
                    <span>Montant HT</span>
                    <span></span>
                </div>

                <template x-for="(line, i) in lines" :key="i">
                    <div class="grid gap-2 items-start" style="grid-template-columns: 80px 1fr 130px 90px 80px 120px 36px;">
                        <input type="text" x-model="line.ref"
                            :name="`lines[${i}][ref]`"
                            class="kt-input kt-input-sm">
                        <textarea x-model="line.description"
                            :name="`lines[${i}][description]`"
                            class="kt-textarea" style="min-height:72px; resize:vertical;"></textarea>
                        <input type="number" step="0.01" x-model="line.pu_ht"
                            :name="`lines[${i}][pu_ht]`"
                            class="kt-input kt-input-sm">
                        <input type="number" min="1" x-model="line.quantite"
                            :name="`lines[${i}][quantite]`"
                            class="kt-input kt-input-sm">
                        <select x-model="line.tva"
                            :name="`lines[${i}][tva]`"
                            class="kt-input kt-input-sm">
                            <option value="oui">Oui</option>
                            <option value="non">Non</option>
                        </select>
                        <input type="text" :value="getMontantHT(line)"
                            class="kt-input kt-input-sm bg-gray-100 cursor-not-allowed text-secondary-foreground font-medium"
                            readonly tabindex="-1">
                        <button type="button" @click="removeLine(i)" x-show="lines.length > 1"
                            class="kt-btn kt-btn-xs kt-btn-icon kt-btn-ghost text-destructive mt-0.5">
                            <i class="ki-outline ki-trash text-destructive"></i>
                        </button>
                    </div>
                </template>

                <div>
                    <button type="button" @click="addLine()" class="kt-btn kt-btn-success kt-btn-sm">
                        <i class="ki-outline ki-plus-circle text-sm"></i> Ajouter une ligne
                    </button>
                </div>
            </div>

        </div>

        <div class="kt-modal-footer justify-end gap-3">
            <button type="button" class="kt-btn kt-btn-ghost text-destructive"
                data-kt-modal-dismiss="#modal_invoice">Annuler</button>
            <button type="submit" class="kt-btn kt-btn-primary">
                <i class="ki-outline ki-printer text-sm"></i>
                {{ $isUpdate ? 'Regénérer la facture' : 'Générer la facture' }}
            </button>
        </div>

        </form>
    </div>
</div>