@extends('dashboard.layouts.master')
@section('title', 'Commission Reports | Admin Panel')

@push('after-styles')
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" type="text/css" />
@endpush

@section('content')
    @include('sweetalert::alert')
    @if(\Helper::canAccessModule('commission_report'))
<div class="padding website-label">
    <div class="box">
        <div class="box-header">
            <div class="box-header-left">
                <h3 class="d-block">Earned Commission Reports</h3>
                <small class="d-inline-block">
                    <a href="{{ route('adminHome') }}">{{ __('backend.dashboard') }}</a> /
                    <span>Commission Reports</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>

        <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">
                    </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">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group m-b-0">
                        <label class="text-xs font-weight-bold">BUSINESS</label>
                        <select id="filter_business" class="form-control form-control-sm filter-input">
                            <option value="">All Businesses</option>
                            @foreach($businesses as $biz)
                                <option value="{{ $biz->id }}">{{ $biz->business_name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group m-b-0">
                        <label class="text-xs font-weight-bold">CATEGORY</label>
                        <select id="filter_category" class="form-control form-control-sm filter-input">
                            <option value="">All Categories</option>
                            @foreach($categories as $cat)
                                <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group m-b-0">
                        <label class="text-xs font-weight-bold">REVENUE TYPE</label>
                        <select id="filter_revenue_type" class="form-control form-control-sm filter-input">
                            <option value="">All Types</option>
                            <option value="subscription">Subscriptions</option>
                            <option value="promotion">Promotions</option>
                            <option value="supplier_purchase">Supplier</option>
                            <option value="commission">Redemption Commissions</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="table-responsive p-a">
            <table class="table table-bordered m-a-0" id="report-table">
                <thead class="dker">
                    <tr>
                        <th>Ref #</th>
                        <th>Business</th>
                        <th>Category</th>
                        <th>Type</th>
                        <th>Total Amount</th>
                        <th>Commission</th>
                        <th>Date</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

    @else
<input type="hidden" value="{{ route('adminHome') }}" id="redirect_url">
<script type="text/javascript">
var redirect_url = $('#redirect_url').val();
window.location.replace(redirect_url);
</script>
    @endif
@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 = $('#report-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('commission-reports.anyData') }}",
                type: 'POST',
                data: function(d) {
                    d._token       = "{{ csrf_token() }}";
                    d.date_from    = $('#filter_date_from').val();
                    d.date_to      = $('#filter_date_to').val();
                    d.business_id  = $('#filter_business').val();
                    d.category_id  = $('#filter_category').val();
                    d.revenue_type = $('#filter_revenue_type').val();
                }
            },
            columns: [
                { data: 'transaction_number', name: 'transaction_number' },
                { data: 'business_name',      name: 'business_name' },
                { data: 'category_name',      name: 'category_name' },
                { data: 'type',               name: 'type' },
                { data: 'amount',             name: 'amount' },
                { data: 'commission_amount',  name: 'commission_amount' },
                { data: 'created_at',         name: 'created_at' }
            ],
            order: [[6, 'desc']]
        });

        // Auto-reload table on any filter change — no button needed
        $(document).on('change', '.filter-input', function() {
            table.draw();
        });

        // Build export URL with current filter values
        function exportUrl(base) {
            var params = {
                date_from:    $('#filter_date_from').val(),
                date_to:      $('#filter_date_to').val(),
                business_id:  $('#filter_business').val(),
                category_id:  $('#filter_category').val(),
                revenue_type: $('#filter_revenue_type').val(),
            };
            return base + '?' + $.param(params);
        }

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

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