@props(['formId' , 'price' => null])

<label class="flex justify-start gap-3 mb-3 group min-h-[50px] w-full rounded-[15px] border-2  border-ocean-depth-300 bg-white p-[15px] transition has-checked:border-2 has-checked:border-[#E3B505] has-checked:bg-indigo-50 has-checked:text-indigo-900 has-checked:ring-indigo-200 dark:has-checked:bg-indigo-950 dark:has-checked:text-indigo-200 dark:has-checked:ring-indigo-900">
    <div class="flex items-center justify-center">
        <i class="isax isax-card text-[30px] group-has-checked:text-[#E3B505]"></i>
    </div>
    <div>
        <p class=" group-has-checked:text-[#E3B505]"> {{ __('Online payment') }}</p>
        <p class="text-sm text-gray-500"> پرداخت با کلیه کارت های عضو شتاپ </p>
    </div>
    <input form="{{ $formId }}" name="payment_method" type="radio" value="online" class="hidden" />
</label>

<label class="flex justify-start gap-3 mb-3 group min-h-[50px] w-full rounded-[15px] border-2  border-ocean-depth-300 bg-white p-[15px] transition has-checked:border-2 has-checked:border-[#E3B505] has-checked:bg-indigo-50 has-checked:text-indigo-900 has-checked:ring-indigo-200 dark:has-checked:bg-indigo-950 dark:has-checked:text-indigo-200 dark:has-checked:ring-indigo-900">
    <div class="flex items-center justify-center">
        <i class="isax isax-wallet-1 text-[30px] group-has-checked:text-[#E3B505]"></i>
    </div>
    <div>
        <p class=" group-has-checked:text-[#E3B505]"> {{ __('pay with my wallet') }} </p>
        <p class="text-sm text-gray-500"> {{ number_format(auth()->user()->wallet->balance) }} </p>
    </div>
    <input form="{{ $formId }}" name="payment_method" type="radio" value="wallet" class="hidden" />
</label>

<button type="submit" form="{{ $formId }}" class="w-full bg-yellow-500 text-white rounded-lg p-2 font-semibold hover:bg-yellow-600 transition-colors">
    {{ __('pay') }}
</button>