@extends('layouts.app')

@section('title') Subscription History @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
@if(Auth::user()->user_role == 1 || Auth::user()->user_role == 2)
<section class="content top-head">
    <div class="row">
        <div class="col-md-6 pt-10 sm-text-left clearfix">
            <div class="box box-primary border-no">
                <form action="{{ route('transaction.subscription') }}" 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->stripe_id == $stripeId ? "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>
    </div>
</section>
@endif

<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">{{ __('Subscription History') }}</h3>
                </div>
                <!-- /.box-header -->
                <!-- Table -->
                <div class="box-body">
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <!-- <th>Email</th> -->
                                    <th>Plan</th>
                                    <th>Amount</th>
                                    <th>Status</th>
                                    <!-- <th>Transaction ID</th>                                    
                                    <th>Stripe ID</th>                                     -->
                                    <th>Billing Method</th>                                    
                                    <th>Last 4</th>                                    
                                    <th>Duration</th>
                                    <th>Next Invoice</th>                                    
                                    <th>Created On</th>                                    
                                    @if(Auth::user()->user_role == 1|| Auth::user()->id == 36)<th>Action</th>@endif                                    
                                    <!-- Add more table headers as needed -->
                                </tr>
                            </thead>
                            <tbody>
                            	@if(isset($formattedCharges) && count($formattedCharges) > 0)
                                @foreach($formattedCharges as $charge)
                                <tr>
                                    <td>{{ $charge['name'] }}</td>
                                    <!-- <td>{{ $charge['email'] }}</td> -->
                                    <td>{{ $charge['plan_name'] }}</td>
                                    <td>${{ number_format(bcdiv($charge['amount'],100,2),2) }}</td>
                                    <td><strong>
                                        @if(!empty($charge['pause_date']) && $charge['pause_date'] > date('Y-m-d'))
                                            Paused till ({{$charge['pause_date']}})
                                        @elseif($charge['status'] == 'paused' && empty($charge['pause_date']))
                                            Paused (Indefinite)
                                        @elseif($charge['status'] == 'active' && !empty($charge['pause_collection']) && empty($charge['pause_date']))
                                            Paused (Indefinite)
                                        @elseif($charge['status'] == 'skipped')
                                            Payment Skipped - Next: {{ date('m-d-Y', $charge['end']) }}
                                        @else
                                            {{ ucwords($charge['status']) }}
                                        @endif
                                    </strong></td>
                                    <!-- <td>{{ $charge['transaction_id'] }}</td>
                                    <td>{{ $charge['stripe_id'] }}</td> -->
                                    <td>{{ $charge['billing'] }}</td>
                                    <td><strong>@if(!empty($charge['last4']))&#183;&#183;&#183;&#183;&nbsp;@endif{{ $charge['last4'] }}</strong></td>
                                    <td>{{ date('m-d-Y', $charge['start']) }} - {{ date('m-d-Y', $charge['end']) }}</td>
                                    <td>{{ date('m-d-Y', strtotime($charge['next_payment_date'])) }}</td>
                                    <td>{{ date('m-d-Y', $charge['created_at']) }}</td>
                                    @if(Auth::user()->user_role == 1 || Auth::user()->id == 36)
                                    @if(($charge['status'] == 'active' || $charge['status'] == 'trialing') && (empty($charge['pause_collection']) || !empty($charge['pause_date'])))
                                    <td>
                                        <div class="d-flex" style="display:flex; gap:5px;align-items:center;">
                                            <form action="{{ route('transaction.cancel') }}" method="POST">
                                                @csrf
                                                <input type="hidden" name="sub_id" value="{{$charge['transaction_id']}}">
                                                <input type="hidden" name="user_id" value="{{$charge['user_id']}}">
                                                <button type="submit" class="btn btn-link btn-primary" style="color:#fff;">Cancel</button>
                                            </form>
                                            <button type="button" class="btn btn-primary btn-link pause_button" data-toggle="modal" data-target="#subscription_pause_modal" data-charge="{{ json_encode($charge) }}" @if(!empty($charge['pause_date']) && $charge['pause_date'] > date('Y-m-d')) disabled @endif style="color:#fff;">Pause</button>
                                            <button type="button" class="btn btn-primary btn-link skip_payment_button" data-toggle="modal" data-target="#subscription_skip_modal" data-charge="{{ json_encode($charge) }}" @if($charge['status'] == 'skipped' || (!empty($charge['pause_date']) && $charge['pause_date'] > date('Y-m-d'))) disabled @endif style="color:#fff;">Skip Payment</button>
                                        </div>
                                        @if(isset($charge['quantity']) && $charge['quantity'] > 1 && isset($charge['subscription_type']) && $charge['subscription_type'] == 'group')
                                        <button type="button" class="btn btn-warning btn-link update_subscription_button" data-toggle="modal" data-target="#update_subscription_modal" data-charge="{{ json_encode($charge) }}" style="color:#fff; margin-top:5px;">Update Subscription</button>
                                        @endif
        							</td>
                                    @elseif(($charge['status'] == 'paused' && empty($charge['pause_date'])) || ($charge['status'] == 'active' && !empty($charge['pause_collection']) && empty($charge['pause_date'])))
                                    <td>Inactive</td>
                                    @elseif($charge['status'] == 'skipped')
                                    <td>Payment Skipped</td>
                                    @elseif($charge['status'] == 'past_due')
                                    <!-- <td>Past Due</td> -->
                                     <td>
                                        <div class="d-flex" style="display:flex; gap:5px;align-items:center;">
                                            <button type="button" class="btn btn-warning btn-sm void_invoices_button" 
                                                data-user-id="{{$charge['user_id']}}" 
                                                data-user-name="{{$charge['name']}}"
                                                data-toggle="modal" 
                                                data-target="#void_invoices_modal" 
                                                style="color:#fff;">
                                                <i class="fa fa-ban"></i> Void Invoices
                                            </button>

                                            @if($charge['user_status'] == 1)
                                                <button type="button" class="btn btn-danger btn-sm access_toggle_button" 
                                                    data-user-id="{{$charge['user_id']}}" 
                                                    data-user-name="{{$charge['name']}}"
                                                    data-current-status="1"
                                                    style="color:#fff;">
                                                    <i class="fa fa-ban"></i> Ban Access
                                                </button>
                                            @else
                                                <button type="button" class="btn btn-info btn-sm access_toggle_button" 
                                                    data-user-id="{{$charge['user_id']}}" 
                                                    data-user-name="{{$charge['name']}}"
                                                    data-current-status="0"
                                                    style="color:#fff;">
                                                    <i class="fa fa-check"></i> Allow Access
                                                </button>
                                            @endif
                                        </div>
                                    </td>
                                    @else
                                    <td>Subscription Cancelled</td>
                                    @endif
                                    @endif
                                    <!-- Add more table cells as needed -->
                                </tr>
                                @endforeach
                                @else
                                <tr>
                                    <td colspan=10>No Records Found</td>
                                </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                    <!-- Pagination Links -->
                    <div class="pagination" style="display:flex;justify-content: space-between;">
                        @if(isset($firstChargeId) && $currentPage > 1)
                            <a href="{{ route('transaction.subscription', ['starting_after' => null, 'ending_before' => $firstChargeId,'page' => $currentPage - 1]) }}">Previous Page</a>
                        @else
                        &nbsp;
                        @endif
                        @if(isset($lastChargeId) && count($formattedCharges) == $perPage)
                            <a href="{{ route('transaction.subscription', ['starting_after' => $lastChargeId,'page' => $currentPage + 1]) }}">Next Page</a>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<div class="modal fade" id="subscription_pause_modal">
  <div class="modal-dialog custom-modal-dialog--">
    <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">Pause Subscription</h4>
      </div>

        <div class="modal-body" id="open_editform">
            <div class="row">
              <!-- left column -->
              <div class="col-md-12">   
                <div class="form-group">
                    <label for="plan-silver" class="form-control mb-2" style="background: lightblue;margin-bottom: 10px;">Subscription Details</label>
                    <div class="box-body">
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Plan</th>
                                        <th>Amount</th>
                                        <th>Status</th>                                   
                                        <th>Billing Method</th>                                    
                                        <th>Duration</th>                                    
                                        <!-- Add more table headers as needed -->
                                    </tr>
                                </thead>
                                <tbody id="subscription_pause_modal_body">
                                    
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <!-- <div class="col-md-4">
                      <label>Select Start Date</label>
                      <input type="date" name="sub_pause_from" id="sub_pause_from" class="form-control" required>
                    </div> -->
                    <div class="col-md-4">
                      <label>Select End Date</label>
                      <input type="date" name="sub_pause_to" class="form-control" id="sub_pause_to" min="{{date('Y-m-d')}}" required>
                    </div>
                </div>
              </div>
            </div>
            <!-- row -->
        </div>
        <div class="modal-footer">
            <form action="{{ route('subscription.pause') }}" method="POST">
                @csrf
                <input type="hidden" name="sub_id" id="sub_id_modal">
                <input type="hidden" name="pause_to" id="pause_to">
                <input type="hidden" name="pause_from" id="pause_from" value="{{ date('Y-m-d') }}">
                <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
                <button  id="card-button" class="btn btn-lg btn-primary" type="submit">Pause Subscription</button>
            </form> 
        </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>

