@extends('adminlte::page')

@include('admin.includes.datatable-axios-files')

@section('title', 'Users Management')

@section('content_header')
    <h1>User Transaction</h1>
    {{-- <small>Manage User Transaction</small> --}}
@stop

@section('content')
    <div class="card card-dark">
        <div class="card-header">
            <h3 class="card-title"> Transaction Details</h3>
            <div class="card-tools">
                {{-- <a href="#!" class="btn btn-dark invisible">test</a> --}}
                <!-- Additional tools (if any) -->
            </div>
        </div>
        <div class="card-body">
            <div class="form-group">
                <label for="search">Search</label>
                <x-adminlte-input class="form-control" id="search_keyword" name="search_keyword"
                    placeholder="searching..." />
            </div>
            <div class="form-group">
                <label for="status">Status</label>
                @php
                    $options = ['all' => 'All', 1 => 'Pending', 2 => 'Unpaid', 3 => 'Paid', 4 => 'Failed'];

                @endphp
                <x-adminlte-select name="status_filter" id="status_filter">
                    <x-adminlte-options :options="$options" selected="all" />
                </x-adminlte-select>
            </div>

            <table class="table table-bordered yajra-datatable">
                <thead>
                    <tr>
                        <th>User Name</th>
                        {{-- <th>Website ID</th> --}}
                        <th>Plan Type</th>
                        <th>Price</th>
                        <th>Transaction Id</th>
                        <th>Start Date</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Data will be populated by DataTables -->
                </tbody>
            </table>
        </div>
    </div>
@stop

@section('js')
    <script>
        $(document).ready(function() {
            var table = $('.yajra-datatable').DataTable({
                processing: true,
                serverSide: true,
                pageLength: 10,
                searching: false,
                ajax: {
                    url: "{{ route('admin.transactions.view') }}", // Ensure this is correct route
                    type: "GET",
                    data: function(d) {
                        d.search_keyword = $('#search_keyword').val();
                        d.status_filter = $('#status_filter').val();
                        d.website_id = "{{ $websiteId }}";
                    }
                },
                columns: [
                    // { data: 'user_id', name: 'user_id'}, 
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'plan_name',
                        name: 'plan_name'
                    },
                    {
                        data: 'price',
                        name: 'price'
                    },
                    {
                        data: 'transaction_id',
                        name: 'transaction_id'
                    },
                    {
                        data: 'start_date',
                        name: 'start_date'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                ]
            });

            $('#search_keyword, #status_filter').on('change', function() {
                table.draw();
            });
        });
    </script>
@stop