@extends('adminlte::page')

@section('title', 'Dashboard')

@section('content_header')
    <h1>Reported Users</h1>
    {{-- <small>Reported Users</small> --}}
@stop

@section('content')
    <div class="card card-dark">
        <div class="card-header">
            <h3 class="card-title"></h3>
        </div>
        <div class="card-body">
            @if (session('success'))
                <h6 class = 'alert alert-success'>
                    {{ Session('success') }}
                </h6>
            @endif
            <table class="table table-bordered reported-users">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Transporter Name</th>
                        <th>Reason</th>
                        <th>Uploaded File</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
    <!-- Confirmation Modal -->
    <div class="modal fade" id="confirmModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Confirm Status Change</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    Are you sure you want to change the status?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-close btn-danger" data-bs-dismiss="modal" aria-label="Close">Close</button>
                    <button type="button" class="btn btn-primary" id="confirmStatusChange">Yes</button>
                </div>
            </div>
        </div>
    </div>

@stop
@section('js')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script type="text/javascript">
        $(function() {

            var dataTable = $('.reported-users').DataTable({
                processing: true,
                serverSide: true,
                pageLength: 10,
                searching: false,
                'ajax': {
                    'url': "{{ route('reported.users') }}",
                },
                columns: [
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'email',
                        name: 'email',
                    },
                    {
                        data: 'transporter_name',
                        name: 'transporter_name',
                    },
                    {
                        data: 'reason',
                        name: 'reason',
                    },
                    { data: 'uploaded_file', name: 'uploaded_file', orderable: false, searchable: false }, // Image column
                    {
                        data: 'status',
                        name: 'status',
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ]
            });

            $('#search_keyword').keyup(function() {
                dataTable.draw();
            });
            $(document).ready(function() {
    var selectedUserId, selectedStatus;

    $(document).on('click', '.change-status', function() {
        selectedUserId = $(this).data('id');
        selectedStatus = $(this).data('status');

        $('#confirmModal').modal('show');
    });

    $('#confirmStatusChange').click(function() {
        $.ajax({
            url: "{{ route('reported.users.updateStatus') }}",
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                id: selectedUserId,
                status: selectedStatus
            },
            success: function(response) {
                $('#confirmModal').modal('hide');

                if (response.success) {
                    toastr.success('Status changed successfully!');
                    
                    // Reload page after short delay to show message
                    setTimeout(function() {
                        location.reload();
                    }, 1500); // Adjust delay if needed
                } else {
                    toastr.error('Something went wrong!');
                }
            },
            error: function() {
                $('#confirmModal').modal('hide');
                toastr.error('Failed to update status!');
            }
        });
    });
});
        });
    </script>
@stop