@extends('layouts.app')
@section('title')Plans @endsection
@section('content')
<style>
    .select2-container{
        width: 100% !important;
    }
    .action-column {
        width: 200px; /* Adjust the width as needed */
    }
    .action-btn {
        /*width: 48%; Adjust the width as needed */
        margin-right: 2%; /* Add some space between the buttons */
    }
    #checkoutListingTable tbody tr td button {
        margin: 1px;
    }

    /* Sorting styles */
    .sortable {
        cursor: pointer;
        position: relative;
        user-select: none;
        padding-right: 20px !important;
    }
    .sortable:hover {
        background-color: #f5f5f5;
    }
    .sortable::after {
        content: '↕';
        position: absolute;
        right: 8px;
        opacity: 0.5;
        font-size: 12px;
    }
    .sortable.asc::after {
        content: '↑';
        opacity: 1;
        color: #007bff;
    }
    .sortable.desc::after {
        content: '↓';
        opacity: 1;
        color: #007bff;
    }
    .sort-indicator {
        font-size: 12px;
        margin-left: 5px;
        color: #007bff;
    }
</style>
<section class="content top-head">
    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary border-no">
                <div class="box-header with-border blue-back">
                    <h3 class="box-title">{{ __('User List') }}</h3>
                </div>
                <div class="box-body">
                    <!-- Search Form -->
                    <form method="GET" action="{{ route('checkout.listings', encrypt($plan->id)) }}" id="searchForm">
                        <!-- Hidden inputs to maintain sorting -->
                        <input type="hidden" name="sort_by" value="{{ request('sort_by', 'name') }}">
                        <input type="hidden" name="sort_direction" value="{{ request('sort_direction', 'asc') }}">

                        <div class="row d-flex justify-content-start m-3" style="margin: 10px 0;align-items: center;">
                            <label for="page_limit" style="font-weight:500; font-s0ze12px; margin-right: 5px;">Limit:</label>
                            <select name="page_limit" id="page_limit" class="form-control" style="width: 6%;">
                                <option value="25" {{ request('page_limit') == '25' ? 'selected' : '' }}>25</option>
                                <option value="50" {{ request('page_limit') == '50' ? 'selected' : '' }}>50</option>
                                <option value="100" {{ request('page_limit') == '100' ? 'selected' : '' }}>100</option>
                            </select>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-3">
                                <input type="text" name="search_name" class="form-control" placeholder="Search by name" value="{{ request('search_name') }}">
                                <input type="hidden" id="search_user_id" name="search_user_id" value="{{ request('search_user_id') }}">
                            </div>
                            <div class="col-md-3">
                                <select name="search_status" class="form-control">
                                    <option value="">Search by status</option>
                                    <option value="1" {{ request('search_status') == '1' ? 'selected' : '' }}>Active</option>
                                    <option value="0" {{ request('search_status') == '0' ? 'selected' : '' }}>In-Active</option>
                                    <option value="2" {{ request('search_status') == '2' ? 'selected' : '' }}>Dormant</option>
                                    <option value="3" {{ request('search_status') == '3' ? 'selected' : '' }}>Terminated</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <select name="search_role" class="form-control">
                                    <option value="">Search by role</option>
                                    @if(Auth::user()->user_role == 1)
                                    <option value="2" {{ request('search_role') == '2' ? 'selected' : '' }}>Admin</option>
                                    @endif
                                    <option value="3" {{ request('search_role') == '3' ? 'selected' : '' }}>Agent</option>
                                    <option value="4" {{ request('search_role') == '4' ? 'selected' : '' }}>AR</option>
                                </select>
                            </div>
                            <div class="col-md-3 d-flex justify-content-end gap-2" style="gap:5px;">
                                <button type="submit" class="btn btn-primary">Search</button>
                                <a href="{{ route('checkout.listings', encrypt($plan->id)) }}" class="btn btn-default">Reset</a>
                            </div>
                        </div>
                    </form>

                    <!-- User Table -->
                    <div class="table-responsive">
                        <table class="table table-bordered" id="checkoutListingTable">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th class="sortable {{ request('sort_by') == 'name' ? request('sort_direction', 'asc') : '' }}" 
                                        data-sort="name">
                                        Name
                                    </th>
                                    <th class="sortable {{ request('sort_by') == 'email' ? request('sort_direction', 'asc') : '' }}" 
                                        data-sort="email">
                                        Email
                                    </th>
                                    <th class="sortable {{ request('sort_by') == 'plan_name' ? request('sort_direction', 'asc') : '' }}" 
                                        data-sort="plan_name">
                                        Plan Name
                                    </th>
                                    <th class="sortable {{ request('sort_by') == 'starts_on' ? request('sort_direction', 'asc') : '' }}" 
                                        data-sort="starts_on">
                                        Starts On
                                    </th>
                                    <th class="sortable {{ request('sort_by') == 'admin_start_date' ? request('sort_direction', 'asc') : '' }}" 
                                        data-sort="admin_start_date">
                                        Admin Start Date
                                    </th>
                                    <th class="sortable {{ request('sort_by') == 'verification_status' ? request('sort_direction', 'asc') : '' }}" 
                                        data-sort="verification_status">
                                        Verification Status
                                    </th>
                                    <th>Role</th>
                                    <th class="action-column">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($users as $user)
                                    <tr>
                                        <td>{{ ($users->currentPage() - 1) * $users->perPage() + $loop->iteration }}</td>
                                        <td>{{ $user->name }} {{ strtoupper(substr($user->last_name, 0, 1)) }}.</td>
                                        <td>{{ $user->email }}</td>
                                        <td>{{ isset($user->subscriptionPlan) ? $user->subscriptionPlan->name : 'No Subscription' }}</td>
                                        <td>{{ isset($user->stripe_subsDate) ? date('m-d-Y',strtotime($user->stripe_subsDate)) : ''}}</td>
                                        <td>{{ isset($user->subscription_start_date) ? date('m-d-Y',strtotime($user->subscription_start_date)) : ''}}</td>
                                        <td>
                                            @if($user->latestUserVerification)
                                                @if($user->latestUserVerification->verified && $user->latestUserVerification->payment_method_type == 'card')
                                                    Verified
                                                @elseif($user->latestUserVerification->verified && $user->latestUserVerification->payment_method_type == 'ach')
                                                    Verified
                                                @else
                                                    <a href="#" onclick="openManualVerificationModal('{{ $user->id }}', '{{ $user->latestUserVerification->setup_intent_id }}')">Verify</a>
                                                @endif
                                            @else
                                                NA
                                            @endif
                                        </td>
                                        @if($user->user_role == 2)
                                        <td>Admin</td>
                                        @elseif($user->user_role == 3)
                                        <td>Agent</td>
                                        @elseif($user->user_role == 4)
                                        <td>AR</td>
                                        @else
                                        <td>Super Admin</td>
                                        @endif
                                        <td>
                                            <button class="btn btn-primary btn-sm action-btn" onclick="openAddPaymentMethodModal('{{ $user->id }}', '{{ $user->email }}', '{{ $user->name.' '.$user->last_name }}')" @if($user->subscription_plan != null) disabled @endif>Add Subscription</button>
                                            @if(isset($user) && $user->subscription_plan != null)
                                                <button class="btn btn-danger btn-sm action-btn" data-userId="{{ isset($user) ? $user->id : '' }}" id="cancelSubscription">Cancel</button>
                                            @endif
                                            <form id="cancel-subscription-form" method="POST" action="{{ route('transaction.cancel') }}" style="display:none;">
                                                @csrf
                                                <input type="hidden" name="sub_id" id="cancel-user-id">
                                            </form>
                                            @if(isset($user) && $user->subscription_plan == null)
                                                <button class="btn btn-info btn-sm action-btn" onclick="openSetStartDateModal('{{ $user->id }}', '{{ $user->subscription_start_date }}')" @if($user->subscription_start_date != null) disabled @endif>Assign Start Date</button>
                                            @endif
                                            @php
                                                $latestVerification = $user->latestUserVerification;
                                                $hasUserPlan = \App\UserPlan::where('user_id', $user->id)->exists();
                                            @endphp
                                            @if($latestVerification && !$latestVerification->verified && $latestVerification->payment_method_type == 'ach' && !$hasUserPlan)
                                                <button class="btn btn-warning btn-sm action-btn" onclick="resetAchVerification('{{ $user->id }}')">Reset</button>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="d-flex justify-content-end">
                        {{ $users->appends(request()->query())->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Cancel Subscription Modal -->
<div class="modal fade" id="cancelConfirmModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered" role="document" style="max-width: 50%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" style="color:white;">Confirm Cancellation <span id="user_names" style="font-size:18px;"></span></h4>
            </div>
            <div class="modal-body">
                Are you sure you want to cancel this subscription?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
                <button type="button" class="btn btn-danger" id="confirmCancelBtn">Yes, Cancel</button>
            </div>
        </div>
    </div>
</div>
<!-- end -->

<!-- Add Payment Method Modal -->
<div class="modal fade" id="addPaymentMethodModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered" role="document" style="max-width: 50%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" style="color:white;">Subscription <span id="user_names" style="font-size:18px;"></span></h4>
            </div>
            <div class="modal-body">
                <form id="add-payment-method-form">
                    <input type="hidden" id="user_ids">
                    <input type="hidden" id="plan_id" value="{{ $plan->id }}">
                    <div class="form-group row">
                        <div class="col-md-6">
                            <label>Subscription Type</label>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="subscription_type" id="individual" value="individual" checked>
                                <label class="form-check-label" for="individual">
                                    Individual
                                </label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label>&nbsp;</label>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="subscription_type" id="group" value="group">
                                <label class="form-check-label" for="group">
                                    Group
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-4">
                            <label for="plan-selection">Select Plan</label>
                            <div id="plan-selection">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="plan_id" id="selectedPlan" value="" checked>
                                    <label class="form-check-label" for="plan-{{ $plan->id }}">
                                        {{ $plan->name }}
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label for="start-date">Select Start Date</label>
                            <input type="date" id="start_date" name="start_date" class="form-control" required>
                        </div>
                        <div class="col-md-4">
                            <input class="form-check-input" type="checkbox" id="charge_now" name="charge_now" value="1">
                            <label class="form-check-label"  for="charge_now">Charge Now</label>
                        </div>
                    </div>
                    <div id="group-fields" class="form-group row" style="display: none;">
                        <div class="col-md-6">
                            <label for="quantity">Quantity <span class="text-danger">*</span></label>
                            <input type="number" id="quantity" name="quantity" class="form-control" min="1" value="1" required>
                            <small class="text-muted">Minimum quantity for group subscriptions is 2</small>
                        </div>
                        <div class="col-md-6">
                            <label for="memo">Memo <span class="text-danger">*</span></label>
                            <textarea id="memo" name="memo" class="form-control" rows="3" placeholder="Enter memo for group subscription"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="payment-method">Select Payment Method</label>
                        <select class="form-control" id="payment-method" name="payment_method">
                            <option value="null">Select Payment Method</option>
                            <option value="card">Credit or Debit Card</option>
                            <option value="ach">ACH Bank Transfer</option>
                        </select>
                        <span class="instruction" style="color:red;font-size:14px;display:block;">**Please note a 3.5% processing fee will be added to your total for card payments.</span>
                    </div>
                    <div id="card-payment" class="payment-method" style="display: none;">
                        <div class="form-group">
                            <label for="card-element" style="margin-bottom:10px;">Credit or debit card</label>
                            <div id="card-element" class="form-control">
                                <!-- A Stripe Element will be inserted here. -->
                            </div>
                            <!-- Used to display form errors. -->
                            <div id="card-errors" role="alert"></div>
                        </div>
                    </div>
                    <div id="ach-payment" class="payment-method" style="display: none;">
                        <input type="hidden" id="user_email">
                        <div class="form-group">
                            <label for="account-holder-name">Account Holder Name</label>
                            <input type="text" class="form-control" id="account-holder-name" name="account_holder_name">
                        </div>
                        <div class="form-group">
                            <label for="account-holder-type">Account Holder Type</label>
                            <select id="account-holder-type" class="form-control">
                                <option value="individual">Individual</option>
                                <option value="company">Company</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="routing-number">Routing Number</label>
                            <input type="text" class="form-control" id="routing-number" name="routing_number">
                        </div>
                        <div class="form-group">
                            <label for="account-number">Account Number</label>
                            <input type="text" class="form-control" id="account-number" name="account_number">
                        </div>
                        <div id="ach-errors" role="alert"></div>
                    </div>
                    <div class="form-group text-center d-flex justify-content-between pt-3 mt-20" bis_skin_checked="1">
                        <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
                        <div class="d-flex">
                            <button id="submit-add-payment-method" class="btn btn-lg btn-primary">SUBMIT</button>
                            <span id="apmLoader" style="display: none;margin-left:5px;"><i class="fa fa-spinner fa-spin" style="font-size:24px"></i></span>
                        </div>
                    </div>
                    <!-- <button id="submit-add-payment-method" style="margin-top:15px;">Submit</button> -->
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Assign Plan Modal -->
<div class="modal fade" id="assignPlanModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered" role="document" style="max-width: 50%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Assign Plan</h4>
            </div>
            <div class="modal-body">
                <form id="assign-plan-form">
                    <input type="hidden" id="assign_user_id">
                    <div class="form-group row">
                        <div class="col-md-6">
                            <label for="plan-selection">Select Plan</label>
                            <div id="plan-selection">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="plan_id" id="selectedPlan" value="" checked>
                                    <label class="form-check-label" for="plan-{{ $plan->id }}">
                                        {{ $plan->name }}
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label for="start-date">Select Start Date</label>
                            <input type="date" id="start_date" name="start_date" class="form-control" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="payment-method-type">Select Payment Method Type</label>
                        <select id="payment-method-type" name="payment_method_type" class="form-control" required>
                            <option value="">Select</option>
                            <option value="card" data-plan="{{ encrypt($plan->card_plan_id) }}">Card</option>
                            <option value="ach" data-plan="{{ encrypt($plan->plan_id) }}">ACH</option>
                        </select>
                        <span id="fetchPaymentMethodLoader" style="display: none;margin-left:5px;"><i class="fa fa-spinner fa-spin" style="font-size:24px"></i></span>
                    </div>
                    <div id="existing-payment-methods" style="margin-bottom:15px; display: none;">
                        <label for="existing-payment-method">Select Existing Payment Method</label>
                        <div id="existing-payment-method-list"></div>
                    </div>
                    <div id="no-existing-payment-methods" style="display: none;">
                        <p>No existing payment methods found.</p>
                    </div>
                    <div id="assign-plan-errors" class="alert alert-danger" style="display: none;"></div>
                    <div class="form-group text-center d-flex justify-content-between pt-3 mt-10" bis_skin_checked="1">
                        <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
                        <div class="d-flex">
                            <button id="submit-assign-plan" class="btn btn-lg btn-success" disabled>SUBMIT</button>
                            <span id="apLoader" style="display: none;margin-left:5px;"><i class="fa fa-spinner fa-spin" style="font-size:24px"></i></span>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Manual Verification Modal -->
<div class="modal fade" id="manualVerificationModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document" style="max-width:50%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="manualVerificationModalLabel">Verify Bank Account Manually</h4>
                </button>
            </div>
            <div class="modal-body">
                <form id="manual-verification-form">
                    <input type="hidden" id="manual-verification-user-id">
                    <input type="hidden" id="manual-verification-payment-method-id">
                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-6">
                                <label for="amount1">Amount 1</label>
                                <input type="number" step="0.01" min="0" max="100" class="form-control" id="amount1" required>
                            </div>
                            <div class="col-md-6">
                                <label for="amount2">Amount 2</label>
                                <input type="number" step="0.01" min="0" max="100" class="form-control" id="amount2" required>
                            </div>
                        </div>
                    </div>
                    <div id="manual-verification-errors" class="alert alert-danger" style="display: none;"></div>
                    <div class="d-flex">
                        <button type="submit" class="btn btn-primary">Verify</button>
                        <span id="mvLoader" style="display: none;margin-left:5px;"><i class="fa fa-spinner fa-spin" style="font-size:24px"></i></span>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Set Subscription Start Date Modal -->
<div class="modal fade" id="setStartDateModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered" role="document" style="max-width: 30%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Set Subscription Start Date</h4>
            </div>
            <div class="modal-body">
                <form id="set-start-date-form">
                    <input type="hidden" id="ssd_user_id">
                    <div class="form-group">
                        <label for="ssd_start_date">Start Date</label>
                        <input type="date" class="form-control" id="ssd_start_date" name="ssd_start_date" required>
                    </div>
                    <div id="ssd_errors" class="alert alert-danger" style="display:none;"></div>
                    <div class="d-flex justify-content-between">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-success">Save</button>
                        <span id="ssdLoader" style="display:none;margin-left:5px;"><i class="fa fa-spinner fa-spin"></i></span>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="https://js.stripe.com/v3/"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> -->
<script>
    let stripe = Stripe('{{ env('STRIPE_KEY') }}');
    let elements = stripe.elements();
    var style = {
            base: {
                color: '#32325d',
                fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
                fontSmoothing: 'antialiased',
                fontSize: '16px',
                '::placeholder': {
                    color: '#aab7c4'
                }
            },
            invalid: {
                color: '#fa755a',
                iconColor: '#fa755a'
            }
        };
    let cardElement = elements.create('card', {hidePostalCode: true, style: style});
    let clientSecret;

    function mountCardElement() {
        cardElement.mount('#card-element');
    }

    function unmountCardElement() {
        cardElement.unmount();
    }

    document.getElementById('payment-method').addEventListener('change', async function(event) {
        const selectedPaymentMethod = event.target.value;
        if (selectedPaymentMethod === 'card') {
            $('.instruction').show();
            document.getElementById('card-payment').style.display = 'block';
            document.getElementById('ach-payment').style.display = 'none';
            mountCardElement();
        } else if (selectedPaymentMethod === 'ach') {
            $('.instruction').hide();
            document.getElementById('card-payment').style.display = 'none';
            document.getElementById('ach-payment').style.display = 'block';
            unmountCardElement();
        } else {
            document.getElementById('card-payment').style.display = 'none';
            document.getElementById('ach-payment').style.display = 'none';
        }
    });

    // Handle subscription type radio button changes
    document.querySelectorAll('input[name="subscription_type"]').forEach(function(radio) {
        radio.addEventListener('change', function() {
            const groupFields = document.getElementById('group-fields');
            const chargeNowContainer = document.querySelector('.col-md-4:last-child');
            
            if (this.value === 'group') {
                groupFields.style.display = 'block';
                // Hide charge now checkbox for group subscriptions
                chargeNowContainer.style.display = 'none';
                document.getElementById('charge_now').checked = false;
            } else {
                groupFields.style.display = 'none';
                // Show charge now checkbox for individual subscriptions
                chargeNowContainer.style.display = 'block';
                // Reset group fields when switching to individual
                document.getElementById('quantity').value = '1';
                document.getElementById('memo').value = '';
            }
            
            // Reset the entire form when switching subscription types
            resetFormFields();
        });
    });

    // async function openAddPaymentMethodModal(userId, email) {
    //     resetModal();
    //     $('#addPaymentMethodModal').modal('show');
    //     $('#user_ids').val(userId);
    //     const setupIntent = await createSetupIntent(userId);
    //     clientSecret = setupIntent.client_secret;
    //     $('#user_email').val(email);
    // }
    async function openAddPaymentMethodModal(userId, email, userName) {
        resetModal();
        try {
            const setupIntent = await createSetupIntent(userId);
            if(setupIntent.status) {
                clientSecret = setupIntent.data.client_secret;
                $('#user_email').val(email);
                $('#user_ids').val(userId);
                $('#user_names').text(' for ' + userName);
                $('#addPaymentMethodModal').modal('show');
            } else {
                swal('Error', setupIntent.message, 'error');
            }
        } catch (error) {
            swal('Error', error.message, 'error');
        }
    }

    document.getElementById('add-payment-method-form').onsubmit = async (event) => {
        event.preventDefault();
        const userId = document.getElementById('user_ids').value;
        const selectedPaymentMethod = document.getElementById('payment-method').value;
        const user_email = document.getElementById('user_email').value;
        const user_name = document.getElementById('account-holder-name').value;
        const plan_id = document.getElementById('plan_id').value;
        const start_date = document.getElementById('start_date').value;
        const subscription_type = document.querySelector('input[name="subscription_type"]:checked').value;
        const quantity = document.getElementById('quantity').value;
        const memo = document.getElementById('memo').value;

        // Validate group fields if group is selected
        if (subscription_type === 'group') {
            if (!quantity || parseInt(quantity) < 2) {
                swal('Error', 'Quantity must be greater than 1 for group subscriptions.', 'error');
                return;
            }
            if (!memo || memo.trim() === '') {
                swal('Error', 'Memo is required for group subscriptions.', 'error');
                return;
            }
        }

        // Show loader and disable button
        document.getElementById('apmLoader').style.display = 'block';
        const submitPMButton = document.getElementById('submit-add-payment-method');
        submitPMButton.disabled = true;

        if (selectedPaymentMethod === 'card') {
            const { paymentMethod, error } = await stripe.createPaymentMethod({
                type: 'card',
                card: cardElement,
                billing_details: {
                    name: user_name,
                    email: user_email,
                },
            });
            if (error) {
                document.getElementById('card-errors').textContent = error.message;
                swal("Error", error.message, "error");
            } else {
                await addPaymentMethod(userId, paymentMethod.id, 'card', plan_id, subscription_type, quantity, memo);
                // await createSubscription(userId, paymentMethod.id, 'card');
            }
        } else if (selectedPaymentMethod === 'ach') {
            const accountHolderName = document.getElementById('account-holder-name').value;
            const routingNumber = document.getElementById('routing-number').value;
            const accountNumber = document.getElementById('account-number').value;
            const accountHolderType = document.getElementById('account-holder-type').value;
            const email = document.getElementById('user_email').value;

            const { setupIntent, error } = await stripe.confirmUsBankAccountSetup(
                clientSecret, {
                payment_method: {
                    us_bank_account: {
                        account_number: accountNumber,
                        routing_number: routingNumber,
                        account_holder_type: accountHolderType,
                    },
                    billing_details: {
                        name: accountHolderName,
                        email: email,
                    },
                },
            });

            if (error) {
                document.getElementById('ach-errors').textContent = error.message;
                swal("Error", error.message, "error");
            } else {
                await addPaymentMethod(userId, setupIntent.id, 'ach', plan_id, subscription_type, quantity, memo);
            }
        } else {
            swal('Error', 'Please select a payment method.', 'error');
        }
        // Hide loader and enable button
        document.getElementById('apmLoader').style.display = 'none';
        submitPMButton.disabled = false;
    };

    async function addPaymentMethod(userId, paymentMethodId, paymentMethodType, plan_id, subscription_type, quantity, memo) {
        const response = await fetch(`{{ url('add-payment-method') }}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({
                user_id: userId,
                payment_method_id: paymentMethodId,
                payment_method_type: paymentMethodType,
                plan_id: plan_id,
                start_date: document.getElementById('start_date').value,
                charge_now: document.getElementById('charge_now').checked ? 1 : 0,
                subscription_type: subscription_type,
                quantity: quantity,
                memo: memo
            })
        });
        const result = await response.json();
        if (!result.success) {
            if(paymentMethodType == 'card') {
                document.getElementById('card-errors').textContent = result.message;
            } else {
                document.getElementById('ach-errors').textContent = result.message;
            }
        } else {
            if (paymentMethodType === 'card') {
                $('#addPaymentMethodModal').modal('hide');
                swal({
                    title: "Success",
                    text: 'Subscription created successfully.',
                    type: "success",
                    confirmButtonClass: "btn-success",
                    confirmButtonText: "Ok",
                    closeOnConfirm: false,
                },
                function(isConfirm) {
                    if (isConfirm) {
                        location.reload();
                    }
                });
            } else {
                $('#addPaymentMethodModal').modal('hide');
                swal({
                    title: "Success",
                    text: 'Payment method added successfully. Please check your bank details for micro-deposits.',
                    type: "success",
                    confirmButtonClass: "btn-success",
                    confirmButtonText: "Ok",
                    closeOnConfirm: false,
                },
                function(isConfirm) {
                    if (isConfirm) {
                        location.reload();
                    }
                });
            }
        }
    }

    document.getElementById('manual-verification-form').onsubmit = async (event) => {
        event.preventDefault();
        const userId = document.getElementById('manual-verification-user-id').value;
        const paymentMethodId = document.getElementById('manual-verification-payment-method-id').value;
        let amount1 = document.getElementById('amount1').value;
        let amount2 = document.getElementById('amount2').value;

        amount1 = amount1.includes('.') ? amount1.split('.').join('') : amount1;
        amount2 = amount2.includes('.') ? amount2.split('.').join('') : amount2;

        amount1 = parseInt(amount1, 10);
        amount2 = parseInt(amount2, 10);

        // Show loader and disable button
        document.getElementById('mvLoader').style.display = 'block';
        const submitButton = document.querySelector('#manual-verification-form button[type="submit"]');
        submitButton.disabled = true;

        try {
            const response = await fetch(`{{ url('verify-microdeposits') }}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({
                    user_id: userId,
                    payment_method_id: paymentMethodId,
                    amounts: [amount1, amount2],
                    action: 'verifyAndCreate',
                })
            });
            const result = await response.json();
            if (result.error) {
                document.getElementById('manual-verification-errors').textContent = result.error;
                document.getElementById('manual-verification-errors').style.display = 'block';
                document.getElementById('mvLoader').style.display = 'none';
                submitButton.disabled = false;
                swal("Error", result.error, "error");
            } else {
                swal({
                    title: "Success",
                    text: 'Subscription created successfully.',
                    type: "success",
                    confirmButtonClass: "btn-success",
                    confirmButtonText: "Ok",
                    closeOnConfirm: false,
                },
                async function(isConfirm) {
                    if (isConfirm) {
                        $('#manualVerificationModal').modal('hide');
                        location.reload();
                        // await createSubscription(userId, paymentMethodId, 'ach');
                    }
                });
            }
        } catch (error) {
            document.getElementById('manual-verification-errors').textContent = 'An error occurred while verifying the bank account.';
            document.getElementById('manual-verification-errors').style.display = 'block';
            swal("Error", 'An error occurred while verifying the bank account.', "error");
        } finally {
            // Hide loader and enable button
            document.getElementById('mvLoader').style.display = 'none';
            submitButton.disabled = false;
        }
    };

    function resetFormFields() {
        // Reset payment method selection
        document.getElementById('payment-method').value = 'null';
        document.getElementById('card-payment').style.display = 'none';
        document.getElementById('ach-payment').style.display = 'none';
        document.getElementById('card-errors').textContent = '';
        document.getElementById('ach-errors').textContent = '';
        
        // Reset payment method form fields
        document.getElementById('account-holder-name').value = '';
        document.getElementById('routing-number').value = '';
        document.getElementById('account-number').value = '';
        document.getElementById('account-holder-type').value = 'individual';
        
        // Unmount card element if mounted
        try {
            unmountCardElement();
        } catch (e) {
            // Card element might not be mounted
        }
    }

    function resetModal() {
        document.getElementById('add-payment-method-form').reset();
        document.getElementById('assign-plan-form').reset();
        document.getElementById('existing-payment-method-list').innerHTML = '';
        document.getElementById('existing-payment-methods').style.display = 'none';
        document.getElementById('no-existing-payment-methods').style.display = 'none';
        document.getElementById('assign-plan-errors').style.display = 'none';
        document.getElementById('submit-assign-plan').disabled = true;
        // Reset group fields visibility
        document.getElementById('group-fields').style.display = 'none';
        // Reset subscription type to individual
        document.getElementById('individual').checked = true;
        // Show charge now checkbox
        const chargeNowContainer = document.querySelector('.col-md-4:last-child');
        chargeNowContainer.style.display = 'block';
        // Reset form fields
        resetFormFields();
    }

    async function createSetupIntent(userId) {
        const response = await fetch(`{{ url('create-setup-intent') }}/${userId}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        });
        return await response.json();
    }

    // $(document).ready(function() {
    //     $('.table').DataTable({
    //         "pageLength": 25
    //     });
    // });

    function openManualVerificationModal(userId, paymentMethodId) {
        document.getElementById('manual-verification-user-id').value = userId;
        document.getElementById('manual-verification-payment-method-id').value = paymentMethodId;
        $('#manualVerificationModal').modal('show');
    }

    $(document).ready(function () {
        $(document).on('click', '.sortable', function() {
            const sortBy = $(this).data('sort');
            const currentSortBy = $('input[name="sort_by"]').val();
            const currentDirection = $('input[name="sort_direction"]').val();
            
            let newDirection = 'asc';
            if (currentSortBy === sortBy && currentDirection === 'asc') {
                newDirection = 'desc';
            }
            
            $('input[name="sort_by"]').val(sortBy);
            $('input[name="sort_direction"]').val(newDirection);
            
            $('#searchForm').submit();
        });
        $('#search_name').autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "{{ route('user.suggestions') }}",
                    data: {
                        term: request.term // The term the user types
                    },
                    success: function (data) {
                        response(data); // Pass the data to the autocomplete dropdown
                    }
                });
            },
            minLength: 2, // Minimum characters before triggering the search
            select: function (event, ui) {
                // When a user selects an option
                $('#search_name').val(ui.item.label); 
                $('#search_user_id').val(ui.item.id);
                return false;
            }
        });

        $('#page_limit').on('change', function () {
            $(this).closest('form').submit();
        });

        $(document).on('click', '#cancelSubscription', function () {
            var userId = $(this).attr('data-userId');
            console.log(userId);
            $('#cancel-user-id').val(userId);
            $('#cancelConfirmModal').modal('show');
        });

        $(document).on('click', '#confirmCancelBtn', function () {
            const userId = $('#cancel-user-id').val();
            $('#cancelConfirmModal').modal('hide');
            $('#cancel-subscription-form').submit();
        });

        $('#cancelConfirmModal').on('hidden.bs.modal', function () {
            $('#cancel-user-id').val('');
        });

        $('#set-start-date-form').on('submit', function(e) {
            e.preventDefault();
            let userId = $('#ssd_user_id').val();
            let startDate = $('#ssd_start_date').val();
            $('#ssdLoader').show();
            $('#ssd_errors').hide().text('');
            $.ajax({
                url: "{{ route('subscription.setStartDate') }}",
                method: "POST",
                data: {
                    user_id: userId,
                    start_date: startDate,
                    _token: "{{ csrf_token() }}"
                },
                success: function(response) {
                    $('#ssdLoader').hide();
                    if (response.success) {
                        $('#setStartDateModal').modal('hide');
                        swal("Success", response.message, "success");
                        setTimeout(function(){ location.reload(); }, 1000);
                    } else {
                        $('#ssd_errors').show().text(response.message || 'Error updating date.');
                    }
                },
                error: function(xhr) {
                    $('#ssdLoader').hide();
                    let msg = 'An error occurred.';
                    if (xhr.responseJSON && xhr.responseJSON.message) msg = xhr.responseJSON.message;
                    $('#ssd_errors').show().text(msg);
                }
            });
        });
    });

    function openSetStartDateModal(userId, currentDate) {
        $('#ssd_user_id').val(userId);
        $('#ssd_start_date').val(currentDate || '');
        $('#ssd_errors').hide().text('');
        $('#setStartDateModal').modal('show');
    }

    function resetAchVerification(userId) {
        swal({
            title: "Alert",
            text: 'Are you sure you want to reset ACH verification for this user?',
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: '#DD6B55',
            confirmButtonText: 'OK',
            cancelButtonText: "Cancel",
            closeOnConfirm: true,
            closeOnCancel: true
        },
        function(isConfirm) {
            if (isConfirm) {
                $.ajax({
                    url: '{{ route("reset-ach-verification") }}',
                    type: 'POST',
                    data: {
                        user_id: userId,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.success) {
                            swal({
                                title: "Success",
                                text: response.message,
                                type: "success",
                                confirmButtonClass: "btn-success",
                                confirmButtonText: "Ok",
                                closeOnConfirm: false
                            }, function(isConfirm) {
                                if (isConfirm) {
                                    location.reload();
                                }
                            });
                        } else {
                            swal("Error", response.message || "Reset failed.", "error");
                        }
                    },
                    error: function(xhr) {
                        swal("Error", "An error occurred.", "error");
                    }
                });
            }
        });
    }
</script>
@endsection