@extends('layouts.app')

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

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="card-title">
                        <i class="fas fa-plus"></i> Create New Transaction
                    </h3>
                    <div>
                        <a href="{{ route('bank-information.show', $bankAccountInfo) }}" class="btn btn-info">
                            <i class="fas fa-eye"></i> View Account
                        </a>
                        <a href="{{ route('bank-information.transactions', $bankAccountInfo) }}" class="btn btn-primary">
                            <i class="fas fa-list"></i> All Transactions
                        </a>
                        <a href="{{ route('bank-information.index') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> Back to List
                        </a>
                    </div>
                </div>
                
                <div class="card-body">
                    <!-- Account Info -->
                    <div class="row mb-4">
                        <div class="col-md-4">
                            <div class="card bg-primary text-white">
                                <div class="card-body text-center">
                                    <h5 class="mb-0">{{ $bankAccountInfo->bank_name }}</h5>
                                    <p class="mb-0">{{ $bankAccountInfo->account_number }}</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card bg-info text-white">
                                <div class="card-body text-center">
                                    <h5 class="mb-0">{{ $bankAccountInfo->accountHolder->name }}</h5>
                                    <p class="mb-0">Account Holder</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card bg-success text-white">
                                <div class="card-body text-center">
                                    <h5 class="mb-0">৳{{ number_format($bankAccountInfo->current_balance, 2) }}</h5>
                                    <p class="mb-0">Current Balance</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <form action="{{ route('bank-information.store-transaction', $bankAccountInfo) }}" method="POST">
                        @csrf
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="transaction_type">Transaction Type <span class="text-danger">*</span></label>
                                    <select class="form-control @error('transaction_type') is-invalid @enderror" 
                                            id="transaction_type" name="transaction_type" required>
                                        <option value="">Select Transaction Type</option>
                                        <option value="deposit" {{ old('transaction_type') == 'deposit' ? 'selected' : '' }}>Deposit</option>
                                        <option value="withdrawal" {{ old('transaction_type') == 'withdrawal' ? 'selected' : '' }}>Withdrawal</option>
                                        <option value="transfer_in" {{ old('transaction_type') == 'transfer_in' ? 'selected' : '' }}>Transfer In</option>
                                        <option value="transfer_out" {{ old('transaction_type') == 'transfer_out' ? 'selected' : '' }}>Transfer Out</option>
                                        <option value="fee" {{ old('transaction_type') == 'fee' ? 'selected' : '' }}>Fee</option>
                                        <option value="interest" {{ old('transaction_type') == 'interest' ? 'selected' : '' }}>Interest</option>
                                        <option value="refund" {{ old('transaction_type') == 'refund' ? 'selected' : '' }}>Refund</option>
                                    </select>
                                    @error('transaction_type')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="amount">Amount <span class="text-danger">*</span></label>
                                    <input type="number" class="form-control @error('amount') is-invalid @enderror" 
                                           id="amount" name="amount" value="{{ old('amount') }}" 
                                           step="0.01" min="0.01" required>
                                    @error('amount')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="reference_number">Reference Number</label>
                                    <input type="text" class="form-control @error('reference_number') is-invalid @enderror" 
                                           id="reference_number" name="reference_number" value="{{ old('reference_number') }}">
                                    @error('reference_number')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="transaction_id">Transaction ID</label>
                                    <input type="text" class="form-control @error('transaction_id') is-invalid @enderror" 
                                           id="transaction_id" name="transaction_id" value="{{ old('transaction_id') }}">
                                    @error('transaction_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="category">Category</label>
                                    <input type="text" class="form-control @error('category') is-invalid @enderror" 
                                           id="category" name="category" value="{{ old('category') }}">
                                    @error('category')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="subcategory">Subcategory</label>
                                    <input type="text" class="form-control @error('subcategory') is-invalid @enderror" 
                                           id="subcategory" name="subcategory" value="{{ old('subcategory') }}">
                                    @error('subcategory')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="payment_method">Payment Method</label>
                                    <select class="form-control @error('payment_method') is-invalid @enderror" 
                                            id="payment_method" name="payment_method">
                                        <option value="">Select Payment Method</option>
                                        <option value="cash" {{ old('payment_method') == 'cash' ? 'selected' : '' }}>Cash</option>
                                        <option value="check" {{ old('payment_method') == 'check' ? 'selected' : '' }}>Check</option>
                                        <option value="wire" {{ old('payment_method') == 'wire' ? 'selected' : '' }}>Wire Transfer</option>
                                        <option value="online" {{ old('payment_method') == 'online' ? 'selected' : '' }}>Online</option>
                                        <option value="atm" {{ old('payment_method') == 'atm' ? 'selected' : '' }}>ATM</option>
                                        <option value="mobile" {{ old('payment_method') == 'mobile' ? 'selected' : '' }}>Mobile Banking</option>
                                        <option value="card" {{ old('payment_method') == 'card' ? 'selected' : '' }}>Card</option>
                                    </select>
                                    @error('payment_method')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="check_number">Check Number</label>
                                    <input type="text" class="form-control @error('check_number') is-invalid @enderror" 
                                           id="check_number" name="check_number" value="{{ old('check_number') }}">
                                    @error('check_number')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="transaction_date">Transaction Date <span class="text-danger">*</span></label>
                                    <input type="date" class="form-control @error('transaction_date') is-invalid @enderror" 
                                           id="transaction_date" name="transaction_date" value="{{ old('transaction_date', date('Y-m-d')) }}" required>
                                    @error('transaction_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="status">Status</label>
                                    <select class="form-control @error('status') is-invalid @enderror" 
                                            id="status" name="status">
                                        <option value="completed" {{ old('status', 'completed') == 'completed' ? 'selected' : '' }}>Completed</option>
                                        <option value="pending" {{ old('status') == 'pending' ? 'selected' : '' }}>Pending</option>
                                        <option value="failed" {{ old('status') == 'failed' ? 'selected' : '' }}>Failed</option>
                                        <option value="cancelled" {{ old('status') == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                                    </select>
                                    @error('status')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="description">Description</label>
                            <textarea class="form-control @error('description') is-invalid @enderror" 
                                      id="description" name="description" rows="3" placeholder="Enter transaction description">{{ old('description') }}</textarea>
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="form-group">
                            <label for="notes">Notes</label>
                            <textarea class="form-control @error('notes') is-invalid @enderror" 
                                      id="notes" name="notes" rows="2" placeholder="Additional notes">{{ old('notes') }}</textarea>
                            @error('notes')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> Create Transaction
                            </button>
                            <a href="{{ route('bank-information.show', $bankAccountInfo) }}" class="btn btn-info">
                                <i class="fas fa-eye"></i> View Account
                            </a>
                            <a href="{{ route('bank-information.transactions', $bankAccountInfo) }}" class="btn btn-secondary">
                                <i class="fas fa-times"></i> Cancel
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Auto-generate reference number
document.getElementById('transaction_type').addEventListener('change', function() {
    const type = this.value;
    const referenceField = document.getElementById('reference_number');
    
    if (type && !referenceField.value) {
        const prefix = type.toUpperCase().substring(0, 3);
        const date = new Date().toISOString().slice(0, 10).replace(/-/g, '');
        const random = Math.floor(Math.random() * 1000).toString().padStart(3, '0');
        referenceField.value = prefix + date + random;
    }
});

// Show/hide check number field based on payment method
document.getElementById('payment_method').addEventListener('change', function() {
    const checkNumberField = document.getElementById('check_number').closest('.form-group');
    if (this.value === 'check') {
        checkNumberField.style.display = 'block';
    } else {
        checkNumberField.style.display = 'none';
    }
});
</script>
@endsection