@extends('user.layouts.app')

@push('styles')
<style>
  .recaptcha-wrapper {
    margin-bottom: 16px;
  }

  .quick-payment .form-control[readonly] {
    background-color: #f6f6f6;
  }

  .quick-payment .box-focus:focus-within label {
    /* font-size: 13px; */
    top: -7px;
    padding: 0 3px;
    transition: all 0.3s ease;
  }

  .quick-payment .price:focus-within .currency-symbol {
    display: block;
  }

  .quick-payment .price:focus-within input {
    padding-left: 35px !important;
  }

  .quick-payment-info {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 8px;
    font-size: 12px;
    color: #5d5d5d;
    line-height: 1.5;
  }

  .quick-payment-info-icon {
    font-size: 13px;
    line-height: 1.4;
  }

  .quick-payment-receipt-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
  }

  .swal2-container {
    z-index: 20000 !important;
  }

  .quick-payment-receipt-modal.is-visible {
    display: flex;
  }

  .quick-payment-receipt-dialog {
    width: min(960px, 100%);
    height: min(88vh, 820px);
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.22);
    display: flex;
    flex-direction: column;
  }

  .quick-payment-receipt-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #e6ece5;
  }

  .quick-payment-receipt-toolbar h4 {
    margin: 0;
    color: #002b10;
  }

  .quick-payment-receipt-close {
    border: 0;
    background: transparent;
    color: #002b10;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
  }

  .quick-payment-receipt-frame {
    width: 100%;
    height: 100%;
    border: 0;
    background: #f6f6f6;
  }

  @media (max-width: 767px) {
    .quick-payment-receipt-dialog {
      height: min(85vh, 720px);
    }
  }

  .terms-conditions-wrapper {
    margin-bottom: 20px;
    text-align: left;
    display: flex;
    align-items: flex-start;
  }

  .terms-conditions-wrapper input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    cursor: pointer;
    accent-color: #002B10;
    flex-shrink: 0;
    margin-top: 2px;
  }

  .box-focus:has(input:focus) label {
    background-color: #fff;
  }
  .box-focus:has(input[readonly]) label {
    background-color: #f6f6f6;
  }
</style>
@endpush

@section('body_class', 'quick-payment')

