@extends('admin.layout')

@section('page-title', 'Transfer Between Hold Accounts')

@section('content')
<div class="space-y-6">
    <div class="flex justify-between items-center">
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Transfer Between Hold Accounts</h1>
        <a href="{{ route('admin.hold-accounts.index') }}" class="bg-gray-300 hover:bg-gray-400 text-gray-800 px-4 py-2 rounded-lg text-sm font-medium">
            Back
        </a>
    </div>

    <div class="bg-white dark:bg-gray-800 shadow rounded-lg border border-gray-200 dark:border-gray-700">
        <div class="px-4 py-5 sm:p-6">
            <form action="{{ route('admin.hold-accounts.transfer') }}" method="POST" id="transferForm">
                @csrf

                <div class="space-y-6">
                    <div>
                        <label for="from_account_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">From Account *</label>
                        <select name="from_account_id" id="from_account_id" required
                                class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                                onchange="updateFromAccountBalance()">
                            <option value="">Select Source Account</option>
                            @foreach($holdAccounts as $account)
                                <option value="{{ $account->id }}" data-balance="{{ $account->balance }}">
                                    {{ $account->paymentMethod->name ?? 'N/A' }} (Balance: ${{ number_format($account->balance, 2) }})
                                </option>
                            @endforeach
                        </select>
                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400" id="from-balance-display"></p>
                        @error('from_account_id')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="to_account_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">To Account *</label>
                        <select name="to_account_id" id="to_account_id" required
                                class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                            <option value="">Select Destination Account</option>
                            @foreach($holdAccounts as $account)
                                <option value="{{ $account->id }}">
                                    {{ $account->paymentMethod->name ?? 'N/A' }} (Balance: ${{ number_format($account->balance, 2) }})
                                </option>
                            @endforeach
                        </select>
                        @error('to_account_id')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="amount" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Amount *</label>
                        <input type="number" name="amount" id="amount" step="0.01" min="0.01" required
                               class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                               oninput="validateAmount()">
                        @error('amount')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                        <p class="mt-1 text-xs text-red-600 dark:text-red-400 hidden" id="amount-error"></p>
                    </div>

                    <div>
                        <label for="description" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Description</label>
                        <textarea name="description" id="description" rows="3"
                                  class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                                  placeholder="Optional description for this transfer">{{ old('description') }}</textarea>
                        @error('description')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Transfer Summary -->
                    <div id="transfer-summary" class="hidden p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
                        <h4 class="text-md font-semibold text-blue-800 dark:text-blue-300 mb-2">Transfer Summary</h4>
                        <div class="space-y-2 text-sm">
                            <div class="flex justify-between">
                                <span class="text-gray-700 dark:text-gray-300">From:</span>
                                <span class="font-medium" id="summary-from">-</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-700 dark:text-gray-300">To:</span>
                                <span class="font-medium" id="summary-to">-</span>
                            </div>
                            <div class="flex justify-between border-t border-blue-200 dark:border-blue-700 pt-2 mt-2">
                                <span class="font-semibold text-gray-900 dark:text-white">Amount:</span>
                                <span class="font-bold text-blue-800 dark:text-blue-300" id="summary-amount">$0.00</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mt-6 flex justify-end space-x-3">
                    <a href="{{ route('admin.hold-accounts.index') }}" class="bg-gray-300 hover:bg-gray-400 text-gray-800 px-4 py-2 rounded-lg text-sm font-medium">
                        Cancel
                    </a>
                    <button type="submit" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg text-sm font-medium">
                        Process Transfer
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function updateFromAccountBalance() {
    const select = document.getElementById('from_account_id');
    const selectedOption = select.options[select.selectedIndex];
    const balance = parseFloat(selectedOption.getAttribute('data-balance')) || 0;
    const display = document.getElementById('from-balance-display');
    
    if (selectedOption.value) {
        display.textContent = `Available balance: $${balance.toFixed(2)}`;
        display.classList.remove('text-gray-500');
        display.classList.add('text-blue-600', 'font-medium');
    } else {
        display.textContent = '';
    }
    
    validateAmount();
    updateSummary();
}

function validateAmount() {
    const fromSelect = document.getElementById('from_account_id');
    const amountInput = document.getElementById('amount');
    const errorDisplay = document.getElementById('amount-error');
    
    if (!fromSelect.value) {
        errorDisplay.classList.add('hidden');
        return;
    }
    
    const selectedOption = fromSelect.options[fromSelect.selectedIndex];
    const balance = parseFloat(selectedOption.getAttribute('data-balance')) || 0;
    const amount = parseFloat(amountInput.value) || 0;
    
    if (amount > balance) {
        errorDisplay.textContent = `Insufficient balance. Available: $${balance.toFixed(2)}`;
        errorDisplay.classList.remove('hidden');
        amountInput.setCustomValidity('Amount exceeds available balance');
    } else {
        errorDisplay.classList.add('hidden');
        amountInput.setCustomValidity('');
    }
    
    updateSummary();
}

function updateSummary() {
    const fromSelect = document.getElementById('from_account_id');
    const toSelect = document.getElementById('to_account_id');
    const amountInput = document.getElementById('amount');
    const summaryDiv = document.getElementById('transfer-summary');
    
    if (fromSelect.value && toSelect.value && amountInput.value) {
        const fromOption = fromSelect.options[fromSelect.selectedIndex];
        const toOption = toSelect.options[toSelect.selectedIndex];
        const amount = parseFloat(amountInput.value) || 0;
        
        document.getElementById('summary-from').textContent = fromOption.text.split(' (')[0];
        document.getElementById('summary-to').textContent = toOption.text.split(' (')[0];
        document.getElementById('summary-amount').textContent = '$' + amount.toFixed(2);
        
        summaryDiv.classList.remove('hidden');
    } else {
        summaryDiv.classList.add('hidden');
    }
}

document.getElementById('to_account_id').addEventListener('change', updateSummary);
document.getElementById('amount').addEventListener('input', updateSummary);
</script>
@endsection