@extends('Billing.layout')

@section('content')

<meta name="csrf-token" content="{{ csrf_token() }}">

<div class="container-fluid mt-3">

    <div class="card">

        <div class="card-header d-flex justify-content-between">

            <h5>Bill Details</h5>

            <a href="{{ route('billing.sales_bill') }}" class="btn btn-secondary">
                Back
            </a>

        </div>

        <div class="card-body">

            <div class="row mb-4">

                <div class="col-md-3">
                    <strong>Order ID</strong><br>
                    {{ $order->order_id }}
                </div>

                <div class="col-md-3">
                    <strong>Customer</strong><br>
                    {{ $order->customer_name ?? '-' }}
                </div>

                <div class="col-md-3">
                    <strong>Phone</strong><br>
                    {{ $order->customer_phone ?? '-' }}
                </div>

                <div class="col-md-3">
                    <strong>Payment</strong><br>
                    {{ ucfirst($order->payment_mode) }}
                </div>

            </div>

            <div class="table-responsive">

                <table class="table table-bordered table-hover" id="billTable">

                    <thead>

                        <tr>

                            <th>S.No</th>
                            <th>Code</th>
                            <th>Product</th>
                            <th>Price</th>
                            <th>Qty</th>
                            <th>Tax</th>
                            <th>Total</th>

                        </tr>

                    </thead>

                </table>

            </div>

            <div class="text-end mt-3">

                <h5>
                    Grand Total :
                    <span class="text-success">
                        ₹ {{ number_format($order->total,2) }}
                    </span>
                </h5>

            </div>

        </div>

    </div>

</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

<script>
$(function () {

    $.fn.dataTable.ext.errMode = 'throw';

    $('#billTable').DataTable({

        processing: true,
        serverSide: true,
        responsive: true,

        ajax: {
            url: "{{ route('billing.sales_bill_products', $order->id) }}",
            type: "GET",

            beforeSend: function () {
                console.log("========== AJAX REQUEST ==========");
                console.log("URL:", "{{ route('billing.sales_bill_products', $order->id) }}");
            },

            dataSrc: function (json) {

                console.log("========== AJAX RESPONSE ==========");
                console.log(json);

                console.log("Draw:", json.draw);
                console.log("Records Total:", json.recordsTotal);
                console.log("Records Filtered:", json.recordsFiltered);
                console.log("Rows:", json.data);

                if (json.data.length > 0) {
                    console.log("First Row:");
                    console.table(json.data[0]);
                } else {
                    console.warn("No data returned.");
                }

                return json.data;
            },

            error: function (xhr, status, error) {

                console.log("========== AJAX ERROR ==========");
                console.log("Status:", status);
                console.log("Error:", error);
                console.log("HTTP Code:", xhr.status);
                console.log("Response:");
                console.log(xhr.responseText);
            }
        },

        columns: [

            {
                data: 'DT_RowIndex',
                name: 'DT_RowIndex',
                searchable: false,
                orderable: false
            },

            {
                data: 'product_code',
                name: 'product_code'
            },

            {
                data: 'product_name',
                name: 'product_name'
            },

            {
                data: 'price',
                name: 'price'
            },

            {
                data: 'qty_with_unit',
                name: 'quantity',
                searchable: false,
                orderable: false
            },

            {
                data: 'tax',
                name: 'tax'
            },

            {
                data: 'row_total',
                name: 'row_total'
            }

        ],

        initComplete: function () {
            console.log("DataTable Initialized Successfully");
        }

    });

});

</script>

@endsection