@extends('layouts.app')
@section('title')Single Charge @endsection

@section('content')
<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">{{ __('Single Charge') }}</h3>
                </div>
                <div class="box-body">
                    <div class="table-responsive">
                        <table class="table table-bordered" id="singleChargeTable">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th>Subscription</th>
                                    <th>Starts On</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if(isset($users))
                                    @foreach($users as $user)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td>{{ $user->name }} {{ $user->last_name ? strtoupper(substr($user->last_name,0,1)).'.' : '' }}</td>
                                        <td>{{ $user->email }}</td>
                                        <td>{{ $user->subscriptionPlan->name ?? 'No Subscription' }}</td>
                                        <td>{{ $user->subscription_start_date ? date('m-d-Y',strtotime($user->subscription_start_date)) : '' }}</td>
                                        <td>{{ $user->status == '1' ? 'Active' : 'Inactive' }}</td>
                                        <td>
                                            <button type="button"
                                                    class="btn btn-primary btn-sm open-add-charge"
                                                    data-user-id="{{ $user->id }}"
                                                    data-user-email="{{ $user->email }}"
                                                    data-user-name="{{ $user->name.' '.($user->last_name ?? '') }}">
                                                Add Charge
                                            </button>
                                        </td>
                                    </tr>
                                    @endforeach
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Add Charge Modal -->
<div class="modal fade" id="addChargeModal" tabindex="-1" role="dialog" 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">&times;</button>
                <h4 class="modal-title">Add Charge <span id="chargeUserName" style="font-size:14px;"></span></h4>
            </div>
            <div class="modal-body">
                <form id="add-charge-form">
                    @csrf
                    <input type="hidden" id="charge_user_id" name="user_id" value="">
                    <div class="form-group">
                        <label for="charge_amount">Amount (USD)</label>
                        <input type="number" step="0.01" min="0.01" class="form-control" id="charge_amount" name="amount" required>
                    </div>

                    <div class="form-group">
                        <label for="charge_payment_method_type">Payment Method</label>
                        <select id="charge_payment_method_type" class="form-control" name="payment_method_type" required>
                            <option value="">Select Payment Method</option>
                            <option value="card">Card</option>
                            <option value="ach">ACH (Bank)</option>
                        </select>
                        <small class="text-muted">You can use an existing method or add a new one.</small>
                    </div>

                    <div id="charge-existing-payment-methods" style="display:none;margin-bottom:10px;">
                        <label>Select Existing Payment Method</label>
                        <div id="charge-existing-payment-list"></div>
                        <!-- <div class="form-check mt-2">
                            <input class="form-check-input" type="radio" name="existing_charge_method" id="charge-method-new" value="new">
                            <label class="form-check-label" for="charge-method-new">Add new payment method</label>
                        </div> -->
                    </div>

                    <div id="charge-no-existing" style="display:none;">
                        <p>No existing payment methods found. Add a new one below.</p>
                    </div>

                    <div id="charge-card-area" style="display:none;">
                        <label>Card</label>
                        <div id="charge-card-element" class="form-control"></div>
                        <div id="charge-card-errors" role="alert" class="text-danger mt-1"></div>
                    </div>

                    <div id="charge-ach-area" style="display:none;">
                        <div class="form-group">
                            <label for="ach_account_name">Account Holder Name</label>
                            <input id="ach_account_name" type="text" class="form-control" autocomplete="off">
                        </div>
                        <div class="form-group">
                            <label for="ach_routing">Routing Number</label>
                            <input id="ach_routing" type="text" class="form-control" autocomplete="off">
                        </div>
                        <div class="form-group">
                            <label for="ach_account">Account Number</label>
                            <input id="ach_account" type="text" class="form-control" autocomplete="off">
                        </div>
                        <div id="charge-ach-errors" class="text-danger mt-1"></div>
                    </div>

                    <div class="text-right mt-3" style="margin-top:10px;">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button id="submitAddCharge" class="btn btn-primary">Charge</button>
                        <span id="chargeLoader" style="display:none;margin-left:8px;"><i class="fa fa-spinner fa-spin"></i></span>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script src="https://js.stripe.com/v3/"></script>
