@extends('layouts.app')
@section('title')Plans @endsection
@section('content')
<style>
    .select2-container{
        width: 100% !important;
    }
    .defaultOptions{
        display: flex;
        align-items: center;
        gap: 20px;
        margin-top: 5px;
    }
</style>
<section class="content top-head">
    <div class="row">
        <div class="col-md-12">
            @if (session('success'))
                <div class="alert alert-success mt-1 tac">
                    <a class="close" data-dismiss="alert" aria-label="close">&times;</a>
                    <ul>
                        <li>{{ session('success') }}</li>
                    </ul>
                </div>
            @endif
            @if (session('error'))
                <div class="alert alert-danger mt-1 tac">
                    <a class="close" data-dismiss="alert" aria-label="close">&times;</a>
                    <ul>
                        <li>{{ session('error') }}</li>
                    </ul>
                </div>
            @endif
            <div class="box box-primary border-no">
                <div class="box-header with-border blue-back">
                    <h3 class="box-title">{{ __('Create Plan') }}</h3>
                </div>
                <div class="box-body">
                    <form method="POST" action="{{ route('plans.store') }}">
                        @csrf
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="plan_name">{{ __('Plan Name') }}</label>
                                    <span class="val-in">*</span>
                                    <input id="plan_name" type="text" class="form-control @error('plan_name') is-invalid @enderror" name="plan_name" value="{{ old('plan_name') }}" placeholder="Enter Plan Name" autofocus>
                                    @error('plan_name')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="plan_type">{{ __('Plan Type') }}</label>
                                    <span class="val-in">*</span>
                                    <select class="form-control @error('plan_type') is-invalid @enderror" name="plan_type" id="plan_type">
                                        <option value="all" {{ old('plan_type') == 'all' ? 'selected' : '' }}>Universal</option>
                                        <option value="agent" {{ old('plan_type') == 'agent' ? 'selected' : '' }}>Individual</option>
                                    </select>
                                    @error('plan_type')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <div class="row agent_listing" style="display: none;">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="agent_id">{{ __('Agents') }}</label>
                                    <span class="val-in">*</span>
                                    <select class="form-control @error('agent_id') is-invalid @enderror select2" name="agent_id[]" id="agent_id" multiple>
                                        <option value="" selected disabled>Please select agent</option>
                                        @foreach($agent_manager as $agent)
                                            <option value="{{ $agent->id }}" {{ old('agent_id') == $agent->id ? 'selected' : '' }}>{{ $agent->name . ' ' . $agent->last_name }}</option>
                                        @endforeach
                                    </select>
                                    @error('agent_id')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="plan_amount">{{ __('Amount') }}</label>
                                    <span class="val-in">*</span>
                                    <input id="plan_amount" type="number" class="form-control @error('plan_amount') is-invalid @enderror" name="plan_amount" value="{{ old('plan_amount') }}" placeholder="Enter Plan Amount" autofocus>
                                    @error('plan_amount')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>
                            <input type="hidden" name="plan_currency" id="plan_currency" value="usd">
                            <!-- <div class="col-md-6">
                                <div class="form-group">
                                    <label for="plan_currency">{{ __('Currency') }}</label>
                                    <span class="val-in">*</span>
                                    <select id="plan_currency" name="plan_currency" class="form-control @error('plan_currency') is-invalid @enderror">
                                        <option selected disabled value="">Please choose currency</option>
                                        <option value="usd" {{ old('plan_currency') == 'usd' ? 'selected' : '' }}>USD</option>
                                    </select>
                                    @error('plan_currency')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div> -->
                            
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="billing_period">{{ __('Billing Period') }}</label>
                                    <span class="val-in">*</span>
                                    <select name="billing_period" id="billing_period" class="form-control @error('billing_period') is-invalid @enderror">
                                        <option disabled selected value="">Choose billing Method</option>
                                        <option value="day" {{ old('billing_period') == 'day' ? 'selected' : '' }}>Daily</option>
                                        <option value="week" {{ old('billing_period') == 'week' ? 'selected' : '' }}>Weekly</option>
                                        <option value="month" {{ old('billing_period') == 'month' ? 'selected' : '' }}>Monthly</option>
                                        <option value="year" {{ old('billing_period') == 'year' ? 'selected' : '' }}>Yearly</option>
                                    </select>
                                    @error('billing_period')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <label for="description">{{ __('Description') }}</label>
                                <textarea class="form-control @error('description') is-invalid @enderror" cols="5" rows="5" name="description">{{ old('description') }}</textarea>
                                @error('description')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="default">Default</label>
                                <span class="val-in">*</span>
                                <div class="defaultOptions">
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="default" id="defaultYes" value="y" {{ old('default') == 'y' ? 'checked' : '' }}>
                                        <label class="form-check-label" for="defaultYes">
                                            Yes
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="default" id="defaultNo" value="n" {{ old('default') == 'n' ? 'checked' : '' }}>
                                        <label class="form-check-label" for="defaultNo">
                                            No
                                        </label>
                                    </div>
                                </div>
                                @error('default')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-6 d-none" style="display:none;">
                                    <div class="form-group">
                                        <label for="interval_count">{{ __('Interval Count') }}</label>
                                        <span class="val-in">*</span>
                                        <input id="interval_count" type="number" class="form-control @error('interval_count') is-invalid @enderror" name="interval_count" value="1" placeholder="Enter Plan Interval Count" autofocus>
                                        @error('interval_count')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                        @if(Auth::user()->user_role == 1 || (Auth::user()->user_role == 2 && Auth::user()->id == '36'))
                            <button type="submit" class="btn btn-primary">Save</button>
                        @endif
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
<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">{{ __('Plan List') }}</h3>
                </div>
                <div class="box-body">
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                                <tr>

                                    <th>Plan Name</th>
                                    <th>Amount</th>
                                    <th>Currency</th>
                                    <th>Type</th>
                                    <th>Agent</th>
                                    <th>Interval</th>
                                    <th>Description</th>
                                    <th>Default</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if(isset($plans))
                                    @foreach($plans as $plan)
                                        <tr>
                                            <td>{{ $plan->name ?? '' }}</td>
                                            <td>{{ isset($plan->price) ? '$' . number_format($plan->price / 100, 2) : '' }}</td>
                                            <td>{{ isset($plan->currency) ? strtoupper($plan->currency) : '' }}</td>
                                            <td>{{ isset($plan->plan_type) && $plan->plan_type == 'agent' ? 'Agent' : 'All' }}</td>
                                            <td>
                                                @if(isset($plan->agent_id))
                                                    @foreach($agents as $agent)
                                                        @if($agent->id == $plan->agent_id)
                                                            {{ $agent->name . ' ' . $agent->last_name }}
                                                        @endif
                                                    @endforeach
                                                @endif
                                            </td>
                                            <td>{{ isset($plan->billing_method) ? strtoupper($plan->billing_method . 'ly') : '' }}</td>
                                            <td>{{ isset($plan->description) ? strtoupper($plan->description) : '' }}</td>
                                            <td>
                                                <input type="radio" name="default_plan" value="{{ (isset($plan)) ? $plan->id : '' }}" {{ $plan->default == 'y' ? 'checked' : '' }} class="default-plan-radio">
                                            </td>
                                            <td>
                                                <a href="{{ route('checkout.listings',encrypt($plan->id)) }}" class="btn btn-primary">Checkout</a>
                                            </td>
                                        </tr>
                                    @endforeach
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<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">
                    <!-- User Table -->
                    <div class="table-responsive">
                        <table class="table table-bordered" id="userTable">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <!-- <th>ID</th> -->
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th>Plan Name</th>
                                    <th>Starts On</th>
                                    <th>Verification Status</th>
                                    <th>Status</th>
                                    <th class="action-column">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if(isset($users) && count($users) > 0)
                                    @foreach($users as $user)
                                        <tr>
                                            <td>{{ $loop->index + 1 }}</td>
                                            <!-- <td>{{ $user->id }}</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>
                                                @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="{{ $user->latestUserVerification->verification_url }}" target="_blank">Verify</a> -->
                                                        <a href="#" onclick="openManualVerificationModal('{{ $user->id }}', '{{ $user->latestUserVerification->setup_intent_id }}')">Verify</a>
                                                    @endif
                                                @else
                                                    NA
                                                @endif
                                            </td>
                                            @php $status_list = ['In-active', 'Active', 'Dormant', 'Terminated']; @endphp
                                            <td> {{ isset($user->status) ? $status_list[$user->status] : 'N/A' }}</td>
                                            <td>
                                                @if(Auth::user()->user_role == 1 || (Auth::user()->user_role == 2 && Auth::user()->id == '36'))
                                                    <button class="btn btn-primary" 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" 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(($user->latestUserVerification && $user->latestUserVerification->verified) || (isset($user->latestUserVerification->payment_method_type) && $user->latestUserVerification->payment_method_type == 'ach'))
                                                        <button class="btn btn-primary" onclick="openAssignPlanModal('{{ $user->id }}')">Assign Plan</button>
                                                    @else
                                                        <button class="btn btn-primary" disabled>Assign Plan</button>
                                                    @endif -->
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 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">
                    @csrf
                    <input type="hidden" id="user_ids">
                    <input type="hidden" id="plan_id" value="{{ isset($defaultPlan) ? $defaultPlan->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="{{ isset($defaultPlan) ? $defaultPlan->id : '' }}" checked>
                                    <label class="form-check-label" for="plan-{{ isset($defaultPlan) ? $defaultPlan->id : '' }}">
                                        {{ isset($defaultPlan) ? $defaultPlan->name : 'No Plan Available' }}
                                    </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">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>

