@extends('admin.layouts.masterlayout')
@section('styles')
<link href="{{asset('new_theme/assets/plugins/datatable/css/dataTables.bootstrap5.min.css')}}" rel="stylesheet" />

@endsection
@section('content')
<div class="main-content">
    <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
        <div class="breadcrumb-title pe-3">Reward Requests</div>
    </div>
    <div class="card">
        <div class="card-body">
            <div class="table-responsive white-space-nowrap">
                <table id="rewardTable" class="table table-bordered">
                    <thead class="text-nowrap">
                        <tr>
                            <th>#</th>
                            <th>User</th>
                            <th>Diamond Coins</th>
                            <th>Amount</th>
                            <th>Status</th>
                            <th>Date</th>
                        </tr>
                    </thead>
                </table>
            </div>

        </div>
    </div>

</div>
@endsection
@push('scripts')
<script src="{{asset('new_theme/assets/plugins/datatable/js/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('new_theme/assets/plugins/datatable/js/dataTables.bootstrap5.min.js')}}"></script>
<script>
$(document).on('change', '.change-status', function () {

    let id = $(this).data('id');
    let status = $(this).val();

    if (status === 'rejected') {
        $('#reason_' + id).removeClass('d-none');
    } else {
        $('#reason_' + id).addClass('d-none');
    }

});
$(document).on('click', '.save-status', function () {

    let id = $(this).data('id');
    let status = $(this).closest('td').find('.change-status').val();
    let reason = $('#reason_' + id).val();

    if (status === 'rejected' && reason === '') {
        alert('Please enter reject reason');
        return;
    }

    $.ajax({
        url: "{{ route('reward.requests.updateStatus') }}",
        type: "POST",
        data: {
            _token: "{{ csrf_token() }}",
            id: id,
            status: status,
            reason: reason
        },
        success: function () {
            alert('Status Updated');
            $('#rewardTable').DataTable().ajax.reload(null, false);
        }
    });

});
$(document).ready(function () {
    

    $('#rewardTable').DataTable({
        processing: true,
        serverSide: true,

        ajax: {
            url: "{{ route('reward.requests.list') }}",
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}"
            }
        },

        // ✅ IMPORTANT: Show length + export buttons
        dom: '<"d-flex justify-content-between align-items-center mb-2"lBf>rtip',

        // ✅ LENGTH MENU (Show entries dropdown)
        lengthMenu: [
            [10, 25, 50, 100],
            [10, 25, 50, 100]
        ],


        buttons: [
            {
                extend: 'csvHtml5',
                text: '<div class="d-flex align-items-center gap-2"><i class="material-icons-outlined fs-6">download</i> Export CSV</div>',
            }
        ],

        columns: [
            { data: 'DT_RowIndex', orderable: false, searchable: false },
            { data: 'user' },
            { data: 'coin' },
            { data: 'amount' },
            { data: 'status' },
            { data: 'date' }
        ]
    });

});
</script>
@endpush