@extends('layouts.front.main_layout')

@section('content')
    <br><br><br>
    <div class="container">
        {{-- Include the profile sidebar --}}
        <div class="row justify-content-center">

            @include('user.sidebar')

            <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>

                        {{-- Table for transactions --}}
                        <div class="table-responsive">
                            @if ($subscriptions->isEmpty())
                                <p>No transactions found.</p>
                            @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">
                                        {{-- @foreach ($subscriptions as $key => $subscription)
                                        @php
                                            // Get the transaction status value
                                            $transaction = $subscription->transactions->first();  // Get the first transaction
                                            $status = $transaction->pay_status ?? null;
                                        @endphp
                                        <tr>
                                            <td>{{ $key + 1 }}</td>
                                            <td>{{ $subscription->website->first_name .' '. $subscription->website->last_name  ?? 'N/A' }}</td>
                                            <td>{{ $subscription->plan->name ?? 'N/A' }}</td>
                                            <td>{{ optional($subscription->plan)->price ? '₹' . number_format(optional($subscription->plan)->price, 2) : 'N/A' }}</td>
                                            <td>{{ $transaction->transaction_id ?? 'N/A' }}</td>
                                            <td>{{ \Carbon\Carbon::parse($subscription->start_at)->format('d-m-Y H:i:s') }}</td>
                                            <td>
                                                @if ($status == 1)
                                                    <span class="btn btn-warning">Pending</span> <!-- Yellow -->
                                                @elseif($status == 2)
                                                    <span class="btn btn-danger">Unpaid</span> <!-- Red -->
                                                @elseif($status == 3)
                                                    <span class="btn btn-success">Paid</span> <!-- Green -->
                                                @elseif($status == 4)
                                                    <span class="btn btn-danger">Failed</span> <!-- Red -->
                                                @elseif($status == 5)
                                                    <span class="btn btn-secondary">Halted</span> <!-- Gray -->
                                                @else
                                                    <span class="btn btn-dark">Unknown</span> <!-- Dark Gray -->
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach --}}
                                    </tbody>
                                </table>
                            @endif
                        </div>
                        <div class="pagination">
                            <ul class="pagination justify-content-center" id="pagination">
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script>
        $(document).ready(function() {
            loadTransactions(1);
            $('#search').on('keyup', function() {
                const searchTerm = $(this).val(); 
                loadTransactions(1, searchTerm); 
            });

            function loadTransactions(page, searchTerm = '') {
                $.ajax({
                    url: '{{ 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>
@endsection