@php($bankInfo = json_decode($paymentMethod->config))
<div class="p-4  pb-10 relative rounded border grid gap-6">
    <div class="space-y-6">
        <div class="rounded-lg border border-gray-200 bg-gray-50 p-4">
            <div class="flex items-center gap-2 mb-4">
                <span class="text-2xl">
                    {!! config('icon.building') !!}
                </span>
                <h3 class="font-semibold">Company Bank Details</h3>
            </div>
            <div class="grid gap-2 text-sm">
                <div class="grid grid-cols-[120px_1fr] gap-2">
                    <div class="text-gray-500">Bank Name</div>
                    <div class="font-medium">{{$bankInfo->bank_name}}</div>
                </div>

                @if(!empty($bankInfo->branch_name))
                    <div class="grid grid-cols-[120px_1fr] gap-2">
                        <div class="text-gray-500">Branch Name</div>
                        <div class="font-medium">{{$bankInfo->branch_name}}</div>
                    </div>
                @endif

                <div class="grid grid-cols-[120px_1fr] gap-2">
                    <div class="text-gray-500">Account Name</div>
                    <div class="font-medium">{{$bankInfo->account_name}}</div>
                </div>
                <div class="grid grid-cols-[120px_1fr] gap-2">
                    <div class="text-gray-500">Account Number</div>
                    <div class="font-medium">{{$bankInfo->account_number}}</div>
                </div>
            </div>
        </div>

        <form class="space-y-4" action="{{url('bank/payment', $invoiceInfo->ref_code)}}" method="post"
              enctype="multipart/form-data">
            @csrf

            <div class="rounded-lg border border-gray-200 p-4">
                <div class="flex items-center gap-2 mb-4">
                    <span class="text-2xl">
                        {!! config('icon.creditCard') !!}
                    </span>
                    <h3 class="font-semibold">Your Payment Information</h3>
                </div>

                <div class="space-y-4">
                    <div class="space-y-2">
                        <label htmlFor="accountName"
                               class="block text-sm font-medium text-gray-700">
                            Payment From (Account Name/Number)
                            <span class="text-red-500 ml-1">*</span>
                        </label>
                        <input id="accountName" type="text" name="account_name"
                               placeholder="Enter your bank account name/number" required
                               class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:border-transparent"/>
                    </div>

                    <div class="space-y-2">
                        <label htmlFor="transactionId"
                               class="block text-sm font-medium text-gray-700">
                            Transaction ID
                            <span class="text-red-500 ml-1">*</span>
                        </label>
                        <input id="transactionId" type="text" name="transaction_id"
                               placeholder="Enter transaction ID" required
                               class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:border-transparent"/>
                        <p class="text-sm text-gray-500 flex items-center gap-1">
                                                <span class="text-2xl">
                                                    {!! config('icon.info') !!}
                                                </span>
                            You can find this in your bank statement or payment confirmation
                        </p>
                    </div>

                    <div class="space-y-2">
                        <label htmlFor="payslip" class="block text-sm font-medium text-gray-700">
                            Payment Slip
                        </label>
                        <input id="payslip" name="pay_slip"
                               class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
                               type="file">
                        <p class="text-sm text-gray-500">
                            Upload payment slip or screenshot (PDF, JPG, PNG)
                        </p>
                    </div>
                </div>
            </div>

            <button type="submit"
                    class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none transition-colors">
                Submit Payment Verification
            </button>
        </form>
    </div>

    <p class="text-base text-[#515151] tracking-wider">
        Note: any kind of problem with payment, please contact
        <strong class="font-bold text-black">{{$siteInfo->email}}</strong>
    </p>

    <div
        class="bg-white whitespace-nowrap px-3 font-medium absolute bottom-0 translate-y-1/2 left-1/2 -translate-x-1/2">
        Powered by <span class="text-[#635DC9] font-bold text-2xl">{{$paymentMethod->name}}</span>
    </div>
</div>