@extends('dashboard.layouts.master')
@section('title', 'QR Scan & Reward Logs | 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; display: flex; align-items: center; gap: 6px;
    }
    .filter-tab:hover { border-color: #002868; color: #002868; }
    .filter-tab.active { background: #002868; color: #fff; border-color: #002868; }
    .filter-tab .tab-count { background: rgba(0,0,0,.08); border-radius: 10px; padding: 1px 8px; font-size: 11px; }
    .filter-tab.active .tab-count { background: rgba(255,255,255,.25); }

    /* keep FA icons from inheriting the button's line-height so they don't overlap */
    .filter-tab i.fa,
    .filter-tab i.fas,
    .filter-tab i.far { font-size: 12px; line-height: 1; flex-shrink: 0; }

    /* ── Sub-nav ── */
    .page-subnav { display: flex; gap: 10px; 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; }
    .page-subnav a i.fa,
    .page-subnav a i.material-icons { font-size: 14px; line-height: 1; flex-shrink: 0; }

    /* ── Integrity notice ── */
    .integrity-notice {
        display: flex; align-items: flex-start; gap: 10px;
        background: #fffbea; border: 1px solid #f0c040; border-radius: 8px;
        padding: 12px 16px; margin-bottom: 16px; font-size: 13px; color: #856404;
    }
    .integrity-notice i { font-size: 18px; flex-shrink: 0; margin-top: 1px; }

    /* ── Badges ── */
    .badge { display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 700; }
    .badge-success  { background: #d4edda; color: #155724; }
    .badge-danger   { background: #f8d7da; color: #721c24; }
    .badge-info     { background: #cce5ff; color: #004085; }
    .badge-secondary{ background: #e2e3e5; color: #383d41; }
    .font-weight-bold { font-weight: 700 !important; }
</style>
@endpush

@section('content')
@can('offer.qr_logs.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">QR Scan &amp; Reward Logs</h3>
            <small class="d-inline-block">
                <a href="{{ route('adminHome') }}">Dashboard</a> /
                <a href="{{ route('offer-management.index') }}">Offer Management</a> /
                <span>QR &amp; Reward Logs</span>
            </small>
        </div>
    </div>

    <div class="box-body">

        {{-- ── Sub-nav ── --}}
        <div class="page-subnav">
            <a href="{{ route('offer-management.index') }}">
                <i class="material-icons">local_offer</i> Offers
            </a>
            <a href="{{ route('offer-management.images') }}">
                <i class="material-icons">photo_library</i> Image Moderation
            </a>
            {{-- Icon changed: qr_code_scanner (missing from local font → overlap) → fa-qrcode --}}
            <a href="{{ route('log-management.index') }}" class="active">
                <i class="fa fa-qrcode"></i> QR &amp; Reward Logs
            </a>
            <a href="{{ route('offer-management.chat-threads') }}">
                <i class="material-icons">chat_bubble_outline</i> Chat Monitoring
            </a>
        </div>

        {{-- ── Loyalty Integrity Notice ── --}}
        <div class="integrity-notice">
            <i class="material-icons">shield</i>
            <div>
                <strong>Loyalty Integrity Rule:</strong>
                Points once issued are immutable. Any exceptional correction must include an admin justification and is permanently recorded in the audit log. View a record to apply a correction.
            </div>
        </div>

        {{-- ── Filter Tabs ── --}}
        <div class="filter-tabs">
            <button class="filter-tab active" data-type="">
                All Events <span class="tab-count" id="cnt-all">—</span>
            </button>
            {{-- Icon changed: qr_code_scanner (missing from local font → overlap) → fa-qrcode --}}
            <button class="filter-tab" data-type="Earn">
                <i class="fa fa-qrcode"></i>
                QR Scans (Earn) <span class="tab-count" id="cnt-earn">—</span>
            </button>
            <button class="filter-tab" data-type="Redeem">
                <i class="material-icons" style="font-size:14px;line-height:1;">redeem</i>
                Reward Redemptions <span class="tab-count" id="cnt-redeem">—</span>
            </button>
            <button class="filter-tab" data-type="Correction">
                <i class="material-icons" style="font-size:14px;line-height:1;">tune</i>
                Corrections <span class="tab-count" id="cnt-correction">—</span>
            </button>
        </div>

        {{-- ── DataTable ── --}}
        <div class="table-responsive">
            <table class="table table-striped b-t" id="logTable">
                <thead>
                    <tr>
                        <th width="30">
                            <label class="ui-check m-a-0">
                                <input type="checkbox" id="checkAll"><i class="dark-white"></i>
                            </label>
                        </th>
                        <th>User</th>
                        <th>Business</th>
                        <th>Event Type</th>
                        <th>Points</th>
                        <th>Date &amp; Time</th>
                        <th width="80">Action</th>
                    </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>
@endif
@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 activeType = '';

const table = $('#logTable').DataTable({
    processing: true,
    serverSide: true,
    ajax: {
        url: "{{ route('log-management.anyData') }}",
        type: 'POST',
        data: function(d) {
            d._token   = "{{ csrf_token() }}";
            d.log_type = activeType;
        }
    },
    columns: [
        { data: 'checkbox',      orderable: false, searchable: false },
        { data: 'user_name',     name: 'user_name' },
        { data: 'business_name', name: 'business_name' },
        { data: 'type',          name: 'type',   orderable: false, searchable: false },
        { data: 'points',        name: 'points', orderable: false, searchable: false },
        { data: 'date_time',     name: 'event_date' },
        { data: 'options',       orderable: false, searchable: false },
    ],
    order: [[5, 'desc']],
    pageLength: 15,
    language: { processing: '<div class="loader"></div>' },
    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');
    activeType = $(this).data('type');
    table.ajax.reload();
});

/* ── Select all ── */
$('#checkAll').on('change', function() {
    $('input[name="ids[]"]').prop('checked', this.checked);
});

/* ── Tab counts ── */
function loadTabCounts() {
    const map = { '': '#cnt-all', 'Earn': '#cnt-earn', 'Redeem': '#cnt-redeem', 'Correction': '#cnt-correction' };
    Object.keys(map).forEach(function(t) {
        $.post("{{ route('log-management.anyData') }}", {
            _token: "{{ csrf_token() }}",
            log_type: t,
            start: 0, length: 1, draw: 1
        }, function(data) {
            $(map[t]).text(data.iTotalRecords);
        });
    });
}
loadTabCounts();
</script>
@endpush