@extends('layouts.app')

@section('content')
<div class="max-w-lg mx-auto bg-white p-8 rounded-xl shadow mt-10">
    <h2 class="text-2xl font-bold text-gray-800 mb-4 text-center"> Payment for Booking #{{ $booking->id }}</h2>

    <div class="mb-6">
        <p><strong>Facility:</strong> {{ $booking->facility->name }}</p>
        <p><strong>Date:</strong> {{ $booking->date }}</p>
        <p><strong>Time:</strong> {{ $booking->time_start }} - {{ $booking->time_end }}</p>
        <p><strong>Total Amount:</strong> RM{{ number_format($booking->total_amount, 2) }}</p>
    </div>

    <div class="border-t pt-4 mb-4">
        <h3 class="text-lg font-semibold text-gray-700 mb-2">Bank Transfer Details</h3>
        <p><strong>Bank:</strong> {{ $bankDetails['bank_name'] }}</p>
        <p><strong>Account No.:</strong> {{ $bankDetails['account_number'] }}</p>
        <p><strong>Account Name:</strong> {{ $bankDetails['account_name'] }}</p>

        <div class="text-center my-4">
            <img src="{{ $bankDetails['qr_code'] }}" alt="QR Code" class="w-48 mx-auto rounded shadow">
            <p class="text-gray-500 text-sm mt-2">Scan this QR code to make payment</p>
        </div>
    </div>

    <form action="{{ route('payments.store', $booking->id) }}" method="POST" enctype="multipart/form-data" class="space-y-4">
        @csrf
        <div>
            <label for="receipt" class="block text-gray-700 font-semibold">Upload Payment Receipt:</label>
            <input type="file" name="receipt" id="receipt" accept="image/*"
                   class="mt-2 block w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-indigo-500 focus:border-indigo-500">
        </div>

        <div class="flex justify-between items-center mt-6">
            <a href="{{ route('bookings.index') }}" class="text-gray-600 hover:underline">← Back</a>
            <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-lg font-medium shadow">
                Submit Receipt
            </button>
        </div>
    </form>
</div>
@endsection