<script>
    // Stripe & elements
    const stripe = Stripe('{{ env('STRIPE_KEY') }}');
    const elements = stripe.elements();
    const chargeCardElement = elements.create('card', { hidePostalCode: true });

    function mountChargeCard() {
        try { chargeCardElement.mount('#charge-card-element'); } catch(e){}
    }
    function unmountChargeCard() {
        try { chargeCardElement.unmount(); } catch(e){}
    }

    // open modal handler (delegated)
    $(document).on('click', '.open-add-charge', function (e) {
        e.preventDefault();
        const userId = $(this).data('user-id');
        const name = $(this).data('user-name') || '';
        $('#charge_user_id').val(userId);
        $('#chargeUserName').text('for ' + name);
        $('#charge_amount').val('');
        $('#charge_payment_method_type').val('');
        $('#charge-existing-payment-methods').hide();
        $('#charge-existing-payment-list').empty();
        $('#charge-no-existing').hide();
        $('#charge-card-area').hide();
        $('#charge-ach-area').hide();
        $('#submitAddCharge').prop('disabled', false);
        unmountChargeCard();
        $('#addChargeModal').modal('show');
    });

    // fetch existing payment methods
    async function fetchChargeExistingMethods(userId, type) {
        $('#charge-existing-payment-list').empty();
        $('#charge-existing-payment-methods').hide();
        $('#charge-no-existing').hide();
        $('#submitAddCharge').prop('disabled', false);
        var url = "{{ route('user-payment-methods', ['userId' => ':userId', 'type' => ':type']) }}";
        url = url.replace(':userId', userId).replace(':type', type);
        try {
            const res = await fetch(url, {
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
            });
            const data = await res.json();

            if (Array.isArray(data) && data.length) {
                // Show list of existing methods for both card and ACH
                $('#charge-existing-payment-methods').show();
                data.forEach(m => {
                    const label = m.card ? `${m.card.brand} ending in ${m.card.last4}` : `Bank Account ending in ${m.us_bank_account.last4}`;
                    const id = m.id;
                    $('#charge-existing-payment-list').append(`
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="existing_charge_method" id="charge-method-${id}" value="${id}">
                            <label class="form-check-label" for="charge-method-${id}">${label}</label>
                        </div>
                    `);
                });

                // For card type allow "Add new" option. For ACH do NOT allow adding new via form.
                if (type === 'card') {
                    $('#charge-existing-payment-list').append(`
                        <div class="form-check mt-2">
                            <input class="form-check-input" type="radio" name="existing_charge_method" id="charge-method-new" value="new">
                            <label class="form-check-label" for="charge-method-new">Add new payment method</label>
                        </div>
                    `);
                } else {
                    // ACH: make sure user knows only verified ACH methods can be used
                    $('#charge-existing-payment-list').append(`
                        <div class="text-muted mt-2"><small>Only previously verified ACH methods can be used for ACH charges.</small></div>
                    `);
                }

                // radio change handler
                $('input[name="existing_charge_method"]').off('change').on('change', function(){
                    const val = $(this).val();
                    if (val === 'new') {
                        toggleAddNewArea(type);
                        $('#submitAddCharge').prop('disabled', false);
                    } else {
                        // using existing method
                        $('#charge-card-area').hide();
                        $('#charge-ach-area').hide();
                        unmountChargeCard();
                        $('#submitAddCharge').prop('disabled', false);
                    }
                });

                // By default no new area shown; if user hasn't selected anything, keep submit enabled but require selection when submitting for ACH
            } else {
                // No existing methods
                if (type === 'ach') {
                    // ACH: do not allow entering new ACH details here
                    $('#charge-no-existing').show().html('<p>No verified ACH payment methods found. ACH charges require an existing verified bank account. Please add a card or ask the user to add/verify a bank account in their payment settings.</p>');
                    // prevent submit for ACH when no existing method
                    $('#submitAddCharge').prop('disabled', true);
                    $('#charge-card-area').hide();
                    $('#charge-ach-area').hide();
                    unmountChargeCard();
                } else {
                    // Card: allow adding new card when none exist
                    $('#charge-no-existing').show().html('<p>No existing payment methods found. Add a new card below.</p>');
                    toggleAddNewArea(type);
                }
            }
        } catch (e) {
            // on error: treat similarly to no existing
            if (type === 'ach') {
                $('#charge-no-existing').show().html('<p>Unable to load ACH methods. ACH charges require an existing verified bank account.</p>');
                $('#submitAddCharge').prop('disabled', true);
                $('#charge-card-area').hide();
                $('#charge-ach-area').hide();
                unmountChargeCard();
            } else {
                $('#charge-no-existing').show().html('<p>Unable to load payment methods. You can add a new card below.</p>');
                toggleAddNewArea(type);
            }
        }
    }

    function toggleAddNewArea(type) {
        if (type === 'card') {
            $('#charge-card-area').show();
            $('#charge-ach-area').hide();
            mountChargeCard();
            $('#submitAddCharge').prop('disabled', false);
        } else if (type === 'ach') {
            // NEVER show ACH input in this modal — ACH can only use existing verified methods
            $('#charge-card-area').hide();
            $('#charge-ach-area').hide();
            unmountChargeCard();
            $('#submitAddCharge').prop('disabled', true);
        } else {
            $('#charge-card-area').hide();
            $('#charge-ach-area').hide();
            unmountChargeCard();
            $('#submitAddCharge').prop('disabled', false);
        }
    }

    // when payment type changes
    $(document).on('change', '#charge_payment_method_type', function(){
        const type = $(this).val();
        const userId = $('#charge_user_id').val();
        $('#charge-existing-payment-methods').hide();
        $('#charge-existing-payment-list').empty();
        $('#charge-no-existing').hide();
        $('#charge-card-area').hide();
        $('#charge-ach-area').hide();
        unmountChargeCard();
        $('#submitAddCharge').prop('disabled', false);

        if (!type) {
            return;
        }
        fetchChargeExistingMethods(userId, type);
    });

    // submit handler
    $('#add-charge-form').on('submit', async function(e){
        e.preventDefault();
        $('#chargeLoader').show();
        $('#submitAddCharge').attr('disabled', true);

        const userId = $('#charge_user_id').val();
        const amount = parseFloat($('#charge_amount').val());
        const type = $('#charge_payment_method_type').val();
        const selectedExisting = $('input[name="existing_charge_method"]:checked').val();

        if (!userId || !amount || !type) {
            swal('Error','Fill required fields','error');
            $('#chargeLoader').hide();
            $('#submitAddCharge').attr('disabled', false);
            return;
        }

        try {
            let paymentMethodId = null;

            // ACH: require existing selected method (no "new" allowed)
            if (type === 'ach') {
                if (!selectedExisting) {
                    throw new Error('Select an existing verified ACH method to charge.');
                }
                paymentMethodId = selectedExisting;
            } else {
                // card flows
                if (selectedExisting && selectedExisting !== 'new') {
                    paymentMethodId = selectedExisting;
                } else {
                    // create new payment method via SetupIntent
                    const resp = await fetch(`{{ url('create-setup-intent') }}/${userId}`, {
                        method: 'POST',
                        headers: {
                            'Content-Type':'application/json',
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        body: JSON.stringify({})
                    });
                    const body = await resp.json();
                    if (!body.status) throw new Error(body.message || 'Failed to create setup intent');
                    const clientSecret = body.data.client_secret;

                    if (type === 'card') {
                        const { setupIntent, error } = await stripe.confirmCardSetup(clientSecret, {
                            payment_method: { card: chargeCardElement }
                        });
                        if (error) throw error;
                        paymentMethodId = setupIntent.payment_method;
                    } else {
                        // fallback — should not reach here because ACH new is disallowed
                        throw new Error('Cannot add new ACH payment method here.');
                    }
                }
            }

            // create single charge on server
            const createResp = await fetch('{{ route("single.charge") }}', {
                method: 'POST',
                headers: {
                    'Content-Type':'application/json',
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                body: JSON.stringify({
                    user_id: userId,
                    payment_method_id: paymentMethodId,
                    payment_method: type === 'card' ? 'card' : 'ach',
                    amount: amount
                })
            });
            const result = await createResp.json();
            if (result.success) {
                $('#addChargeModal').modal('hide');
                swal({
                    title: "Success",
                    text: result.message,
                    type: "success",
                    confirmButtonClass: "btn-success",
                    confirmButtonText: "Ok",
                    closeOnConfirm: false,
                },
                function(isConfirm) {
                    if (isConfirm) {
                        location.reload();
                    }
                });
            } else {
                throw new Error(result.message || 'Charge failed');
            }
        } catch (err) {
            swal('Error', err.message || 'An error occurred', 'error');
        } finally {
            $('#chargeLoader').hide();
            $('#submitAddCharge').attr('disabled', false);
        }
    });

    $(document).ready(function(){
        // initialize datatable
        $('#singleChargeTable').DataTable({ "pageLength": 25 });
        // cleanup when modal closed
        $('#addChargeModal').on('hidden.bs.modal', function(){
            unmountChargeCard();
            $('#charge-existing-payment-list').html('');
            $('#submitAddCharge').prop('disabled', false);
        });
    });
</script>
@endsection