@extends('dashboard.layouts.master')
@section('title', 'Image Moderation | Admin Panel')

@push('after-styles')
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" type="text/css" />
<style>
    /* ── Sub-nav ── */
    .page-subnav { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
    .page-subnav a {
        padding:8px 20px; border-radius:6px; font-size:13px; font-weight:600;
        text-decoration:none; border:1px solid #ddd; color:#555;
        display:inline-flex; align-items:center; gap:6px;
    }
    .page-subnav a.active, .page-subnav a:hover { background:#002868; color:#fff; border-color:#002868; }

    /* ── Filter Tabs ── */
    .filter-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
    .filter-tab {
        padding:7px 18px; border-radius:20px; border:1px solid #ddd;
        background:#fff; cursor:pointer; font-size:13px; font-weight:600;
        color:#555; transition:all .2s;
    }
    .filter-tab:hover { border-color:#002868; color:#002868; }
    .filter-tab.active { background:#002868; color:#fff; border-color:#002868; }
    .tab-count { background:rgba(0,0,0,.08); border-radius:10px; padding:1px 8px; font-size:11px; margin-left:4px; }
    .filter-tab.active .tab-count { background:rgba(255,255,255,.25); }
</style>
@endpush

@section('content')
@can('offer.image.read')

<div class="loader" id="loader"></div>
<div class="padding">
<div class="box">

    {{-- ── Page Header ── --}}
    <div class="box-header m-b-2">
        <div class="box-header-left">
            <h3 class="d-block">Image Moderation</h3>
            <small class="d-inline-block">
                <a href="{{ route('adminHome') }}">Dashboard</a> /
                <a href="{{ route('offer-management.index') }}">Offer Management</a> /
                <span>Image Moderation</span>
            </small>
        </div>
    </div>

    <div class="box-body">

        {{-- ── Sub-nav ── --}}
        <div class="page-subnav">
            <a href="{{ route('offer-management.index') }}">
                <i class="material-icons" style="font-size:15px;line-height:1;">local_offer</i> Offer List
            </a>
            <a href="{{ route('offer-management.images') }}" class="active">
                <i class="material-icons" style="font-size:15px;line-height:1;">photo_library</i> Image Moderation
            </a>
            <a href="{{ route('log-management.index') }}">
                <i class="fa fa-qrcode" style="font-size:13px;line-height:1;"></i> QR &amp; Reward Logs
            </a>
            <a href="{{ route('offer-management.chat-threads') }}">
                <i class="material-icons" style="font-size:15px;line-height:1;">chat_bubble_outline</i> Chat Monitoring
            </a>
        </div>

        {{-- ── Filter Tabs ── --}}
        <div class="filter-tabs">
            <button class="filter-tab active" data-status="pending">
                Pending <span class="tab-count" id="cnt-pending">—</span>
            </button>
            <button class="filter-tab" data-status="1">
                Approved <span class="tab-count" id="cnt-1">—</span>
            </button>
            <button class="filter-tab" data-status="0">
                Rejected <span class="tab-count" id="cnt-0">—</span>
            </button>
            <button class="filter-tab" data-status="">
                All Images <span class="tab-count" id="cnt-all">—</span>
            </button>
        </div>

        {{-- ── DataTable ── --}}
        <div class="table-responsive">
            <table class="table table-striped b-t" id="imageTable">
                <thead>
                    <tr>
                        <th width="90">Image</th>
                        <th>Business Name</th>
                        <th>Owner Name</th>
                        <th>Uploaded By</th>
                        <th>Status</th>
                        <th>Date</th>
                        <th width="160">Actions</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>

    </div>
</div>
</div>

{{-- Image Viewer Modal --}}
<div id="imgViewerModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Image Preview</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body p-0 text-center">
                <img id="imgViewerSrc" src="" style="max-width:100%;" alt="Preview">
            </div>
        </div>
    </div>
</div>

@else
<input type="hidden" value="{{ route('adminHome') }}" id="redirect_url">
<script>window.location.replace(document.getElementById('redirect_url').value);</script>
@endcan
@endsection

@push('after-scripts')
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.7.0/sweetalert2.all.min.js"></script>
<script>
$.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });
const CSRF = "{{ csrf_token() }}";
let activeImgStatus = 'null';

const table = $('#imageTable').DataTable({
    processing: true,
    serverSide: true,
    ajax: {
        url: "{{ route('offer-management.image-anyData') }}",
        type: 'POST',
        data: function(d) {
            d._token     = CSRF;
            d.img_status = activeImgStatus;
        }
    },
    columns: [
        { data: 'preview',       name: 'preview',       orderable: false, searchable: false },
        { data: 'business_name', name: 'business_name' },
        { data: 'owner_name',    name: 'owner_name' },
        { data: 'upload_by',     name: 'upload_by',     orderable: false, searchable: false },
        { data: 'status',        name: 'status',        orderable: false, searchable: false },
        { data: 'created_at',    name: 'created_at' },
        { data: 'actions',       name: 'actions',       orderable: false, searchable: false },
    ],
    order: [[5, 'desc']],
    pageLength: 15,
    drawCallback: function() { $('#loader').css('visibility','hidden'); },
    preDrawCallback: function() { $('#loader').css('visibility','visible'); }
});

/* ── Filter tabs ── */
$(document).on('click', '.filter-tab', function() {
    $('.filter-tab').removeClass('active');
    $(this).addClass('active');
    const s = $(this).data('status');
    activeImgStatus = (s === 'pending') ? 'null' : String(s);
    table.ajax.reload();
});

/* ── Image viewer ── */
function openImgModal(url) {
    document.getElementById('imgViewerSrc').src = url;
    $('#imgViewerModal').modal('show');
}

/* ── Moderate image ── */
function moderateImage(imageId, status) {
    const label = status === 1 ? 'approve' : 'reject';
    Swal.fire({
        icon: status === 1 ? 'question' : 'warning',
        title: status === 1 ? 'Approve Image?' : 'Reject Image?',
        text: status === 1
            ? 'This image will be visible in the business gallery.'
            : 'This image will be hidden from the business gallery.',
        showCancelButton: true,
        confirmButtonColor: status === 1 ? '#1b5e20' : '#c62828',
        confirmButtonText: status === 1 ? 'Yes, Approve' : 'Yes, Reject',
    }).then(result => {
        if (!result.isConfirmed) return;
        $('#loader').css('visibility','visible');
        $.ajax({
            url: "{{ route('offer-management.moderate-image') }}",
            type: 'POST',
            data: { _token: CSRF, image_id: imageId, img_status: status },
            success: function(r) {
                $('#loader').css('visibility','hidden');
                if (r.success) {
                    Swal.fire({ icon: 'success', title: 'Done', text: r.msg, confirmButtonColor:'#002868' })
                        .then(() => { table.ajax.reload(); loadTabCounts(); });
                } else {
                    Swal.fire('Error', r.msg, 'error');
                }
            },
            error: function() {
                $('#loader').css('visibility','hidden');
                Swal.fire('Error', 'Something went wrong.', 'error');
            }
        });
    });
}

/* ── Tab counts ── */
function loadTabCounts() {
    // All
    $.post("{{ route('offer-management.image-anyData') }}", { _token: CSRF, img_status: '', start:0, length:1, draw:1 },
        r => $('#cnt-all').text(r.iTotalRecords));
    // Pending (null in DB)
    $.post("{{ route('offer-management.image-anyData') }}", { _token: CSRF, img_status: 'null', start:0, length:1, draw:1 },
        r => $('#cnt-pending').text(r.iTotalRecords));
    // Approved
    $.post("{{ route('offer-management.image-anyData') }}", { _token: CSRF, img_status: '1', start:0, length:1, draw:1 },
        r => $('#cnt-1').text(r.iTotalRecords));
    // Rejected
    $.post("{{ route('offer-management.image-anyData') }}", { _token: CSRF, img_status: '0', start:0, length:1, draw:1 },
        r => $('#cnt-0').text(r.iTotalRecords));
}
loadTabCounts();
</script>
@endpush