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

@section('content')

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

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

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

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

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

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

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

                        <div class="col-md-2">
                            <label>Order Type</label>
                            <select name="order_type" class="form-control">
                                <option value="">All</option>
                                <option value="product">Product</option>
                                <option value="project">Project</option>
                            </select>
                        </div>

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

                    </div>
                </form>
            </div>
        </div>

        {{-- CHART --}}
        <div class="card mb-3">
            <div class="card-header">
                <h4 class="card-title">Sales Graph</h4>
            </div>
            <div class="card-body">
                <canvas id="salesChart" height="100"></canvas>
            </div>
        </div>

        {{-- TABLE --}}
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Sales Table</h4>
            </div>

            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover table-centered" id="reportTable">
                        <thead class="bg-light">
                            <tr>
                                <th>#</th>
                                <th>Order No</th>
                                <th>Date</th>
                                <th>Customer</th>
                                <!-- <th>Items</th> -->
                                <th>Total</th>
                                <th>Payment</th>
                                <th>Location</th>
                                <th>Delivery No</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>

    </div>
</div>

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

<script>
    let chart;

    // LOAD CHART
    function loadChart() {

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

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

            if (chart) chart.destroy();

            chart = new Chart(document.getElementById('salesChart'), {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'Sales ₹',
                        data: sales,
                        borderWidth: 2,
                        fill: true
                    }]
                }
            });
        });
    }
</script>

{{-- DATATABLE --}}
<script>
    $(function() {
        let table = $('#reportTable').DataTable({
            processing: true,
            serverSide: 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: [{
                    extend: 'copy',
                    className: 'btn btn-sm btn-primary'
                },
                {
                    extend: 'csv',
                    className: 'btn btn-sm btn-success'
                },
                {
                    extend: 'excel',
                    className: 'btn btn-sm btn-warning'
                },
                {
                    extend: 'pdf',
                    className: 'btn btn-sm btn-danger'
                },
                {
                    extend: 'print',
                    className: 'btn btn-sm btn-info'
                }
            ],

            ajax: {
                url: "{{ route('reports.sales.data') }}",
                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();
                    d.order_type = $('select[name=order_type]').val();
                }
            },

            columns: [{
                    data: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'order_number'
                },
                {
                    data: 'created_at'
                },
                {
                    data: 'customer'
                },
                // {data: 'items_count'},
                {
                    data: 'total_amount'
                },
                {
                    data: 'payment_status'
                },
                {
                    data: 'location'
                },
                {
                    data: 'delivery_number'
                },
                {
                    data: 'status'
                }
            ]
        });

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

        // INITIAL LOAD
        loadChart();
    });
</script>

@endsection