<!-- 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">
                    @csrf
                    <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>

<!-- 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 -->

<script src="https://js.stripe.com/v3/"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#userTable').DataTable({
            "pageLength": 25
        });
    });

    $(document).on('change', '#plan_type', function () {
        $('.select2').select2();

        var val = $(this).val();
        if (val == 'agent') {
            $('.agent_listing').show();
        } else {
            $('.agent_listing').hide();
        }
    });

    $(document).on('change', '.default-plan-radio', function () {
        var planId = $(this).val();
        swal({
            title: "Are you sure?",
            text: "Do you want to make this plan the default?",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, make it default!',
            cancelButtonText: "No",
            closeOnConfirm: false,
            closeOnCancel: true
        },
        function(isConfirm){
            if (isConfirm){
                $.ajax({
                    url: '{{ route("plans.updateDefault") }}',
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        plan_id: planId
                    },
                    success: function(response) {
                        if (response.success) {
                            swal("Updated!", "The plan has been set as default.", "success");
                            location.reload();
                        } else {
                            swal("Error!", "There was an error updating the plan.", "error");
                        }
                    }
                });
            }
        });
    });

    // checkout modal popup && setup intent
    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');
        }
    }

    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();
    }
    // end checkout modal popup && setup intent

    //card mount and assign payment method
    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';
        }
    });
    // end card mount and assign payment method

    // submit add payment method
    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;

        // 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);
                // 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);
            }
        } 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) {
        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
            })
        });
        const result = await response.json();
        if (!result.success) {
            if(paymentMethodType == 'card') {
                document.getElementById('card-errors').textContent = result.message;
                swal("Error", result.message, "error");
            } else {
                document.getElementById('ach-errors').textContent = result.message;
                swal("Error", result.message, "error");
            }
        } 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();
                    }
                });
            }
        }
    }
    // end submit add payment method

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

    function resetModal() {
        // Reset form fields
        document.getElementById('add-payment-method-form').reset();

        // Hide payment method sections
        document.getElementById('card-payment').style.display = 'none';
        document.getElementById('ach-payment').style.display = 'none';

        // Hide instruction
        $('.instruction').show();

        // Clear errors
        document.getElementById('card-errors').textContent = '';
        document.getElementById('ach-errors').textContent = '';

        // Unmount Stripe card element if mounted
        try {
            unmountCardElement();
        } catch (e) {
            // ignore if already unmounted
        }
    }

    // manual verification modal && form submit
    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.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;
        }
    };
    // end manual verification modal && form submit

    // cancel subscription
    $(document).ready(function () {
        $(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('');
        });

        $('#addPaymentMethodModal').on('hidden.bs.modal', function () {
            resetModal();
        });
    })
</script>
@endsection