@extends('layouts.admin')

@section('title', 'Record Transaction')

@section('content')
<div class="page-header">
    <div class="page-header-left">
        <a href="{{ route('admin.transactions') }}" class="btn-back">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 12L6 8l4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
            Back to Transactions
        </a>
        <h1 class="page-title">Record Backdated Transaction</h1>
    </div>
</div>

@if($errors->any())
<div class="alert alert-danger" style="margin-bottom: 1rem;">
    @foreach($errors->all() as $error)
    <p>{{ $error }}</p>
    @endforeach
</div>
@endif

<div class="card">
    <div class="card-body">
        <form method="POST" action="{{ route('admin.transactions.store') }}">
            @csrf

            <div class="form-section">
                <h3 class="form-section-title">Transaction Details</h3>
                <div class="form-grid form-grid-3">
                    <div class="form-group">
                        <label for="type" class="form-label">Type <span class="required">*</span></label>
                        <select id="type" name="type" class="form-select @error('type') is-invalid @enderror" required onchange="toggleFields()">
                            <option value="deposit" {{ old('type', 'deposit') === 'deposit' ? 'selected' : '' }}>Deposit</option>
                            <option value="transfer" {{ old('type') === 'transfer' ? 'selected' : '' }}>Transfer</option>
                            <option value="withdrawal" {{ old('type') === 'withdrawal' ? 'selected' : '' }}>Withdrawal</option>
                        </select>
                        @error('type')
                        <span class="form-error">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label class="form-label">Status <span class="required">*</span></label>
                        <select name="status" class="form-select @error('status') is-invalid @enderror" required>
                            <option value="successful" {{ old('status', 'successful') === 'successful' ? 'selected' : '' }}>Successful (moves balance)</option>
                            <option value="pending" {{ old('status') === 'pending' ? 'selected' : '' }}>Pending (no balance change)</option>
                            <option value="failed" {{ old('status') === 'failed' ? 'selected' : '' }}>Failed (no balance change)</option>
                        </select>
                        @error('status')
                        <span class="form-error">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label for="date" class="form-label">Transaction Date <span class="required">*</span></label>
                        <input type="datetime-local" id="date" name="date" class="form-input @error('date') is-invalid @enderror" value="{{ old('date', now()->format('Y-m-d\TH:i')) }}" required>
                        @error('date')
                        <span class="form-error">{{ $message }}</span>
                        @enderror
                    </div>
                </div>
                <div class="form-grid form-grid-3" style="margin-top: 1rem;">
                    <div class="form-group" id="account-group">
                        <label for="account_id" class="form-label" id="account-label">Deposit Into Account <span class="required">*</span></label>
                        <select id="account_id" name="account_id" class="form-select @error('account_id') is-invalid @enderror" required>
                            <option value="">Select account</option>
                            @foreach($accounts as $account)
                            <option value="{{ $account->id }}" {{ old('account_id') == $account->id ? 'selected' : '' }}>
                                {{ $account->user->name ?? 'No user' }} — {{ $account->account_number }} ({{ ucfirst($account->account_type) }}, ₦{{ number_format($account->balance, 2) }})
                            </option>
                            @endforeach
                        </select>
                        @error('account_id')
                        <span class="form-error">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group" id="to-account-group" style="display: {{ old('type') === 'transfer' ? 'block' : 'none' }};">
                        <label for="to_account_id" class="form-label">To Account <span class="required">*</span></label>
                        <select id="to_account_id" name="to_account_id" class="form-select @error('to_account_id') is-invalid @enderror">
                            <option value="">Select account</option>
                            @foreach($accounts as $account)
                            <option value="{{ $account->id }}" {{ old('to_account_id') == $account->id ? 'selected' : '' }}>
                                {{ $account->user->name ?? 'No user' }} — {{ $account->account_number }} ({{ ucfirst($account->account_type) }}, ₦{{ number_format($account->balance, 2) }})
                            </option>
                            @endforeach
                        </select>
                        @error('to_account_id')
                        <span class="form-error">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label for="amount" class="form-label">Amount <span class="required">*</span></label>
                        <input type="number" id="amount" name="amount" class="form-input @error('amount') is-invalid @enderror" step="0.01" min="0.01" value="{{ old('amount') }}" required placeholder="e.g. 10000.00">
                        @error('amount')
                        <span class="form-error">{{ $message }}</span>
                        @enderror
                    </div>
                </div>
            </div>

            <div class="form-section" style="margin-top: 1.5rem;">
                <h3 class="form-section-title">Details</h3>
                <div class="form-grid form-grid-3">
                    <div class="form-group" id="fee-group" style="display: {{ old('type') === 'transfer' ? 'block' : 'none' }};">
                        <label for="fee" class="form-label">Fee</label>
                        <input type="number" id="fee" name="fee" class="form-input @error('fee') is-invalid @enderror" step="0.01" min="0" value="{{ old('fee', '0') }}">
                        @error('fee')
                        <span class="form-error">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label for="description" class="form-label">Description <span class="required">*</span></label>
                        <input type="text" id="description" name="description" class="form-input @error('description') is-invalid @enderror" value="{{ old('description') }}" required placeholder="e.g. Salary payment, POS purchase...">
                        @error('description')
                        <span class="form-error">{{ $message }}</span>
                        @enderror
                    </div>
                </div>

                <div class="form-grid form-grid-3" id="withdrawal-section" style="margin-top: 1rem; display: {{ old('type') === 'withdrawal' ? 'grid' : 'none' }};">
                    <div class="form-group">
                        <label for="destination" class="form-label">Destination</label>
                        <input type="text" id="destination" name="destination" class="form-input @error('destination') is-invalid @enderror" value="{{ old('destination', 'Bank Account') }}">
                        @error('destination')
                        <span class="form-error">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label for="bank" class="form-label">Bank</label>
                        <input type="text" id="bank" name="bank" class="form-input @error('bank') is-invalid @enderror" value="{{ old('bank') }}" placeholder="e.g. Access Bank">
                        @error('bank')
                        <span class="form-error">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label for="account_number" class="form-label">Account Number</label>
                        <input type="text" id="account_number" name="account_number" class="form-input @error('account_number') is-invalid @enderror" value="{{ old('account_number') }}">
                        @error('account_number')
                        <span class="form-error">{{ $message }}</span>
                        @enderror
                    </div>
                </div>
            </div>

            <div class="form-actions" style="margin-top: 2rem;">
                <a href="{{ route('admin.transactions') }}" class="btn btn-outline">Cancel</a>
                <button type="submit" class="btn btn-primary">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
                    Record Transaction
                </button>
            </div>
        </form>
    </div>
</div>

<script>
function toggleFields() {
    var type = document.getElementById('type').value;
    var toGroup = document.getElementById('to-account-group');
    var feeGroup = document.getElementById('fee-group');
    var withdrawalSection = document.getElementById('withdrawal-section');
    var accountLabel = document.getElementById('account-label');

    var isTransfer = type === 'transfer';
    var isWithdrawal = type === 'withdrawal';

    if (toGroup) toGroup.style.display = isTransfer ? 'block' : 'none';
    if (feeGroup) feeGroup.style.display = isTransfer ? 'block' : 'none';
    if (withdrawalSection) withdrawalSection.style.display = isWithdrawal ? 'grid' : 'none';
    if (accountLabel) {
        if (isTransfer) accountLabel.innerText = 'From Account *';
        else if (isWithdrawal) accountLabel.innerText = 'From Account *';
        else accountLabel.innerText = 'Deposit Into Account *';
    }
    document.getElementById('to_account_id').required = isTransfer;
}

document.addEventListener('DOMContentLoaded', toggleFields);
</script>
@endsection