@section('content')
   
 <div class="container login-wrapper d-flex align-items-center justify-content-center">
      <div class="row w-100 justify-content-center">
        <div class="member-login-box">
          <div class="row g-0 login-card">                      
            
            <div class="col-md-12 login-show-box">
              <div class="member-login">
                <div class="padlock">
                  <div class="quick-icon">
                    <svg width="49" height="48" viewBox="0 0 49 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M44.5 12V16.84C44.5 20 42.5 22 39.34 22H32.5V8.02C32.5 5.8 34.32 4 36.54 4C38.72 4.02 40.72 4.9 42.16 6.34C43.6 7.8 44.5 9.8 44.5 12Z" stroke="#002B10" stroke-width="2.4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                      <path d="M4.5 14V42C4.5 43.66 6.38 44.6 7.7 43.6L11.12 41.04C11.92 40.44 13.04 40.52 13.76 41.24L17.08 44.58C17.86 45.36 19.14 45.36 19.92 44.58L23.28 41.22C23.98 40.52 25.1 40.44 25.88 41.04L29.3 43.6C30.62 44.58 32.5 43.64 32.5 42V8C32.5 5.8 34.3 4 36.5 4H14.5H12.5C6.5 4 4.5 7.58 4.5 12V14Z" stroke="#002B10" stroke-width="2.4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                      <path d="M18.5 26.02H24.5" stroke="#002B10" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>
                      <path d="M18.5 18.02H24.5" stroke="#002B10" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>
                      <path d="M12.4912 26H12.5092" stroke="#002B10" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                      <path d="M12.4912 18H12.5092" stroke="#002B10" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                  </div>
                  <h3 class="text-center">Quick Payment</h3>    
                </div>
                          
                <!-- Tab Content -->
                <div class="tab-content">
                  <!-- Password Login -->
                  <div class="tab-pane fade show active">
                    @php
                      $authUser = auth()->user();
                      $maskedName = old('fullName');
                      $maskedMobile = old('mobileNumber');
                      $maskedEmail = old('emailId');
                      if ($authUser) {
                          $fullName = trim((string) ($authUser->name ?? ''));
                          $mobile = !empty($authUser->phone)
                              ? preg_replace('/\D+/', '', (string) aes_decrypt($authUser->phone))
                              : '';
                          $email = !empty($authUser->email)
                              ? trim((string) aes_decrypt($authUser->email))
                              : '';

                          $maskedName = preg_replace_callback('/[A-Za-z]+/', function ($matches) {
                              $part = $matches[0];
                              if (strlen($part) <= 2) {
                                  return $part;
                              }

                              return substr($part, 0, 2) . str_repeat('*', strlen($part) - 2);
                          }, $fullName);

                          $maskedMobile = $mobile !== ''
                              ? (strlen($mobile) <= 4
                                  ? str_repeat('*', strlen($mobile))
                                  : str_repeat('*', strlen($mobile) - 4) . substr($mobile, -4))
                              : '';
                          if ($email !== '' && str_contains($email, '@')) {
                              [$localPart, $domainPart] = explode('@', $email, 2);
                              $visible = substr($localPart, 0, min(2, strlen($localPart)));
                              $maskedEmail = $visible . str_repeat('*', max(strlen($localPart) - strlen($visible), 1)) . '@' . $domainPart;
                          } else {
                              $maskedEmail = '';
                          }
                      }
                    @endphp
                    <form>
                      @csrf
                      <div class="form-row box-focus">
                        <label for="MembershipNumber">Membership Number</label>
                        <input required id="MembershipNumber" name="MembershipNumber" type="text" class="form-control" placeholder="" required maxlength="8" value="{{ old('MembershipNumber', auth()->check() ? auth()->user()->member_id : '') }}"
                        {{ auth()->check() ? 'readonly' : '' }}/>
                      </div>     
                      <div class="form-row box-focus">
                        <label for="fullName">Name</label>
                        <input id="fullName" name="fullName" type="text" class="form-control" placeholder="" value="{{ $maskedName }}" readonly />
                      </div>      
                      <div class="form-row box-focus">
                        <label for="mobileNumber">Mobile Number</label>
                        <input id="mobileNumber" name="mobileNumber" type="tel" class="form-control" placeholder="" minlength="10" maxlength="15" inputmode="numeric" value="{{ $maskedMobile }}" readonly data-masked-prefill="{{ $maskedMobile !== '' ? '1' : '0' }}" />
                      </div>
                      <div class="form-row box-focus">
                        <label for="emailId">Email ID</label>
                        <input id="emailId" name="emailId" type="email" class="form-control" placeholder="" value="{{ $maskedEmail }}" readonly data-masked-prefill="{{ $maskedEmail !== '' ? '1' : '0' }}" />
                      </div>      
                      
                      <div class="form-row box-focus price">
                        <label for="Amount">Amount</label>
                        <span class="currency-symbol">₹</span>
                        <input required id="Amount" name="Amount" type="text" class="form-control" placeholder="" required inputmode="decimal" autocomplete="off" />
                        <!-- <div class="quick-payment-info">
                          <span class="quick-payment-info-icon">ⓘ</span>
                          <span>Please <a href="{{ route('user.login') }}">login</a> to view profile information, outstanding amount, statements, payment receipts and more.</span>
                        </div> -->
                      </div>
                      <div class="quick-payment-info form-row box-focus">
                        <!-- <span class="quick-payment-info-icon">ⓘ</span> -->
                        <p class="text-start mb-0">ⓘ Please <a class="hover_yellow" href="{{ route('user.login') }}">login</a> to view profile information, outstanding amount, statements, payment receipts and more.</p>
                      </div>
                      <div class="form-row">
                        <div class="radio-group payment-option-row rounded border-0 gap-3 flex-wrap" style="gap: 16px;display: flex; align-items: center;">
                          <label style="display: inline-flex; align-items: center; gap: 3px;" for="quick-razorpay-option" class="custom-radio">
                            <input type="radio" name="payment-option" id="quick-razorpay-option" value="razorpay">
                            <span class="radio-mark"></span>
                            <img style="height: 20px;" src="./images/razonpay-logo.png" alt="Razorpay">
                          </label>
                          <label style="display: inline-flex; align-items: center; gap: 3px;" for="quick-hdfc-option" class="custom-radio">
                            <input type="radio" name="payment-option" id="quick-hdfc-option" value="hdfc">
                            <span class="radio-mark"></span>
                            <img style="height: 20px;" src="./images/hdfc-logo.png" alt="HDFC">
                          </label>
                        </div>
                      </div>
                      <div class="recaptcha-wrapper form-row box-focus my-div">
                        <div class="outer-box">
                          <span id="captcha_img" style="display:block; margin-bottom:10px; padding:10px; font-size:24px; cursor:pointer;">{!! captcha_img('room') !!}</span>
                          <small style="display:block; margin-bottom:10px;">
                            Can't read? <a href="javascript:void(0);" id="reloadCaptcha">Reload CAPTCHA</a>
                          </small>
                        </div>
                        <div class="form-row box-focus">
                          <label for="captcha">Enter CAPTCHA <span class="text-danger">*</span></label>
                          <input type="text" class="form-control captcha" id="captcha" name="captcha" placeholder="" autocomplete="off" autocapitalize="off" required>
                        </div>
                      </div>
                      <div class="terms-conditions-wrapper form-row">
                        <input type="checkbox" id="terms_quick_pay" name="terms" required>
                        <label class="green" for="terms_quick_pay">I have read and agree to Tollygunge club <a href="{{ route('user.privacy_policy') }}" target="_blank">Privacy policy</a> and <a href="{{ route('user.terms_conditions') }}" target="_blank">Terms and Conditions</a></label>
                      </div>
                      <div class="login-btn-outer">
                        <button type="submit" class="btn btn-primary click-to-pay" id="quickPayBtn" disabled>Pay</button>
                      </div>
                    </form>

                  </div>
                </div>
              </div>
            </div>          
          </div>
        </div>
      </div>
    </div>
   
