@extends('admin.layout.template')
@section('title','Payment Report')

@section('content')

<div class="page-content">
    <div class="container-xxl">



        {{-- CHART --}}
        <div class="card mb-3">
            <div class="card-header">
                <h4>Top Products</h4>
            </div>
            <div class="card-body">
                <canvas id="productChart" height="100"></canvas>
            </div>
        </div>

        {{-- FILTER --}}
        <div class="card mb-3">
            <div class="card-header">
                <h4 class="card-title">Payment Filter</h4>
            </div>

            <div class="card-body">
                <form id="filterForm">
                    <div class="row g-2 mb-3">

                        <div class="col-md-2">
                            <input type="date" name="from_date" class="form-control"
                                value="{{ date('Y-m-01') }}">
                        </div>

                        <div class="col-md-2">
                            <input type="date" name="to_date" class="form-control"
                                value="{{ date('Y-m-d') }}">
                        </div>

                        <div class="col-md-2">
                            <select name="status" class="form-control">
                                <option value="">All Status</option>
                                <option value="placed">Placed</option>
                                <option value="processing">Processing</option>
                                <option value="delivered">Delivered</option>
                            </select>
                        </div>

                        <div class="col-md-2">
                            <select name="category_id" class="form-control">
                                <option value="">All Category</option>
                                @foreach(App\Models\Category::get() as $cat)
                                <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-2">
                            <button type="button" id="filterBtn" class="btn btn-primary">Filter</button>
                        </div>

                    </div>
                </form>


                <div class="table-responsive">
                    <table class="table table-hover table-centered" id="productTable">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Product</th>
                                <th>Total Qty</th>
                                <th>Total Orders</th>
                                <th>Total Sales</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>



    </div>
</div>

{{-- CHART --}}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
    let chart;

    $(function() {

        function loadChart() {

            $.get("{{ route('reports.product.chart') }}", $('#filterForm').serialize(), function(res) {

                let labels = res.map(x => x.product_name);
                let sales = res.map(x => x.total_sales);

                if (chart) {
                    chart.destroy();
                }

                chart = new Chart(document.getElementById('productChart'), {
                    type: 'bar',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: 'Sales ₹',
                            data: sales,
                            borderWidth: 1
                        }]
                    }
                });

            });
        }

        loadChart();

        let table = $('#productTable').DataTable({
            processing: true,
            serverSide: true,
            responsive: true,
            scrollX: true,
                 lengthMenu: [
        [ -1, 10, 50, 100, 1000 ],
        [ "All", 10, 50, 100, 1000 ]
    ],
     // ✅ DEFAULT = ALL
    pageLength: -1,
           // dom: 'Bfrtip',
             "bInfo": true,
                // dom: 'lBfrtip',
                dom: "<'row'<'col-sm-4'l><'col-sm-5'f><'col-sm-3'B>>" +
                "<'row'<'col-sm-12'tr>>" +
                "<'row'<'col-sm-5'i><'col-sm-7'p>>",
            buttons: ['excel', 'csv', 'pdf', 'print'],

            ajax: {
                url: "{{ route('reports.product.list') }}",
                data: function(d) {
                    d.from_date = $('input[name=from_date]').val();
                    d.to_date = $('input[name=to_date]').val();
                    d.status = $('select[name=status]').val();
                    d.category_id = $('select[name=category_id]').val();
                }
            },

            columns: [{
                    data: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'product_name'
                },
                {
                    data: 'total_qty'
                },
                {
                    data: 'total_orders'
                },
                {
                    data: 'total_sales'
                }
            ]
        });

        $('#filterBtn').click(function() {
            table.draw();
            loadChart();
        });

    });
</script>
@endsection