@props([
    'payment' => null,
    'clients' => [],
    'appointments' => [],
    'taxes' => [],
    'prefilledAmount' => null,
    'prefilledClientId' => null,
    'prefilledAppointmentId' => null,
    'isReadonly' => false
])

@php
    $isEdit = !is_null($payment);
    $action = $isEdit 
        ? route('provider.payments.update', $payment->uuid)
        : route('provider.payments.store');
    $method = $isEdit ? 'PUT' : 'POST';
    $title = $isEdit ? 'Modifier la facture' : 'Informations de paiement';
    $submitText = $isEdit ? 'Mettre à jour la facture' : 'Créer la facture';
@endphp

<div>
<x-card>
    <x-slot name="header">
        <div class="flex items-center justify-between">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">{{ $title }}</h3>
            <div class="flex gap-2">
                @if($isEdit)
                    <x-button href="{{ route('provider.payments.pdf', $payment->uuid) }}" target="_blank" variant="danger" size="sm">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                        </svg>
                        <span class="hidden md:inline ml-1">PDF</span>
                    </x-button>
                @endif
                <x-button href="{{ $isEdit ? route('provider.invoices.show', $payment->uuid) : (request('return_to') === 'client' && request('client_uuid') ? route('provider.clients.show', ['client_uuid' => request('client_uuid'), 'tab' => 'invoices']) : route('provider.finances.index', ['tab' => 'factures'])) }}" variant="secondary" size="sm">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                    </svg>
                    <span class="hidden md:inline ml-1">Retour</span>
                </x-button>
            </div>
        </div>
    </x-slot>

    @if($isReadonly)
    <div class="mb-4 bg-yellow-50 border-l-4 border-yellow-500 p-2">
        <p class="text-xs text-yellow-800">
            ⚠️ Facture finalisée : seule la note est modifiable.
        </p>
    </div>
    @endif

    <form id="payment-form" action="{{ $action }}" method="POST" class="space-y-6">
        @csrf
        @if($isEdit)
            @method('PUT')
        @endif
        <input type="hidden" name="from" value="{{ request('from') }}">
        <input type="hidden" name="return_to" value="{{ request('return_to') }}">
        <input type="hidden" name="client_uuid" value="{{ request('client_uuid') }}">
        <input type="hidden" name="total_vat" id="total_vat" value="0">
        <input type="hidden" name="total_ttc" id="total_ttc" value="0">
        <input type="hidden" name="net_to_pay" id="net_to_pay" value="0">
        
        <div class="grid grid-cols-2 gap-6">
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Date <span class="text-red-500">*</span></label>
                <input 
                    type="date" 
                    name="payment_date" 
                    value="{{ old('payment_date', $isEdit ? $payment->payment_date->format('Y-m-d') : now()->format('Y-m-d')) }}"
                    class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white @error('payment_date') border-red-300 focus:border-red-500 focus:ring-red-500 @enderror {{ $isReadonly ? 'bg-gray-100 dark:bg-gray-600 cursor-not-allowed' : '' }}"
                    {{ $isReadonly ? 'readonly' : '' }}
                    required
                >
                @error('payment_date')
                    <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Date d'échéance <span class="text-red-500">*</span></label>
                <input 
                    type="date" 
                    name="due_date" 
                    value="{{ old('due_date', $isEdit ? $payment->due_date?->format('Y-m-d') : now()->addDays(30)->format('Y-m-d')) }}"
                    class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white @error('due_date') border-red-300 focus:border-red-500 focus:ring-red-500 @enderror {{ $isReadonly ? 'bg-gray-100 dark:bg-gray-600 cursor-not-allowed' : '' }}"
                    {{ $isReadonly ? 'readonly' : '' }}
                    required
                >
                @error('due_date')
                    <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                @enderror
            </div>

            <div class="col-span-2">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Client <span class="text-red-500">*</span></label>
                @if($clients->isEmpty())
                    <div class="relative" title="Aucun client avec des rendez-vous terminés non facturés">
                        <x-searchable-select 
                            name="client_id" 
                            :options="[]"
                            :selected="''"
                            placeholder="Aucun client disponible"
                            disabled
                        />
                    </div>
                    <p class="mt-1 text-sm text-amber-600 dark:text-amber-400">Aucun client n'a de rendez-vous terminés non facturés.</p>
                @else
                    <x-searchable-select 
                        name="client_id" 
                        :options="$clients->sortBy('full_name')->map(fn($c) => ['value' => $c->id, 'label' => $c->full_name . ($c->phone ? ' - ' . $c->phone : '')])->values()->toArray()" 
                        :selected="old('client_id', $isEdit ? $payment->client_id : ($prefilledClientId ?? ''))"
                        placeholder="Rechercher un client..."
                        :disabled="$isReadonly"
                    />
                @endif
                @error('client_id')
                    <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                @enderror
            </div>

            </div>
        </div>
    </form>
