{{-- resources/views/transactions/create.blade.php --}}
@extends('layouts.app')

@section('content')
    <div class="container mx-auto px-4 py-8 max-w-4xl">
        <!-- Header -->
        <div class="mb-8">
            <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100 tracking-tight">Add New Transaction
            </h1>
            <p class="text-gray-600 dark:text-gray-400">Record your financial transactions with detailed information</p>
        </div>

        <!-- Alert Messages for Server-Side Errors -->
        @if ($errors->any())
            <div class="mb-6 rounded-xl border border-red-200 dark:border-red-900/40 bg-red-50 dark:bg-red-900/20 p-4">
                <div class="flex items-start">
                    <i class="fas fa-exclamation-circle text-red-500 mt-0.5 mr-3"></i>
                    <div class="flex-1">
                        <h3 class="text-sm font-medium text-red-800 dark:text-red-200 mb-2">Please correct the following
                            errors:</h3>
                        <ul class="text-sm text-red-700 dark:text-red-200/90 list-disc list-inside space-y-1">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        @endif

        @if (session('success'))
            <div
                class="mb-6 rounded-xl border border-emerald-200 dark:border-emerald-900/40 bg-emerald-50 dark:bg-emerald-900/20 p-4">
                <div class="flex items-center">
                    <i class="fas fa-check-circle text-emerald-500 mr-3"></i>
                    <p class="font-medium text-emerald-800 dark:text-emerald-200">{{ session('success') }}</p>
                </div>
            </div>
        @endif

        @if (session('error'))
            <div class="mb-6 rounded-xl border border-red-200 dark:border-red-900/40 bg-red-50 dark:bg-red-900/20 p-4">
                <div class="flex items-center">
                    <i class="fas fa-exclamation-circle text-red-500 mr-3"></i>
                    <p class="font-medium text-red-800 dark:text-red-200">{{ session('error') }}</p>
                </div>
            </div>
        @endif

        <!-- AJAX Alert Container -->
        <div id="alertContainer" class="mb-6 hidden"></div>

        <!-- Form Card -->
        <div
            class="rounded-2xl bg-white dark:bg-gray-900/60 border border-gray-100 dark:border-gray-800 shadow-sm overflow-hidden">
            <form id="transactionForm" class="p-6 sm:p-8 space-y-8" enctype="multipart/form-data">
                @csrf

                <!-- Transaction Type Section -->
                <div class="space-y-6">
                    <div class="flex items-center gap-2 mb-2">
                        <div class="w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center">
                            <i class="fas fa-exchange-alt text-blue-600 text-sm"></i>
                        </div>
                        <h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Transaction Details</h2>
                    </div>

                    <!-- Transaction Type -->
                    <div class="space-y-3">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Transaction Type</label>
                        <div class="grid grid-cols-3 gap-3 sm:gap-4">
                            <label class="relative cursor-pointer">
                                <input type="radio" name="type" value="expense" class="sr-only peer"
                                    {{ old('type', 'expense') == 'expense' ? 'checked' : '' }}>
                                <div
                                    class="p-4 border-2 border-gray-200 dark:border-gray-700 rounded-xl text-center transition-all
                                            peer-checked:border-rose-500 peer-checked:bg-rose-50 dark:peer-checked:bg-rose-900/20
                                            hover:border-gray-300 dark:hover:border-gray-600 @error('type') border-rose-500 @enderror">
                                    <i class="fas fa-arrow-down text-2xl text-rose-500 mb-2"></i>
                                    <div class="font-medium text-gray-900 dark:text-gray-100">Expense</div>
                                </div>
                            </label>
                            <label class="relative cursor-pointer">
                                <input type="radio" name="type" value="income" class="sr-only peer"
                                    {{ old('type') == 'income' ? 'checked' : '' }}>
                                <div
                                    class="p-4 border-2 border-gray-200 dark:border-gray-700 rounded-xl text-center transition-all
                                            peer-checked:border-emerald-500 peer-checked:bg-emerald-50 dark:peer-checked:bg-emerald-900/20
                                            hover:border-gray-300 dark:hover:border-gray-600 @error('type') border-rose-500 @enderror">
                                    <i class="fas fa-arrow-up text-2xl text-emerald-500 mb-2"></i>
                                    <div class="font-medium text-gray-900 dark:text-gray-100">Income</div>
                                </div>
                            </label>
                            <label class="relative cursor-pointer">
                                <input type="radio" name="type" value="transfer" class="sr-only peer"
                                    {{ old('type') == 'transfer' ? 'checked' : '' }}>
                                <div
                                    class="p-4 border-2 border-gray-200 dark:border-gray-700 rounded-xl text-center transition-all
                                            peer-checked:border-blue-500 peer-checked:bg-blue-50 dark:peer-checked:bg-blue-900/20
                                            hover:border-gray-300 dark:hover:border-gray-600 @error('type') border-rose-500 @enderror">
                                    <i class="fas fa-arrows-alt-h text-2xl text-blue-500 mb-2"></i>
                                    <div class="font-medium text-gray-900 dark:text-gray-100">Transfer</div>
                                </div>
                            </label>
                        </div>
                        @error('type')
                            <p class="text-sm text-rose-600 mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Amount and Currency -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="space-y-2">
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">USD Amount</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <span class="text-gray-500 dark:text-gray-400 sm:text-sm">$</span>
                                </div>
                                <input type="number" step="0.01" name="amount_usd" placeholder="0.00"
                                    class="block w-full pl-7 pr-4 rounded-xl border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900
                                           text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500
                                           focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all py-3 text-lg @error('amount_usd') border-rose-500 @enderror"
                                    value="{{ old('amount_usd') }}">
                            </div>
                            @error('amount_usd')
                                <p class="text-sm text-rose-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="space-y-2">
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">KHR Amount</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <span class="text-gray-500 dark:text-gray-400 sm:text-sm">៛</span>
                                </div>
                                <input type="number" step="0.01" name="amount_khr" placeholder="0.00"
                                    class="block w-full pl-7 pr-4 rounded-xl border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900
                                           text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500
                                           focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all py-3 @error('amount_khr') border-rose-500 @enderror"
                                    value="{{ old('amount_khr') }}">
                            </div>
                            @error('amount_khr')
                                <p class="text-sm text-rose-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <div
                        class="rounded-lg border border-blue-200 dark:border-blue-900/40 bg-blue-50 dark:bg-blue-900/20 p-4">
                        <div class="flex items-start">
                            <i class="fas fa-info-circle text-blue-500 mt-0.5 mr-3"></i>
                            <div>
                                <p class="text-sm text-blue-800 dark:text-blue-200 font-medium">Independent Currency Amounts
                                </p>
                                <p class="text-sm text-blue-700 dark:text-blue-200/90 mt-1">
                                    Enter separate amounts for USD and KHR. These fields are completely independent—typing
                                    in one will NOT affect the other.
                                    <br><span class="font-medium">Example:</span> $200 USD + ៛20,000 KHR for mixed payment
                                    transactions.
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- Exchange Rate -->
                    <div class="space-y-2">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                            Exchange Rate (USD to KHR) <span class="text-gray-500 dark:text-gray-400 text-xs">-
                                Optional</span>
                        </label>
                        <input type="number" step="0.000001" name="exchange_rate" placeholder="4100.000000"
                            class="block w-full rounded-xl border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900
                                   text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500
                                   focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all py-3 px-4 @error('exchange_rate') border-rose-500 @enderror"
                            value="{{ old('exchange_rate', '4100.000000') }}">
                        @error('exchange_rate')
                            <p class="text-sm text-rose-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <!-- Transaction Information -->
                <div class="space-y-6">
                    <div class="flex items-center gap-2 mb-2">
                        <div
                            class="w-8 h-8 rounded-full bg-emerald-100 dark:bg-emerald-900/30 flex items-center justify-center">
                            <i class="fas fa-info-circle text-emerald-600 text-sm"></i>
                        </div>
                        <h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Transaction Information</h2>
                    </div>

                    <!-- Date and Time -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="space-y-2">
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                                Transaction Date <span class="text-rose-500">*</span>
                            </label>
                            <input type="date" name="transaction_date" required
                                class="block w-full rounded-xl border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900
                                       text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all py-3 px-4 @error('transaction_date') border-rose-500 @enderror"
                                value="{{ old('transaction_date', now()->format('Y-m-d')) }}">
                            @error('transaction_date')
                                <p class="text-sm text-rose-600">{{ $message }}</p>
                            @enderror
                        </div>
                        <div class="space-y-2">
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Transaction
                                Time</label>
                            <input type="time" name="transaction_time"
                                class="block w-full rounded-xl border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900
                                       text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all py-3 px-4 @error('transaction_time') border-rose-500 @enderror"
                                value="{{ old('transaction_time', now()->format('H:i')) }}">
                            @error('transaction_time')
                                <p class="text-sm text-rose-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <!-- Account and Category -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="space-y-2">
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Account <span
                                    class="text-rose-500">*</span></label>
                            <select name="account_id" required
                                class="block w-full rounded-xl border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900
                                       text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all py-3 px-4 @error('account_id') border-rose-500 @enderror">
                                <option value="">Select Account</option>
                                @foreach ($accounts as $account)
                                    <option value="{{ $account->id }}"
                                        {{ old('account_id') == $account->id ? 'selected' : '' }}>
                                        {{ $account->name }}@if ($account->account_number)
                                            ({{ $account->account_number }})
                                        @endif
                                    </option>
                                @endforeach
                            </select>
                            @error('account_id')
                                <p class="text-sm text-rose-600">{{ $message }}</p>
                            @enderror
                        </div>
                        <div class="space-y-2">
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Category <span
                                    class="text-rose-500">*</span></label>
                            <select name="category_id" required
                                class="block w-full rounded-xl border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900
                                       text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all py-3 px-4 @error('category_id') border-rose-500 @enderror">
                                <option value="">Select Category</option>
                                @foreach ($categories as $category)
                                    <option value="{{ $category->id }}"
                                        {{ old('category_id') == $category->id ? 'selected' : '' }}>
                                        {{ $category->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('category_id')
                                <p class="text-sm text-rose-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <!-- Description -->
                    <div class="space-y-2">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Description</label>
                        <textarea name="description" rows="3" placeholder="Enter transaction description..."
                            class="block w-full rounded-xl border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900
                                         text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500
                                         focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all py-3 px-4 resize-none @error('description') border-rose-500 @enderror">{{ old('description') }}</textarea>
                        @error('description')
                            <p class="text-sm text-rose-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Payee and Payment Method -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="space-y-2">
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Payee</label>
                            <input type="text" name="payee" placeholder="Enter payee name..."
                                class="block w-full rounded-xl border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900
                                          text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500
                                          focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all py-3 px-4 @error('payee') border-rose-500 @enderror"
                                value="{{ old('payee') }}">
                            @error('payee')
                                <p class="text-sm text-rose-600">{{ $message }}</p>
                            @enderror
                        </div>
                        <div class="space-y-2">
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Payment
                                Method</label>
                            <select name="payment_method"
                                class="block w-full rounded-xl border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900
                                       text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all py-3 px-4 @error('payment_method') border-rose-500 @enderror">
                                <option value="">Select Payment Method</option>
                                <option value="cash" {{ old('payment_method') == 'cash' ? 'selected' : '' }}>Cash
                                </option>
                                <option value="card" {{ old('payment_method') == 'card' ? 'selected' : '' }}>Card
                                </option>
                                <option value="bank_transfer"
                                    {{ old('payment_method') == 'bank_transfer' ? 'selected' : '' }}>Bank Transfer</option>
                                <option value="check" {{ old('payment_method') == 'check' ? 'selected' : '' }}>Check
                                </option>
                                <option value="mobile_payment"
                                    {{ old('payment_method') == 'mobile_payment' ? 'selected' : '' }}>Mobile Payment
                                </option>
                                <option value="other" {{ old('payment_method') == 'other' ? 'selected' : '' }}>Other
                                </option>
                            </select>
                            @error('payment_method')
                                <p class="text-sm text-rose-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <!-- Reference Number -->
                    <div class="space-y-2">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Reference Number</label>
                        <input type="text" name="reference_number" placeholder="Enter reference number..."
                            class="block w-full rounded-xl border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900
                                      text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500
                                      focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all py-3 px-4 @error('reference_number') border-rose-500 @enderror"
                            value="{{ old('reference_number') }}">
                        @error('reference_number')
                            <p class="text-sm text-rose-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <!-- Additional Details -->
                <div class="space-y-6">
                    <div class="flex items-center gap-2 mb-2">
                        <div
                            class="w-8 h-8 rounded-full bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center">
                            <i class="fas fa-plus-circle text-purple-600 text-sm"></i>
                        </div>
                        <h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Additional Details</h2>
                    </div>

                    <!-- Location -->
                    <div class="space-y-2">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Location</label>
                        <div class="relative">
                            <input type="text" name="location" placeholder="Enter location..."
                                class="block w-full rounded-xl border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900
                                          text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500
                                          focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all py-3 px-4 pr-12 @error('location') border-rose-500 @enderror"
                                value="{{ old('location') }}">
                            <button type="button"
                                class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 rounded-lg"
                                aria-label="Pick location on map">
                                <i class="fas fa-map-marker-alt"></i>
                            </button>
                        </div>
                        @error('location')
                            <p class="text-sm text-rose-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Coordinates -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="space-y-2">
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Latitude</label>
                            <input type="number" step="0.00000001" name="latitude" placeholder="11.5564"
                                class="block w-full rounded-xl border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900
                                          text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500
                                          focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all py-3 px-4 @error('latitude') border-rose-500 @enderror"
                                value="{{ old('latitude') }}">
                            @error('latitude')
                                <p class="text-sm text-rose-600">{{ $message }}</p>
                            @enderror
                        </div>
                        <div class="space-y-2">
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Longitude</label>
                            <input type="number" step="0.00000001" name="longitude" placeholder="104.9282"
                                class="block w-full rounded-xl border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900
                                          text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500
                                          focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all py-3 px-4 @error('longitude') border-rose-500 @enderror"
                                value="{{ old('longitude') }}">
                            @error('longitude')
                                <p class="text-sm text-rose-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <!-- Tags -->
                    <div class="space-y-2">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Tags</label>
                        <div class="relative">
                            <input type="text" id="tagInput" placeholder="Type tag and press Enter..."
                                class="block w-full rounded-xl border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900
                                          text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500
                                          focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all py-3 px-4 @error('tags') border-rose-500 @enderror">
                            <div id="tagContainer" class="mt-2 flex flex-wrap gap-2"></div>
                            <input type="hidden" name="tags" id="tagsHidden" value="{{ old('tags') }}">
                        </div>
                        @error('tags')
                            <p class="text-sm text-rose-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Notes -->
                    <div class="space-y-2">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Notes</label>
                        <textarea name="notes" rows="4" placeholder="Additional notes..."
                            class="block w-full rounded-xl border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900
                                         text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500
                                         focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all py-3 px-4 resize-none @error('notes') border-rose-500 @enderror">{{ old('notes') }}</textarea>
                        @error('notes')
                            <p class="text-sm text-rose-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- File Upload -->
                    <div class="space-y-2">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Attachments</label>
                        <div
                            class="border-2 border-dashed border-gray-300 dark:border-gray-700 rounded-xl p-6 text-center
                                    hover:border-gray-400 dark:hover:border-gray-600 transition-colors @error('attachments.*') border-rose-300 dark:border-rose-700 @enderror">
                            <input type="file" multiple name="attachments[]" class="hidden" id="fileInput"
                                accept=".png,.jpg,.jpeg,.pdf,.doc,.docx">
                            <label for="fileInput" class="cursor-pointer">
                                <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 dark:text-gray-500 mb-3"></i>
                                <p class="text-gray-600 dark:text-gray-300">Click to upload files or drag and drop</p>
                                <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">PNG, JPG, PDF, DOC up to 10MB each
                                </p>
                            </label>
                        </div>
                        @error('attachments.*')
                            <p class="text-sm text-rose-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <!-- Options -->
                <div class="space-y-6">
                    <div class="flex items-center gap-2 mb-2">
                        <div
                            class="w-8 h-8 rounded-full bg-orange-100 dark:bg-orange-900/30 flex items-center justify-center">
                            <i class="fas fa-cog text-orange-600 text-sm"></i>
                        </div>
                        <h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Options</h2>
                    </div>

                    <!-- Status Checkboxes -->
                    <div class="space-y-4">
                        <label class="flex items-center gap-3 cursor-pointer">
                            <input type="checkbox" name="is_recurring" value="1"
                                class="w-5 h-5 text-blue-600 border-gray-300 dark:border-gray-600 rounded focus:ring-blue-500"
                                {{ old('is_recurring') ? 'checked' : '' }}>
                            <div class="flex items-center gap-2">
                                <i class="fas fa-repeat text-blue-600"></i>
                                <span class="text-gray-900 dark:text-gray-100 font-medium">Recurring Transaction</span>
                            </div>
                        </label>

                        <label class="flex items-center gap-3 cursor-pointer">
                            <input type="checkbox" name="is_cleared" value="1"
                                {{ old('is_cleared', '1') ? 'checked' : '' }}
                                class="w-5 h-5 text-emerald-600 border-gray-300 dark:border-gray-600 rounded focus:ring-emerald-500">
                            <div class="flex items-center gap-2">
                                <i class="fas fa-check-circle text-emerald-600"></i>
                                <span class="text-gray-900 dark:text-gray-100 font-medium">Transaction Cleared</span>
                            </div>
                        </label>

                        <label class="flex items-center gap-3 cursor-pointer">
                            <input type="checkbox" name="is_reconciled" value="1"
                                class="w-5 h-5 text-purple-600 border-gray-300 dark:border-gray-600 rounded focus:ring-purple-500"
                                {{ old('is_reconciled') ? 'checked' : '' }}>
                            <div class="flex items-center gap-2">
                                <i class="fas fa-balance-scale text-purple-600"></i>
                                <span class="text-gray-900 dark:text-gray-100 font-medium">Transaction Reconciled</span>
                            </div>
                        </label>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="flex flex-col sm:flex-row gap-4 pt-6 border-t border-gray-200 dark:border-gray-800">
                    <button type="button" id="cancelBtn"
                        class="flex-1 min-h-[44px] bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-200 py-3 px-6 rounded-xl font-medium
                               hover:bg-gray-300 dark:hover:bg-gray-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 transition">
                        <i class="fas fa-times mr-2"></i>Cancel
                    </button>
                    <button type="submit" id="submitBtn"
                        class="flex-1 min-h-[44px] bg-blue-600 text-white py-3 px-6 rounded-xl font-medium hover:bg-blue-700
                               focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 transition disabled:opacity-50 disabled:cursor-not-allowed">
                        <span id="submitText"><i class="fas fa-save mr-2"></i>Save Transaction</span>
                        <span id="submitLoading" class="hidden"><i
                                class="fas fa-spinner fa-spin mr-2"></i>Saving...</span>
                    </button>
                    <button type="button" id="saveAndAddBtn"
                        class="flex-1 min-h-[44px] bg-emerald-600 text-white py-3 px-6 rounded-xl font-medium hover:bg-emerald-700
                               focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 transition disabled:opacity-50 disabled:cursor-not-allowed">
                        <span id="saveAndAddText"><i class="fas fa-plus mr-2"></i>Save & Add Another</span>
                        <span id="saveAndAddLoading" class="hidden"><i
                                class="fas fa-spinner fa-spin mr-2"></i>Saving...</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px)
            }

            to {
                opacity: 1;
                transform: translateY(0)
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        /* your existing JS kept as-is, only the alerts get dark variants dynamically */

        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
        const form = document.getElementById('transactionForm');
        const submitBtn = document.getElementById('submitBtn');
        const saveAndAddBtn = document.getElementById('saveAndAddBtn');
        const cancelBtn = document.getElementById('cancelBtn');
        const alertContainer = document.getElementById('alertContainer');

        function showAlert(message, type = 'success') {
            const alertClasses = {
                success: 'bg-emerald-50 dark:bg-emerald-900/20 border-emerald-200 dark:border-emerald-900/40 text-emerald-800 dark:text-emerald-200',
                error: 'bg-rose-50 dark:bg-rose-900/20 border-rose-200 dark:border-rose-900/40 text-rose-800 dark:text-rose-200',
                warning: 'bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-900/40 text-yellow-800 dark:text-yellow-200',
                info: 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-900/40 text-blue-800 dark:text-blue-200',
            };
            const iconClasses = {
                success: 'fas fa-check-circle text-emerald-500',
                error: 'fas fa-exclamation-circle text-rose-500',
                warning: 'fas fa-exclamation-triangle text-yellow-500',
                info: 'fas fa-info-circle text-blue-500'
            };
            alertContainer.innerHTML = `
    <div class="rounded-lg border p-4">
      <div class="flex items-start">
        <i class="${iconClasses[type]} mr-3 mt-0.5"></i>
        <div class="flex-1"><div class="font-medium">${message}</div></div>
        <button onclick="hideAlert()" class="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 ml-4">
          <i class="fas fa-times"></i>
        </button>
      </div>
    </div>`;
            // apply theme classes separately so we don't interpolate risky strings
            alertContainer.firstElementChild.className += ' ' + alertClasses[type];
            alertContainer.classList.remove('hidden');
            if (type === 'success') setTimeout(() => hideAlert(), 5000);
            alertContainer.scrollIntoView({
                behavior: 'smooth',
                block: 'nearest'
            });
        }

        function hideAlert() {
            alertContainer.classList.add('hidden');
        }

        function setLoadingState(isLoading, saveAndAdd = false) {
            const btn = saveAndAdd ? saveAndAddBtn : submitBtn;
            const textEl = saveAndAdd ? document.getElementById('saveAndAddText') : document.getElementById('submitText');
            const loadingEl = saveAndAdd ? document.getElementById('saveAndAddLoading') : document.getElementById(
                'submitLoading');
            submitBtn.disabled = saveAndAddBtn.disabled = cancelBtn.disabled = isLoading;
            if (isLoading) {
                textEl.classList.add('hidden');
                loadingEl.classList.remove('hidden');
            } else {
                textEl.classList.remove('hidden');
                loadingEl.classList.add('hidden');
            }
        }

        function validateForm() {
            const errors = [];
            form.querySelectorAll('.border-rose-500').forEach(el => el.classList.remove('border-rose-500'));
            const requiredFields = [{
                    name: 'transaction_date',
                    label: 'Transaction date'
                },
                {
                    name: 'account_id',
                    label: 'Account'
                },
                {
                    name: 'category_id',
                    label: 'Category'
                },
            ];
            requiredFields.forEach(f => {
                const input = form.querySelector(`[name="${f.name}"]`);
                if (!input || !input.value.trim()) {
                    errors.push(`${f.label} is required`);
                    input?.classList.add('border-rose-500');
                }
            });
            const amountUsd = form.querySelector('[name="amount_usd"]').value;
            const amountKhr = form.querySelector('[name="amount_khr"]').value;
            if (!amountUsd && !amountKhr) {
                errors.push('Either USD or KHR amount is required');
                form.querySelector('[name="amount_usd"]').classList.add('border-rose-500');
                form.querySelector('[name="amount_khr"]').classList.add('border-rose-500');
            }
            const fi = document.getElementById('fileInput');
            if (fi?.files?.length) Array.from(fi.files).forEach(file => {
                if (file.size > 10 * 1024 * 1024) errors.push(
                    `File "${file.name}" is too large. Maximum size is 10MB.`);
            });
            return errors;
        }

        async function submitForm(saveAndAdd = false) {
            hideAlert();
            const errs = validateForm();
            if (errs.length) {
                showAlert(errs.join('<br>'), 'error');
                return;
            }
            setLoadingState(true, saveAndAdd);
            try {
                const fd = new FormData(form);
                fd.set('tags', tagsHidden.value);
                const res = await fetch('{{ route('transactions.store') }}', {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': csrfToken,
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    body: fd
                });
                const json = await res.json().catch(() => ({}));
                if (res.ok) {
                    showAlert(json.message || 'Transaction saved successfully!', 'success');
                    if (saveAndAdd) {
                        resetForm(true);
                        showAlert('Transaction saved! Form reset for next entry.', 'success');
                    } else {
                        setTimeout(() => {
                            window.location.href = json.redirect || '{{ route('transactions.index') }}';
                        }, 1200);
                    }
                } else {
                    if (res.status === 422 && json.errors) {
                        const msgs = [];
                        Object.entries(json.errors).forEach(([field, arr]) => {
                            arr.forEach(m => msgs.push(m));
                            form.querySelector(`[name="${field}"]`)?.classList.add('border-rose-500');
                        });
                        showAlert(msgs.join('<br>'), 'error');
                    } else if (res.status === 403) {
                        showAlert('You do not have permission to perform this action.', 'error');
                    } else if (res.status === 419) {
                        showAlert('Your session has expired. Please refresh and try again.', 'error');
                    } else if (res.status >= 500) {
                        showAlert('Server error occurred. Please try again later.', 'error');
                    } else {
                        showAlert(json.message || 'An error occurred while saving the transaction.', 'error');
                    }
                }
            } catch (e) {
                showAlert('Network or unexpected error. Please try again.', 'error');
            } finally {
                setLoadingState(false, saveAndAdd);
            }
        }

        function resetForm(partial = false) {
            if (partial) {
                const keep = ['account_id', 'category_id', 'payment_method'];
                Array.from(form.elements).forEach(el => {
                    if (!keep.includes(el.name) && el.name !== '_token') {
                        if (el.type === 'checkbox' || el.type === 'radio') {
                            if (el.name === 'type' && el.value === 'expense') el.checked = true;
                            else if (el.name === 'is_cleared') el.checked = true;
                            else el.checked = false;
                        } else el.value = '';
                    }
                });
                tags = [];
                updateTags();
                document.querySelector('input[name="transaction_date"]').value = new Date().toISOString().slice(0, 10);
                document.querySelector('input[name="transaction_time"]').value = new Date().toTimeString().slice(0, 5);
                document.querySelector('input[name="exchange_rate"]').value = '4100.000000';
                const lbl = document.querySelector('label[for="fileInput"] p');
                if (lbl) lbl.textContent = 'Click to upload files or drag and drop';
            } else {
                form.reset();
                tags = [];
                updateTags();
            }
            form.querySelectorAll('.border-rose-500').forEach(el => el.classList.remove('border-rose-500'));
        }

        form?.addEventListener('submit', (e) => {
            e.preventDefault();
            submitForm(false);
        });
        saveAndAddBtn?.addEventListener('click', (e) => {
            e.preventDefault();
            submitForm(true);
        });
        cancelBtn?.addEventListener('click', () => {
            if (confirm('Are you sure you want to cancel? All unsaved changes will be lost.')) window.location
                .href = '{{ route('transactions.index') }}';
        });
        form?.addEventListener('focus', (e) => {
            if (['INPUT', 'SELECT', 'TEXTAREA'].includes(e.target.tagName)) e.target.classList.remove(
                'border-rose-500');
        }, true);

        // Tags
        const tagInput = document.getElementById('tagInput');
        const tagContainer = document.getElementById('tagContainer');
        const tagsHidden = document.getElementById('tagsHidden');
        let tags = [];
        if (tagsHidden?.value) {
            try {
                tags = JSON.parse(tagsHidden.value) || [];
                updateTags();
            } catch {}
        }
        tagInput?.addEventListener('keydown', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                const t = this.value.trim();
                if (t && !tags.includes(t)) {
                    tags.push(t);
                    updateTags();
                    this.value = '';
                }
            }
        });

        function updateTags() {
            if (!tagContainer) return;
            tagContainer.innerHTML = '';
            tags.forEach((t, i) => {
                const el = document.createElement('span');
                el.className =
                    'inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-200';
                el.innerHTML =
                    `${t}<button type="button" class="ml-2 text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-100" onclick="removeTag(${i})"><i class="fas fa-times text-xs"></i></button>`;
                tagContainer.appendChild(el);
            });
            if (tagsHidden) tagsHidden.value = JSON.stringify(tags);
        }

        function removeTag(i) {
            tags.splice(i, 1);
            updateTags();
        }

        // File upload preview
        const fileInput = document.getElementById('fileInput');
        fileInput?.addEventListener('change', function() {
            const fileLabel = document.querySelector('label[for="fileInput"] p');
            if (this.files.length) {
                const txt = Array.from(this.files).map(f => `${f.name} (${(f.size/1024/1024).toFixed(1)}MB)`).join(
                    ', ');
                if (fileLabel) fileLabel.textContent = `Selected: ${txt}`;
                const big = Array.from(this.files).filter(f => f.size > 10 * 1024 * 1024);
                if (big.length) showAlert(`Warning: ${big.length} file(s) exceed 10MB limit and will be rejected.`,
                    'warning');
            } else if (fileLabel) {
                fileLabel.textContent = 'Click to upload files or drag and drop';
            }
        });

        // Auto-hide server-side success messages
        setTimeout(() => {
            const el = document.querySelector('.bg-emerald-50');
            if (el?.textContent?.includes('success')) {
                el.style.opacity = '0';
                setTimeout(() => el.remove(), 300);
            }
        }, 5000);

        // CSRF presence hint
        if (!csrfToken) {
            console.warn(
                'CSRF token not found. Add <meta name="csrf-token" content="{{ csrf_token() }}"> to your layout head.'
                );
        }
    </script>
@endpush