<x-admin-layout>
    <div class="p-0 font-sans bg-slate-50 min-h-screen">
        @if($errors->any())
            <div x-data="{ show: true }" x-init="setTimeout(() => show = false, 6000)" x-show="show"
                class="mx-4 mb-6 bg-red-50 p-3 rounded-lg shadow-sm relative md:mx-0 shadow-md" role="alert">
                <div class="flex">
                    <div>
                        <p class="font-bold text-sm">Veuillez corriger les erreurs ci-dessous.</p>
                        <ul class="mt-1 text-xs list-disc list-inside space-y-0.5">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        @endif

        <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 l'{{ $transaction->type === 'credit' ? 'Avis de Crédit' : 'Avis de Débit' }}
                </h5>
                <a href="{{ route('admin.transactions.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 method="POST" action="{{ route('admin.transactions.update', $transaction) }}" class="space-y-6">
                @csrf
                @method('PUT')
                <input type="hidden" name="type" value="{{ $transaction->type }}">

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Account -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Compte concerné <span class="text-red-600 font-bold">*</span></label>
                        <select name="account_id" 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] bg-white">
                            <option value="">Sélectionnez un compte</option>
                            @foreach($accounts as $account)
                                <option value="{{ $account->id }}" {{ old('account_id', $transaction->account_id) == $account->id ? 'selected' : '' }}>
                                    {{ $account->name }} (Solde: {{ \App\Models\Setting::format($account->balance) }})
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Date -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Date de l'opération <span class="text-red-600 font-bold">*</span></label>
                        <input type="date" name="date" value="{{ old('date', $transaction->date->format('Y-m-d')) }}" 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]">
                    </div>

                    <!-- Amount -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Montant <span class="text-red-600 font-bold">*</span></label>
                        <input type="number" name="amount" step="0.01" value="{{ old('amount', $transaction->amount) }}" 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]">
                    </div>

                    <!-- Reference -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Référence / No Pièce</label>
                        <input type="text" name="reference" value="{{ old('reference', $transaction->reference) }}"
                            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]">
                    </div>

                    <!-- Description -->
                    <div class="md:col-span-2">
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Description / Motif</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 h-[38px]">{{ old('description', $transaction->description) }}</textarea>
                    </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.transactions.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: {{ $transaction->type === 'credit' ? '#5867dd' : '#ef4444' }} !important;">
                        Valider
                    </button>
                </div>
            </form>
        </div>
    </div>
</x-admin-layout>
