<?php $__env->startSection('content'); ?>
    <br><br><br>
    <div class="container">
        
        <div class="row justify-content-center">

            <?php echo $__env->make('user.sidebar', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>

            <div class="col-lg-10 col-md-10 col-sm-12 col-12">
                <div class="account_manuRight">
                    <div class="form-content profiletab_content">
                        <!-- Row for heading -->
                        <div class="row align-items-center">
                            <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                                <div class="text-start">
                                    <h4 class="mb-0">Transactions</h4>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                                <div class="text-end">
                                    <input type="text" id="search" class="mt-0 w-50" placeholder="searching..">
                                </div>
                            </div>
                        </div>
                        <hr>

                        
                        <div class="table-responsive">
                            <?php if($subscriptions->isEmpty()): ?>
                                <p>No transactions found.</p>
                            <?php else: ?>
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Name</th>
                                            <th>Plan Type</th>
                                            <th>Price</th>
                                            <th>Transaction Id</th>
                                            <th>Start Date</th>
                                            <th>Status</th>
                                        </tr>
                                    </thead>
                                    <tbody id="transaction-table-body">
                                        
                                    </tbody>
                                </table>
                            <?php endif; ?>
                        </div>
                        <div class="pagination">
                            <ul class="pagination justify-content-center" id="pagination">
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<?php $__env->stopSection(); ?>
<?php $__env->startSection('script'); ?>
    <script>
        $(document).ready(function() {
            loadTransactions(1);
            $('#search').on('keyup', function() {
                const searchTerm = $(this).val(); 
                loadTransactions(1, searchTerm); 
            });

            function loadTransactions(page, searchTerm = '') {
                $.ajax({
                    url: '<?php echo e(route('user.subscription.transactions')); ?>',
                    method: 'GET',
                    data: {
                        page: page,
                        search: searchTerm 
                    },
                    success: function(response) {
                        $('#transaction-table-body').empty(); 

                        response.subscriptions.forEach(function(subscription, index) {
                            const transaction = subscription.transactions[0]; 
                            const status = transaction ? transaction.pay_status : 'N/A';

                            $('#transaction-table-body').append(`
                        <tr>
                            <td>${index + 1}</td>
                            <td>${subscription.website.first_name} ${subscription.website.last_name}</td>
                            <td>${subscription.plan.name}</td>
                            <td>₹${subscription.plan.price}</td>
                            <td>${transaction ? transaction.transaction_id : 'N/A'}</td>
                            <td>${subscription.formatted_start_at}</td>
                            <td>
                                 <span class="btn ${getStatusClass(status).class}">${getStatusClass(status).label}</span>
                            </td>
                        </tr>
                    `);
                        });

                        // Populate pagination links
                        populatePagination(response.current_page, response.last_page);
                    }
                });
            }

            // Helper function to return the appropriate class for status
            function getStatusClass(status) {
                switch (status) {
                    case 1:
                        return {
                            class: 'btn-info', 
                            label: 'Panding' 
                        };
                    case 2:
                        return {
                            class: 'btn-warning', 
                            label: 'Awaiting Payment' 
                        };
                    case 3:
                        return {
                            class: 'btn-success', 
                            label: 'Paid'
                        };
                    case 4:
                        return {
                            class: 'btn-danger', 
                            label: 'Failed'
                        };
                    default:
                        return {
                            class: 'btn-dark', 
                            label: 'Unknown'
                        };
                }
            }
            // Function to populate pagination links
            function populatePagination(currentPage, lastPage) {
                const pagination = $('#pagination');
                pagination.empty(); // Clear existing links

                // Add "Previous" link
                if (currentPage > 1) {
                    pagination.append(`
                <li class="page-item">
                    <a class="page-link" href="#" data-page="${currentPage - 1}">  <i class="fas fa-angle-left"></i>  </a>
                </li>
            `);
                } else {
                    pagination.append(`
                <li class="page-item disabled">
                    <a class="page-link" href="#">  <i class="fas fa-angle-left"></i>  </a>
                </li>
            `);
                }

                // Add page number links
                for (let i = 1; i <= lastPage; i++) {
                    if (i === currentPage) {
                        pagination.append(`
                    <li class="page-item active">
                        <a class="page-link" href="#">${i}</a>
                    </li>
                `);
                    } else {
                        pagination.append(`
                    <li class="page-item">
                        <a class="page-link" href="#" data-page="${i}">${i}</a>
                    </li>
                `);
                    }
                }

                // Add "Next" link
                if (currentPage < lastPage) {
                    pagination.append(`
                <li class="page-item">
                    <a class="page-link" href="#" data-page="${currentPage + 1}"> <i class="fas fa-angle-right"></i> </a>
                </li>
            `);
                } else {
                    pagination.append(`
                <li class="page-item disabled">
                    <a class="page-link" href="#"> <i class="fas fa-angle-right"></i> </a>
                </li>
            `);
                }

                // Handle pagination link clicks
                $('#pagination').on('click', '.page-link', function(e) {
                    e.preventDefault();
                    const page = $(this).data('page');
                    if (page) {
                        const searchTerm = $('#search').val(); 
                        loadTransactions(page, searchTerm);
                    }
                });

            }
        });
    </script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.front.main_layout', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /var/www/html/spion/resources/views/user/transactions.blade.php ENDPATH**/ ?>