@extends('dashboard.layouts.master')
@section('title', 'Chat Thread Monitoring | 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>
    /* ── 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; }

    /* ── Page 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;
    }

    /* ── Read-only banner ── */
    .readonly-banner {
        background:#e3f2fd; border:1px solid #90caf9; border-radius:6px;
        padding:10px 16px; margin-bottom:18px;
        display:flex; align-items:center; gap:10px; font-size:13px; color:#1565c0;
    }
    .readonly-banner .material-icons { font-size:18px; }
</style>
@endpush

@section('content')
@can('offer.chat.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">Chat Thread Monitoring</h3>
            <small class="d-inline-block">
                <a href="{{ route('adminHome') }}">Dashboard</a> /
                <a href="{{ route('offer-management.index') }}">Offer Management</a> /
                <span>Chat Thread Monitoring</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') }}">
                <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') }}" class="active">
                <i class="material-icons" style="font-size:15px;line-height:1;">chat_bubble_outline</i> Chat Monitoring
            </a>
        </div>

        {{-- ── Read-only notice ── --}}
        <div class="readonly-banner">
            <i class="material-icons">info</i>
            This module is <strong>&nbsp;view-only</strong>. Chat content cannot be altered. You may suspend or delete accounts from within a thread if abusive or fraudulent behaviour is detected.
        </div>

        {{-- ── Filter Tabs ── --}}
        <div class="filter-tabs">
            <button class="filter-tab active" data-filter="">All Conversations</button>
            <button class="filter-tab" data-filter="user">User–User</button>
            <button class="filter-tab" data-filter="business">Involving Business</button>
        </div>

        {{-- ── DataTable ── --}}
        <div class="table-responsive">
            <table class="table table-striped b-t" id="chatThreadsTable">
                <thead>
                    <tr>
                        <th>Sender</th>
                        <th>Receiver</th>
                        <th>Messages</th>
                        <th>Last Message</th>
                        <th>Started</th>
                        @can('offer.chat.show')
                        <th width="80">Action</th>
                        @endcan
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </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>
$.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });
let activeFilter = '';

const table = $('#chatThreadsTable').DataTable({
    processing: true,
    serverSide: true,
    ajax: {
        url: "{{ route('offer-management.chat-threads.anyData') }}",
        type: 'POST',
        data: function(d) {
            d._token    = "{{ csrf_token() }}";
            d.filter_by = activeFilter;
        }
    },
    columns: [
        { data: 'sender',    name: 'sender' },
        { data: 'receiver',  name: 'receiver' },
        { data: 'messages',  name: 'messages',  orderable: false, searchable: false },
        { data: 'last_msg',  name: 'last_msg',  orderable: false, searchable: false },
        { data: 'started_at', name: 'started_at' },
        @can('offer.chat.show')
        { data: 'options',   name: 'options',   orderable: false, searchable: false },
        @endcan
    ],
    order: [[4, 'desc']],
    pageLength: 20,
    language: { processing: '<div class="loader"></div>' },
    drawCallback: function() { $('#loader').css('visibility','hidden'); },
    preDrawCallback: function() { $('#loader').css('visibility','visible'); }
});

$(document).on('click', '.filter-tab', function() {
    $('.filter-tab').removeClass('active');
    $(this).addClass('active');
    activeFilter = $(this).data('filter');
    table.ajax.reload();
});
</script>
@endpush