@extends('dashboard.layouts.master')
@section('title', 'Ads Revenue | 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>
    /* ── Summary cards ─────────────────────────────────────────── */
    .summary-cards { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 0; }
    .summary-card  {
        flex: 1; min-width: 180px; background: #fff; border-radius: 8px;
        border: 1px solid #e5e9f0; padding: 18px 20px; text-align: center;
    }
    .summary-card .val { font-size: 26px; font-weight: 700; color: #002868; }
    .summary-card .lbl { font-size: 12px; color: #888; margin-top: 4px; }

    /* ── Badges – same as business-owner-management ────────────── */
    .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; }
</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 – same as business-owner-management ────────── --}}
        <div class="box-header">
            <div class="box-header-left">
                <h3 class="d-block">Ads Revenue Management</h3>
                <small class="d-inline-block">
                    <a href="{{ route('adminHome') }}">{{ __('backend.dashboard') }}</a> /
                    <span>Ads Management</span> /
                    <span>Revenue by Business Owner</span>
                </small>
            </div>
            <div class="box-header-right">
                {{-- Export buttons – same pattern as commission-reports ── --}}
                <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>

        {{-- Summary Cards ───────────────────────────────────────── --}}
        <div class="p-a bd-b">
            <div class="summary-cards">
                <div class="summary-card">
                    <div class="val" id="cardTotalOwners">—</div>
                    <div class="lbl">Business Owners</div>
                </div>
                <div class="summary-card">
                    <div class="val" id="cardTotalRevenue">—</div>
                    <div class="lbl">Total Revenue</div>
                </div>
                <div class="summary-card">
                    <div class="val" id="cardTotalAds">—</div>
                    <div class="lbl">Total Ad Records</div>
                </div>
            </div>
        </div>

        {{-- Filter Bar – same structure as commission-reports ───── --}}
        <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">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="adsRevenueTable">
                <thead class="dker">
                    <tr>
                        <th>Business Owner</th>
                        <th>Total Revenue</th>
                        <th>Total Ads</th>
                        <th>Last Transaction</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 table = $('#adsRevenueTable').DataTable({
        processing: true,
        serverSide: true,
        responsive: true,
        ordering:   true,
        columnDefs: [{ bSortable: false, aTargets: [4] }],
        ajax: {
            url:  "{{ route('ads-revenue.anyData') }}",
            type: 'POST',
            data: function (d) {
                d._token    = "{{ csrf_token() }}";
                d.date_from = $('#filter_date_from').val();
                d.date_to   = $('#filter_date_to').val();
            }
        },
        columns: [
            { data: 'business_name',    name: 'business_name' },
            { data: 'total_revenue',    name: 'total_revenue' },
            { data: 'total_ads',        name: 'total_ads' },
            { data: 'last_transaction', name: 'last_transaction' },
            { data: 'options',          orderable: false, className: 'text-center' },
        ],
        order: [[1, 'desc']],
        drawCallback: function (settings) {
            var api = this.api();
            $('#cardTotalOwners').text(settings._iRecordsTotal);

            var totalRev = 0, totalAds = 0;
            api.rows().data().each(function (row) {
                totalRev += parseFloat((row.total_revenue || '').toString().replace(/[$,]/g, '')) || 0;
                totalAds += parseInt(row.total_ads) || 0;
            });
            $('#cardTotalRevenue').text('$' + totalRev.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
            $('#cardTotalAds').text(totalAds.toLocaleString());
        }
    });

    // Auto-reload on any filter change – same as commission-reports
    $(document).on('change', '.filter-input', function () {
        table.draw();
    });

    // Build export URL with current filter values – same pattern as commission-reports
    function exportUrl(base) {
        return base + '?' + $.param({
            date_from: $('#filter_date_from').val(),
            date_to:   $('#filter_date_to').val(),
        });
    }

    $('#exportCsvBtn').on('click', function () {
        window.location.href = exportUrl("{{ route('ads-revenue.export-csv') }}");
    });

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