@extends('voyager::master')

@section('page_title', __('voyager::generic.viewing').' '.'f')

@section('page_header')
    <div class="container-fluid">
        <h1 class="page-title">All ordered Services</h1>
    </div>
@stop

@section('content')
    <div class="container">
       
        <h2>All Transactions</h2>
        <table class="table" id="transactionsTable">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Type</th>
                    <th>Amount</th>
                    <th>Date</th>
                    <th>Service</th>
                    <th>User</th>
                </tr>
            </thead>
            <tbody>
                @foreach($withdrawalsWithUserEmail as $withdrawal)
                    @php
                        $transaction = $withdrawal['transaction_details'];
                        $userEmail = $withdrawal['user_email'];
                    @endphp
                    <tr>
                        <td>{{ $transaction['id'] }}</td>
                        <td>Purchase</td>
                        <td><span class="badge bg-success">{{ $transaction['amount'] }}</span></td>
                        <td>{{ $transaction['created_at'] }}</td>
                        <td>
                            @if($transaction['meta'] && isset($transaction['meta']['payment_method']))
                                {{ $transaction['meta']['payment_method'] }}
                            @endif
                        </td>
                        <td>{{ $userEmail }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <!-- Include jQuery and DataTables scripts -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.10/js/jquery.dataTables.min.js"></script>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.10/css/jquery.dataTables.min.css">

    <script>
        // Initialize DataTable with descending sorting by default
        $(document).ready(function() {
            $('#transactionsTable').DataTable({
                "order": [[0, 'desc']]
            });
        });
    </script>
@endsection