@extends('layouts.app')
@section('title')Account Balance @endsection
@section('content')
@if (\Session::has('success'))
    <div class="alert alert-success mt-1 tac">
        <a class="close" data-dismiss="alert" aria-label="close">&times;</a>
        <ul>
            <li>{!! \Session::get('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
@if (isset($error))
    <div class="alert alert-danger mt-1 tac">
        <a class="close" data-dismiss="alert" aria-label="close">&times;</a>
        <ul>
            <li>{{ $error }}</li>
        </ul>
    </div>
@endif
<section class="content top-head">
    <div class="row">
        @if(Auth::user()->user_role == 1 || Auth::user()->user_role == 2)
        <div class="col-md-6 pt-10 sm-text-left clearfix">
            <div class="box box-primary border-no">
                <form action="{{ route('account-balance') }}" method="GET" id="getTransaction">
                	<div class="input_container" style="float: right;min-width: 235px;"> 
                	<label for="user_id">Select User</label>
                    <select name="user_id" id="user_id" class="form-control select2" style="width: 235px">
                        @if(isset($users) && count($users) > 0)
                        <option value="" >Please select User</option>
                        @foreach($users as $user)
                        <option value="{{$user->id}}" {{$user->id == $selectedUserId ? "selected" : ''}}>{{$user->name. ' ' . $user->last_name}}</option>
                        @endforeach
                        @else
                        <option value="" disabled>No user Found</option>
                        @endif
                    </select>
                    <button class="btn btn-primary" type="button" id="sub_reset">Reset</button>
                  </div>
                    <!-- <button type="submit">Get Transactions</button> -->
                </form>
            </div>
        </div>
        @endif
        <div class="{{Auth::user()->user_role == '3' ? 'col-md-12' : 'col-md-6'}} pt-20">
            <div class="row">
                <div class="col-md-6 text-center">
                    <h4><strong>Account Balance: ${{ number_format($totalPendingAmount ,2)}}</strong></h4>
                </div>
                <div class="col-md-6 mt-2">
                    <div class="text-center mt-3">
                        @if(isset($selectedUserId) && $selectedUserId != null && $totalPendingAmount > 0)
                            <button class="btn btn-primary" data-toggle="modal" data-target="#updatePaymentModal">
                                Pay Invoice
                            </button>
                        @endif
                    </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">{{ __('Account Balance') }}</h3>
                </div>
                <!-- /.box-header -->
                <!-- Table -->
                <div class="box-body">
                    <div class="table-responsive">
                        <table class="table table-bordered" id="account-balance-table">
                            <thead>
                                <tr>
                                @if(Auth::user()->user_role != '3')
                                    <th>Name</th>
                                @endif
                                <th>Plan Name</th>
                                <th>Amount Due</th>
                                <th>Currency</th>
                                <th>Due Date</th>
                                <th>Status</th>                            
                                    <!-- Add more table headers as needed -->
                                </tr>
                            </thead>
                            <tbody>
                                @if(isset($pendingPayments) && count($pendingPayments) > 0)
                                    @foreach ($pendingPayments as $payment)
                                        <tr>
                                            @if(Auth::user()->user_role != '3')
                                                <th>{{getUserDetails($payment->user_id)->name.' '.getUserDetails($payment->user_id)->last_name}}</th>
                                            @endif
                                            <td>{{ $payment->user->subscriptionPlan->name ?? '' }}</td>
                                            <td>{{ $payment->amount_due }}</td>
                                            <td>{{ $payment->currency }}</td>
                                            <td>{{ date('m-d-Y', strtotime($payment->due_date)) }}</td>
                                            <td>{{ ucfirst($payment->status) }}</td>
                                            <!-- <td>
                                                <button class="btn btn-primary pay-button" 
                                                        data-invoice-id="{{ $payment->invoice_id }}" 
                                                        data-amount-due="{{ $payment->amount_due }}" 
                                                        data-toggle="modal" 
                                                        data-target="#addPaymentMethodModal">
                                                    Pay
                                                </button>
                                            </td> -->
                                        </tr>
                                    @endforeach
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Payment Modal -->
<div class="modal fade" id="updatePaymentModal" 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;">Pay Invoice</h4>
            </div>
            <div class="modal-body">
                <form id="add-payment-method-form" method="POST" action="{{ route('account.pay') }}">
                    @csrf
                    <!-- <input type="hidden" id="invoice_id" name="invoice_id">
                    <input type="hidden" id="amount_due" name="amount_due"> -->
                    <!-- <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;">Update Payment Method</h4>
                    </div> -->
                    <div class="modal-body">
                        <input type="hidden" name="user_id" value="{{ $user['id'] }}">
                        <input type="hidden" name="user_email" value="{{ $user['email'] }}">
                        <input type="hidden" value="{{isset($totalPendingAmount) ? $totalPendingAmount : 0}}" id="total_amount_due" name="total_amount_due">
                        <div class="form-group">
                            <label for="payment-method-update">Select Payment Method</label>
                            <select class="form-control" id="payment-method-update" 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="information" style="color:red;font-size:14px;">**Please note a 3.5% processing fee will be added to your total for card payments.</span>
                        </div>
                        <div id="card-payment-update" class="payment-method-details" style="display: none;">
                            <div class="form-group">
                                <label for="card-holder-name-update">Card Holder Name</label>
                                <input id="card-holder-name-update" type="text" class="form-control">
                            </div>
                            <div class="form-row">
                                <label for="card-element-update">Credit or debit card</label>
                                <div id="card-element-update" class="form-control"></div>
                                <div id="card-errors-update" role="alert"></div>
                            </div>
                        </div>
                        <div id="ach-payment-update" class="payment-method-details" style="display: none;">
                            <div class="form-group">
                                <label for="account-holder-name-update">Account Holder Name</label>
                                <input id="account-holder-name-update" type="text" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="account-holder-type-update">Account Holder Type</label>
                                <select id="account-holder-type-update" class="form-control">
                                    <option value="individual">Individual</option>
                                    <option value="company">Company</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="routing-number-update">Routing Number</label>
                                <input id="routing-number-update" type="text" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="account-number-update">Account Number</label>
                                <input id="account-number-update" type="text" class="form-control">
                            </div>
                            <div id="ach-errors-update" role="alert"></div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" data-secret="{{ isset($intent->client_secret) ? $intent->client_secret : '' }}" id="submitUpdateMethod">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://js.stripe.com/v3/"></script>
<script>
    $(document).ready(function() {
        var stripe = Stripe('{{ env('STRIPE_KEY') }}');
        var 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'
            }
        };

        // Create a single instance of the card element
        var cardUpdate = elements.create('card', {hidePostalCode: true, style: style});

        // Function to mount the cardUpdate element
        function mountCardUpdateElement(elementId) {
            cardUpdate.mount(elementId);
        }

        // Function to unmount the cardUpdate element
        function unmountCardUpdateElement() {
            cardUpdate.unmount();
        }

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

        // Handle payment method switching
        $('#payment-method-update').on('change', function() {
            var paymentMethod = $(this).val();
            if (paymentMethod === 'card') {
                $('.information').show();
                $('#card-payment-update').show();
                $('#ach-payment-update').hide();
                mountCardUpdateElement('#card-element-update');
            } else if (paymentMethod === 'ach') {
                $('.information').hide();
                $('#card-payment-update').hide();
                $('#ach-payment-update').show();
                unmountCardUpdateElement();
            } else {
                $('#card-payment-update').hide();
                $('#ach-payment-update').hide();
                unmountCardUpdateElement();
            }
        });

        cardUpdate.addEventListener('change', function(event) {
            var displayError = document.getElementById('card-errors-update');
            if (event.error) {
                displayError.textContent = event.error.message;
            } else {
                displayError.textContent = '';
            }
        });

        // Handle update payment method form submission
        $('#submitUpdateMethod').on('click', async function(e) {
            e.preventDefault();
            const paymentMethod = $('#payment-method-update').val();
            const clientSecret = $(this).data('secret');
            if (paymentMethod === 'card') {
                const { setupIntent, error } = await stripe.confirmCardSetup(
                    clientSecret, {
                        payment_method: {
                            card: cardUpdate,
                            billing_details: { name: document.getElementById('card-holder-name-update').value }
                        }
                    }
                );
                if (error) {
                    document.getElementById('card-errors-update').textContent = error.message;
                } else {
                    updatePaymentMethodHandler(setupIntent.payment_method);
                }
            } else if (paymentMethod === 'ach') {
                const bankAccount = {
                    country: 'US',
                    currency: 'usd',
                    routing_number: document.getElementById('routing-number-update').value,
                    account_number: document.getElementById('account-number-update').value,
                    account_holder_name: document.getElementById('account-holder-name-update').value,
                    account_holder_type: document.getElementById('account-holder-type-update').value,
                };
                const { setupIntent, error } = await stripe.confirmUsBankAccountSetup(
                    clientSecret, {
                        payment_method: {
                            us_bank_account: {
                                routing_number: bankAccount.routing_number,
                                account_number: bankAccount.account_number,
                                account_holder_type: bankAccount.account_holder_type,
                            },
                            billing_details: {
                                name: bankAccount.account_holder_name,
                                email: document.getElementById('user_email').value,
                            },
                        },
                    }
                );
                if (error) {
                    document.getElementById('ach-errors-update').textContent = error.message;
                } else {
                    updatePaymentMethodHandler(setupIntent.id);
                }
            }
        });

        function updatePaymentMethodHandler(payment_method) {
            var form = document.getElementById('add-payment-method-form');
            var hiddenInput = document.createElement('input');
            hiddenInput.setAttribute('type', 'hidden');
            hiddenInput.setAttribute('name', 'payment_method_id');
            hiddenInput.setAttribute('value', payment_method);
            form.appendChild(hiddenInput);
            form.submit();
        }
    });
</script>
<script type="text/javascript">
    $(document).ready(function() {
        // Initialize Select2 for the user selection dropdown
        $(document).on('change','#user_id',function (){
            var id = $(this).val();
            if(id != '') {
                $('#getTransaction').submit();
            }
        })

        $('#account-balance-table').DataTable({
            "pageLength": 25
        });
    });

    $(document).on('click','#sub_reset', function (){
    	window.location.href = "{{ route('account-balance') }}";
    })

    document.addEventListener('DOMContentLoaded', function () {
        // Populate modal with invoice details when "Pay" button is clicked
        document.querySelectorAll('.pay-button').forEach(button => {
            button.addEventListener('click', function () {
                const invoiceId = this.getAttribute('data-invoice-id');
                const amountDue = this.getAttribute('data-amount-due');

                document.getElementById('invoice_id').value = invoiceId;
                document.getElementById('amount_due').value = amountDue;
            });
        });
    });
</script>