</section>

<div id="quickPaymentReceiptModal" class="quick-payment-receipt-modal" aria-hidden="true">
  <div class="quick-payment-receipt-dialog">
    <div class="quick-payment-receipt-toolbar">
      <h4>Payment Receipt</h4>
      <button type="button" id="closeReceiptModalBtn" class="quick-payment-receipt-close" aria-label="Close receipt preview">&times;</button>
    </div>
    <iframe id="quickPaymentReceiptFrame" class="quick-payment-receipt-frame" title="Payment receipt preview"></iframe>
  </div>
</div>

@endsection

@section('footer')
<!-- footer bottom appears here -->
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const hdfcResult = @json(request()->query('hdfc_result'));
        const hdfcMessage = @json(request()->query('hdfc_message'));
        const hdfcStatus = @json(request()->query('hdfc_status'));
        const hdfcOrderId = @json(request()->query('hdfc_order_id'));
        const hdfcPaymentId = @json(request()->query('hdfc_payment_id'));
        const hdfcReceiptDownloadUrl = @json(request()->query('hdfc_receipt_download_url'));
        const editAndPayButton = document.getElementById('quickPayBtn');
        const termsQuickPay = document.getElementById('terms_quick_pay');
        const membershipInput = document.getElementById('MembershipNumber');
        const fullNameInput = document.getElementById('fullName');
        const mobileInput = document.getElementById('mobileNumber');
        const emailInput = document.getElementById('emailId');
        const amountInput = document.getElementById('Amount');
        const captchaInput = document.getElementById('captcha');
        const isLoggedIn = @json(auth()->check());
        const receiptModal = document.getElementById('quickPaymentReceiptModal');
        const receiptFrame = document.getElementById('quickPaymentReceiptFrame');
        const closeReceiptModalBtn = document.getElementById('closeReceiptModalBtn');
        let isMemberLookupRunning = false;
        let lastLookedUpMembershipNumber = '';

        if (hdfcResult && hdfcMessage) {
            const hdfcIcon = hdfcResult === 'success'
                ? 'success'
                : (hdfcResult === 'pending' || hdfcResult === 'cancelled' ? 'info' : 'error');
            const hdfcTitle = hdfcResult === 'success'
                ? 'Payment Successful!'
                : (hdfcResult === 'pending'
                    ? 'Payment Pending'
                    : (hdfcResult === 'cancelled' ? 'Payment Cancelled' : 'Payment Failed'));

            const detailParts = [];
            // if (hdfcStatus) detailParts.push(`Status: ${hdfcStatus}`);
            // if (hdfcOrderId) detailParts.push(`Order ID: ${hdfcOrderId}`);
            // if (hdfcPaymentId) detailParts.push(`Payment ID: ${hdfcPaymentId}`);

            Swal.fire({
                icon: hdfcIcon,
                title: hdfcTitle,
                text: hdfcResult === 'success'
                    ? 'Payment successful. Thank you for your transaction. You can view the details in your Payment History section.'
                    : (detailParts.length ? `${hdfcMessage} ${detailParts.join(' | ')}` : hdfcMessage),
                confirmButtonText: hdfcResult === 'success' && hdfcReceiptDownloadUrl ? 'Download Receipt' : 'OK',
                showCancelButton: hdfcResult === 'success' && !!hdfcReceiptDownloadUrl,
                cancelButtonText: 'Close',
                allowOutsideClick: false,
                allowEscapeKey: false
            }).then((result) => {
                if (result.isConfirmed && hdfcResult === 'success') {
                    return;
                }

                const cleanUrl = new URL(window.location.href);
                ['hdfc_result', 'hdfc_message', 'hdfc_status', 'hdfc_order_id', 'hdfc_payment_id', 'hdfc_receipt_id', 'hdfc_receipt_download_url'].forEach((key) => {
                    cleanUrl.searchParams.delete(key);
                });
                window.history.replaceState({}, document.title, cleanUrl.pathname + cleanUrl.search);
            });
        }

        function syncFloatingLabel(field) {
            if (!field || !field.id) {
                return;
            }

            const label = document.querySelector("label[for='" + field.id + "']");
            if (!label) {
                return;
            }

            label.classList.toggle('animate-label', (field.value || '').trim() !== '');
        }

        function setFieldValue(field, value) {
            if (!field) {
                return;
            }

            field.value = (value || '').trim();
            syncFloatingLabel(field);
        }

        function setFieldReadOnly(field, shouldLock) {
            if (!field) {
                return;
            }

            field.readOnly = !!shouldLock;
        }

        function setMaskedPrefillState(field, isMaskedPrefill) {
            if (!field) {
                return;
            }

            field.dataset.maskedPrefill = isMaskedPrefill ? '1' : '0';
        }

        function lockDisplayOnlyField(field) {
            if (!field) {
                return;
            }

            ['keydown', 'beforeinput', 'paste', 'drop'].forEach((eventName) => {
                field.addEventListener(eventName, function(event) {
                    event.preventDefault();
                });
            });
        }

        function closeReceiptModal() {
            receiptModal.classList.remove('is-visible');
            receiptModal.setAttribute('aria-hidden', 'true');
            receiptFrame.removeAttribute('src');
        }

        function openReceiptModal(downloadUrl) {
            if (!downloadUrl) {
                return;
            }

            receiptFrame.src = downloadUrl;
            receiptModal.classList.add('is-visible');
            receiptModal.setAttribute('aria-hidden', 'false');
        }

        function validateAmountValue(value) {
            const trimmedValue = (value || '').trim();

            if (!trimmedValue) {
                return 'Please enter the payment amount.';
            }

            if (!/^\d+(\.\d{1,2})?$/.test(trimmedValue)) {
                return 'Please enter a valid amount with up to 2 decimal places.';
            }

            const numericValue = Number(trimmedValue);
            if (!Number.isFinite(numericValue) || numericValue < 1) {
                return 'Minimum payment amount is ₹1.00.';
            }

            if (numericValue >= 100000) {
                return 'Amount must be less than 1 lakh.';
            }

            return null;
        }

        function validateMembershipNumber(value) {
            return /^[A-Z0-9]{1,8}$/.test((value || '').trim());
        }

        function resetMemberDetails() {
            if (isLoggedIn) {
                return;
            }

            lastLookedUpMembershipNumber = '';
            setFieldValue(fullNameInput, '');
            setFieldValue(mobileInput, '');
            setFieldValue(emailInput, '');
            setFieldReadOnly(fullNameInput, true);
            setFieldReadOnly(mobileInput, true);
            setFieldReadOnly(emailInput, true);
            setMaskedPrefillState(mobileInput, false);
            setMaskedPrefillState(emailInput, false);
            closeReceiptModal();
        }

        function setPayButtonDefaultState() {
            editAndPayButton.disabled = !(termsQuickPay && termsQuickPay.checked);
            editAndPayButton.innerHTML = 'Pay';
        }

        lockDisplayOnlyField(fullNameInput);
        lockDisplayOnlyField(mobileInput);
        lockDisplayOnlyField(emailInput);

        if (membershipInput && !membershipInput.readOnly) {
            membershipInput.addEventListener('input', function() {
                this.value = this.value.toUpperCase().replace(/[^A-Z0-9]/g, '').slice(0, 8);
                resetMemberDetails();
                syncFloatingLabel(this);
            });
        }

        if (amountInput) {
            amountInput.addEventListener('input', function() {
                let nextValue = this.value.replace(/[^\d.]/g, '').replace(/(\..*)\./g, '$1');
                const parts = nextValue.split('.');

                if (parts[1]) {
                    parts[1] = parts[1].slice(0, 2);
                    nextValue = `${parts[0]}.${parts[1]}`;
                }

                this.value = nextValue;
                syncFloatingLabel(this);
            });
        }

        async function lookupMemberDetails() {
            if (!membershipInput || membershipInput.readOnly || isMemberLookupRunning) {
                return;
            }

            const membershipNumber = membershipInput.value.trim().toUpperCase();
            membershipInput.value = membershipNumber;

            if (membershipNumber === '') {
                resetMemberDetails();
                return;
            }

            if (!validateMembershipNumber(membershipNumber)) {
                resetMemberDetails();
                Swal.fire({
                    title: 'Invalid Membership Number',
                    text: 'Please enter a valid membership number.',
                    icon: 'error',
                    confirmButtonText: 'Okay'
                });
                return;
            }

            // if (membershipNumber === lastLookedUpMembershipNumber) {
            //     return;
            // }

            isMemberLookupRunning = true;
            lastLookedUpMembershipNumber = membershipNumber;

            try {
                Swal.fire({
                    title: 'Fetching details...',
                    text: 'Please wait while we verify the membership number.',
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    didOpen: () => {
                        Swal.showLoading();
                        const loader = Swal.getPopup()?.querySelector('.swal2-loader');
                        if (loader) {
                            loader.style.borderColor = '#002B10 transparent #002B10 transparent';
                        }
                    }
                });

                const response = await $.ajax({
                    url: "{{ route('user.quickPaymentMemberLookup') }}",
                    type: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name=\"csrf-token\"]').getAttribute('content')
                    },
                    data: {
                        MembershipNumber: membershipNumber
                    }
                });

                const member = response.member || {};
                setFieldValue(fullNameInput, member.name || '');
                setFieldValue(mobileInput, member.phone || '');
                setFieldValue(emailInput, member.email || '');
                setFieldReadOnly(fullNameInput, true);
                setFieldReadOnly(mobileInput, true);
                setFieldReadOnly(emailInput, true);
                setMaskedPrefillState(mobileInput, !!member.has_mobile);
                setMaskedPrefillState(emailInput, !!member.has_email);
                Swal.close();
            } catch (xhr) {
                Swal.close();
                lastLookedUpMembershipNumber = '';
                resetMemberDetails();

                if (xhr.status === 404) {
                    Swal.fire({
                        title: 'Invalid Membership Number',
                        // text: 'Please enter a valid membership number.',
                        text: 'Please enter a valid membership number without space or special character.',
                        icon: 'error',
                        confirmButtonText: 'Okay'
                    });
                    return;
                }

                if (xhr.status === 422 && xhr.responseJSON?.errors) {
                    const firstKey = Object.keys(xhr.responseJSON.errors)[0];
                    const firstMsg = xhr.responseJSON.errors[firstKey][0];

                    Swal.fire({
                        title: 'Invalid Membership Number',
                        text: firstMsg,
                        icon: 'error',
                        confirmButtonText: 'Okay'
                    });
                    return;
                }

                if (xhr.status === 422 && xhr.responseJSON?.message) {
                    Swal.fire({
                        title: 'Membership Validation Failed',
                        text: xhr.responseJSON.message,
                        icon: 'error',
                        confirmButtonText: 'Okay'
                    });
                    return;
                }

                Swal.fire({
                    title: 'Lookup Failed',
                    text: 'Could not fetch member details right now. Please try again.',
                    icon: 'error',
                    confirmButtonText: 'Okay'
                });
            } finally {
                isMemberLookupRunning = false;
            }
        }

        if (membershipInput && !membershipInput.readOnly) {
            membershipInput.addEventListener('blur', lookupMemberDetails);
        }

        if (termsQuickPay && editAndPayButton) {
            termsQuickPay.addEventListener('change', setPayButtonDefaultState);
        }

        document.getElementById('reloadCaptcha').addEventListener('click', function() {
            fetch("{{ route('reload.captcha') }}")
                .then((res) => res.json())
                .then((data) => {
                    document.getElementById('captcha_img').innerHTML = data.captcha;
                    captchaInput.value = '';
                    syncFloatingLabel(captchaInput);
                });
        });

        closeReceiptModalBtn.addEventListener('click', function() {
            closeReceiptModal();
        });

        function showPaymentProcessingLoader() {
            Swal.fire({
                title: 'Processing Your Payment',
                text: "Please don't leave the window.",
                allowOutsideClick: false,
                allowEscapeKey: false,
                showConfirmButton: false,
                didOpen: () => {
                    Swal.showLoading();
                    const loader = Swal.getPopup()?.querySelector('.swal2-loader');
                    if (loader) {
                        loader.style.borderColor = '#002B10 transparent #002B10 transparent';
                    }
                }
            });
        }

        editAndPayButton.addEventListener('click', function(e) {
            e.preventDefault();
            closeReceiptModal();
            editAndPayButton.disabled = true;
            editAndPayButton.innerHTML = 'Processing... <i class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></i>';

            const amount = amountInput.value.trim();
            const membershipNumber = membershipInput.value.trim().toUpperCase();
            const phone = '';
            const email = '';
            const selectedPaymentOption = document.querySelector('input[name="payment-option"]:checked');
            membershipInput.value = membershipNumber;

            const captcha = captchaInput.value.trim();

            // if (!captcha) {
            //     Swal.fire({
            //         title: 'CAPTCHA Required',
            //         text: 'Please enter the CAPTCHA.',
            //         icon: 'error',
            //         confirmButtonText: 'Okay'
            //     });
            //     setPayButtonDefaultState();
            //     return;
            // }

            if (!validateMembershipNumber(membershipNumber)) {
                Swal.fire({
                    title: 'Invalid Membership Number',
                    text: 'Please enter a valid membership number.',
                    icon: 'error',
                    confirmButtonText: 'Okay'
                });
                setPayButtonDefaultState();
                return;
            }

            const amountError = validateAmountValue(amount);
            if (amountError) {
                Swal.fire({
                    title: 'Invalid Amount',
                    text: amountError,
                    icon: 'error',
                    confirmButtonText: 'Okay'
                });
                setPayButtonDefaultState();
                return;
            }

            if (!selectedPaymentOption) {
                Swal.fire({
                    title: 'Payment Option Required',
                    text: 'Please choose a payment option.',
                    icon: 'error',
                    confirmButtonText: 'Okay'
                });
                setPayButtonDefaultState();
                return;
            }

            if (!captcha) {
                Swal.fire({
                    title: 'CAPTCHA Required',
                    text: 'Please enter the CAPTCHA.',
                    icon: 'error',
                    confirmButtonText: 'Okay'
                });
                setPayButtonDefaultState();
                return;
            }

            $.ajax({
                url: "{{ route('quickCreateRazorpayOrder') }}",
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name=\"csrf-token\"]').getAttribute('content')
                },
                data: {
                    MembershipNumber: membershipNumber,
                    Amount: amount,
                    phone: phone,
                    email: email,
                    captcha: captcha,
                    'payment-option': selectedPaymentOption ? selectedPaymentOption.value : 'razorpay'
                },
                success: function(response) {
                    if (response.msg) {
                        Swal.fire({
                            title: 'Quick Payment',
                            text: response.msg,
                            icon: 'error',
                            confirmButtonText: 'Okay'
                        });
                        setPayButtonDefaultState();
                        return;
                    }

                    if (response.gateway === 'hdfc' && response.redirect_url) {
                        window.location.href = response.redirect_url;
                        return;
                    }

                    if (response.orderId) {
                        showPaymentProcessingLoader();
                        openRazorpayModal(response.orderId, response.amount, response.email, response.phone, response.razorPayKey);
                        return;
                    }

                    Swal.fire({
                        title: 'Error',
                        text: 'Failed to create payment order.',
                        icon: 'error',
                        confirmButtonText: 'Try Again'
                    });
                    setPayButtonDefaultState();
                },
                error: function(xhr) {
                    if (xhr.responseJSON?.msg) {
                        Swal.fire({
                            title: 'Quick Payment',
                            text: xhr.responseJSON.msg,
                            icon: 'error',
                            confirmButtonText: 'Okay'
                        });
                    } else if (xhr.status === 422 && xhr.responseJSON?.errors) {
                        const firstKey = Object.keys(xhr.responseJSON.errors)[0];
                        const firstMsg = xhr.responseJSON.errors[firstKey][0];

                        Swal.fire({
                            title: 'Validation Error',
                            text: firstMsg,
                            icon: 'error',
                            confirmButtonText: 'Okay'
                        });

                        if (xhr.responseJSON.errors.captcha) {
                            document.getElementById('reloadCaptcha').click();
                        }
                    } else {
                        Swal.fire({
                            title: 'Server Error',
                            text: xhr.responseJSON?.error || 'There was an issue while creating the payment order. Please try again later.',
                            icon: 'error',
                            confirmButtonText: 'Close'
                        });
                    }

                    setPayButtonDefaultState();
                }
            });
        });

        function openRazorpayModal(orderId, amount, email, phone, razorPayKey) {
            let paymentCompleted = false;
            const options = {
                
                key: razorPayKey,
                amount: amount * 100,
                currency: 'INR',
                name: 'Tollygunge Club',
                description: 'Payment for Membership',
                order_id: orderId,
                handler: function(response) {
                    paymentCompleted = true;
                    verifyPayment(response);
                },
                modal: {
                    ondismiss: function() {
                        Swal.close();
                        document.getElementById('reloadCaptcha').click();
                        if (!paymentCompleted) {
                            Swal.fire({
                                icon: 'info',
                                title: 'Payment Cancelled',
                                text: 'You closed the payment window. No amount was deducted.',
                                confirmButtonText: 'OK'
                            });
                        }

                        setPayButtonDefaultState();
                    }
                },
                remember_customer: false,
                checkout: {
                    magic: false
                },
                prefill: {
                    // name: fullNameInput.value || '',
                    // email: email || '',
                    // contact: phone || ''
                },
                theme: {
                    color: '#0f3a25ff'
                }
            };

            new Razorpay(options).open();
        }

        function verifyPayment(response) {
            $.ajax({
                url: "{{ route('quickVerifyPayment') }}",
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name=\"csrf-token\"]').getAttribute('content')
                },
                data: {
                    razorpay_order_id: response.razorpay_order_id,
                    razorpay_payment_id: response.razorpay_payment_id,
                    razorpay_signature: response.razorpay_signature
                },
                success: function(res) {
                    Swal.close();
                    if (res.message === 'Payment successful') {
                        if (res.receipt_page_url) {
                            window.location.href = res.receipt_page_url;
                            return;
                        }

                        window.location.reload();
                    } else if (res.message === 'Payment authorized but not captured yet.') {
                        Swal.fire({
                            icon: 'info',
                            title: 'Payment Processing',
                            text: 'Your payment is authorized and capture is in progress. Please check payment status shortly.',
                            confirmButtonText: 'OK'
                        });
                    } else {
                        Swal.fire({
                            title: 'Payment Verification Failed',
                            text: 'There was an issue with verifying your payment. Please try again.',
                            icon: 'error',
                            confirmButtonText: 'Try Again'
                        });
                    }

                    setPayButtonDefaultState();
                },
                error: function(xhr) {
                    Swal.close();
                    const errorMessage = xhr.responseJSON?.error || xhr.responseJSON?.message || 'There was an error verifying the payment. Please try again later.';
                    Swal.fire({
                        title: 'Error',
                        text: errorMessage,
                        icon: 'error',
                        confirmButtonText: 'Close'
                    });

                    setPayButtonDefaultState();
                }
            });
        }

        [membershipInput, fullNameInput, mobileInput, emailInput, amountInput, captchaInput].forEach(syncFloatingLabel);
        closeReceiptModal();
        setPayButtonDefaultState();
    });
</script>
@endpush