@extends('layouts.app')

@section('content')
<div class="container mt-4">
    <h2 class="mb-3">Process Transaction</h2>
    
    <!-- Transaction Form -->
    <form method="POST" action="{{ route('transaction.process') }}">
        @csrf
        <!-- Vendor ID (hidden) -->
        <input type="hidden" name="vendor_id" value="{{ Auth::user()->vendor->id }}">

        <!-- Card Number Field -->
        <div class="mb-3">
            <label for="card_number" class="form-label">Card Number</label>
            <input type="text" class="form-control" id="card_number" name="card_number"
                   value="{{ request('card_number') }}" 
                   placeholder="Enter card number manually">
        </div>

        <!-- Amount Field -->
        <div class="mb-3">
            <label for="amount" class="form-label">Amount (₦)</label>
            <input type="number" class="form-control" id="amount" name="amount" step="0.01" required>
        </div>

        <!-- Category Dropdown -->
        <div class="mb-3">
            <label for="category" class="form-label">Select Category</label>
            <select class="form-control" id="category" name="category" required>
                <option value="">-- Select Category --</option>
                <option value="housing">Housing</option>
                <option value="education">Education</option>
                <option value="health">Health</option>
                <option value="food">Food</option>
                <option value="finance">Finance</option>
                <option value="utility">Utility</option>
            </select>
        </div>

        <!-- Details Field -->
        <div class="mb-3">
            <label for="description" class="form-label">Details</label>
            <input type="text" class="form-control" id="description" name="description" placeholder="Enter transaction details">
        </div>

        <!-- PIN Input Field -->
        <div class="mb-3">
            <label for="pin" class="form-label">Enter 4-digit PIN</label>
            <input type="password" class="form-control" id="pin" name="pin" maxlength="4" required>
        </div>

        <button type="submit" class="btn btn-primary">Submit Transaction</button>
    </form>
</div>
@endsection