@extends('user.layouts.app')

@push('styles')
<style type="text/css">
   .payment-page.payment-overlay-active .bg-header,
   .payment-page.payment-overlay-active .bg-header.sticky {
        z-index: 1 !important;
        pointer-events: none;
   }
</style>
<link href="{{ env('BILLDESK_SDK_CSS_URL') }}" rel="stylesheet">
@endpush

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

@section('content')
<section class="banner-slider">
   
    @foreach($bannerImages as $image)
    <div class="slider-item"><img src="{{ asset('/storage/distribution/images/banner_image/' . $image->image) }}"
        alt="Slide {{ $loop->iteration }}"></div>
    @endforeach
</section>

<div class="banner-inner-content">
    <div class="container">
        <ul class="bread-come">
            <li>
                <a href="/">Home</a>
                <!-- <a href="/dashboard">Dashboard</a> -->
            </li>
            <li>Make Payment</li>
        </ul>
    </div>
</div>

{{--
<section class="payment-table-outer pt-2">
    <div class="container">
        <div class="overflow-auto">
            <table class="payment-table-list">
                <tr>
                    <th>SL No.</th>
                    <th>Month</th>
                    <th>Opening Bal</th>
                    <th>Total Debit</th>
                    <th>Total Credit</th>
                    <th>Closing Bal</th>
                    <th>Invoice</th>
                </tr>
                <!-- <tr>
                    <td>1</td>
                    <td>June, 2025</td>
                    <td>1866.25</td>
                    <td>0.00</td>
                    <td>0.00</td>
                    <td>1866.25</td>
                    <td class="row_whitebulet_pdf">
                        <a href="https://www.tollygungeclub.org/download.php?inv=MjAyNTA2L0VYRTYzLTA2LTIwMjUucGRm &amp;statdkey=RVhFNjMtMDYtMjAyNS5wZGY="
                            target="_blank">Download</a>
                    </td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>May, 2025</td>
                    <td>1816.75</td>
                    <td>54.50</td>
                    <td>5.00</td>
                    <td>1866.25</td>
                    <td class="row_whitebulet_pdf">
                        <a href="https://www.tollygungeclub.org/download.php?inv=MjAyNTA1L0VYRTYzLTA1LTIwMjUucGRm &amp;statdkey=RVhFNjMtMDUtMjAyNS5wZGY="
                            target="_blank">Download</a>
                    </td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>April, 2025</td>
                    <td>1638.15</td>
                    <td>180.60</td>
                    <td>2.00</td>
                    <td>1816.75</td>
                    <td class="row_whitebulet_pdf">
                        <a href="https://www.tollygungeclub.org/download.php?inv=MjAyNTA0L0VYRTYzLTA0LTIwMjUucGRm &amp;statdkey=RVhFNjMtMDQtMjAyNS5wZGY="
                            target="_blank">Download</a>
                    </td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>Mar, 2025</td>
                    <td>1612.80</td>
                    <td>28.35</td>
                    <td>3.00</td>
                    <td>1638.15</td>
                    <td class="row_whitebulet_pdf">
                        <a href="https://www.tollygungeclub.org/download.php?inv=MjAyNTAzL0VYRTYzLTAzLTIwMjUucGRm &amp;statdkey=RVhFNjMtMDMtMjAyNS5wZGY="
                            target="_blank">Download</a>
                    </td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>Feb, 2025</td>
                    <td>1575.00</td>
                    <td>37.80</td>
                    <td>0.00</td>
                    <td>1612.80</td>
                    <td class="row_whitebulet_pdf">
                        <a href="https://www.tollygungeclub.org/download.php?inv=MjAyNTAyL0VYRTYzLTAyLTIwMjUucGRm &amp;statdkey=RVhFNjMtMDItMjAyNS5wZGY="
                            target="_blank">Download</a>
                    </td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>Jan, 2025</td>
                    <td>1395.45</td>
                    <td>179.55</td>
                    <td>0.00</td>
                    <td>1575.00</td>
                    <td class="row_whitebulet_pdf">
                        <a href="https://www.tollygungeclub.org/download.php?inv=MjAyNTAxL0VYRTYzLTAxLTIwMjUucGRm &amp;statdkey=RVhFNjMtMDEtMjAyNS5wZGY="
                            target="_blank">Download</a>
                    </td>
                </tr> -->
                @php
                    $counter = 0;  // Initialize the counter to limit the rows to 6
                @endphp
                @if(empty($filteredData['Result']))
                    <tr style="text-align: center;">
                        <td colspan="7">Can't load previous transaction data and invoices</td>
                    </tr>
                @elseif(isset($filteredData['Result']) && is_array($filteredData['Result']))
                
                @foreach($filteredData['Result'] as $index => $transaction)
                    @php
                        // Stop after 6 rows
                        if ($counter >= 6) break;

                        // Get the member code dynamically from the authenticated user
                        $memberCode = auth()->user()->member_id;  // Assuming the member code is stored in the `member_id` field of the authenticated user

                        // Extract the month and year from the TransDate
                        $month = \Carbon\Carbon::parse($transaction['TransDate'])->format('m'); // e.g., 04 for April
                        $year = \Carbon\Carbon::parse($transaction['TransDate'])->format('Y'); // e.g., 2025

                        // Generate the dynamic invoice file name
                        $invoiceFileName = $memberCode . '-' . $month . '-' . $year . '.pdf';
                        
                        \Log::info('Generated Invoice File Name: ' . $invoiceFileName);

                        // Get debit, credit, and closing balance values
                        $debitAmount = floatval($transaction['dblDrAmt']);
                        $creditAmount = floatval($transaction['dblCrAmt']);
                        $closingBalance = floatval($transaction['dblClosingBal']);

                        $openingBalance = $closingBalance + $creditAmount - $debitAmount;

                        // Increment the counter
                        $counter++;
                    @endphp

                    <tr>
                        <td>{{ $index + 1 }}</td>
                        <td>{{ \Carbon\Carbon::parse($transaction['TransDate'])->format('M, Y') }}</td>
                        <td>{{ number_format($openingBalance, 2) }}</td>
                        <td>{{ number_format($debitAmount, 2) }}</td>
                        <td>{{ number_format($creditAmount, 2) }}</td>
                        <td>{{ number_format($closingBalance, 2) }}</td> <!-- Closing balance comes from the response -->
                        <td class="row_whitebulet_pdf">
                            <!-- <a href="https://www.tollygungeclub.org/download.php?inv={{ urlencode($invoiceFileName) }}" target="_blank">Download</a> -->
                            <a href="{{ route('user.invoice.download', ['year' => $year, 'month' => $month]) }}" class="invoice-download-link">Download</a>
                        </td>
                    </tr>
                @endforeach
                @else
                    <tr style="text-align: center;">
                        <td colspan="7">Can't load previous transaction data and invoices</td>
                    </tr>
                @endif
            </table>
        </div>
        <!-- <p>Online payment system has been updated and members may face issues after making payment. In order to resolve
            the issue kinldy clear your browser cache. <a href="{{ route('user.browser_cache_management') }}"
                target="_blank">Click here</a> to know more about how to clear your browser cache.</p> -->
    </div>
</section>
--}}

