@extends('dashboard.layouts.master')
@section('title', '{{ $businessName }} – 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>
    .info-bar       { background: #f8f9fc; border: 1px solid #e5e9f0; border-radius: 8px; padding: 16px 20px; margin-bottom: 20px; }
    .info-bar h4    { margin: 0 0 4px 0; font-size: 18px; color: #002868; }
    .info-bar small { color: #888; }
    .revenue-badge  {
        display: inline-block; background: #002868; color: #fff;
        border-radius: 6px; padding: 8px 20px; font-size: 20px; font-weight: 700;
    }
    .label.success  { background: #28a745; color: #fff; padding: 3px 8px; border-radius: 4px; font-size: 11px; }
    .label.danger   { background: #dc3545; color: #fff; padding: 3px 8px; border-radius: 4px; font-size: 11px; }
</style>
@endpush

@section('content')
<div class="padding website-label">
    <div class="box">

        {{-- Header --}}
        <div class="box-header">
            <div class="box-header-left">
                <h3 class="d-block">{{ $businessName }} – Revenue Logs</h3>
                <small class="d-inline-block">
                    <a href="{{ route('adminHome') }}">{{ __('backend.dashboard') }}</a> /
                    <a href="{{ route('ads-revenue.index') }}">Ads Revenue</a> /
                    <span>{{ $businessName }}</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>

        {{-- Info Bar --}}
        <div class="p-a">
            <div class="info-bar d-flex align-items-center justify-content-between flex-wrap" style="gap: 12px;">
                <div>
                    <h4>{{ $businessName }}</h4>
                    <small>Sponsor Ads Revenue Detail</small>
                </div>
                <div>
                    <span class="revenue-badge" id="totalRevenueDisplay">$0.00</span>
                    <small class="d-block text-muted text-center" style="font-size: 11px; margin-top: 4px;">Total Revenue</small>
                </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 --}}
        <div class="table-responsive p-a">
            <table class="table table-bordered m-a-0" id="detailTable">
                <thead class="dker">
                    <tr>
                        <th>Date &amp; Time</th>
                        <th>Amount</th>
                        <th>Ad Type</th>
                        <th>Subscription Expires</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>

        {{-- Back button --}}
        <div class="box-footer">
            <a href="{{ route('ads-revenue.index') }}" class="btn btn-default">
                <i class="material-icons">&#xe5cd;</i> Back to Revenue List
            </a>
        </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 = $('#detailTable').DataTable({
        processing: true,
        serverSide: true,
        responsive: true,
        ordering:   true,
        searching:  false,
        ajax: {
            url:  "{{ route('ads-revenue.detailData', $id) }}",
            type: 'POST',
            data: function (d) {
                d._token    = "{{ csrf_token() }}";
                d.date_from = $('#filter_date_from').val();
                d.date_to   = $('#filter_date_to').val();
            },
            dataSrc: function (json) {
                if (json.total_revenue) {
                    $('#totalRevenueDisplay').text(json.total_revenue);
                }
                return json.aaData || json.data || [];
            }
        },
        columns: [
            { data: 'transaction_date',         name: 'transaction_date' },
            { data: 'amount',                   name: 'amount' },
            { data: 'ad_type',                  name: 'ad_type' },
            { data: 'subscription_expire_date', name: 'subscription_expire_date' },
        ],
        order: [[0, 'desc']],
        createdRow: function (row) {
            $(row).find('td:eq(1)').addClass('font-weight-bold text-success');
        }
    });

    // 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) {
        var params = {
            date_from: $('#filter_date_from').val(),
            date_to:   $('#filter_date_to').val(),
        };
        return base + '?' + $.param(params);
    }

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

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