@extends('dashboard.layouts.master')
@section('title', 'Promotion Approval Queue | 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>
    .badge           { display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 700; }
    .badge-warning   { background: #fff3cd; color: #856404; }
    .badge-success   { background: #d4edda; color: #155724; }
    .badge-danger    { background: #f8d7da; color: #721c24; }
    .badge-info      { background: #cce5ff; color: #004085; }
    .badge-secondary { background: #e2e3e5; color: #383d41; }

    .filter-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 0; }
    .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 0.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(255,255,255,0.25); border-radius: 10px; padding: 1px 7px; font-size: 11px; }
    .filter-tab:not(.active) .tab-count { background: #eee; color: #666; }
</style>
@endpush

@section('content')
<div class="loader" id="loader"></div>
<div class="padding website-label">
    <div id="success_file_popup" style="margin-bottom: 10px;"></div>

    <div class="box">

        {{-- Header --}}
        <div class="box-header">
            <div class="box-header-left">
                <h3 class="d-block">Promotion Approval Queue</h3>
                <small class="d-inline-block">
                    <a href="{{ route('adminHome') }}">{{ __('backend.dashboard') }}</a> /
                    <span>Ads Management</span> /
                    <span>Promotion Approval Queue</span>
                </small>
            </div>
            <div class="box-header-right">
                <button type="button" class="btn btn-sm btn-default m-r-xs" id="exportCsvBtn">
                    <i class="material-icons md-16" style="vertical-align: middle;">file_download</i> Export CSV
                </button>
                <button type="button" class="btn btn-sm danger" id="exportPdfBtn">
                    <i class="material-icons md-16" style="vertical-align: middle;">picture_as_pdf</i> Export PDF
                </button>
            </div>
        </div>

        {{-- Status Filter Tabs --}}
        <div class="filter-tabs m-l m-b m-t-sm">
            <button class="filter-tab active" data-status="">
                All <span class="tab-count" id="cnt-all">—</span>
            </button>
            <button class="filter-tab" data-status="pending">
                Pending Approval <span class="tab-count" id="cnt-pending">—</span>
            </button>
            <button class="filter-tab" data-status="active">
                Active <span class="tab-count" id="cnt-active">—</span>
            </button>
            <button class="filter-tab" data-status="expired">
                Expired <span class="tab-count" id="cnt-expired">—</span>
            </button>
            <button class="filter-tab" data-status="rejected">
                Rejected <span class="tab-count" id="cnt-rejected">—</span>
            </button>
            <button class="filter-tab" data-status="hold">
                Hold <span class="tab-count" id="cnt-hold">—</span>
            </button>
        </div>

        {{-- Filters Section --}}
        <div class="p-a bd-b bg-light">
            <div class="row" id="filter-bar">
                <div class="col-md-3">
                    <div class="form-group m-b-0">
                        <label class="text-xs font-weight-bold">PROMOTION TYPE</label>
                        <select id="filter_type_id" class="form-control form-control-sm filter-input">
                            <option value="">All Types</option>
                            @foreach($types as $type)
                                <option value="{{ $type->id }}">{{ $type->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group m-b-0">
                        <label class="text-xs font-weight-bold">DATE FROM</label>
                        <input type="date" id="filter_date_from" class="form-control form-control-sm filter-input" value="{{ $date_from }}">
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group m-b-0">
                        <label class="text-xs font-weight-bold">DATE TO</label>
                        <input type="date" id="filter_date_to" class="form-control form-control-sm filter-input" value="{{ $date_to }}">
                    </div>
                </div>
            </div>
        </div>

        {{-- DataTable – same wrapper + classes as business-owner-management --}}
        <div class="table-responsive table_data">
            <table class="table table-bordered m-a-0" id="promotionTable">
                <thead class="dker">
                    <tr>
                        <th>Business Name</th>
                        <th>Promotion Type</th>
                        <th>Amount</th>
                        <th>Status</th>
                        <th>Requested Date</th>
                        <th class="no-sort text-center">Options</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>

    </div>
</div>
@endsection

@push('after-scripts')
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
    $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });

    var activeStatus = '';

    var table = $('#promotionTable').DataTable({
        processing: true,
        serverSide: true,
        responsive: true,
        ordering:   true,
        columnDefs: [{ bSortable: false, aTargets: [5] }],
        ajax: {
            url:  "{{ route('ads-promotion.anyData') }}",
            type: 'POST',
            data: function (d) {
                d._token    = "{{ csrf_token() }}";
                d.status    = activeStatus;
                d.promotion_type_id = $('#filter_type_id').val();
                d.date_from = $('#filter_date_from').val();
                d.date_to   = $('#filter_date_to').val();
            }
        },
        columns: [
            { data: 'business_name',  name: 'business_name' },
            { data: 'promotion_type', name: 'promotion_type' },
            { data: 'amount',         name: 'amount' },
            { data: 'status',         name: 'status' },
            { data: 'created_at',     name: 'created_at' },
            { data: 'options',        orderable: false, className: 'text-center' },
        ],
        order: [[4, 'desc']],
        drawCallback: function () { loadTabCounts(); }
    });

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

    // Auto-reload on date or type filter change
    $(document).on('change', '.filter-input', function () {
        table.draw();
    });

    // Load tab counts
    function loadTabCounts() {
        var statuses = { 
            'all': '', 
            'pending': 'pending', 
            'active': 'active', 
            'expired': 'expired', 
            'rejected': 'rejected', 
            'hold': 'hold' 
        };
        Object.entries(statuses).forEach(function ([key, val]) {
            $.post("{{ route('ads-promotion.anyData') }}", {
                _token: "{{ csrf_token() }}", 
                status: val, 
                promotion_type_id: $('#filter_type_id').val(),
                date_from: $('#filter_date_from').val(),
                date_to: $('#filter_date_to').val(),
                start: 0, length: 1, draw: 1
            }, function (data) {
                $('#cnt-' + key).text(data.iTotalRecords);
            });
        });
    }

    loadTabCounts();

    // Export URLs with active filters
    function exportUrl(base) {
        return base + '?' + $.param({
            status:    activeStatus,
            date_from: $('#filter_date_from').val(),
            date_to:   $('#filter_date_to').val(),
        });
    }

    $('#exportCsvBtn').on('click', function () {
        window.location.href = exportUrl("{{ route('ads-promotion.export-csv') }}");
    });
    $('#exportPdfBtn').on('click', function () {
        window.location.href = exportUrl("{{ route('ads-promotion.export-pdf') }}");
    });
});
</script>
@endpush