@props([
    'expense' => null,
    'expenseTypes' => [],
    'suppliers' => [],
    'hasPayments' => false
])

@php
    $isEdit = !is_null($expense);
    $action = $isEdit 
        ? route('provider.expenses.update', $expense->uuid)
        : route('provider.expenses.store');
    $method = $isEdit ? 'PUT' : 'POST';
    $title = $isEdit ? 'Modifier l\'achat' : 'Informations de l\'achat';
    $submitText = $isEdit ? 'Modifier l\'achat' : 'Enregistrer l\'achat';
    $backUrl = $isEdit ? route('provider.expenses.show', $expense->uuid) : route('provider.finances.index', ['tab' => 'achats']);
    $readonly = $isEdit && $hasPayments;
@endphp

<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>
            <x-button href="{{ $backUrl }}" 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>
    </x-slot>

    @if($readonly)
    <div class="mb-4 bg-yellow-50 border-l-4 border-yellow-500 p-2">
        <p class="text-xs text-yellow-800">
            ⚠️ Cet achat a des paiements. Seule la note peut être modifiée.
        </p>
    </div>
    @endif

    <div x-data="expenseFormData()">
    <form id="expense-form" action="{{ $action }}" method="POST" class="space-y-6">
        @csrf
        @if($isEdit)
            @method('PUT')
        @endif
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <div class="flex items-center justify-between mb-2">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Type d'achat <span class="text-red-500">*</span></label>
                    @if(!$readonly)
                    <button type="button" @click="showNewTypeForm = !showNewTypeForm" class="text-xs text-primary hover:text-primary-dark font-medium">
                        <span x-show="!showNewTypeForm">+ Nouveau type</span>
                        <span x-show="showNewTypeForm" x-cloak>Annuler</span>
                    </button>
                    @endif
                </div>
                <div x-show="!showNewTypeForm">
                    <x-searchable-select 
                        name="expense_type_id" 
                        :options="collect($expenseTypes)->map(fn($type) => [
                            'value' => $type->id,
                            'label' => $type->name
                        ])->values()->toArray()"
                        :selected="old('expense_type_id', $isEdit ? $expense->expense_type_id : '')"
                        placeholder="Rechercher un type..."
                        :error="$errors->first('expense_type_id')"
                        :disabled="$readonly"
                        required
                    />
                </div>
                <div x-show="showNewTypeForm" x-cloak style="display: none;" class="border border-gray-300 dark:border-gray-600 rounded-lg p-4 bg-gray-50 dark:bg-gray-700">
                    <div x-show="showError" x-cloak class="bg-red-50 border-l-4 border-red-500 p-3 rounded-r-lg mb-3">
                        <div class="flex items-start">
                            <svg class="h-5 w-5 text-red-500 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
                            </svg>
                            <p class="ml-3 text-sm font-medium text-red-800" x-text="errorMessage"></p>
                        </div>
                    </div>
                    <div class="grid grid-cols-2 gap-3 mb-3">
                        <div>
                            <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Nom *</label>
                            <input type="text" x-model="newType.name" placeholder="Nom du type" class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white rounded-lg">
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Description</label>
                            <input type="text" x-model="newType.description" placeholder="Description du type" class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white rounded-lg">
                        </div>
                    </div>
                    <button type="button" @click="createType()" class="w-full bg-primary hover:bg-primary-600 text-white py-2 text-sm font-medium rounded-md transition-colors">Créer et sélectionner</button>
                </div>
            </div>

            <div>
                <div class="flex items-center justify-between mb-2">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Fournisseur <span class="text-red-500">*</span></label>
                    @if(!$readonly)
                    <button type="button" @click="showNewSupplierForm = !showNewSupplierForm" class="text-xs text-primary hover:text-primary-dark font-medium">
                        <span x-show="!showNewSupplierForm">+ Nouveau fournisseur</span>
                        <span x-show="showNewSupplierForm" x-cloak>Annuler</span>
                    </button>
                    @endif
                </div>
                <div x-show="!showNewSupplierForm">
                    <x-searchable-select 
                        name="supplier_id" 
                        :options="collect($suppliers)->map(fn($supplier) => [
                            'value' => $supplier->id,
                            'label' => $supplier->name
                        ])->values()->toArray()"
                        :selected="old('supplier_id', $isEdit ? $expense->supplier_id : '')"
                        placeholder="Rechercher un fournisseur..."
                        :error="$errors->first('supplier_id')"
                        :disabled="$readonly"
                        required
                    />
                </div>
                <div x-show="showNewSupplierForm" x-cloak style="display: none;" class="border border-gray-300 dark:border-gray-600 rounded-lg p-4 bg-gray-50 dark:bg-gray-700">
                    <div x-show="showError" x-cloak class="bg-red-50 border-l-4 border-red-500 p-3 rounded-r-lg mb-3">
                        <div class="flex items-start">
                            <svg class="h-5 w-5 text-red-500 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
                            </svg>
                            <p class="ml-3 text-sm font-medium text-red-800" x-text="errorMessage"></p>
                        </div>
                    </div>
                    <div class="grid grid-cols-3 gap-3 mb-3">
                        <div class="col-span-2">
                            <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Nom complet *</label>
                            <input type="text" x-model="newSupplier.name" placeholder="Nom du fournisseur" class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white rounded-lg">
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Téléphone</label>
                            <input 
                                type="tel" 
                                x-model="newSupplier.phone" 
                                placeholder="__ ___ ___" 
                                maxlength="10"
                                x-data="{
                                    formatPhone(event) {
                                        let value = event.target.value.replace(/\D/g, '');
                                        if (value.length > 2 && value.length <= 5) {
                                            value = value.slice(0, 2) + ' ' + value.slice(2);
                                        } else if (value.length > 5) {
                                            value = value.slice(0, 2) + ' ' + value.slice(2, 5) + ' ' + value.slice(5, 8);
                                        }
                                        event.target.value = value;
                                        newSupplier.phone = value;
                                    }
                                }"
                                @input="formatPhone($event)"
                                class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white rounded-lg"
                            >
                        </div>
                    </div>
                    <button type="button" @click="createSupplier()" class="w-full bg-primary hover:bg-primary-600 text-white py-2 text-sm font-medium rounded-md transition-colors">Créer et sélectionner</button>
                </div>
            </div>

            <div class="md:col-span-2 grid grid-cols-2 gap-3">
                <x-input 
                    type="number" 
                    name="amount" 
                    label="Montant TTC" 
                    value="{{ old('amount', $isEdit ? $expense->amount : '') }}"
                    step="0.001"
                    required
                    placeholder="0.000"
                    error="{{ $errors->first('amount') }}"
                    :readonly="$readonly"
                />

                <x-input 
                    type="date" 
                    name="expense_date" 
                    label="Date d'achat" 
                    value="{{ old('expense_date', $isEdit ? $expense->expense_date->format('Y-m-d') : date('Y-m-d')) }}"
                    required
                    error="{{ $errors->first('expense_date') }}"
                    :readonly="$readonly"
                />
            </div>

            <div class="md:col-span-2 grid grid-cols-2 md:grid-cols-3 gap-x-3 gap-y-6">
                <div class="col-span-2 md:col-span-1">
                    <x-input 
                        type="text" 
                        name="supplier_invoice_no" 
                        label="N° Facture fournisseur" 
                        value="{{ old('supplier_invoice_no', $isEdit ? $expense->supplier_invoice_no : '') }}"
                        placeholder="Ex: FAC-2024-001"
                        error="{{ $errors->first('supplier_invoice_no') }}"
                        :readonly="$readonly"
                    />
                </div>

                <x-input 
                    type="date" 
                    name="invoice_date" 
                    label="Date de facture" 
                    value="{{ old('invoice_date', $isEdit ? ($expense->invoice_date ? $expense->invoice_date->format('Y-m-d') : '') : date('Y-m-d')) }}"
                    error="{{ $errors->first('invoice_date') }}"
                    :readonly="$readonly"
                />

                <x-input 
                    type="date" 
                    name="due_date" 
                    label="Date d'échéance" 
                    value="{{ old('due_date', $isEdit ? ($expense->due_date ? $expense->due_date->format('Y-m-d') : '') : date('Y-m-d', strtotime('+30 days'))) }}"
                    error="{{ $errors->first('due_date') }}"
                    :readonly="$readonly"
                />
            </div>

            <div class="md:col-span-2">
                <x-textarea 
                    name="notes" 
                    label="Notes" 
                    rows="3"
                    placeholder="Notes optionnelles sur cet achat..."
                    value="{{ old('notes', $isEdit ? $expense->notes : '') }}"
                />
            </div>
        </div>

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

