@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: 5%;">Preview</th>
                <th>Post</th>
                <th>User</th>
                <th>Timestamp</th>
                <!-- <th>Reason</th> -->
                <th>Confidence</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody>
            @forelse($data as $val)
            <tr>
                <td scope="row">
                    <a href="javascript:;" data-src="{{ $val->links['original'] }}"  data-mime="{{ $val->links['file_mime'] }}" class="content-show">
                        <img class="rounded avatar-sm" alt="200x200" width="100" src="{{ $val->links['thumb'] }}" data-holder-rendered="true">
                    </a>
                </td>
                <td>{!! isset($val->postDetails->caption) ? $val->postDetails->caption : 'NA' !!}</td>
                <td>{!! isset($val->postDetails->user->name) ? $val->postDetails->user->name : 'NA' !!}</td>
                <td>{!! \App\Helpers\Helper::showDayDate($val->created_at) !!}</td>
                <!-- <td><span class="badge badge-pill badge-soft-dark font-size-12">AI</span> 83%</td> -->
                <td style="width: 6%" ><span class="badge badge-pill badge-soft-{{ $val->statuses[$val->confidence_status]['badge'] }} font-size-12">{!! $val->statuses[$val->confidence_status]['name'] !!}</span></td>
                <td style="width: 6%" id="status_{{ $val->id }}">
                    @if($val->status == 2)
                    <a href="javascript:;" class="status-approved btn btn-danger" data-id="{{ $val->id }}" data-toggle="tooltip" title="Make it approve">
                    @endif
                    <span class="{{ ($val->status == 2) ? 'black-text' : '' }} badge badge-pill badge-soft-{{ $val->statuses[$val->status]['badge'] }} font-size-12">{!! $val->statuses[$val->status]['name'] !!}</span>
                    @if($val->status == 2)
                    </a>
                    @endif
                </td>
                
            </tr>
            @empty
                <tr><td colspan="8" class="text-center">No content found.</td></tr>
            @endforelse
            
            
        </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">Post 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', '.status-approved', function() {
            var id = $(this).data('id');
            bootbox.confirm({
                closeButton: false, // hides the 'X'
                message: "The AI has rejected your content.<br> Are you sure you want to approve it?",
                buttons: {
                    confirm: {
                        label: 'Approve',
                        className: 'btn-success'
                    },
                    cancel: {
                        label: 'Close',
                        className: 'btn-danger'
                    }
                },
                callback: function(result) {
                    if (result) {
                        var form_data = new FormData();
                        form_data.append('_token', '{{ csrf_token() }}');
                        form_data.append('id', id);
                        $.ajax({
                            url: PATH + "/update-file-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');
                                }
                            },
                            error: function(xhr, status, error) {
                                //alert(xhr.responseText); 
                                $(".loader-wrapper").hide();
                                let text = xhr.responseJSON.errors + ' ' + xhr.statusText;
                                bootbox.alert(text);
                            }
                        });
                    }
                }
            });
        });
        $('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');
        });
    });
</script>
@endpush

@endsection