<section class="payment-section pt-2">
    <div class="container">
        <form id="payment-form">
            @csrf
            <!-- add: payment-table-1 class by Arif (15/07/2025) -->
            <div class="title payment-table-1-title">
                <h4>Make Payment</h4>
            </div>
            <table class="payment-table payment-table-1">
                <tr>
                    <th>Membership No</th>
                    <th>{{auth()->user()->member_id}}</th>
                </tr>
                <tr>
                    <td>Amount to pay (in Rs):</td>
                    <td>
                        <!-- <div class="form-row box-focus">
                            <input id="outstanding" type="radio"> Outstanding
                            <input id="other_amount"  type="radio"> Other Amount
                        </div> -->
                        <div class="radio-group gap-3">
                            <label for="outstanding" class="custom-radio">
                                <input type="radio" id="outstanding" name="abc" {{ $outstandingBalance > 0 ? 'checked' : '' }} {{ $outstandingBalance < 0 ? 'disabled' : '' }}>
                                <span class="radio-mark"></span>
                                Outstanding Amount
                            </label>
                            <label for="other_amount" class="custom-radio">
                                <input type="radio" id="other_amount" name="abc" {{ $outstandingBalance <= 0 ? 'checked' : '' }}>
                                <span class="radio-mark"></span>
                                Other Amount
                            </label>
                            <!-- <label for="radio-switch-3" class="custom-radio">
                                <input type="radio" id="radio-switch-3" name="abc">
                                <span class="radio-mark"></span>
                                Radio Switch 3
                            </label> -->
                        </div>
                        
                        <div class="form-row box-focus price">
                            <label for="PayAmount" class="">Amount</label>
                            <span class="currency-symbol">₹</span>
                            <input id="PayAmount" name="Amount" type="text" class="form-control border green" placeholder="" required="" inputmode="decimal" value="{{ $outstandingBalance > 0 ? $outstandingBalance : '' }}" autocomplete="off">
                        </div>
                        <p class="heighlight" @if($outstandingBalance < 0) style="color: #002B10;" @endif>
                            {{ $outstandingBalance < 0 ? 'You have a credit balance of ₹ '.number_format(abs($outstandingBalance), 2).'. You can pay extra, if desired.' : 'You can make a full or part payment for your bills.' }}
                        </p>
                        <div class="proceed-btn-outer">
                            <!-- add: click-to-payment-option class by Arif (15/07/2025) -->
                            <button type="" class="btn btn-primary click-to-step-2 radius_6">Proceed</button>
                        </div>
                        <!-- click-to-payment-option -->
                    </td>
                </tr>
            </table>

            <!-- add: payment-table-2 class by Arif (15/07/2025) -->
            <div class="payment-table-2" style="display: none;">
                <div class="title">
                    <!-- <h4>Before Payment Processing (New)</h4> -->
                    <h4>Confirm Payment</h4>
                    <div class="back-btn-outer">
                        <button type="button" class="btn btn-back">Back</button>
                    </div>
                </div>
                <table class="payment-table">
                    <tr>
                        <th colspan="2">Verify Details</th>
                    </tr>
                    <tr>
                        <td>Phone <span class="required">*</span></td>
                        <td>
                            <div class="form-row">
                                <input id="phone" name="phone" type="tel" class="form-control border green" placeholder="Please enter you phone number" required="" minlength="10" maxlength="15" inputmode="numeric" value="{{aes_decrypt(auth()->user()->phone)}}">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>E-mail <span class="required">*</span></td>
                        <td>
                            <div class="form-row">
                                <input id="email" name="email" type="email" class="form-control border green" placeholder="Please enter your email"
                                    required="" value="{{aes_decrypt(auth()->user()->email)}}">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>Pay</td>
                        <td>
                            <div class="payAmount" id="displayAmount"> &#8377; 0</div>
                            <!-- -------- 15/07/2025----edit by Arif (start)------->
                            <div class="payment-option-row rounded border-0 gap-3 flex-wrap">
                                <!-- <div class="payment-option-col">
                                    <input type="radio" name="payment-option" value="hdfc">
                                    <img src="./images/hdfc-logo.png" alt="">
                                </div> -->
                                <!-- <div class="payment-option-col">
                                    <input type="radio" name="payment-option" id="razorpay-option" value="razorpay">
                                    <img src="./images/razonpay-logo.png" alt="">
                                </div> -->
                                <label for="razorpay-option" class="custom-radio">
                                  <input type="radio" name="payment-option" id="razorpay-option" value="razorpay">
                                  <span class="radio-mark"></span>
                                  <img src="./images/razonpay-logo.png" alt="">
                                </label>
                                <!-- <label for="billdesk-option" class="custom-radio">
                                  <input type="radio" name="payment-option" id="billdesk-option" value="billdesk">
                                  <span class="radio-mark"></span>
                                  <img src="./images/billdesk-logo.png" alt="">
                                </label> -->
                                <label for="hdfc-option" class="custom-radio">
                                  <input type="radio" name="payment-option" id="hdfc-option" value="hdfc">
                                  <span class="radio-mark"></span>
                                  <img src="./images/hdfc-logo.png" alt="">
                                </label>
                                <!-- <div class="payment-option-col">
                                    <input type="radio" name="payment-option" value="billdesk">
                                    <img src="./images/billdesk-logo.png" alt="">
                                </div> -->
                            </div>
                            <!-- -------- 15/07/2025----edit by Arif (end)------->
                            <div class="edit-btn-outer">
                                <button class="btn btn-primary click-to-pay radius_6">Edit and Pay</button>
                            </div>
                            <!-- click-to-payment-option -->
                        </td>
                    </tr>
                </table>
            </div>
        </form>
    </div>
