@props([
    'account' => null
])

@php
    $isEdit = !is_null($account);
    $action = $isEdit 
        ? route('provider.treasury.accounts.update', $account)
        : route('provider.treasury.accounts.store');
    $method = $isEdit ? 'PUT' : 'POST';
    $title = $isEdit ? 'Modifier le compte' : 'Informations du compte';
    $submitText = $isEdit ? 'Enregistrer' : 'Créer le compte';
    $cancelUrl = $isEdit 
        ? route('provider.treasury.movements.index', $account)
        : route('provider.finances.index', ['tab' => 'tresorerie']);
@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="{{ $cancelUrl }}" 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>

    <form id="account-form" action="{{ $action }}" method="POST" class="space-y-6">
        @csrf
        @if($isEdit)
            @method('PUT')
        @endif
        
        <div class="grid grid-cols-12 gap-6">
            @if(!$isEdit)
            <div class="col-span-8">
                <x-input 
                    name="name" 
                    label="Nom du compte" 
                    placeholder="Ex: Caisse principale, BIAT Compte Pro..."
                    :value="old('name', $isEdit ? $account->name : '')"
                    required
                />
            </div>
            
            <div class="col-span-4">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Type <span class="text-red-500">*</span></label>
                <select name="type" required 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">
                    <option value="">Sélectionner...</option>
                    <option value="cash" {{ old('type') === 'cash' ? 'selected' : '' }}>Caisse</option>
                    <option value="bank" {{ old('type') === 'bank' ? 'selected' : '' }}>Banque</option>
                </select>
            </div>
            @else
            <div class="col-span-12">
                <x-input 
                    name="name" 
                    label="Nom du compte" 
                    placeholder="Ex: Caisse principale, BIAT Compte Pro..."
                    :value="old('name', $isEdit ? $account->name : '')"
                    required
                />
            </div>
            @endif
            
            <div class="{{ $isEdit ? 'col-span-12' : 'col-span-8' }}">
                <x-input 
                    name="reference" 
                    label="Référence (RIB, numéro...)" 
                    placeholder="Optionnel"
                    :value="old('reference', $isEdit ? $account->reference : '')"
                />
            </div>
            
            @if(!$isEdit)
            <div class="col-span-4">
                <x-input 
                    name="opening_balance" 
                    label="Solde" 
                    type="number"
                    step="0.01"
                    min="0"
                    :value="old('opening_balance', '0')"
                />
            </div>
            @endif
            
            <div class="col-span-12">
                <x-textarea 
                    name="notes" 
                    label="Notes"
                    rows="3"
                    placeholder="Notes optionnelles..."
                    :value="old('notes', $isEdit ? $account->notes : '')"
                />
            </div>
            
            @if($isEdit)
            <div class="col-span-12">
                <label class="flex items-center">
                    <input type="checkbox" name="is_active" value="1" {{ old('is_active', $account->is_active) ? 'checked' : '' }} class="rounded border-gray-300 text-primary shadow-sm focus:border-primary focus:ring focus:ring-primary focus:ring-opacity-50 dark:bg-gray-700 dark:border-gray-600">
                    <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Compte actif</span>
                </label>
            </div>
            @endif
        </div>
    </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="{{ $cancelUrl }}" variant="secondary" class="flex-1">
            Annuler
        </x-button>
        <x-button type="submit" form="account-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="{{ $cancelUrl }}" variant="secondary" class="flex-1">
            Annuler
        </x-button>
        <x-button type="submit" form="account-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>