@extends('backend.partials.master')

@section('title', 'Purchase Report')

@section('maincontent')

<main class="content">
    <div class="container-fluid p-0">

        <h3><strong>Purchase Report</strong></h3>

        <form id="filterForm">
            <div class="row">

                <div class="col-md-3 mb-3">
                    <label class="form-label">From Date</label>
                    <input type="date" id="from_date" name="from_date" class="form-control">
                </div>

                <div class="col-md-3 mb-3">
                    <label class="form-label">To Date</label>
                    <input type="date" id="to_date" name="to_date" class="form-control">
                </div>

                <div class="col-md-3 mb-3">
                    <label class="form-label">Supplier </label>
                    <select id="supplier_id" name="supplier_id" class="form-control">
                        <option value="">Select Supplier</option>
                        @foreach($suppliers as $sup)
                            <option value="{{ $sup->id }}">{{ $sup->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-2 mb-3 d-flex align-items-end">
                    <button type="button" id="searchBtn" class="btn btn-primary w-100">Search</button>
                </div>

            </div>
        </form>

        <div class="card mt-3">
            <div class="card-body">
                <table id="purchaseTable" class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>Sr. No.</th>
                            <th>Bill Date</th>
                            <th>Entry Date</th>
                            <th>Bill No.</th>
                            <th>Supplier Name</th>
                            <th>Total Amount</th>
                            <th>Total GST</th>
                            <th>Grand Total</th>
                        </tr>
                    </thead>

                    <tfoot>
                        <tr>
                            <th colspan="5" class="text-end">Total</th>
                            <th id="total_amount"></th>
                            <th id="total_gst"></th>
                            <th id="grand_total"></th>
                        </tr>
                    </tfoot>

                </table>
            </div>
        </div>

    </div>
</main>

@endsection
<script>
document.addEventListener("DOMContentLoaded", function () {

    let table = $('#purchaseTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{ route('reports.purchase_report') }}",
            data: function (d) {
                d.from_date = $('#from_date').val();
                d.to_date = $('#to_date').val();
                d.supplier_id = $('#supplier_id').val();
            }
        },
        columns: [
            { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
            { data: 'invoice_date', name: 'invoice_date' },
            { data: 'entry_date', name: 'entry_date' },
            { data: 'invoice_no', name: 'invoice_no' },
            { data: 'supplier_name', name: 'supplier_name' },
            { data: 'total_amount', name: 'total_amount' },
            { data: 'total_gst', name: 'total_gst' },
            { data: 'grand_total', name: 'grand_total' }
        ],
        dom: "<'row'<'col-md-6'l><'col-md-6 text-end'B>>" +
             "<'row'<'col-sm-12'tr>>" +
             "<'row'<'col-md-5'i><'col-md-7'p>>",
        buttons: ['copy', 'excel', 'pdf', 'print',
                {
                    extend: 'colvis',   // #xdc48; Column visibility button
                    text: 'Columns'
                }
        ],
        drawCallback: function (settings) {
            $("#total_amount").text(settings.json.total_amount + " Rs");
            $("#total_gst").text(settings.json.total_gst + " Rs");
            $("#grand_total").text(settings.json.grand_total + " Rs");
        }
    });

    $("#searchBtn").click(function () {
        table.ajax.reload();
    });

});
</script>