<div class="modal fade" id="subscription_skip_modal">
  <div class="modal-dialog custom-modal-dialog--">
    <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">Skip Payment</h4>
      </div>

        <div class="modal-body" id="skip_editform">
            <div class="row">
              <!-- left column -->
              <div class="col-md-12">
                <div class="form-group">
                    <label for="plan-silver" class="form-control mb-2" style="background: lightblue;margin-bottom: 10px;">Subscription Details</label>
                    <div class="box-body">
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Plan</th>
                                        <th>Amount</th>
                                        <th>Status</th>
                                        <th>Billing Method</th>
                                        <th>Duration</th>
                                        <!-- Add more table headers as needed -->
                                    </tr>
                                </thead>
                                <tbody id="subscription_skip_modal_body">

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                      <div class="alert alert-warning">
                        <strong>Warning:</strong> This will skip payment(s) based on your selection. The subscription will resume automatically.
                      </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="form-control" style="background: lightgray;margin-bottom: 10px;">Skip Payment Options</label>
                            <div class="radio">
                                <label>
                                    <input type="radio" name="skip_option" value="next_payment" checked>
                                    Skip next payment only
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" name="skip_option" value="until_date">
                                    Skip payments until specific date
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row" id="skip_date_row" style="display: none;">
                    <div class="col-md-6">
                        <label>Skip payments until</label>
                        <input type="date" name="skip_until_date" class="form-control" id="skip_until_date" min="{{date('Y-m-d', strtotime('+1 day'))}}">
                    </div>
                </div>
              </div>
            </div>
            <!-- row -->
        </div>
        <div class="modal-footer">
            <form action="{{ route('subscription.skip') }}" method="POST">
                @csrf
                <input type="hidden" name="sub_id" id="skip_sub_id_modal">
                <input type="hidden" name="skip_option" id="skip_option_hidden">
                <input type="hidden" name="skip_until_date" id="skip_until_date_hidden">
                <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
                <button  id="skip-card-button" class="btn btn-lg btn-warning" type="submit">Skip Payment</button>
            </form>
        </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>

