@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 class="card-title">Payment Graph</h4>
            </div>
            <div class="card-body">
                <canvas id="chart" 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="shipped">Shipped</option>
                                <option value="delivered">Delivered</option>
                                <option value="cancelled">Cancelled</option>
                                <option value="returned">Returned</option>
                                <option value="refund">Refund</option>
                            </select>
                        </div>

                        <div class="col-md-2">
                            <select name="payment_status" class="form-control">
                                <option value="">Payment Status</option>
                                <option value="success">Paid</option>
                                <option value="pending">Pending</option>
                            </select>
                        </div>

                        <div class="col-md-2">
                            <select name="payment_method" class="form-control">
                                <option value="">All Methods</option>
                                <option value="razorpay">Razorpay</option>
                                <option value="cod">COD</option>
                            </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="paymentTable">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Order No</th>
                                <th>Date</th>
                                <th>Customer</th>
                                <th>Total</th>
                                <th>Paid</th>
                                <th>Balance</th>
                                <th>Status</th>
                                <th>Payment</th>
                                <th>Method</th>
                                <th>Coupon</th>
                                <th>Razorpay</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>



    </div>
</div>

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

<script>
    let chart;
    $(function() {
        // LOAD CHART
        function loadChart() {

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

                let labels = res.map(x => x.date);
                let paid = res.map(x => x.total_paid);
                let balance = res.map(x => x.balance);

                // ✅ DESTROY OLD CHART
                if (chart) {
                    chart.destroy();
                }

                chart = new Chart(document.getElementById('chart'), {
                    type: 'line',
                    data: {
                        labels: labels,
                        datasets: [{
                                label: 'Collected ₹',
                                data: paid,
                                borderWidth: 2
                            },
                            {
                                label: 'Pending ₹',
                                data: balance,
                                borderWidth: 2
                            }
                        ]
                    }
                });

            });
        }

        loadChart();




        let table = $('#paymentTable').DataTable({
            processing: true,
            serverSide: true,
            responsive: true, // ✅ IMPORTANT
            autoWidth: false, // ✅ prevents overflow
            scrollX: true, // ✅ horizontal scroll fallback

            
    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.payment.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.payment_status = $('select[name=payment_status]').val();
                    d.payment_method = $('select[name=payment_method]').val();
                }
            },

            columns: [{
                    data: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'order_number'
                },
                {
                    data: 'created_at'
                },
                {
                    data: 'customer'
                },
                {
                    data: 'total_amount'
                },
                {
                    data: 'paid_amount'
                },
                {
                    data: 'balance'
                },
                {
                    data: 'status'
                },
                {
                    data: 'payment_status'
                },
                {
                    data: 'payment_method'
                },
                {
                    data: 'coupon'
                },
                {
                    data: 'razorpay'
                }
            ]
        });



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


    });
</script>

@endsection