<x-app-layout>

<div class="container-fluid">
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">Reports</h5>
            <div>
                @can('reports.export')
                    <button id="export-revenue" class="btn btn-primary btn-sm">Export Revenue CSV</button>
                @endcan
            </div>
        </div>
        <div class="card-body">
            <div class="row mb-3">
                <div class="col-md-3">
                    <input type="date" id="from" class="form-control" placeholder="From" />
                </div>
                <div class="col-md-3">
                    <input type="date" id="to" class="form-control" placeholder="To" />
                </div>
                <div class="col-md-3">
                    <button id="filter" class="btn btn-secondary">Filter</button>
                </div>
            </div>

            <table id="reports-revenue-table" class="table table-striped table-bordered" style="width:100%">
                <thead>
                    <tr>
                        <th>Month</th>
                        <th>Total</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

@push('scripts')
<script>
$(function() {
    var table = $('#reports-revenue-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: '{{ route("admin.reports.revenue.data") }}',
            data: function(d) {
                d.from = $('#from').val();
                d.to = $('#to').val();
            }
        },
        columns: [
            { data: 'month', name: 'month' },
            { data: 'total', name: 'total' },
        ]
    });

    $('#filter').on('click', function() { table.ajax.reload(); });

    $('#export-revenue').on('click', function() {
        var from = $('#from').val();
        var to = $('#to').val();
        $.ajax({
            url: '{{ route("admin.reports.revenue.export") }}',
            method: 'POST',
            data: { from: from, to: to },
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            success: function(res) {
                alert(res.message);
            },
            error: function() { alert('Export failed'); }
        });
    });
});
</script>
@endpush
</x-app-layout>