</x-card>

<!-- Livewire Component Outside Form -->
@php
    $invoiceClientId = old('client_id', $isEdit ? $payment->client_id : ($prefilledClientId ?? null));
    $invoiceAppointments = old('appointment_ids', $isEdit ? $payment->appointments->pluck('id')->toArray() : ($prefilledAppointmentId ? [$prefilledAppointmentId] : []));
@endphp
<x-card class="mt-6" id="invoice-lines-card">
    @livewire('provider.invoice.invoice-lines', ['clientId' => $invoiceClientId, 'selectedAppointments' => $invoiceAppointments, 'invoice' => $isEdit ? $payment : null], key('invoice-lines'))
</x-card>

<x-card class="mt-6">
    <x-textarea 
        name="notes" 
        label="Notes" 
        rows="3"
        placeholder="Notes optionnelles..."
        value="{{ old('notes', $isEdit ? $payment->notes : '') }}"
        form="payment-form"
    />
</x-card>


<!-- Boutons d'action -->
<div id="normal-button" class="mt-6 -mx-4 -mb-4 p-4 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 shadow-lg">
    <div class="flex gap-3">
        <x-button href="{{ $isEdit ? route('provider.invoices.show', $payment->uuid) : (request('return_to') === 'client' && request('client_uuid') ? route('provider.clients.show', ['client_uuid' => request('client_uuid'), 'tab' => 'invoices']) : route('provider.finances.index', ['tab' => 'factures'])) }}" variant="secondary" class="flex-1">
            Annuler
        </x-button>
        <x-button type="button" onclick="submitPaymentForm()" class="flex-1" :disabled="$clients->isEmpty()">
            {{ $submitText }}
        </x-button>
    </div>
</div>

<!-- Bouton fixe -->
<div id="fixed-button" class="hidden fixed bottom-16 left-0 right-0 p-4 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 shadow-lg z-40">
    <div class="flex gap-3">
        <x-button href="{{ $isEdit ? route('provider.invoices.show', $payment->uuid) : (request('return_to') === 'client' && request('client_uuid') ? route('provider.clients.show', ['client_uuid' => request('client_uuid'), 'tab' => 'invoices']) : route('provider.finances.index', ['tab' => 'factures'])) }}" variant="secondary" class="flex-1">
            Annuler
        </x-button>
        <x-button type="button" onclick="submitPaymentForm()" class="flex-1" :disabled="$clients->isEmpty()">
            {{ $submitText }}
        </x-button>
    </div>
</div>
</div>

<script>
window.addEventListener('totalsUpdated', event => {
    document.getElementById('total_vat').value = event.detail[0].totalVAT;
    document.getElementById('total_ttc').value = event.detail[0].totalTTC;
    document.getElementById('net_to_pay').value = event.detail[0].netToPay;
});

function submitPaymentForm() {
    const form = document.getElementById('payment-form');
    
    // Copier tous les inputs avec form="payment-form" dans le formulaire
    const externalInputs = document.querySelectorAll('input[form="payment-form"]');
    externalInputs.forEach(input => {
        const clone = input.cloneNode(true);
        clone.removeAttribute('form');
        clone.style.display = 'none';
        form.appendChild(clone);
    });
    
    form.submit();
}

document.addEventListener('DOMContentLoaded', function() {
    const normalButton = document.getElementById('normal-button');
    const fixedButton = document.getElementById('fixed-button');
    
    function toggleButton() {
        const rect = normalButton.getBoundingClientRect();
        const isFullyVisible = rect.bottom <= (window.innerHeight - 64);
        
        if (isFullyVisible) {
            fixedButton.classList.add('hidden');
        } else {
            fixedButton.classList.remove('hidden');
        }
    }
    
    window.addEventListener('scroll', toggleButton);
    toggleButton();
});
</script>