@extends('layouts.app')

@section('content')
    <div class="container mx-auto p-6">
        <div class="max-w-2xl mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-green-100 to-white">
                <h2 class="text-2xl font-bold text-gray-800 mb-1">Pembayaran Pesanan</h2>
                <p class="text-sm text-gray-600">Silakan lakukan pembayaran dan unggah bukti transfer Anda.</p>
            </div>

            <div class="px-6 py-4">
                <div class="mb-4">
                    <p class="text-gray-700"><strong>Nomor Pesanan:</strong> {{ $order->order_number }}</p>
                    <p class="text-gray-700"><strong>Total Bayar:</strong>
                        Rp{{ number_format($order->total_amount, 0, ',', '.') }}</p>
                    <p class="text-gray-700"><strong>Status Pembayaran:</strong>
                        <span class="px-2 py-1 rounded bg-yellow-100 text-yellow-800 text-sm">
                            {{ ucfirst($order->payment_status) }}
                        </span>
                    </p>
                </div>

                <div class="bg-gray-50 border border-dashed border-green-400 rounded p-4 text-center mb-6">
                    <h3 class="text-lg font-semibold text-green-700 mb-2">Transfer ke Rekening Berikut</h3>
                    <p class="text-gray-800">Bank BCA</p>
                    <p class="text-2xl font-bold text-gray-900 tracking-wide">6390119826</p>
                    <p class="text-gray-700">a.n. Ferry Putra Pratama</p>
                </div>

                <form action="{{ route('my-orders.handlePayment', $order->id) }}" method="POST"
                    enctype="multipart/form-data">
                    @csrf
                    <div class="mb-5">
                        <label class="block mb-2 text-sm font-medium text-gray-700" for="payment_proof">
                            Upload Bukti Pembayaran
                        </label>
                        <input type="file" name="payment_proof" accept="image/*" required
                            class="block w-full text-sm text-gray-700 border border-gray-300 rounded-lg cursor-pointer bg-white focus:outline-none focus:ring-2 focus:ring-green-500">
                        @error('payment_proof')
                            <div class="text-red-500 text-sm mt-1">{{ $message }}</div>
                        @enderror
                    </div>

                    <button type="submit"
                        class="w-full bg-green-600 hover:bg-green-700 text-white font-semibold py-2 px-4 rounded-lg transition duration-200">
                        Konfirmasi Pembayaran
                    </button>
                </form>
            </div>
        </div>
    </div>
@endsection