@extends('layouts.setup')

@section('content')

<div class="max-w-lg mx-auto bg-white p-8 rounded-xl shadow">
      <h2 class="text-xl font-bold mb-4">
      Pembayaran Pakej {{ ucfirst($package->name) }}
      </h2>

      <p class="mb-4">
      Jumlah Bayaran: 
      <strong>RM {{ number_format($package->price,2) }}</strong>
      </p>

      <p class="mb-6 text-sm text-gray-600">
      Sila buat pembayaran melalui bank transfer atau DuitNow dan muat naik resit pembayaran.
      </p>

      <div class="p-6">
            <img src="{{ asset('storage/images/test.jpg') }}"
            class="shadow-xl w-full">
      </div>

      <p class="text-md mb-4 text-center">
      Bank Rakyat<br>
      123457890988 <br>
      Codex
      </p>

      <div class="flex justify-center items-center space-x-3 mt-4"></div>
            <p class="mb-3 text-sm text-gray-600">
            Sila muat naik resit pembayaran.
            </p>
            <form method="POST"
                  action="{{ route('payment.upload',$payment->id) }}"
                  enctype="multipart/form-data">

            @csrf

            <input type="file"
                  name="receipt"
                  required>
      </div>

      <div class="flex justify-center items-center space-x-3 mt-4">
            <button type="submit" class="bg-indigo-600 font-semibold text-white px-4 py-2 rounded-lg">
            Hantar Resit
            </button>
            <a href="javascript:history.back()" 
                        class="px-4 py-2 bg-gray-200 text-gray-600 rounded-lg hover:bg-gray-300 font-semibold">
                        ← Kembali
                  </a>
      </div>
</div>
@endsection