import React from 'react';
import { Head, useForm } from '@inertiajs/react';
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import BottomNav from '@/Components/Ck44/BottomNav';

export default function Submit({ order }) {
  const { data, setData, post, processing, errors } = useForm({
    trx_id: '',
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    post(`/deposit/${order.id}/confirm`);
  };

  return (
    <div>
      <Head title="Deposit Submit" />

      <div className="mx-auto min-h-screen max-w-2xl bg-gray-100 p-4">
        <div className="overflow-hidden rounded-2xl bg-white shadow">
          <div className="flex items-center justify-between bg-green-800 px-5 py-4 text-white">
            <div>
              <h1 className="text-4xl font-bold">BDT {order.amount}</h1>
              <p className="text-lg font-semibold">কম বা বেশি ক্যাশআউট করবেন না</p>
            </div>
            <div className="rounded bg-white px-3 py-1 text-lg font-bold text-green-800">PAY SERVICE</div>
          </div>

          <div className="space-y-5 p-5">
            <p className="text-xl font-semibold leading-8 text-red-500">
              আপনি যদি টাকার পরিমাণ পরিবর্তন করেন (BDT {order.amount}), আপনি ক্রেডিট পেতে সক্ষম হবেন না।
            </p>

            <div className="grid gap-4 md:grid-cols-2">
              <div>
                <h3 className="mb-2 text-xl font-bold">Wallet No *</h3>
                <p className="mb-2 text-lg">এই BKASH নাম্বারে শুধুমাত্র ক্যাশআউট গ্রহণ করা হয়</p>
                <div className="flex items-center justify-between rounded-xl bg-gray-100 px-4 py-3 text-2xl">
                  <span>{order.wallet_number}</span>
                  <button
                    type="button"
                    onClick={() => navigator.clipboard.writeText(String(order.wallet_number))}
                  >
                    📋
                  </button>
                </div>
              </div>

              <div>
                <h3 className="mb-2 text-xl font-bold">Wallet provider</h3>
                <div className="rounded-xl bg-fuchsia-600 p-4 text-center text-2xl font-bold text-white">
                  {order.provider || 'BKASH Deposit'}
                </div>
              </div>
            </div>

            <form onSubmit={handleSubmit}>
              <label className="mb-2 block text-xl font-bold">
                ক্যাশআউটের TrxID নাম্বারটি লিখুন <span className="text-red-500">(প্রয়োজন)</span>
              </label>

              <input
                type="text"
                value={data.trx_id}
                onChange={(e) => setData('trx_id', e.target.value)}
                className="w-full rounded-xl border border-red-500 px-4 py-4 text-lg outline-none"
                placeholder="TrxID অবশ্যই পূরণ করতে হবে।"
              />

              {errors.trx_id ? <p className="mt-2 text-sm text-red-500">{errors.trx_id}</p> : null}

              <button
                type="submit"
                disabled={processing || !data.trx_id}
                className="mx-auto mt-5 block min-w-40 rounded-xl border border-gray-300 px-8 py-3 text-lg text-gray-700 disabled:opacity-50"
              >
                নিশ্চিত
              </button>
            </form>

            <div>
              <h4 className="text-lg font-bold">সতর্কতাঃ</h4>
              <p className="text-lg font-semibold text-red-500">
                রেফারেন্স আইডি সঠিকভাবে পূরণ করতে হবে, অন্যথায় ক্রেডিট ব্যর্থ হবে!
              </p>
              <p className="mt-3 text-sm leading-7 text-gray-500">
                অনুগ্রহ করে নিশ্চিত হয়ে নিন যে আপনি BKASH deposit ওয়ালেট নাম্বারে ক্যাশ আউট করেছেন। এই নাম্বারে অন্য কোন ওয়ালেট থেকে ক্যাশ আউট করলে সেই টাকা পাওয়ার কোন সম্ভাবনা নেই।
              </p>
            </div>
          </div>
        </div>
      </div>
      
    </div>
  );
}