@extends('layouts.app')
@section('title')Plans @endsection
@section('content')
<style>
    .select2-container{
        width: 100% !important;
    }
</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>ID</th>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th>Plan Name</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($users as $user)
                                    <tr>
                                        <td>{{ $user->id }}</td>
                                        <td>{{ $user->name }}</td>
                                        <td>{{ $user->email }}</td>
                                        <td>{{ isset($user->plan) ? $user->plan->name : 'No Subscription' }}</td>
                                        <td>
                                            <button class="btn btn-primary" onclick="openStripeModal('{{ $user->id }}', '{{ encrypt($plan->id) }}', '{{ $user->email }}')">Checkout</button>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<div class="modal fade" id="stripeModal" tabindex="-1" role="dialog" aria-labelledby="stripeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document" style="max-width: 50%;">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="stripeModalLabel">Stripe Payment</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="payment-form">
                    <input type="hidden" id="user_id">
                    <div class="form-group">
                        <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="plan-{{ $plan->id }}" value="{{ encrypt($plan->plan_id) }}" checked>
                                <label class="form-check-label" for="plan-{{ $plan->id }}">
                                    {{ $plan->name }}
                                </label>
                            </div>
                        </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 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="existing-payment-methods" style="display: none;margin-bottom:15px;">
                        <label for="existing-payment-method">Select Existing Payment Method</label>
                        <div id="existing-payment-method-list"></div>
                    </div>
                    <div id="card-payment" class="payment-method" style="display: none;">
                        <div class="form-group">
                            <label for="card-element">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;">
                        <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>
                    <button id="submit" style="margin-top:15px;">Submit</button>
                </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');

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

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

    document.getElementById('payment-method').addEventListener('change', async function(event) {
        const selectedPaymentMethod = event.target.value;
        const userId = document.getElementById('user_id').value;
        if (selectedPaymentMethod === 'card' || selectedPaymentMethod === 'ach') {
            await fetchPaymentMethods(selectedPaymentMethod, userId);
            if(selectedPaymentMethod === 'card') {
                $('#ach-payment').hide();
            }
        } else {
            document.getElementById('existing-payment-methods').style.display = 'none';
            document.getElementById('card-payment').style.display = 'none';
            document.getElementById('ach-payment').style.display = 'none';
        }
    });

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

        if (paymentMethods.length > 0) {
            document.getElementById('existing-payment-methods').style.display = 'block';
            paymentMethods.forEach(method => {
                if (method.type === paymentMethodType) {
                    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.brand} ending in ${method.card.last4}
                        </label>
                    `;
                    existingPaymentMethodList.appendChild(div);
                }
            });

            // Add option to use a new payment method
            const newPaymentMethodDiv = document.createElement('div');
            newPaymentMethodDiv.className = 'form-check';
            newPaymentMethodDiv.innerHTML = `
                <input class="form-check-input" type="radio" name="existing_payment_method" id="method-new" value="new">
                <label class="form-check-label" for="method-new">
                    Use a new payment method
                </label>
            `;
            existingPaymentMethodList.appendChild(newPaymentMethodDiv);

            document.querySelectorAll('input[name="existing_payment_method"]').forEach(input => {
                input.addEventListener('change', function(event) {
                    if (event.target.value === 'new') {
                        if (paymentMethodType === 'card') {
                            document.getElementById('card-payment').style.display = 'block';
                            document.getElementById('ach-payment').style.display = 'none';
                            mountCardElement();
                        } else if (paymentMethodType === 'ach') {
                            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';
                        unmountCardElement();
                    }
                });
            });
        } else {
            document.getElementById('existing-payment-methods').style.display = 'none';
            if (paymentMethodType === 'card') {
                document.getElementById('card-payment').style.display = 'block';
                document.getElementById('ach-payment').style.display = 'none';
                mountCardElement();
            } else if (paymentMethodType === 'ach') {
                document.getElementById('card-payment').style.display = 'none';
                document.getElementById('ach-payment').style.display = 'block';
            }
        }
    }

    async function openStripeModal(userId, planId, email) {
        // Reset the modal
        resetModal();

        $('#stripeModal').modal('show');
        $('#user_id').val(userId);
        const setupIntent = await createSetupIntent(userId);
        const clientSecret = setupIntent.client_secret;
        document.getElementById('payment-form').onsubmit = async (event) => {
            event.preventDefault();
            const selectedPlanId = document.querySelector('input[name="plan_id"]:checked').value;
            const selectedPaymentMethod = document.getElementById('payment-method').value;
            const selectedExistingPaymentMethod = document.querySelector('input[name="existing_payment_method"]:checked');

            if (selectedExistingPaymentMethod && selectedExistingPaymentMethod.value !== 'new') {
                await processPayment(userId, selectedPlanId, selectedExistingPaymentMethod.value, selectedPaymentMethod);
            } else {
                if (selectedPaymentMethod === 'card') {
                    const { paymentMethod, error } = await stripe.createPaymentMethod('card', cardElement);
                    if (error) {
                        document.getElementById('card-errors').textContent = error.message;
                    } else {
                        await processPayment(userId, selectedPlanId, 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 { 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 processPayment(userId, selectedPlanId, setupIntent.id, 'ach');
                    }
                } else {
                    alert('Please select a payment method.');
                }
            }
        };
    }

    function resetModal() {
        document.getElementById('payment-form').reset();
        document.getElementById('existing-payment-method-list').innerHTML = '';
        document.getElementById('existing-payment-methods').style.display = 'none';
        document.getElementById('card-payment').style.display = 'none';
        document.getElementById('ach-payment').style.display = 'none';
        document.getElementById('card-errors').textContent = '';
        document.getElementById('ach-errors').textContent = '';
        unmountCardElement();
        elements = stripe.elements();
        cardElement = elements.create('card');
    }

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

    async function processPayment(userId, planId, paymentMethodId, paymentMethodType) {
        const response = await fetch(`{{ url('checkout-payment') }}/${userId}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({
                user_id: userId,
                plan_id: planId,
                payment_method_id: paymentMethodId,
                payment_method_type: paymentMethodType
            })
        });
        const result = await response.json();
        if (result.error) {
            document.getElementById('card-errors').textContent = result.error;
        } else {
            $('#stripeModal').modal('hide');
            Swal.fire({
                icon: 'success',
                title: 'Subscription Created',
                text: 'Subscription created successfully.',
            });
        }
    }