<script>
function expenseFormData() {
    return {
        showNewTypeForm: false,
        showNewSupplierForm: false,
        errorMessage: '',
        showError: false,
        newType: { name: '', description: '', is_active: 1 },
        newSupplier: { name: '', phone: '', email: '', address: '', is_active: 1 },
        async createType() {
            if (!this.newType.name) {
                this.errorMessage = 'Le nom est requis';
                this.showError = true;
                setTimeout(() => { this.showError = false; }, 3000);
                return;
            }
            try {
                const response = await fetch('{{ route('provider.expense-types.store') }}', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' },
                    body: JSON.stringify(this.newType)
                });
                const data = await response.json();
                console.log('Response:', response.status, data);
                if (response.ok && data.success) {
                    window.dispatchEvent(new CustomEvent('expense-type-created', { 
                        detail: { value: data.expenseType.id, label: data.expenseType.name }
                    }));
                    this.newType = { name: '', description: '', is_active: 1 };
                    this.showNewTypeForm = false;
                } else {
                    this.errorMessage = data.message || 'Erreur';
                    this.showError = true;
                    setTimeout(() => { this.showError = false; }, 3000);
                }
            } catch (error) {
                console.error('Error:', error);
                this.errorMessage = 'Erreur lors de la création';
                this.showError = true;
                setTimeout(() => { this.showError = false; }, 3000);
            }
        },
        async createSupplier() {
            if (!this.newSupplier.name) {
                this.errorMessage = 'Le nom est requis';
                this.showError = true;
                setTimeout(() => { this.showError = false; }, 3000);
                return;
            }
            try {
                const response = await fetch('{{ route('provider.suppliers.store') }}', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' },
                    body: JSON.stringify(this.newSupplier)
                });
                const data = await response.json();
                console.log('Response:', response.status, data);
                if (response.ok && data.success) {
                    window.dispatchEvent(new CustomEvent('supplier-created', { 
                        detail: { value: data.supplier.id, label: data.supplier.name }
                    }));
                    this.newSupplier = { name: '', phone: '', email: '', address: '', is_active: 1 };
                    this.showNewSupplierForm = false;
                } else {
                    this.errorMessage = data.message || 'Erreur';
                    this.showError = true;
                    setTimeout(() => { this.showError = false; }, 3000);
                }
            } catch (error) {
                console.error('Error:', error);
                this.errorMessage = 'Erreur lors de la création';
                this.showError = true;
                setTimeout(() => { this.showError = false; }, 3000);
            }
        }
    };
}
</script>

<!-- 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="{{ $backUrl }}" variant="secondary" class="flex-1">
            Annuler
        </x-button>
        <x-button type="submit" form="expense-form" class="flex-1">
            {{ $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="{{ $backUrl }}" variant="secondary" class="flex-1">
            Annuler
        </x-button>
        <x-button type="submit" form="expense-form" class="flex-1">
            {{ $submitText }}
        </x-button>
    </div>
</div>

<script>
    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>