@extends('admin.layout.master')
@push('css')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
    <!-- Buttons CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css">


@endpush
@section('content')

    <div class="content-body">
        <!-- Column selectors with Export Options and print table -->
        <section id="column-selectors">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                        </div>
                        <div class="card-content">
                            <div class="card-body card-dashboard">

                                <div class="table-responsive">
                                    <div class="widget-body">
                                        <div class="table-responsive">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div>
                                                        <div class="col-md-12">
                                                            <div class="widget">

                                                                <div class="widget-body">
                                                                    <table id="example" class="table table-striped" style="width:100%">
                                                                        <thead>
                                                                        <tr>
                                                                            <th>@lang('admin.name')</th>
                                                                            <th>@lang('admin.amountTransaction')</th>
                                                                            <th>@lang('admin.transationDate')</th>

                                                                        </tr>
                                                                        </thead>
                                                                        <tbody>
                                                                        @foreach($transtions as $transtion)
                                                                                <tr>
                                                                                    <td>{{\App\Models\User::where('id' , $transtion->user_id)->first()?->name}}</td>
                                                                                    <td>{{$transtion->amount}} @lang('admin.KD')</td>
                                                                                    <td>{{$transtion->created_at}}</td>

                                                                                </tr>
                                                                        @endforeach
                                                                        </tbody>

                                                                    </table>
                                                                </div>
                                                            </div><!-- .widget-body -->
                                                        </div><!-- .widget -->
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Column selectors with Export Options and print table -->

    </div>


@endsection
@push('js')
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- DataTables JS -->
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <!-- Buttons JS -->
    <script src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>
    <!-- JSZip for Excel export -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <!-- PDFMake for PDF export (optional) -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.5/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.5/vfs_fonts.js"></script>
    <!-- Buttons for Excel and Print -->
    <script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.print.min.js"></script>
    <script>

        $('#example').DataTable({
            dom: 'Bfrtip',  // Define the DOM structure for DataTable with Buttons
            buttons: [
                'excelHtml5', // Add Excel export button
                'print'       // Add Print button
            ]
        });



    </script>
@endpush