</section>

<section class="payment-table-outer pt-2">
    <div class="container">
        <div class="overflow-auto">
            <div class="title">
                <h4>Recent Invoice/ Statement</h4>
                <div class="back-btn-outer">
                    <button type="button" class="btn btn-back">Back</button>
                </div>
            </div>
            <table class="payment-table-list">
                <tr>
                    <th class="text-center">SL No.</th>
                    <th class="text-center">Month</th>
                    <th class="text-center">Transaction No.</th>
                    <!-- <th>Opening Bal</th> -->
                    <!-- <th>Total Debit</th> -->
                    <!-- <th>Total Credit</th> -->
                    <th class="text-center">Closing Balance (₹)</th>
                    <!-- <th class="text-center">Transaction No.</th> -->
                    <th class="text-center">Invoice/ Statement</th>
                </tr>
                
                @php
                    $counter = 0;  // Initialize the counter to limit the rows to 6
                @endphp
                @if(empty($filteredData['Result']))
                    <tr style="text-align: center;">
                        <td colspan="7">Can't load previous transaction data and invoices</td>
                    </tr>
                @elseif(isset($filteredData['Result']) && is_array($filteredData['Result']))
                
                @foreach($filteredData['Result'] as $index => $transaction)
                    @php
                        // Stop after 6 rows
                        if ($counter >= 6) break;

                        // Get the member code dynamically from the authenticated user
                        $memberCode = auth()->user()->member_id;  // Assuming the member code is stored in the `member_id` field of the authenticated user

                        // Extract the month and year from the TransDate
                        $month = \Carbon\Carbon::parse($transaction['TransDate'])->format('m'); // e.g., 04 for April
                        $year = \Carbon\Carbon::parse($transaction['TransDate'])->format('Y'); // e.g., 2025

                        // Generate the dynamic invoice file name
                        $invoiceFileName = $memberCode . '-' . $month . '-' . $year . '.pdf';
                        
                        \Log::info('Generated Invoice File Name: ' . $invoiceFileName);

                        // Get debit, credit, and closing balance values
                        $debitAmount = floatval($transaction['dblDrAmt']);
                        $creditAmount = floatval($transaction['dblCrAmt']);
                        $closingBalance = floatval($transaction['dblClosingBal']);

                        $openingBalance = $closingBalance + $creditAmount - $debitAmount;

                        // Increment the counter
                        $counter++;
                    @endphp

                    <tr>
                        <td>{{ $index + 1 }}</td>
                        <!-- <td>{{ \Carbon\Carbon::parse($transaction['TransDate'])->format('d-m-Y') }}</td> -->
                        <td class="text-center">{{ \Carbon\Carbon::parse($transaction['TransDate'])->format('M, Y') }}</td>
                        <td class="text-center">{{ $transaction['strTransNo'] ?? 'NA' }}</td>
                        <!-- <td>{{ number_format($openingBalance, 2) }}</td> -->
                        <!-- <td>{{ number_format($debitAmount, 2) }}</td> -->
                        <!-- <td>{{ number_format($creditAmount, 2) }}</td> -->
                        <!-- <td>{{ number_format($closingBalance, 2) }}</td>  -->
                        <!-- Closing balance comes from the response -->
                        <td class="text-end">{{ $transaction['dblClosingBal'] }}</td>
                        <!-- <td class="text-center">{{ $transaction['strTransNo'] ?? 'NA' }}</td> -->
                        <td class="row_whitebulet_pdf text-center">
                            <!-- <a href="https://www.tollygungeclub.org/download.php?inv={{ urlencode($invoiceFileName) }}" target="_blank">Download</a> -->
                            <a href="{{ route('user.invoice.download', ['year' => $year, 'month' => $month]) }}" class="invoice-download-link">Download</a>
                        </td>
                    </tr>
                @endforeach
                @else
                    <tr style="text-align: center;">
                        <td colspan="7">Can't load previous transaction data and invoices</td>
                    </tr>
                @endif
            </table>
        </div>
        <p class="mt-3">
            Please <a href="{{ route('user.accountStatement') }}">click here</a> to view your detailed ledger or go to <a href="{{ route('user.dashboard') }}">Dashboard</a> >> <a href="{{ route('user.accountStatement') }}">Account Statement</a>.
        </p>
    </div>
