@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 style="width: 2% !important">Type</th>
                <th>Content</th>
                <th>Post</th>
                <th>Reported</th>
                <th>Status</th>
                <th style="width: 150px; text-align: right;">Actions</th>
            </tr>
        </thead>
        <tbody>
            @forelse ($data as $val)
            <tr>
                <td class="text-center" style="width: 2%"><span class="badge badge-pill badge-soft-dark font-size-12"><i class="bx {{(isset($val->fileDetails->links['mime_type']) && strpos($val->fileDetails->links['mime_type'], 'video')) ? 'bx-video' : 'bx-file'}}"></i></span></td>
                <td scope="row" style="width: 5%">
                    <a href="javascript:;" data-src="{{ (isset($val->fileDetails->links['thumb'])) ? $val->fileDetails->links['thumb'] : asset('img/dummy/cannabis-hanf-mariuhana-cannabisgesetz-weed-600nw-2509819063.webp') }}"  data-mime="{{ (isset($val->fileDetails->links['file_mime'])) ? $val->fileDetails->links['file_mime'] : 'image/jpeg'}}" class="content-show">
                        <img class="rounded avatar-sm" alt="200x200" width="100" src="{{ (isset($val->fileDetails->links['thumb'])) ? $val->fileDetails->links['thumb'] : asset('img/dummy/cannabis-hanf-mariuhana-cannabisgesetz-weed-600nw-2509819063.webp') }}" data-holder-rendered="true">
                    </a>
                </td>
                <td>
                    {{ isset($val->postDetails->caption) ? $val->postDetails->caption : 'N/A' }} 
                    
                </td>

                <td>{{$val->reportUsers->count()}}</td>
                <td id="status_{{ $val->id }}">
                    <span class="badge badge-pill badge-soft-{{ $val->statuses[$val->status]['badge'] }} font-size-12">{!! $val->statuses[$val->status]['name'] !!}</span>
                    
                </td>
                <td class="text-right">
                    <a href="javascript:;" class=" {{($val->status != 2) ? 'd-none' : ''}}" id="status_reason_{{ $val->id }}" data-toggle="tooltip" title="Reason" onclick="showFlagMsg('{{ $val->reason }}')">                       
                        <i class="bx bx-comment-dots fa-2x text-dark"></i>
                    </a>
                    <a href="{{ route('content-moderations.post-file-report-users', $val->id) }}" data-toggle="tooltip" title="User Lists"><i class="bx bx-user-circle fa-2x text-dark"></i></a>
                    <a href="javascript:;" class="status-update" data-id="{{ $val->id }}" data-toggle="tooltip" title="Status Update"><i class="bx bx-chevron-right fa-2x text-dark"></i></a>
                </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>

<div class="modal fade" id="contentModal" tabindex="-1" aria-labelledby="myModalLabel" style="display: none;" aria-hidden="true">
    <div class="modal-dialog modal-md" role="dialog">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title mt-0">Report Content</h5>
                    <button type="button" class="close cross-btn" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true"><i class="fas fa-times"></i></span>
                    </button>
                </div>
                <div class="modal-body text-center"> 
                   
                </div>
            </div>
        </div>
    </div>
</div>

@include('admin.components.pagination')
@push('page_script')
<script>
    $(document).ready(function() {
        $('body').on('click', '.content-show', function() {
            var src = $(this).data('src');
            var mime = $(this).data('mime');
            if (mime.startsWith('image/')) {
                $('#contentModal .modal-body').html('<img src="' + src + '" class="img-fluid" alt="Content Image">');
            } else if (mime.startsWith('video/')) {
                $('#contentModal .modal-body').html('<video controls class="img-fluid"><source src="' + src + '" type="' + mime + '">Your browser does not support the video tag.</video>');
            } else {
                $('#contentModal .modal-body').html('<p>Unsupported content type.</p>');
            }
            $('#contentModal').modal('show');
        });

        $('body').on('click', '.status-update', function() {
            var id = $(this).data('id');
            var dialog = bootbox.dialog({
                title: '',
                message: `<p>Do you want to approve or reject this content?</p>
                            <div class="form-group">
                                <label for="bootbox-textarea">Reason : </label>
                                <textarea id="bootbox-reason-textarea" class="form-control" rows="4" placeholder="Type here..."></textarea>
                            </div>`,
                closeButton: false,
                backdrop: true,
                buttons: {
                    reject: {
                      label: 'Reject',
                      className: 'btn-danger',
                      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: 'Close',
                        className: 'btn-warning'
                    }
                },
            });
        });

        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);
            form_data.append('reason', $('#bootbox-reason-textarea').val());
            $.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);
                        if (status == 2) {
                            $("#status_reason_" + id).attr('onclick', 'showFlagMsg("' + $('#bootbox-reason-textarea').val() + '")');
                            $("#status_reason_" + id).removeClass('d-none');
                        }
                        else {
                            $("#status_reason_" + id).addClass('d-none');
                        }
                        
                        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);
                }
            });
        }

        
    });

    function showFlagMsg(msg) {        
            Swal.fire({
                title: 'Reject Reason',
                text: msg,
                icon: 'info',
                confirmButtonText: 'Thanks'
            });
        }
</script>
@endpush

@endsection