@extends('backend.partials.master')

@section('title', 'Pending Sale Report')

@section('maincontent')

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

        <h3><strong>Pending Sale 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">Customer </label>
                    <select id="supplier_id" name="supplier_id" class="form-control">
                        <option value="">Select Customer</option>
                        @foreach($Customer as $sup)
                            <option value="{{ $sup->id }}">{{ $sup->fname }}</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>Customer Name</th>
            <th>Total Amount</th>
            <th>Paid Amount</th>
            <th>Pending Amount</th>
        </tr>
    </thead>

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

    </div>
</main>

@endsection

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

    let table = $('#purchaseTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{ route('reports.Pendingsale_repor') }}",
            data: function (d) {
                d.from_date = $('#from_date').val();
                d.to_date = $('#to_date').val();
                d.customer_id = $('#supplier_id').val();
            }
        },
        columns: [
            { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false },
            { data: 'idate', name: 'idate' },
            { data: 'customer_name', name: 'customer_name' },
            { data: 'total_amount', name: 'total_amount' },
            { data: 'paid', name: 'paid' },
            { data: 'pending_amount', name: 'pending_amount' }
        ],
        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', text: 'Columns' }],

    });

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

});
</script>