<x-admin-layout>
    <x-slot name="header">
        <!-- Hid header content -->
    </x-slot>

    <!-- Main Container -->
    <div class="p-0 font-sans bg-slate-50 min-h-screen">
        
        <div class="bg-white border-none shadow-none md:rounded-none p-4 md:p-6 relative min-h-screen">
            <div class="mb-6 flex items-center justify-between">
                <h5 class="text-[14px] font-bold text-gray-700 uppercase tracking-wide">
                    Modifier le Compte
                </h5>
                <a href="{{ route('admin.accounts.index') }}"
                    class="px-4 py-2 text-gray-600 hover:text-gray-900 transition-all text-sm font-bold flex items-center">
                    <svg class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                    </svg>
                    Retour
                </a>
            </div>

            <form action="{{ route('admin.accounts.update', $account) }}" method="POST" class="space-y-6">
                @csrf
                @method('PUT')

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Nom du compte -->
                    <div class="md:col-span-2">
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Nom du compte <span class="text-red-600 font-bold">*</span></label>
                        <input type="text" name="name" value="{{ old('name', $account->name) }}" required
                            class="block w-full px-3 py-2 border border-gray-300 rounded-sm focus:ring-1 focus:ring-blue-600 focus:border-blue-600 transition-all h-[38px] capitalize">
                        @error('name')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Banque -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Banque (Optionnel)</label>
                        <input type="text" name="bank_name" value="{{ old('bank_name', $account->bank_name) }}"
                            class="block w-full px-3 py-2 border border-gray-300 rounded-sm focus:ring-1 focus:ring-blue-600 focus:border-blue-600 transition-all h-[38px]">
                        @error('bank_name')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Numéro de compte -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Numéro de compte</label>
                        <input type="text" name="account_number" value="{{ old('account_number', $account->account_number) }}"
                            class="block w-full px-3 py-2 border border-gray-300 rounded-sm focus:ring-1 focus:ring-blue-600 focus:border-blue-600 transition-all h-[38px]">
                        @error('account_number')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Solde -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Solde Actuel <span class="text-red-600 font-bold">*</span></label>
                        <input type="number" step="0.01" name="balance" value="{{ old('balance', $account->balance) }}" required
                            class="block w-full px-3 py-2 border border-gray-300 rounded-sm focus:ring-1 focus:ring-blue-600 focus:border-blue-600 transition-all h-[38px]">
                        @error('balance')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Statut -->
                    <div>
                        <label for="is_active" class="block text-sm font-semibold text-gray-700 mb-2">Statut du compte</label>
                        <select name="is_active" id="is_active" 
                            class="block w-full px-3 py-2 border border-gray-300 rounded-sm focus:ring-1 focus:ring-blue-600 focus:border-blue-600 transition-all h-[38px] bg-white">
                            <option value="1" {{ old('is_active', $account->is_active) ? 'selected' : '' }}>Actif</option>
                            <option value="0" {{ !old('is_active', $account->is_active) ? 'selected' : '' }}>Inactif</option>
                        </select>
                        @error('is_active')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Description -->
                    <div class="md:col-span-2">
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Description / Notes</label>
                        <textarea name="description" rows="3"
                            class="block w-full px-3 py-2 border border-gray-300 rounded-sm focus:ring-1 focus:ring-blue-600 focus:border-blue-600 transition-all">{{ old('description', $account->description) }}</textarea>
                        @error('description')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <div class="flex flex-col sm:flex-row items-stretch sm:items-center justify-end gap-3 pt-2">
                    <a href="{{ route('admin.accounts.index') }}"
                        class="px-5 py-2 bg-white border border-gray-200 text-gray-700 rounded-sm hover:bg-gray-50 transition-all text-sm font-semibold shadow-sm hover:shadow-md text-center h-[38px] inline-flex items-center">
                        Annuler
                    </a>
                    <button type="submit"
                        class="px-5 py-2 text-white rounded-sm hover:opacity-90 transition-all duration-200 text-sm font-semibold shadow-sm hover:shadow-md h-[38px]"
                        style="background-color: #5867dd !important;">
                        Valider
                    </button>
                </div>
            </form>
        </div>
    </div>
</x-admin-layout>