</section>

<!-- Success Message (will be displayed after payment is successful) -->
<div id="paymentSuccess" style="text-align: center; font-color: #003815;">
    Payment Successful! Thank you for your transaction.
</div>
@endsection

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

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script type="module" src="{{ rtrim(env('BILLDESK_SDK_URL', 'https://uat1.billdesk.com/merchant-uat/sdk/dist/'), '/') }}/billdesksdk/billdesksdk.esm.js"></script>
<script nomodule src="{{ rtrim(env('BILLDESK_SDK_URL', 'https://uat1.billdesk.com/merchant-uat/sdk/dist/'), '/') }}/billdesksdk.js"></script>
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
    // let slideIndex = 1;
    // showSlides(slideIndex);

    // function plusSlides(n) {
    //     showSlides(slideIndex += n);
    // }

    // function currentSlide(n) {
    //     showSlides(slideIndex = n);
    // }

    // function showSlides(n) {
    //     let i;
    //     let slides = document.getElementsByClassName("mySlides");
    //     let dots = document.getElementsByClassName("dot");
    //     if (n > slides.length) {
    //         slideIndex = 1
    //     }
    //     if (n < 1) {
    //         slideIndex = slides.length
    //     }
    //     for (i = 0; i < slides.length; i++) {
    //         slides[i].style.display = "none";
    //     }
    //     for (i = 0; i < dots.length; i++) {
    //         dots[i].className = dots[i].className.replace(" active", "");
    //     }
    //     slides[slideIndex - 1].style.display = "block";
    //     dots[slideIndex - 1].className += " active";
    // }

    // Get the input element where the user enters the payment amount
    const amountInput = document.getElementById('PayAmount');

    // Get the element where the amount is displayed
    const displayAmount = document.getElementById('displayAmount');

    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;
    }

    // Add an event listener to update the displayed amount when the user changes the input value
    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;
        displayAmount.textContent = `₹ ${this.value || 0}`;
    });

    const phoneInput = document.getElementById('phone');
    if (phoneInput) {
        phoneInput.addEventListener('input', function() {
            this.value = this.value.replace(/\D+/g, '').slice(0, 15);
        });
    }

    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'));

        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: 'OK'
            }).then(() => {
                if (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'].forEach((key) => {
                    cleanUrl.searchParams.delete(key);
                });
                window.history.replaceState({}, document.title, cleanUrl.pathname + cleanUrl.search);
            });
        }

        document.querySelectorAll('.invoice-download-link').forEach(function(link) {
            link.addEventListener('click', async function(event) {
                event.preventDefault();

                const checkUrl = new URL(this.href, window.location.origin);
                checkUrl.searchParams.set('check', '1');

                try {
                    const response = await fetch(checkUrl.toString(), {
                        headers: {
                            'Accept': 'application/json'
                        }
                    });

                    if (response.ok) {
                        window.open(this.href, '_blank');
                        return;
                    }

                    const data = await response.json().catch(() => ({}));
                    Swal.fire({
                        icon: 'warning',
                        title: data.title || 'Oops! Invoice/Statement Not Found',
                        text: data.message || 'We are currently uploading your invoice/statement. Please try again later or contact the club office for assistance.',
                        confirmButtonColor: '#003815',
                    });
                } catch (error) {
                    Swal.fire({
                        icon: 'warning',
                        text: 'We are currently uploading your invoice/statement. Please try again later or contact the club office for assistance.',
                        confirmButtonColor: '#003815',
                    });
                }
            });
        });

        const proceedButton = document.querySelector('.click-to-step-2'); // Step 1 button (Proceed)
        const editAndPayButton = document.querySelector('.click-to-pay');  // Step 2 button (Edit and Pay)
        const payLoader = document.querySelector('.pay-loader');
        const originalBtnText = editAndPayButton.textContent;
        const originalButtonStyles = {
            backgroundColor: editAndPayButton.style.backgroundColor,
            borderColor: editAndPayButton.style.borderColor,
            color: editAndPayButton.style.color,
            opacity: editAndPayButton.style.opacity,
            cursor: editAndPayButton.style.cursor,
        };

        function setPayLoading(isLoading) {
            if (isLoading) {
                editAndPayButton.disabled = true;
                editAndPayButton.textContent = 'Processing...';
                editAndPayButton.style.backgroundColor = '#0f5c2d';
                editAndPayButton.style.borderColor = '#0f5c2d';
                editAndPayButton.style.color = '#ffffff';
                // editAndPayButton.style.opacity = '1';
                editAndPayButton.style.cursor = 'not-allowed';
                // if (payLoader) payLoader.style.display = 'block';
            } else {
                editAndPayButton.disabled = false;
                editAndPayButton.textContent = originalBtnText; // "Edit & Pay"
                editAndPayButton.style.backgroundColor = originalButtonStyles.backgroundColor;
                editAndPayButton.style.borderColor = originalButtonStyles.borderColor;
                editAndPayButton.style.color = originalButtonStyles.color;
                editAndPayButton.style.opacity = originalButtonStyles.opacity;
                editAndPayButton.style.cursor = originalButtonStyles.cursor;
                // if (payLoader) payLoader.style.display = 'none';
            }
        }

        function setPaymentOverlayState(isActive) {
            document.body.classList.toggle('payment-overlay-active', !!isActive);
        }

        function showPaymentProcessingLoader() {
            setPaymentOverlayState(true);
            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';
                    }
                }
            });
        }

        const paymentTable2 = document.querySelector('.payment-table-2');
        const paymentOptionFields = document.querySelectorAll('input[name="payment-option"]');  // All payment option fields
        const paymentTable1 = document.querySelector('.payment-section .payment-table-1');
        const paymentTable1Title = document.querySelector('.payment-section .payment-table-1-title');

        // Determine if we are in the local environment
        const isLocal = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';

        // Determine the protocol (http or https)
        const protocol = window.location.protocol; // Returns 'http:' or 'https:'

        // Define the API URL based on the environment
        const apiUrl = isLocal ?
            `${protocol}//localhost:8000/create-razorpay-order` // Local API (adjust port if needed)
            :
            `${protocol}//tollyclubdev.nodejsdapldevelopments.com/create-razorpay-order`; // Production API

        // Step 1: Proceed Button
        proceedButton.addEventListener('click', function(e) {
            e.preventDefault();

            const amount = document.getElementById('PayAmount').value;
            const amountError = validateAmountValue(amount);
            if (amountError) {
                Swal.fire({
                    title: 'Invalid Amount',
                    text: amountError,
                    icon: 'error',
                    confirmButtonText: 'Okay'
                });
                editAndPayButton.disabled = false;
                // editAndPayButton.innerHTML = 'Pay';
                return;
            }

            // const phone = document.getElementById('phone').value;
            // const email = document.getElementById('email').value;

            // Validate Step 1 fields
            // if (!amount || isNaN(amount) || Number(amount) <= 0) {
            //     // alert("Please enter a valid amount.");
            //     Swal.fire({
            //         icon: 'warning',
            //         title: 'Invalid Amount',
            //         text: 'Please enter a valid amount.',
            //         confirmButtonText: 'OK'
            //     });
            //     return;
            // }

            // if (!phone || !email) {
            //     // alert("Phone and Email are required.");
            //     Swal.fire({
            //         icon: 'warning',
            //         title: 'Missing Information',
            //         text: 'Phone and Email are required.',
            //         confirmButtonText: 'OK'
            //     });
            //     return;
            // }

            // Log Step 1 Activity (Proced)
            $.ajax({
                url: "{{ route('user.makePaymentLogStep') }}",
                type: "POST",
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                data: {
                    event_name: 'payment_submission_proceed',
                    source: 'make_payment',
                    details: {
                        amount: amount,
                        payment_type: document.getElementById('outstanding').checked ? 'outstanding_amount' : 'other_amount'
                    }
                }
            });

            // After Step 1 is validated, show Step 2 (payment section)
            paymentTable1.style.display = 'none';  // Hide Step 1
            paymentTable1Title.style.display = 'none';
            paymentTable2.style.display = 'block';  // Show Step 2
            // Enable payment options in Step 2
            document.getElementById('displayAmount').textContent = `₹ ${amount}`; // Ensure amount is synced
            paymentOptionFields.forEach(field => field.disabled = false);
        });

        // Step 2: Edit and Pay Button
        editAndPayButton.addEventListener('click', function(e) {
            e.preventDefault();

            const phone = document.getElementById('phone').value;
            const email = document.getElementById('email').value;
            const phoneOk = /^\d{10,15}$/.test(phone); // 10 to 15 digits
            const emailOk = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(email);
            if (!phone || !email) {
                // alert("Phone and Email are required.");
                Swal.fire({
                    icon: 'warning',
                    title: 'Missing Information',
                    text: 'Phone and Email are required.',
                    confirmButtonText: 'OK'
                });
                return;
            }

            if (!phoneOk) {
                Swal.fire({
                    title: 'Invalid Phone Number',
                    text: 'Please enter a valid 10 to 15 digit mobile number.',
                    icon: 'error',
                    confirmButtonText: 'Okay'
                });
                editAndPayButton.disabled = false;
                editAndPayButton.innerHTML = 'Pay';
                return;
            }
            if (!emailOk) {
                Swal.fire({
                    title: 'Invalid Email',
                    text: 'Please enter a valid email address.',
                    icon: 'error',
                    confirmButtonText: 'Okay'
                });
                editAndPayButton.disabled = false;
                editAndPayButton.innerHTML = 'Pay';
                return;
            }

            const paymentOption = document.querySelector('input[name="payment-option"]:checked');  // Payment option in Step 2

            // Validate Step 2 - Ensure payment option is selected
            if (!paymentOption) {
                // alert("Please select a payment option.");
                Swal.fire({
                    icon: 'warning',
                    title: 'No Payment Option Selected',
                    text: 'Please select a payment option.',
                    confirmButtonText: 'OK'
                });
                return;
            }

            // If payment option is selected, proceed with payment
            const amount = document.getElementById('PayAmount').value;
            const amountError = validateAmountValue(amount);
            if (amountError) {
                Swal.fire({
                    title: 'Invalid Amount',
                    text: amountError,
                    icon: 'error',
                    confirmButtonText: 'Okay'
                });
                setPayLoading(false);
                return;
            }
            // const phone = document.getElementById('phone').value;
            // const email = document.getElementById('email').value;

            setPayLoading(true);

            // Disable the button to prevent multiple clicks
            // editAndPayButton.disabled = true;

            // Show a loader or change button text to "Processing..."
            // editAndPayButton.innerHTML = 'Processing... <i class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></i>';

            $.ajax({
                url: "{{ route('user.createRazorpayOrder') }}",
                type: "POST",
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                data: {
                    Amount: amount,
                    phone: phone,
                    email: email,
                    'payment-option': paymentOption.value // Payment option in Step 2
                },
                success: function(response) {
                    if (response.gateway === 'billdesk' && response.billdeskConfig) {
                        openBilldeskSdk(response.billdeskConfig);
                        return;
                    }

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

                    if (response.orderId) {
                        showPaymentProcessingLoader();
                        openRazorpayModal(response.orderId, response.amount, response.email, response.phone);
                    } else {
                        setPaymentOverlayState(false);
                        setPayLoading(false);
                        // alert('Failed to create Razorpay order.');
                        Swal.fire({
                            icon: 'error',
                            title: 'Order Creation Failed',
                            text: 'Failed to create payment order.',
                            confirmButtonText: 'OK'
                        });
                    }
                },
                error: function(xhr) {
                    setPaymentOverlayState(false);
                    setPayLoading(false);
                    console.error(xhr.responseText);
                    // alert('Server error while creating Razorpay order.');
                    Swal.fire({
                        icon: 'error',
                        title: 'Server Error',
                        text: xhr.responseJSON?.error || 'Server error while creating payment order.',
                        confirmButtonText: 'OK'
                    });
                }
            });
        });

        // $.ajax({
        //     url: apiUrl,
        //     // url: "{{ route('user.createRazorpayOrder') }}",
        //     type: "POST",
        //     headers: {
        //         'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        //     },
        //     data: {
        //         Amount: amount,
        //         phone: phone,
        //         email: email,
        //         'payment-option': paymentOption.value
        //     },
        //     success: function(response) {
        //         if (response.orderId) {
        //             openRazorpayModal(response.orderId, response.amount, response.email, response.phone);
        //         } else {
        //             alert('Failed to create Razorpay order.');
        //         }
        //     },
        //     error: function(xhr) {
        //         console.error(xhr.responseText);
        //         alert('Server error while creating Razorpay order.');
        //     }
        // });

        function openRazorpayModal(orderId, amount, email, phone) {
            let paymentCompleted = false; // to detect cancel vs success
            const options = {
                key: "{{ env('RAZORPAY_KEY_ID') }}",
                amount: amount * 100,
                currency: "INR",
                name: "Tollygunge Club",
                description: "Payment for Membership",
                order_id: orderId,
                remember_customer: false,
                checkout: {
                    magic: false
                },
                handler: function(response) {
                    paymentCompleted = true; // success happened
                    verifyPayment(response);
                },
                modal: {
                    ondismiss: function () {
                        Swal.close();
                        setPaymentOverlayState(false);
                        // If user closed without success
                        if (!paymentCompleted) {
                            Swal.fire({
                                icon: 'info',
                                title: 'Payment Cancelled',
                                text: 'You closed the payment window. No amount was deducted.',
                                confirmButtonText: 'OK'
                            });
                        }
                        // user closed modal / cancelled
                        setPayLoading(false);
                    }
                },
                prefill: {
                    name: "{{ auth()->user()->name }}",
                    email: email,
                    contact: phone
                },
                theme: {
                    color: "#05331eff"
                }
            };

            const rzp = new Razorpay(options);
            rzp.open();

            rzp.on('payment.failed', function () {
                Swal.close();
                setPaymentOverlayState(false);
                setPayLoading(false);
            });
        }

        function openBilldeskSdk(flowConfig) {
            if (typeof window.loadBillDeskSdk !== 'function') {
                setPaymentOverlayState(false);
                setPayLoading(false);
                Swal.fire({
                    icon: 'error',
                    title: 'BillDesk SDK Missing',
                    text: 'BillDesk SDK could not be loaded. Please try again later.',
                    confirmButtonText: 'OK'
                });
                return;
            }

            const responseHandler = function(txn) {
                if (!txn || !txn.response) {
                    setPaymentOverlayState(false);
                    setPayLoading(false);

                    if (txn && txn.status && String(txn.status).toLowerCase().includes('cancel')) {
                        Swal.fire({
                            icon: 'info',
                            title: 'Payment Cancelled',
                            text: 'You closed the payment window. No amount was deducted.',
                            confirmButtonText: 'OK'
                        });
                    }

                    return;
                }

                $.ajax({
                    url: "{{ route('user.billdeskResponse') }}",
                    type: "POST",
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                        'Accept': 'application/json'
                    },
                    data: {
                        transaction_response: txn.response
                    },
                    success: function() {
                        setPaymentOverlayState(false);
                        setPayLoading(false);
                        Swal.fire({
                            icon: 'success',
                            title: 'Payment Successful!',
                            text: 'Payment successful. Thank you for your transaction. You can view the details in your Payment History section.',
                            confirmButtonText: 'OK'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                location.reload();
                            }
                        });
                    },
                    error: function(xhr) {
                        setPaymentOverlayState(false);
                        setPayLoading(false);
                        const errorMessage = xhr.responseJSON?.message || 'BillDesk payment verification failed.';
                        Swal.fire({
                            icon: 'error',
                            title: 'Payment Verification Failed',
                            text: errorMessage,
                            confirmButtonText: 'OK'
                        });
                    }
                });
            };

            const config = {
                responseHandler: responseHandler,
                flowConfig: flowConfig,
                flowType: "payments"
            };

            window.loadBillDeskSdk(config);
        }

        function verifyPayment(response) {
            $.ajax({
                url: "{{ route('user.verifyPayment') }}",
                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();
                    setPaymentOverlayState(false);
                    const paymentSuccess = document.getElementById('paymentSuccess');
                    if (res.message === 'Payment successful') {
                        if (res.receipt_page_url) {
                            window.location.href = res.receipt_page_url;
                            return;
                        }

                        location.reload();

                        // Call the API to create the receipt
                        // createReceipt(res.amount); // Call receipt API after successful payment verification

                    } 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 history shortly.',
                            confirmButtonText: 'OK'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                location.reload();
                            }
                        });
                    } else {
                        // paymentSuccess.textContent = 'Payment verification failed.';
                        // paymentSuccess.style.display = 'block';
                        // paymentSuccess.style.color = 'red';

                        // Failure alert using SweetAlert2
                        Swal.fire({
                            icon: 'error',
                            title: 'Payment Verification Failed',
                            text: 'There was an issue with verifying your payment. Please try again.',
                            confirmButtonText: 'OK'
                        });
                    }
                },
                error: function() {
                    Swal.close();
                    setPaymentOverlayState(false);
                    const paymentSuccess = document.getElementById('paymentSuccess');
                    // paymentSuccess.textContent = 'Payment verification failed.';
                    // paymentSuccess.style.display = 'block';
                    // paymentSuccess.style.color = 'red';

                    // Failure alert using SweetAlert2
                    Swal.fire({
                        icon: 'error',
                        title: 'Payment Verification Failed',
                        text: 'There was an issue with verifying your payment. Please try again.',
                        confirmButtonText: 'OK'
                    });
                }
            });
        }
    });

    // document.addEventListener('DOMContentLoaded', function() {
    //     const backButton = document.querySelector('.btn-back');
    //     const paymentTable1 = document.querySelector('.payment-section .payment-table-1');
    //     const paymentTable2 = document.querySelector('.payment-section .payment-table-2');
        
    //     // Add event listener to the Back button
    //     if (backButton && paymentTable1 && paymentTable2) {
    //         backButton.addEventListener('click', function(e) {
    //             e.preventDefault(); // Prevent form submission

    //             // Hide Step 2 and show Step 1
    //             paymentTable2.style.display = 'none';  // Hide Step 2
    //             paymentTable1.style.display = 'block'; // Show Step 1
    //         });
    //     }
    // });

    document.addEventListener('DOMContentLoaded', function() {
        const backButton = document.querySelector('.btn-back');
        const paymentTable1 = document.querySelector('.payment-section .payment-table-1');
        const paymentTable1Title = document.querySelector('.payment-section .payment-table-1-title');
        const paymentTable2 = document.querySelector('.payment-section .payment-table-2');
        
        // Add event listener to the Back button
        if (backButton && paymentTable1 && paymentTable2) {
            backButton.addEventListener('click', function(e) {
                // Reload the page to reset everything
                window.location.reload();
            });
        }
    });
    

    // Function to call the receipt API after payment verification
    // function createReceipt(amount) {
    //     const url = 'https://fmtest.dishco.com/shawmanservices/api/CmsSaveMemberReceipt/FunSaveMemberReceipt';

    //     // Prepare POST data
    //     const postData = {
    //         ClientId: 455.001,                  // Example ClientId
    //         ClubId: 69,                            // Example ClubId
    //         MemberCode: "EXE63",                   // Member ID from Laravel
    //         Narration: 'Website Payment',          // Payment description
    //         Amount: amount,                        // Payment amount from verified payment
    //         NEFTNo: 0,                             // Example NEFT number
    //         SourceApp: 'CMSPTNR',                  // Source application
    //         PackageName: 'e91olwsHJ899HTGIEHiR5QxaMnNBZaTEAB0M=' // Optional package name
    //     };

    //     $.ajax({
    //         url: url,
    //         type: 'POST',
    //         headers: {
    //             'Content-Type': 'application/json', // Important
    //             'ShawManKey': 'xvIvkuxKczCf8sapHZv5ia9qzPEB9iPRvtLr4iJn4SzmMjfuWgVvSsXvyw==' // Put your actual ShawManKey
    //         },
    //         data: JSON.stringify(postData), // Send data as JSON string
    //         success: function(response) {
    //             // Check StatusDescription
    //             if (response.StatusDescription === "Success") {
    //                 alert("Receipt created successfully!\nErrorMessage: " + response.Result[0].ErrorMessage);
    //             } else {
    //                 alert("Receipt creation failed!\nStatus: " + response.StatusDescription);
    //             }
    //         },
    //         error: function(xhr, status, error) {
    //             console.error("AJAX Error:", status, 
                    
    //             );
    //             alert("Something went wrong while creating receipt.");
    //         }
    //     });
    // }

    // Function to call the receipt API after payment verification
    function createReceipt(amount) {
        const url = 'https://fmtest.dishco.com/shawmanservices/api/CmsSaveMemberReceipt/FunSaveMemberReceipt';

        // Prepare query string parameters
        const params = new URLSearchParams({
            ClientId: '455.001',                  // Example ClientId
            Clubid: '69',                         // Example ClubId
            MemberCode: 'EXE63',                  // Member ID from Laravel
            Narration: 'WebsitePayment',          // Payment description
            Amount: amount,                       // Payment amount from verified payment
            NEFTNo: '0',                          // Example NEFT number
            SourceApp: 'CMSPTNR',                 // Source application
            PackageName: 'e91olwsHJ899HTGIEHiR5QxaMnNBZaTEAB0M=' // Optional package name
        });

        // Construct the full URL with query parameters
        const requestUrl = `${url}?${params.toString()}`;

        console.log("Sending request to API:", requestUrl); // Log the full request URL

        $.ajax({
            url: requestUrl,  // Use GET method with parameters in the URL
            type: 'POST',     // POST method for submitting data
            headers: {
                'Content-Type': 'application/json', // Important (even though we're sending params in the URL)
                'ShawManKey': 'xvIvkuxKczCf8sapHZv5ia9qzPEB9iPRvtLr4iJn4SzmMjfuWgVvSsXvyw==' // Your ShawManKey
            },
            success: function(response) {
                console.log("API Response:", response); // Log the response received from the API

                // Check StatusDescription
                if (response.StatusDescription === "Success") {
                    // alert("Receipt created successfully!\nErrorMessage: " + response.Result[0].ErrorMessage);
                    Swal.fire({
                        icon: 'success',
                        title: 'Receipt Created',
                        text: 'Receipt created successfully!\nErrorMessage: ' + response.Result[0].ErrorMessage,
                        confirmButtonText: 'OK'
                    });
                } else {
                    // alert("Receipt creation failed!\nStatus: " + response.StatusDescription);
                    Swal.fire({
                        icon: 'error',
                        title: 'Receipt Creation Failed',
                        text: 'Receipt creation failed!\nStatus: ' + response.StatusDescription,
                        confirmButtonText: 'OK'
                    });
                }
            },
            error: function(xhr, status, error) {
                console.error("AJAX Error:", error);  // Log the error message
                console.error("Status:", status);     // Log the status
                console.error("Response Text:", xhr.responseText);  // Log the full response text from the server
                // alert("Something went wrong while creating receipt.\nStatus: " + status + "\nError: " + error);
                Swal.fire({
                    icon: 'error',
                    title: 'AJAX Error',
                    text: 'Something went wrong while creating receipt.\nStatus: ' + status + '\nError: ' + error,
                    confirmButtonText: 'OK'
                });
            }
        });
    }

    // document.addEventListener('DOMContentLoaded', function() {
    //     const outstandingRadio = document.getElementById('outstanding');
    //     const otherAmountRadio = document.getElementById('other_amount');
    //     const payAmountInput = document.getElementById('PayAmount');

    //     // When "Outstanding" is selected, set the amount to the outstanding balance
    //     outstandingRadio.addEventListener('change', function() {
    //         if (outstandingRadio.checked) {
    //             payAmountInput.value = "{{ $outstandingBalance }}"; // Set the outstanding balance to the input field
    //         }
    //     });

    //     // When "Other Amount" is selected, clear the input field
    //     otherAmountRadio.addEventListener('change', function() {
    //         if (otherAmountRadio.checked) {
    //             payAmountInput.value = ''; // Clear the input field
    //         }
    //     });
    // });

    // document.addEventListener('DOMContentLoaded', function() {
    //     const outstandingRadio = document.getElementById('outstanding');
    //     const otherAmountRadio = document.getElementById('other_amount');
    //     const amountInput = document.getElementById('PayAmount');
    //     const displayAmount = document.getElementById('displayAmount');

    //     outstandingRadio.addEventListener('change', function() {
    //         if (outstandingRadio.checked) {
    //             amountInput.value = "{{ $outstandingBalance }}"; // Set the outstanding balance
    //             displayAmount.textContent = `₹ ${amountInput.value}`; // Update displayed amount
    //         }
    //     });

    //     otherAmountRadio.addEventListener('change', function() {
    //         if (otherAmountRadio.checked) {
    //             amountInput.value = ''; // Clear input field
    //             displayAmount.textContent = '₹ 0'; // Reset displayed amount
    //         }
    //     });

    //     amountInput.addEventListener('input', function() {
    //         const enteredAmount = amountInput.value;
    //         displayAmount.textContent = `₹ ${enteredAmount}`; // Update displayed amount dynamically
    //     });
    // });

    document.addEventListener('DOMContentLoaded', function() {
        const outstandingRadio = document.getElementById('outstanding');
        const otherAmountRadio = document.getElementById('other_amount');
        const amountInput = document.getElementById('PayAmount');
        const displayAmount = document.getElementById('displayAmount');
        
        const outstandingBalance = Number(@json($outstandingBalance));
        const hasNegativeOutstandingBalance = Number.isFinite(outstandingBalance) && outstandingBalance < 0;

        if (hasNegativeOutstandingBalance) {
            otherAmountRadio.checked = true;
            amountInput.value = '';
            displayAmount.textContent = '₹ 0';
        }
        
        // Initially, set the value if "Outstanding" is selected by default
        if (outstandingRadio.checked) {
            if (hasNegativeOutstandingBalance) {
                otherAmountRadio.checked = true;
                amountInput.value = '';
                displayAmount.textContent = '₹ 0';
            } else {
                amountInput.value = outstandingBalance; // Set the outstanding balance in the input
                displayAmount.textContent = `₹ ${amountInput.value}`; // Update the displayed amount
            }
        }

        // When "Outstanding" radio is selected
        outstandingRadio.addEventListener('change', function() {
            if (outstandingRadio.checked) {
                if (hasNegativeOutstandingBalance) {
                    otherAmountRadio.checked = true;
                    amountInput.value = '';
                    displayAmount.textContent = '₹ 0';
                    return;
                }

                // If the "Outstanding" radio is selected again, restore the outstanding balance
                amountInput.value = outstandingBalance; // Restore the outstanding balance
                displayAmount.textContent = `₹ ${amountInput.value}`; // Update the display with the balance
            }
        });

        // When "Other Amount" radio is selected
        otherAmountRadio.addEventListener('change', function() {
            if (otherAmountRadio.checked) {
                amountInput.value = ''; // Clear the input field for "Other Amount"
                displayAmount.textContent = '₹ 0'; // Reset the display amount to ₹ 0
            }
        });

        // Listen for changes in the input field (for "Outstanding" balance)
        amountInput.addEventListener('input', function() {
            if (outstandingRadio.checked) {
                // If the "Outstanding" radio is selected and the user starts typing
                // Automatically switch to "Other Amount" radio and clear the input
                otherAmountRadio.checked = true;  // Select "Other Amount" radio
                amountInput.value = '';          // Clear the input field
                displayAmount.textContent = '₹ 0'; // Reset the display amount to ₹ 0
            }
        });
    });
</script>
@endpush