@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 */
    }
</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">
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <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 class="action-column">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @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>
                                        <td>
                                            <button class="btn btn-primary" onclick="openAddPaymentMethodModal('{{ $user->id }}', '{{ $user->email }}')">Add Card/ACH</button>
                                            @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
                                        </td>
                                    </tr>
                                @endforeach
                            </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">Add Payment Method</h4>
            </div>
            <div class="modal-body">
                <form id="add-payment-method-form">
                    <input type="hidden" id="user_ids">
                    <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:10px;">**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">
                                <!-- 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-10" bis_skin_checked="1">
                        <button type="button" class="btn btn-default pull-left" data-dismiss="modal" fdprocessedid="rkehp">Close</button>
                        <div class="d-flex">
                            <button id="submit-add-payment-method" class="btn btn-lg btn-success" fdprocessedid="4fkoqh">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" class="form-control" id="amount1" required>
                            </div>
                            <div class="col-md-6">
                                <label for="amount2">Amount 2</label>
                                <input type="number" 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>

<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();
    let cardElement = elements.create('card');
    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';
        }
    });

    async function openAddPaymentMethodModal(userId, email) {
        resetModal();
        console.log(userId);
        $('#addPaymentMethodModal').modal('show');
        $('#user_ids').val(userId);
        const setupIntent = await createSetupIntent(userId);
        clientSecret = setupIntent.client_secret;
        $('#user_email').val(email);
    }

    async function openAssignPlanModal(userId) {
        resetModal();
        $('#assignPlanModal').modal('show');
        $('#assign_user_id').val(userId);
        setDefaultDate();
    }
    // asign modal
    document.getElementById('payment-method-type').addEventListener('change', async function(event) {
        const selectedPaymentMethodType = event.target.value;
        const userId = document.getElementById('assign_user_id').value;
        const selectedPlanId = event.target.options[event.target.selectedIndex].getAttribute('data-plan');
        document.getElementById('fetchPaymentMethodLoader').style.display = 'block';

        if (selectedPaymentMethodType === 'card') {
            $('#selectedPlan').val(selectedPlanId);
            await fetchPaymentMethods('card', userId);
        } else if (selectedPaymentMethodType === 'ach') {
            $('#selectedPlan').val(selectedPlanId);
            await verifyAndFetchAchPaymentMethods(userId);
        } else {
            document.getElementById('existing-payment-methods').style.display = 'none';
            document.getElementById('no-existing-payment-methods').style.display = 'none';
            document.getElementById('submit-assign-plan').disabled = true;
        }
    });

    async function verifyAndFetchAchPaymentMethods(userId) {
        try {
            const response = await fetch(`{{ url('verify-ach-payment-method') }}/${userId}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            });
            const result = await response.json();
            if (result.error) {
                document.getElementById('assign-plan-errors').textContent = result.error;
                document.getElementById('assign-plan-errors').style.display = 'block';
            } else {
                await fetchPaymentMethods('ach', userId);
            }
        } catch (error) {
            document.getElementById('assign-plan-errors').textContent = 'An error occurred while verifying the ACH payment method.';
            document.getElementById('assign-plan-errors').style.display = 'block';
        }
    }

    async function fetchPaymentMethods(paymentMethodType, userId) {
        const response = await fetch(`{{ url('user-payment-methods') }}/${userId}/${paymentMethodType}`, {
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        });
        const paymentMethods = await response.json();
        const existingPaymentMethodList = document.getElementById('existing-payment-method-list');
        existingPaymentMethodList.innerHTML = '';
        console.log(paymentMethods.length);

        if (paymentMethods.length > 0) {
            document.getElementById('existing-payment-methods').style.display = 'block';
            document.getElementById('no-existing-payment-methods').style.display = 'none';
            document.getElementById('submit-assign-plan').disabled = false;

            paymentMethods.forEach(method => {
                const div = document.createElement('div');
                div.className = 'form-check';
                div.innerHTML = `
                    <input class="form-check-input" type="radio" name="existing_payment_method" id="method-${method.id}" value="${method.id}">
                    <label class="form-check-label" for="method-${method.id}">
                        ${method.card ? method.card.brand + ' ending in ' + method.card.last4 : 'Bank Account ending in ' + method.us_bank_account.last4}
                    </label>
                `;
                existingPaymentMethodList.appendChild(div);
            });
        } else {
            document.getElementById('existing-payment-methods').style.display = 'none';
            document.getElementById('no-existing-payment-methods').style.display = 'block';
            document.getElementById('submit-assign-plan').disabled = true;
        }
        document.getElementById('fetchPaymentMethodLoader').style.display = 'none';
    }

    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;

        // 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('card', cardElement);
            if (error) {
                document.getElementById('card-errors').textContent = error.message;
            } else {
                await addPaymentMethod(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;
            } else {
                await addPaymentMethod(userId, setupIntent.id, 'ach');
            }
        } else {
            swal('Error', 'Please select a payment method.', 'error');
        }
        // Show loader and disable button
        document.getElementById('apmLoader').style.display = 'none';
        submitPMButton.disabled = false;
    };

    async function addPaymentMethod(userId, paymentMethodId, paymentMethodType) {
        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
            })
        });
        const result = await response.json();
        if (result.error) {
            alert(result.error);
        } else {
            $('#addPaymentMethodModal').modal('hide');
            swal({
                title: "Success",
                text: 'Payment method added successfully.',
                type: "success",
                confirmButtonClass: "btn-success",
                confirmButtonText: "Ok",
                closeOnConfirm: false,
            },
            function(isConfirm) {
                if (isConfirm) {
                    location.reload();
                }
            });
            // swal('Payment Method Added', 'Payment method added successfully.', 'success');
            if (paymentMethodType === 'card') {
                document.querySelector(`button[onclick="openAssignPlanModal('${userId}')"]`).disabled = false;
            }
        }
    }

    document.getElementById('assign-plan-form').onsubmit = async (event) => {
        event.preventDefault();
        const userId = document.getElementById('assign_user_id').value;
        const selectedPlanId = document.querySelector('input[name="plan_id"]:checked').value;
        const selectedPaymentMethod = document.querySelector('input[name="existing_payment_method"]:checked');
        const startDate = document.getElementById('start_date').value;

        if (!selectedPaymentMethod) {
            document.getElementById('assign-plan-errors').textContent = 'Please select a payment method.';
            document.getElementById('assign-plan-errors').style.display = 'block';
            return;
        }

        // Show loader and disable button
        document.getElementById('apLoader').style.display = 'block';
        const submitAPButton = document.getElementById('submit-assign-plan');
        submitAPButton.disabled = true;

        const response = await fetch(`{{ url('assign-plan') }}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({
                user_id: userId,
                plan_id: selectedPlanId,
                payment_method_id: selectedPaymentMethod.value,
                start_date: startDate
            })
        });
        const result = await response.json();
        if (result.error) {
            document.getElementById('assign-plan-errors').textContent = result.error;
            document.getElementById('assign-plan-errors').style.display = 'block';
            // Show loader and disable button
            document.getElementById('apLoader').style.display = 'none';
            submitAPButton.disabled = false;
        } else {
            $('#assignPlanModal').modal('hide');
            swal({
                title: "Success",
                text: 'Plan Assigned Successfull.',
                type: "success",
                confirmButtonClass: "btn-success",
                confirmButtonText: "Ok",
                closeOnConfirm: false,
            },
            function(isConfirm) {
                if (isConfirm) {
                    location.reload();
                }
            });
        }
    };

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

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

    function setDefaultDate() {
        const today = new Date().toISOString().split('T')[0];
        const dateInput = document.getElementById('start_date');
        dateInput.value = today;
        dateInput.min = today;
    }

    $(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.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]
                })
            });
            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;
            } else {
                swal({
                    title: "Success",
                    text: 'Bank account verified successfully.',
                    type: "success",
                    confirmButtonClass: "btn-success",
                    confirmButtonText: "Ok",
                    closeOnConfirm: false,
                },
                function(isConfirm) {
                    if (isConfirm) {
                        $('#manualVerificationModal').modal('hide');
                        location.reload();
                    }
                });
            }
        } catch (error) {
            document.getElementById('manual-verification-errors').textContent = 'An error occurred while verifying the bank account.';
            document.getElementById('manual-verification-errors').style.display = 'block';
        } finally {
            // Hide loader and enable button
            document.getElementById('loader').style.display = 'none';
            submitButton.disabled = false;
        }
    };
</script>
@endsection