@extends('layouts.app')

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

@section('content')
<div class="mb-8">
    <a href="{{ route('payments.index') }}" class="text-blue-600 hover:text-blue-800 flex items-center gap-2 mb-4">
        <i class="fas fa-arrow-left"></i> Back to Payments
    </a>
    <h2 class="text-3xl font-bold text-gray-800">Record Payment</h2>
</div>

<div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8">
    <form action="{{ route('payments.store') }}" method="POST">
        @csrf
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Rental</label>
                <select name="rental_id" required class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-cyan-500">
                    <option value="">Select a rental</option>
                    @foreach($rentals as $rental)
                    <option value="{{ $rental->id }}">{{ $rental->car->brand }} {{ $rental->car->model }} - {{ $rental->customer->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Amount (BHD)</label>
                <input type="number" name="amount" step="0.01" required class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-cyan-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Method</label>
                <select name="method" required class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-cyan-500">
                    <option value="cash">Cash</option>
                    <option value="card">Card</option>
                    <option value="bank_transfer">Bank Transfer</option>
                    <option value="online">Online</option>
                    <option value="other">Other</option>
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Status</label>
                <select name="status" required class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-cyan-500">
                    <option value="completed">Completed</option>
                    <option value="pending">Pending</option>
                    <option value="failed">Failed</option>
                </select>
            </div>
            <div class="md:col-span-2">
                <label class="block text-sm font-medium text-gray-700 mb-2">Transaction ID (Optional)</label>
                <input type="text" name="transaction_id" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-cyan-500">
            </div>
        </div>
        <div class="mt-6">
            <button type="submit" class="bg-cyan-600 text-white px-8 py-3 rounded-xl hover:bg-cyan-700">Record Payment</button>
        </div>
    </form>
</div>
@endsection