</script>

<!-- <div class="modal fade" id="stripeModal" tabindex="-1" role="dialog" aria-labelledby="stripeModalLabel" aria-hidden="true">
    <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">Checkout</h4>
            </div>
            <div class="modal-body">
                <form id="payment-form">
                    <div class="form-group">
                        <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="plan-{{ $plan->id }}" value="{{ encrypt($plan->id) }}" checked>
                                <label class="form-check-label" for="plan-{{ $plan->id }}">
                                    {{ $plan->name }}
                                </label>
                            </div>
                        </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 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">Credit or debit card</label>
                            <div id="card-element">

                            </div>
                            <div id="card-errors" role="alert"></div>
                        </div>
                    </div>
                    <div id="ach-payment" class="payment-method" style="display: none;">
                        <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="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>
                    <button id="submit">Submit</button>
                </form>
            </div>
        </div>
    </div>
</div> -->

<!-- <script src="https://js.stripe.com/v3/"></script>
<script>
    const stripe = Stripe('{{ env('STRIPE_KEY') }}');
    const elements = stripe.elements();
    const cardElement = elements.create('card');
    cardElement.mount('#card-element');

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

    function openStripeModal(userId, planId) {
        $('#stripeModal').modal('show');
        document.getElementById('payment-form').onsubmit = async (event) => {
            event.preventDefault();
            const selectedPlanId = document.querySelector('input[name="plan_id"]:checked').value;
            const selectedPaymentMethod = document.getElementById('payment-method').value;

            if (selectedPaymentMethod === 'card') {
                const { paymentMethod, error } = await stripe.createPaymentMethod('card', cardElement);
                if (error) {
                    document.getElementById('card-errors').textContent = error.message;
                } else {
                    await processPayment(userId, selectedPlanId, 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 { setupIntent, error } = await stripe.confirmAchSetup({
                    payment_method: {
                        ach_debit: {
                            account_number: accountNumber,
                            routing_number: routingNumber,
                        },
                        billing_details: {
                            name: accountHolderName,
                        },
                    },
                });

                if (error) {
                    document.getElementById('ach-errors').textContent = error.message;
                } else {
                    await processPayment(userId, selectedPlanId, setupIntent.payment_method, 'ach');
                }
            } else {
                alert('Please select a payment method.');
            }
        };
    }

    async function processPayment(userId, planId, paymentMethodId, paymentMethodType) {
        const response = await fetch(`{{ url('checkout-payment') }}/${userId}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({
                user_id: userId,
                plan_id: planId,
                payment_method_id: paymentMethodId,
                payment_method_type: paymentMethodType
            })
        });
        const result = await response.json();
        if (result.error) {
            document.getElementById('card-errors').textContent = result.error;
        } else {
            $('#stripeModal').modal('hide');
            alert('Payment successful!');
        }
    }
</script> -->
@endsection