@extends('user.layouts.main')

@push('style')
    {{-- DataTables CSS --}}
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
@endpush

@section('contents')
    <div class="dashboard_wrapper border_start p-3">
        <div class="my-balance">
            <div class="mb-4">
                <h4 class="page_title">My Balance</h4>
            </div>

            <div class="balance-card">
                <div>
                    <div style="font-size: 20px; font-weight: bold;">Fallaagh</div>
                    <div class="balance-info">
                        Use this money to buy Premium Packages Fallaagh.com
                    </div>
                </div>
                <div style="text-align: right;">
                    <div class="balance-amount">VIRTUAL GH₵ {{ number_format($balance, 2) }}</div>
                </div>
            </div>

            <div class="mt-4">
                <h5 class="page_title mb-3">Balance History</h5>

                <div class="table-responsive">
                    <table id="myTable" class="table table-bordered table-striped">
                       <thead>
                            <tr>
                                <th>#</th>
                                <th>Type</th>
                                <th>Ad/Plan</th>
                                <th>Amount (GHS)</th>
                                <th>Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($history as $key => $item)
                                <tr>
                                    <td>{{ $key + 1 }}</td>
                                    <td>@if($item->bonus_type == 1) Premium Package Bonus @elseif($item->bonus_type == 2) Ad Trade Confirm  @elseif($item->bonus_type == 3) Package Purchase @endif</td>
                                    <td>
                                        @if ($item->bonus_type == 1)
                                               
                                               <a target="__blank" href="{{ route('frontend.membership') }}">{{ $item->plan->name }}</a>
                                        @elseif ($item->bonus_type == 2)
                                          <a href="{{ $item->ads->details_url }}" target="_blank"> {{ $item->ads->title }}</a>
                                        @elseif ($item->bonus_type == 3)
                                               <a  target="__blank" href="{{ route('frontend.membership') }}">{{ $item->plan->name }}</a>
                                        @else
                                         - 
                                        @endif
                                     
                                    
                                    
                                    </td>
                                    <td>@if($item->transaction_type == 2) - @endif{{ number_format($item->bonus_amount, 2) }}</td>
                                    <td>{{ $item->created_at ? $item->created_at->format('d M, Y h:i A') : '-' }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="text-center text-muted">No boost history found</td>
                                </tr>
                            @endforelse
                        </tbody>


                    </table>
                </div>
            </div>

        </div>
    </div>
@endsection
@push('scripts')
    {{-- jQuery + DataTables --}}
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>

    <script>
        $(document).ready(function() {
            // Check if table has any rows except the empty row
            if ($('#myTable tbody tr').length && !$('#myTable tbody tr td').hasClass('text-muted')) {
                $('#myTable').DataTable({
                    pageLength: 10,
                    order: [[4, 'desc']], // sort by Date column
                    language: {
                        search: "🔍 Search:",
                        lengthMenu: "Show _MENU_ entries",
                        info: "Showing _START_ to _END_ of _TOTAL_ records",
                        infoEmpty: "No records available",
                        zeroRecords: "No matching records found"
                    }
                });
            }
        });
    </script>
@endpush