@php ($headerOption = [
'title' => $module,
'header_buttons' => [],
'filters' => isset($filters) ? $filters : [],
'data' => isset($data) ? $data : []
])
@extends('admin.layouts.layout', $headerOption)


@section('content')
<div class="table-responsive">
    <table class="{!! \Config::get('view.table.table_class') !!}">
        <thead class="{!! \Config::get('view.table.table_head_class') !!}">
            <tr>
                <th>User</th>
                <th>Reason</th>
                <th>Timestamp</th>
            </tr>
        </thead>
        <tbody>
            @forelse ($data as $val)
            <tr>
                <td width="30%">
                    {{ isset($val->userDetails->name) ? $val->userDetails->name : 'N/A' }} 
                </td>
                
                <td>{!! $val->reason !!}</td>
                <td>
                    {!! \App\Helpers\Helper::showdate($val->created_at) !!}
                </td>
            </tr>
            @empty
                <tr><td colspan="8" class="text-center">No content found.</td></tr>
            @endforelse

           {{-- <tr>
                <td class="text-center"><span class="badge badge-pill badge-soft-dark font-size-12"><i class="bx bx-file"></i></span></td>
                <td scope="row" style="width: 5%"><img class="rounded avatar-sm" alt="200x200" width="100" src="{{ asset('img/dummy/istockphoto-1409118809-612x612.jpg') }}" data-holder-rendered="true"></td>
                <td>
                    JohnDoe <br>
                    <i class="bx bx-check-circle text-muted"></i> Content
                </td>
                <td>Today <br>9:05 AM</td>
                <td>Drug Content</td>
                <td>22</td>
                <td><span class="badge badge-pill badge-soft-warning font-size-12">Pending Review</span></td>
                <td class="text-right">
                    <a href="#"><i class="bx bx-user-circle fa-2x text-dark"></i></a>
                    <a href="{{ route($routePrefix . '.show', 1) }}" class="show-modal d-none"><i class="bx bx-chevron-right fa-2x text-dark"></i></a>
                </td>
            </tr>

            <tr>
                <td class="text-center"><span class="badge badge-pill badge-soft-dark font-size-12"><i class="bx bx-video"></i></span></td>
                <td scope="row" style="width: 5%">
                    <div class="avatar-sm ">
                        <span class="avatar-title rounded bg-dark text-white font-size-16" data-toggle="tooltip" data-original-title="">MC</span>
                    </div>
                </td>
                <td>
                    stonerguy <br>
                    A Offense
                </td>
                <td>Yesterday <br>8:32 PM</td>
                <td>Profanity</td>
                <td>18</td>
                <td><span class="badge badge-pill badge-soft-danger font-size-12">Rejected</span></td>
                <td class="text-right">
                    <a href="#"><i class="bx bx-bell fa-2x text-dark"></i></a>
                    <a href="#"><i class="bx bx-user-circle fa-2x text-dark"></i></a>
                    <a href="{{ route($routePrefix . '.show', 1) }}" class="show-modal"><i class="bx bx-chevron-right fa-2x text-dark"></i></a>
                </td>
            </tr>

            <tr>
                <td class="text-center"><span class="badge badge-pill badge-soft-dark font-size-12"><i class="bx bx-bar-chart"></i></span></td>
                <td scope="row" style="width: 5%"><img class="rounded avatar-sm" alt="200x200" width="100" src="{{ asset('img/dummy/first-study-to-show-use-of-high-potency-cannabis-leaves-a-v0-uDynYMCqFWwo_UCZo2HntLxUtgc74yEDRG9urg8D5rU.webp') }}" data-holder-rendered="true"></td>
                <td>
                    devilstand45 <br>
                    A Review
                </td>
                <td>May 14 <br>5:47 PM</td>
                <td>Graphic Violence <br/>Pirinding</td>
                <td>9</td>
                <td><span class="badge badge-pill badge-soft-warning font-size-12">Pending Review</span></td>
                <td class="text-right">
                    <a href="#"><i class="bx bx-bell fa-2x text-dark"></i></a>
                    <a href="#"><i class="bx bx-user-circle fa-2x text-dark"></i></a>
                    <a href="{{ route($routePrefix . '.show', 1) }}" class="show-modal"><i class="bx bx-chevron-right fa-2x text-dark"></i></a>
                </td>
            </tr> --}}
        </tbody>
    </table>
</div>

@include('admin.components.pagination')
@push('page_script')
<script>
    $(document).ready(function() {
         $('body').on('click', '.status-update', function() {
            var id = $(this).data('id');
            var dialog = bootbox.dialog({
                title: '',
                message: `<p>Do you want to approve or disapprove this report?</p>`,
                closeButton: false,
                backdrop: true,
                buttons: {
                    disapprove: {
                      label: 'Disapprove',
                      className: 'btn-secondary',
                      callback: function() {
                        updateStatus(id, 2, dialog);
                        return false; // keep dialog open
                      }
                    },
                    approve: {
                      label: 'Approve',
                      className: 'btn-success',
                      callback: function() {
                        updateStatus(id, 1, dialog);
                        return false; // keep dialog open
                      }
                    },
                    cancel: {
                        label: 'No',
                        className: 'btn-danger'
                    }
                },
            });
        });

        function updateStatus(id, status, dialog) {
            var form_data = new FormData();
            form_data.append('_token', '{{ csrf_token() }}');
            form_data.append('id', id);
            form_data.append('status', status);
            $.ajax({
                url: PATH + "/update-post-report-status",
                data: form_data,
                type: 'POST',
                contentType: false,
                processData: false,
                beforeSend: function() {
                    $(".loader-wrapper").show();
                },
                success: function(data) {
                    $(".loader-wrapper").hide();
                    if (data.success) {
                        $("#status_" + id).html(data.data.html);
                        showNotification('success', data.message, 'top', 'right', 'animated rotateInUpRight', 'animated rotateOutUpRight');
                    } else {
                        showNotification('error', data.message, 'top', 'right', 'animated rotateInUpRight', 'animated rotateOutUpRight');
                    }
                },
                complete: function () {
                    dialog.modal('hide');
                },
                error: function(xhr, status, error) {
                    $(".loader-wrapper").hide();
                    let text = xhr.responseJSON.errors + ' ' + xhr.statusText;
                    bootbox.alert(text);
                }
            });
        }
    });
</script>
@endpush

@endsection