@extends('dashboard.layouts.master')
@section('title', 'Offer Management | 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; }
    .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); }

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

    /* ── Type filter select ── */
    .type-filter-wrap {
        display:inline-flex; align-items:center; gap:8px; margin-bottom:16px;
    }
    .type-filter-wrap select {
        padding:6px 14px; border-radius:20px; border:1px solid #ddd;
        font-size:13px; font-weight:600; color:#555; background:#fff;
        cursor:pointer; outline:none; min-width:180px;
    }
    .type-filter-wrap select:focus { border-color:#002868; color:#002868; }
</style>
@endpush

@section('content')
@can('offer.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">Offer Management</h3>
            <small class="d-inline-block">
                <a href="{{ route('adminHome') }}">Dashboard</a> /
                <span>Offer Management</span>
            </small>
        </div>
    </div>

    <div class="box-body">

        {{-- ── Sub-nav ── --}}
        <div class="page-subnav">
            <a href="{{ route('offer-management.index') }}" class="active">
                <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') }}">
                <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="">
                All Offers <span class="tab-count" id="cnt-all">—</span>
            </button>
            <button class="filter-tab" data-status="1">
                Pending <span class="tab-count" id="cnt-1">—</span>
            </button>
            <button class="filter-tab" data-status="2">
                Approved <span class="tab-count" id="cnt-2">—</span>
            </button>
            <button class="filter-tab" data-status="3">
                Rejected <span class="tab-count" id="cnt-3">—</span>
            </button>
            <button class="filter-tab" data-status="5">
                Under Review <span class="tab-count" id="cnt-5">—</span>
            </button>
        </div>

        {{-- ── Offer Type Filter ── --}}
        <div class="type-filter-wrap">
            <label style="font-size:13px;font-weight:600;color:#555;margin:0;">Offer Type:</label>
            <select id="typeFilter">
                <option value="">All Types</option>
                <option value="1">Product Discount</option>
                <option value="2">General Discount</option>
                <option value="3">Time-Based Offer</option>
                <option value="4">Limited Coupon</option>
                <option value="5">Buy X Get Y</option>
            </select>
        </div>

        {{-- ── DataTable ── --}}
        <div class="table-responsive">
            <table class="table table-striped b-t" id="offerTable">
                <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 width="60">ID</th>
                        <th>Offer Title</th>
                        <th>Business Name</th>
                        <th>Branches</th>
                        <th>Start Date</th>
                        <th>End Date</th>
                        <th>Offer Type</th>
                        <th>Status</th>
                        <th>Created</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>
@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') } });
let activeStatus = '';
let activeType   = '';

const table = $('#offerTable').DataTable({
    processing: true,
    serverSide: true,
    ajax: {
        url: "{{ route('offer-management.anyData') }}",
        type: 'POST',
        data: function(d) {
            d._token              = "{{ csrf_token() }}";
            d.admin_offer_status  = activeStatus;
            d.offer_type_id       = activeType;
        }
    },
    columns: [
        { data: 'checkbox',      name: 'checkbox',      orderable: false, searchable: false },
        { data: 'offer_id',      name: 'offer_id' },
        { data: 'title',         name: 'title' },
        { data: 'business_name', name: 'business_name' },
        { data: 'branch_info',   name: 'branch_info',   orderable: false, searchable: false },
        { data: 'start_date',    name: 'start_date' },
        { data: 'end_date',      name: 'end_date' },
        { data: 'offer_type',    name: 'offer_type',    orderable: false, searchable: false },
        { data: 'admin_status',  name: 'admin_status',  orderable: false, searchable: false },
        { data: 'created_at',    name: 'created_at' },
        { data: 'options',       name: 'options',        orderable: false, searchable: false },
    ],
    order: [[1, 'desc']],
    pageLength: 15,
    language: { processing: '<div class="loader"></div>' },
    drawCallback: function() { $('#loader').css('visibility','hidden'); },
    preDrawCallback: function() { $('#loader').css('visibility','visible'); }
});

/* ── Status filter tabs ── */
$(document).on('click', '.filter-tab', function() {
    $('.filter-tab').removeClass('active');
    $(this).addClass('active');
    activeStatus = $(this).data('status');
    table.ajax.reload();
});

/* ── Offer type filter ── */
$('#typeFilter').on('change', function() {
    activeType = $(this).val();
    table.ajax.reload();
});

/* ── Select all checkbox ── */
$('#checkAll').on('change', function() {
    $('input[name="ids[]"]').prop('checked', this.checked);
    checkChange();
});
function checkChange() {
    const anyChecked = $('input[name="ids[]"]:checked').length > 0;
    $('#checkAll').prop('checked', $('input[name="ids[]"]').length === $('input[name="ids[]"]:checked').length);
}

/* ── Tab counts ── */
function loadTabCounts() {
    ['', '1', '2', '3', '5'].forEach(function(s) {
        $.post("{{ route('offer-management.anyData') }}", {
            _token: "{{ csrf_token() }}",
            admin_offer_status: s,
            start: 0, length: 1, draw: 1
        }, function(data) {
            const el = s === '' ? '#cnt-all' : '#cnt-' + s;
            $(el).text(data.iTotalRecords);
        });
    });
}
loadTabCounts();
</script>
@endpush