<!-- Update Subscription Modal -->
<div class="modal fade" id="update_subscription_modal">
  <div class="modal-dialog custom-modal-dialog--">
    <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">Update Group Subscription</h4>
      </div>

        <div class="modal-body" id="open_updateform">
            <div class="row">
              <!-- left column -->
              <div class="col-md-12">   
                <div class="form-group">
                    <label for="plan-silver" class="form-control mb-2" style="background: lightblue;margin-bottom: 10px;">Current Subscription Details</label>
                    <div class="box-body">
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Plan</th>
                                        <th>Current Quantity</th>
                                        <th>Current Memo</th>                                   
                                        <th>Amount</th>                                    
                                        <th>Status</th>                                    
                                        <!-- Add more table headers as needed -->
                                    </tr>
                                </thead>
                                <tbody id="update_subscription_modal_body">
                                    
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
              </div>
            </div>
            <!-- row -->
        </div>
        <div class="modal-footer">
            <form action="{{ route('subscription.update') }}" method="POST">
                @csrf
                <input type="hidden" name="sub_id" id="update_sub_id_modal">
                <input type="hidden" name="user_id" id="update_user_id_modal">
                <div class="row">
                    <div class="col-md-6">
                      <label>New Quantity</label>
                      <input type="number" name="new_quantity" id="new_quantity" class="form-control" min="2" required>
                    </div>
                    <div class="col-md-6">
                      <label>New Memo</label>
                      <textarea name="new_memo" id="new_memo" class="form-control" rows="3" placeholder="Enter new memo for group subscription" required></textarea>
                    </div>
                </div>
                <div class="row" style="margin-top: 15px;">
                    <div class="col-md-12">
                        <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
                        <button id="update_subscription_button" class="btn btn-lg btn-warning" type="submit">Update Subscription</button>
                    </div>
                </div>
            </form> 
        </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>

