@extends('layouts.app')

@section('title', 'New Payment Transfer - Pharmacy Management')

@section('content')
@can('create_payment_transfers')
<div class="mb-6">
    <h1 class="text-2xl font-bold text-gray-900">New Payment Transfer</h1>
    <a href="{{ route('payment-transfers.index') }}" class="text-sm text-brand-600 hover:text-brand-800">&larr; Back to Transfers</a>
</div>

<div class="max-w-2xl bg-white rounded-xl shadow-sm border border-gray-200 p-6">
    <form method="POST" action="{{ route('payment-transfers.store') }}">
        @csrf

        <div class="space-y-4">
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">From Account <span class="text-red-500">*</span></label>
                    <select name="from_account_id" id="fromAccount" required
                        class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:border-brand-500 focus:ring-brand-500 @error('from_account_id') border-red-500 @enderror">
                        <option value="">Select Source Account</option>
                        @foreach($accounts as $account)
                            <option value="{{ $account->id }}" data-balance="{{ $account->balance }}" {{ old('from_account_id')==$account->id?'selected':'' }}>{{ $account->name }} — ${{ number_format($account->balance, 2) }}</option>
                        @endforeach
                    </select>
                    @error('from_account_id')<p class="text-xs text-red-500 mt-1">{{ $message }}</p>@enderror
                    <p id="fromAccountBalance" class="text-xs font-medium text-gray-500 mt-1"></p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">To Account <span class="text-red-500">*</span></label>
                    <select name="to_account_id" id="toAccount" required
                        class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:border-brand-500 focus:ring-brand-500 @error('to_account_id') border-red-500 @enderror">
                        <option value="">Select Destination Account</option>
                        @foreach($accounts as $account)
                            <option value="{{ $account->id }}" data-balance="{{ $account->balance }}" {{ old('to_account_id')==$account->id?'selected':'' }}>{{ $account->name }} — ${{ number_format($account->balance, 2) }}</option>
                        @endforeach
                    </select>
                    @error('to_account_id')<p class="text-xs text-red-500 mt-1">{{ $message }}</p>@enderror
                    <p id="toAccountBalance" class="text-xs font-medium text-gray-500 mt-1"></p>
                </div>
            </div>

            <p id="accountError" class="text-xs font-medium text-red-500 hidden">From and To accounts must be different.</p>

            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Amount <span class="text-red-500">*</span></label>
                    <input type="number" name="amount" value="{{ old('amount') }}" required min="0.01" step="0.01" id="transferAmount"
                        class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:border-brand-500 focus:ring-brand-500 @error('amount') border-red-500 @enderror">
                    @error('amount')<p class="text-xs text-red-500 mt-1">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Date <span class="text-red-500">*</span></label>
                    <input type="date" name="transfer_date" value="{{ old('transfer_date', now()->format('Y-m-d')) }}" required
                        class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:border-brand-500 focus:ring-brand-500 @error('transfer_date') border-red-500 @enderror">
                    @error('transfer_date')<p class="text-xs text-red-500 mt-1">{{ $message }}</p>@enderror
                </div>
            </div>

            <p id="insufficientFundsError" class="text-xs font-medium text-red-500 hidden">Insufficient funds in the selected source account.</p>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
                <textarea name="description" rows="2"
                    class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-brand-500 focus:ring-brand-500"
                    placeholder="Reason for transfer">{{ old('description') }}</textarea>
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Status <span class="text-red-500">*</span></label>
                    <select name="status" required
                        class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:border-brand-500 focus:ring-brand-500">
                        <option value="pending" {{ old('status')=='pending'?'selected':'' }}>Pending</option>
                        <option value="approved" {{ old('status')=='approved'?'selected':'' }}>Approved</option>
                        <option value="rejected" {{ old('status')=='rejected'?'selected':'' }}>Rejected</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Reference No</label>
                    <input type="text" name="reference_no" value="{{ old('reference_no') }}"
                        class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:border-brand-500 focus:ring-brand-500"
                        placeholder="Auto-generated if empty">
                </div>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Notes</label>
                <textarea name="notes" rows="2"
                    class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-brand-500 focus:ring-brand-500"
                    placeholder="Additional notes...">{{ old('notes') }}</textarea>
            </div>
        </div>

        <div class="flex gap-3 mt-6">
            <button type="submit" id="submitBtn" class="flex-1 bg-brand-600 text-white py-2.5 rounded-lg hover:bg-brand-700 font-medium text-sm">
                <i class="fas fa-exchange-alt mr-2"></i> Create Transfer
            </button>
            <a href="{{ route('payment-transfers.index') }}" class="px-6 py-2.5 border border-gray-300 rounded-lg hover:bg-gray-50 text-sm text-gray-700">Cancel</a>
        </div>
    </form>
</div>

<script>
const accountOptions = document.getElementById('fromAccount').innerHTML;

function excludeAccount(sourceId, targetId) {
    const source = document.getElementById(sourceId);
    const target = document.getElementById(targetId);
    const selectedVal = target.value;
    target.innerHTML = accountOptions;
    const excludeVal = source.value;
    if (excludeVal) {
        target.querySelectorAll('option').forEach(opt => {
            if (opt.value === excludeVal) opt.style.display = 'none';
        });
    }
    if (target.querySelector(`option[value="${selectedVal}"]`)) {
        target.value = selectedVal;
    } else {
        target.value = '';
    }
}

function updateBalances() {
    excludeAccount('fromAccount', 'toAccount');
    excludeAccount('toAccount', 'fromAccount');

    const fromSelect = document.getElementById('fromAccount');
    const toSelect = document.getElementById('toAccount');
    const fromSelected = fromSelect.options[fromSelect.selectedIndex];
    const toSelected = toSelect.options[toSelect.selectedIndex];
    const fromBalance = parseFloat(fromSelected?.dataset?.balance || 0);
    const toBalance = parseFloat(toSelected?.dataset?.balance || 0);
    const balFromEl = document.getElementById('fromAccountBalance');
    const balToEl = document.getElementById('toAccountBalance');
    const accountError = document.getElementById('accountError');

    if (fromSelect.value) {
        balFromEl.textContent = 'Balance: $' + fromBalance.toFixed(2);
        balFromEl.className = fromBalance <= 0 ? 'text-xs font-medium text-red-500 mt-1' : 'text-xs font-medium text-gray-500 mt-1';
    } else {
        balFromEl.textContent = '';
    }

    if (toSelect.value) {
        balToEl.textContent = 'Balance: $' + toBalance.toFixed(2);
        balToEl.className = 'text-xs font-medium text-gray-500 mt-1';
    } else {
        balToEl.textContent = '';
    }

    accountError.classList.add('hidden');
    validateTransfer();
}

function validateTransfer() {
    const fromSelect = document.getElementById('fromAccount');
    const amount = parseFloat(document.getElementById('transferAmount').value) || 0;
    const fromSelected = fromSelect.options[fromSelect.selectedIndex];
    const fromBalance = parseFloat(fromSelected?.dataset?.balance || 0);
    const errorEl = document.getElementById('insufficientFundsError');
    const submitBtn = document.getElementById('submitBtn');

    if (fromSelect.value && amount > 0 && amount > fromBalance) {
        errorEl.classList.remove('hidden');
        submitBtn.disabled = true;
        submitBtn.classList.add('opacity-50', 'cursor-not-allowed');
    } else {
        errorEl.classList.add('hidden');
        submitBtn.disabled = false;
        submitBtn.classList.remove('opacity-50', 'cursor-not-allowed');
    }
}

updateBalances();
</script>
@endcan
@endsection