<!-- Void Invoices Modal -->
<div class="modal fade" id="void_invoices_modal">
  <div class="modal-dialog custom-modal-dialog--">
    <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">Void Invoices & Resume Subscription</h4>
      </div>
      <div class="modal-body">
        <div class="alert alert-warning">
          <i class="fa fa-warning"></i> <strong>Warning:</strong> This action will:
          <ul>
            <li>Void all open invoices for this user</li>
            <li>Mark all failed payments as resolved</li>
            <li>Reactivate the user's subscription</li>
            <li>Restore user access to the system</li>
          </ul>
          <p><strong>This action cannot be undone!</strong></p>
        </div>
        
        <div class="row">
          <div class="col-md-12">
            <p><strong>User:</strong> <span id="void_user_name"></span> (ID: <span id="void_user_id"></span>)</p>
            <div id="failed_payments_loading" style="display: none;">
              <i class="fa fa-spinner fa-spin"></i> Loading failed payments...
            </div>
          </div>
        </div>
        
        <div class="row" id="failed_payments_section" style="display: none;">
          <div class="col-md-12">
            <h5>Failed Payments & Invoices:</h5>
            <div id="failed_payments_content">
              <!-- Content will be loaded via AJAX -->
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Cancel</button>
        <button type="button" id="confirm_void_invoices" class="btn btn-danger" disabled>
          <i class="fa fa-ban"></i> Void Invoices & Resume Subscription
        </button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<script type="text/javascript">
    $(document).on('change','#user_id',function (){
        var id = $(this).val();
        if(id != '') {
            $('#getTransaction').submit();
        }
    })

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

    // Add cancel confirmation handler
    $(document).on('submit', 'form[action="{{ route('transaction.cancel') }}"]', function(e) {
        e.preventDefault(); // Prevent default form submission
        
        var form = this; // Store reference to the form
        
        swal({
            title: "Are you sure?",
            text: "This will permanently cancel the subscription. This action cannot be undone!",
            type: "warning",
            showCancelButton: true,
            confirmButtonClass: "btn-danger",
            confirmButtonText: "Yes, Cancel Subscription!",
            cancelButtonText: "No, Keep Subscription",
            closeOnConfirm: false
        }, function(isConfirm) {
            if (isConfirm) {
                // Show loading state
                swal({
                    title: "Cancelling...",
                    text: "Please wait while we cancel the subscription.",
                    type: "info",
                    showConfirmButton: false,
                    allowOutsideClick: false
                });
                
                // Submit the form
                form.submit();
            }
        });
    });

    
    // $(document).ready(function () {
    //     // Event listener for 'Pause' button click
    //     $('.pause-button').click(function () {
    //     });
    // });

    $(document).on('click','.pause_button', function (){
        var chargeData = $(this).data('charge'); // Get charge data from the clicked row
        $('#sub_id_modal').val(chargeData.transaction_id);
        console.log(chargeData);
        populateModal(chargeData); // Populate modal with charge data
    })

    $(document).on('click','.update_subscription_button', function (){
        var chargeData = $(this).data('charge'); // Get charge data from the clicked row
        $('#update_sub_id_modal').val(chargeData.transaction_id);
        $('#update_user_id_modal').val(chargeData.stripe_id);
        console.log(chargeData);
        populateUpdateModal(chargeData); // Populate modal with charge data
    })

    $(document).on('click','.skip_payment_button', function (){
        var chargeData = $(this).data('charge'); // Get charge data from the clicked row
        $('#skip_sub_id_modal').val(chargeData.transaction_id);
        console.log(chargeData);
        populateSkipModal(chargeData); // Populate modal with charge data
    })

    $(document).on('blur', '#sub_pause_to' , function (){
        var val = $(this).val();
        $('#pause_to').val(val);
    })

    // $(document).on('blur', '#sub_pause_from' , function (){
    //     var val = $(this).val();
    //     $('#pause_from').val(val);
    // })

    // Function to populate modal with charge data
    function populateModal(chargeData) {
        // Access modal body element
        var modalBody = $('#subscription_pause_modal_body');

        // Clear existing content
        modalBody.empty();

        // Append new data to modal body
        var startdate = new Date(chargeData.start * 1000); // Convert seconds to milliseconds
        var enddate = new Date(chargeData.end * 1000); // Convert seconds to milliseconds

        // Format the date and time (adjust as needed)
        var start = startdate.toLocaleDateString(); // 
        var end = enddate.toLocaleDateString(); // 
        modalBody.append('<tr><td>' + chargeData.name + '</td><td>' + chargeData.plan_name + '</td><td>$' + chargeData.amount/100 + '</td><td>' + chargeData.status + '</td><td>' + chargeData.billing + '</td><td>' + start +'-'+ end + '</td></tr>');

        // Add more rows as needed for additional data
    }

    // Function to populate skip modal with charge data
    function populateSkipModal(chargeData) {
        // Access modal body element
        var modalBody = $('#subscription_skip_modal_body');

        // Clear existing content
        modalBody.empty();

        // Append new data to modal body
        var startdate = new Date(chargeData.start * 1000); // Convert seconds to milliseconds
        var enddate = new Date(chargeData.end * 1000); // Convert seconds to milliseconds

        // Format the date and time (adjust as needed)
        var start = startdate.toLocaleDateString(); //
        var end = enddate.toLocaleDateString(); //
        modalBody.append('<tr><td>' + chargeData.name + '</td><td>' + chargeData.plan_name + '</td><td>$' + chargeData.amount/100 + '</td><td>' + chargeData.status + '</td><td>' + chargeData.billing + '</td><td>' + start +'-'+ end + '</td></tr>');

        // Reset form to default state
        $('input[name="skip_option"][value="next_payment"]').prop('checked', true);
        $('#skip_date_row').hide();
        $('#skip_until_date').val('');
    }

    // Handle radio button changes for skip options
    $(document).on('change', 'input[name="skip_option"]', function() {
        if ($(this).val() === 'until_date') {
            $('#skip_date_row').show();
            $('#skip_until_date').attr('required', true);
        } else {
            $('#skip_date_row').hide();
            $('#skip_until_date').attr('required', false);
            $('#skip_until_date').val('');
        }
    });

    // Handle form submission for skip payment
    $(document).on('submit', 'form[action="{{ route('subscription.skip') }}"]', function(e) {
        var skipOption = $('input[name="skip_option"]:checked').val();
        var skipUntilDate = $('#skip_until_date').val();

        // Validate if date is required but not provided
        if (skipOption === 'until_date' && !skipUntilDate) {
            e.preventDefault();
            alert('Please select a date until which you want to skip payments.');
            return false;
        }

        // Update hidden fields
        $('#skip_option_hidden').val(skipOption);
        $('#skip_until_date_hidden').val(skipUntilDate);
    });

    // Function to populate update modal with charge data
    function populateUpdateModal(chargeData) {
        // Access modal body element
        var modalBody = $('#update_subscription_modal_body');

        // Clear existing content
        modalBody.empty();

        // Append new data to modal body
        var startdate = new Date(chargeData.start * 1000); // Convert seconds to milliseconds
        var enddate = new Date(chargeData.end * 1000); // Convert seconds to milliseconds

        // Format the date and time (adjust as needed)
        var start = startdate.toLocaleDateString(); // 
        var end = enddate.toLocaleDateString(); // 
        
        // Set current values in form fields
        $('#new_quantity').val(chargeData.quantity || 1);
        $('#new_memo').val(chargeData.memo || '');
        
        modalBody.append('<tr><td>' + chargeData.name + '</td><td>' + chargeData.plan_name + '</td><td>' + (chargeData.quantity || 1) + '</td><td>' + (chargeData.memo || 'N/A') + '</td><td>$' + chargeData.amount/100 + '</td><td>' + chargeData.status + '</td></tr>');

        // Add more rows as needed for additional data
    }

    // Void Invoices Modal functionality 2nd nov 25
    $(document).on('click', '.void_invoices_button', function() {
        var userId = $(this).data('user-id');
        var userName = $(this).data('user-name');
        
        // Update modal content
        $('#void_user_name').text(userName);
        $('#void_user_id').text(userId);
        
        // Store user ID for later use
        $('#confirm_void_invoices').data('user-id', userId);
        
        // Load failed payments for this user
        loadFailedPayments(userId);
    });

    function loadFailedPayments(userId) {
        $('#failed_payments_loading').show();
        $('#failed_payments_content').empty();
        $('#failed_payments_section').show();
        $('#confirm_void_invoices').prop('disabled', true);
        
        $.ajax({
            url: '{{ route("subscription.failedPayments", ":user_id") }}'.replace(':user_id', userId),
            type: 'GET',
            success: function(response) {
                $('#failed_payments_loading').hide();
                
                if (response.success && response.invoices.length > 0) {
                    var content = '<div class="table-responsive">' +
                                 '<table class="table table-striped table-sm">' +
                                 '<thead>' +
                                 '<tr>' +
                                 '<th>Invoice ID</th>' +
                                 '<th>Amount</th>' +
                                 '<th>Status</th>' +
                                 '<th>Created Date</th>' +
                                 '<th>Description</th>' +
                                 '<th>Action</th>' +
                                 '</tr>' +
                                 '</thead>' +
                                 '<tbody>';
                    
                    response.invoices.forEach(function(invoice) {
                        var amount = parseFloat(invoice.amount) || 0;
                        var actionButton = '';
                        
                        // Only show void button if status is 'open'
                        if (invoice.status === 'open') {
                            actionButton = '<button type="button" class="btn btn-sm btn-danger void_single_invoice_btn" ' +
                                          'data-invoice-id="' + invoice.id + '" ' +
                                          'data-amount="' + amount.toFixed(2) + '">' +
                                          '<i class="fa fa-ban"></i> Void' +
                                          '</button>';
                        } else {
                            actionButton = '<span class="text-muted">Cannot void</span>';
                        }
                        
                        content += '<tr id="invoice_row_' + invoice.id + '">' +
                                  '<td>' + invoice.id + '</td>' +
                                  '<td>$' + amount.toFixed(2) + '</td>' +
                                  '<td><span class="label label-danger">' + invoice.status + '</span></td>' +
                                  '<td>' + invoice.created + '</td>' +
                                  '<td>' + invoice.description + '</td>' +
                                  '<td>' + actionButton + '</td>' +
                                  '</tr>';
                    });
                    
                    content += '</tbody></table></div>' +
                              '<div class="alert alert-info">' +
                              '<strong>Total Amount to be Voided: $' + response.total_amount.toFixed(2) + '</strong>' +
                              '<br>Number of Invoices: ' + response.count +
                              '</div>';
                    
                    $('#failed_payments_content').html(content);
                    $('#confirm_void_invoices').prop('disabled', false);
                } else {
                    $('#failed_payments_content').html('<div class="alert alert-info">No pending invoices found for this user.</div>');
                    $('#confirm_void_invoices').prop('disabled', true);
                }
            },
            error: function(xhr, status, error) {
                $('#failed_payments_loading').hide();
                $('#failed_payments_content').html('<div class="alert alert-danger">Error loading failed payments: ' + error + '</div>');
                $('#confirm_void_invoices').prop('disabled', true);
            }
        });
    }

    // Handle confirm void invoices button
    $(document).on('click', '#confirm_void_invoices', function() {
        var userId = $(this).data('user-id');
        var button = $(this);
        
        // Show confirmation dialog
        swal({
            title: "Are you sure?",
            text: "This will void all pending invoices and resume the subscription for this user. This action cannot be undone!",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        }, function(willVoid) {
            if (willVoid) {
                // Disable button and show loading
                button.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Processing...');
                
                $.ajax({
                    url: '{{ route("subscription.voidInvoicesResume") }}',
                    type: 'POST',
                    data: {
                        user_id: userId,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.success) {
                            // Show success message
                            swal({
                                title: "Success!",
                                text: response.message,
                                icon: "success",
                                button: "OK"
                            }, function() {
                                // Close modal and reload page
                                $('#void_invoices_modal').modal('hide');
                                location.reload();
                            });
                        } else {
                            swal({
                                title: "Error!",
                                text: response.message,
                                icon: "error",
                                button: "OK"
                            });
                        }
                    },
                    error: function(xhr, status, error) {
                        var errorMessage = 'An error occurred while processing the request.';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMessage = xhr.responseJSON.message;
                        }
                        
                        swal({
                            title: "Error!",
                            text: errorMessage,
                            icon: "error",
                            button: "OK"
                        });
                    },
                    complete: function() {
                        // Re-enable button
                        button.prop('disabled', false).html('<i class="fa fa-ban"></i> Void Invoices & Resume Subscription');
                    }
                });
            }
        });
    });

    // Reset modal when closed
    $('#void_invoices_modal').on('hidden.bs.modal', function() {
        $('#failed_payments_section').hide();
        $('#failed_payments_content').empty();
        $('#confirm_void_invoices').prop('disabled', true);
    });

    // Handle Allow/Ban Access button clicks
    $(document).on('click', '.access_toggle_button', function() {
        var userId = $(this).data('user-id');
        var userName = $(this).data('user-name');
        var currentStatus = $(this).data('current-status');
        var button = $(this);
        
        // Determine action based on current status
        var action = currentStatus == 1 ? 'ban' : 'allow';
        var newStatus = currentStatus == 1 ? 0 : 1;
        var actionText = action == 'allow' ? 'Allow Access' : 'Ban Access';
        var confirmText = action == 'allow' ? 
            'This will grant access to ' + userName + '. Are you sure?' :
            'This will revoke access for ' + userName + '. Are you sure?';
        
        // Show SweetAlert confirmation
        swal({
            title: actionText + " for " + userName + "?",
            text: confirmText,
            type: "warning",
            showCancelButton: true,
            confirmButtonClass: action == 'allow' ? "btn-success" : "btn-danger",
            confirmButtonText: "Yes, " + actionText + "!",
            cancelButtonText: "Cancel",
            closeOnConfirm: false
        }, function(isConfirm) {
            if (isConfirm) {
                // Show loading state
                swal({
                    title: "Processing...",
                    text: "Please wait while we update the user access.",
                    type: "info",
                    showConfirmButton: false,
                    allowOutsideClick: false
                });
                
                // Make AJAX request
                $.ajax({
                    url: '{{ route("subscription.toggleAccess") }}',
                    type: 'POST',
                    data: {
                        user_id: userId,
                        status: newStatus,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.success) {
                            // Show success message
                            swal({
                                title: "Success!",
                                text: response.message,
                                type: "success",
                                confirmButtonText: "OK"
                            }, function() {
                                // Update button appearance and data
                                if (newStatus == 1) {
                                    // User is now active - show Ban Access button
                                    button.removeClass('btn-info')
                                        .addClass('btn-danger')
                                        .data('current-status', 1)
                                        .html('<i class="fa fa-ban"></i> Ban Access');
                                } else {
                                    // User is now banned - show Allow Access button
                                    button.removeClass('btn-danger')
                                        .addClass('btn-info')
                                        .data('current-status', 0)
                                        .html('<i class="fa fa-check"></i> Allow Access');
                                }
                            });
                        } else {
                            swal({
                                title: "Error!",
                                text: response.message || "An error occurred while updating user access.",
                                type: "error",
                                confirmButtonText: "OK"
                            });
                        }
                    },
                    error: function(xhr, status, error) {
                        var errorMessage = 'An error occurred while updating user access.';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMessage = xhr.responseJSON.message;
                        }
                        
                        swal({
                            title: "Error!",
                            text: errorMessage,
                            type: "error",
                            confirmButtonText: "OK"
                        });
                    },
                    complete: function() {
                        // This runs whether success or error
                    }
                });
            }
        });
    });

    // Handle individual invoice void button clicks
    $(document).on('click', '.void_single_invoice_btn', function() {
        var invoiceId = $(this).data('invoice-id');
        var amount = $(this).data('amount');
        var userId = $('#confirm_void_invoices').data('user-id');
        var button = $(this);
        
        // Show SweetAlert confirmation
        swal({
            title: "Void Individual Invoice?",
            text: "Are you sure you want to void invoice " + invoiceId + " for $" + amount + "? This action cannot be undone!",
            type: "warning",
            showCancelButton: true,
            confirmButtonClass: "btn-danger",
            confirmButtonText: "Yes, Void Invoice!",
            cancelButtonText: "Cancel",
            closeOnConfirm: false
        }, function(isConfirm) {
            if (isConfirm) {
                // Show loading state
                swal({
                    title: "Processing...",
                    text: "Please wait while we void the invoice.",
                    type: "info",
                    showConfirmButton: false,
                    allowOutsideClick: false
                });
                
                // Disable the button
                button.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Voiding...');
                
                // Make AJAX request
                $.ajax({
                    url: '{{ route("subscription.voidSingleInvoice") }}',
                    type: 'POST',
                    data: {
                        invoice_id: invoiceId,
                        user_id: userId,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.success) {
                            // Show success message
                            swal({
                                title: "Success!",
                                text: response.message,
                                type: "success",
                                confirmButtonText: "OK"
                            }, function() {
                                // Remove the invoice row from the table
                                $('#invoice_row_' + invoiceId).fadeOut(300, function() {
                                    $(this).remove();
                                    
                                    // Check if there are any invoices left
                                    var remainingRows = $('#failed_payments_content table tbody tr').length;
                                    if (remainingRows === 0) {
                                        $('#failed_payments_content').html('<div class="alert alert-info">All invoices have been voided.</div>');
                                        $('#confirm_void_invoices').prop('disabled', true);
                                    } else {
                                        // Update the total amount and count
                                        updateTotalAmountAfterVoid(parseFloat(amount));
                                    }
                                });
                            });
                        } else {
                            swal({
                                title: "Error!",
                                text: response.message || "An error occurred while voiding the invoice.",
                                type: "error",
                                confirmButtonText: "OK"
                            });
                            
                            // Re-enable button on error
                            button.prop('disabled', false).html('<i class="fa fa-ban"></i> Void');
                        }
                    },
                    error: function(xhr, status, error) {
                        var errorMessage = 'An error occurred while voiding the invoice.';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMessage = xhr.responseJSON.message;
                        }
                        
                        swal({
                            title: "Error!",
                            text: errorMessage,
                            type: "error",
                            confirmButtonText: "OK"
                        });
                        
                        // Re-enable button on error
                        button.prop('disabled', false).html('<i class="fa fa-ban"></i> Void');
                    }
                });
            }
        });
    });

    // Function to update total amount after individual void
    function updateTotalAmountAfterVoid(voidedAmount) {
        // Find the total amount element and update it
        var totalElement = $('#failed_payments_content .alert-info strong');
        if (totalElement.length > 0) {
            var currentText = totalElement.text();
            var currentTotal = parseFloat(currentText.replace(/[^0-9.]/g, ''));
            var newTotal = currentTotal - voidedAmount;
            
            if (newTotal < 0) newTotal = 0;
            
            totalElement.text('Total Amount to be Voided: $' + newTotal.toFixed(2));
            
            // Update count
            var countElement = totalElement.parent().find('br').next();
            var remainingCount = $('#failed_payments_content table tbody tr').length;
            countElement.text('Number of Invoices: ' + remainingCount);
        }
    }
</script>   
@endsection