@extends('admin_dashboard')
@section('admin')

<div class="content">
    <div class="container-fluid">
        <div class="page-title-box mb-1">
            <h4 class="page-title">🏠 Buy Due List</h4>
        </div>


        <div class="card shadow-sm">
            <div class="card-body">
                <h5>📋 Buy Due List </h5>
                <div class="table-responsive">
                    <table id="sale-datatable"
                        class="table table-bordered table-striped  table-auto align-middle nowrap text-center">
                        <thead class="table-dark">
                            <tr>
                                <th>ID</th>
                                <th>Deed No</th>
                                <th>Date</th>
                                <th>Deed Receiver</th>
                                <th>Flat/Plot No</th>
                                <th>Client Name</th>
                                <th>Mobile</th>
                                <th>Address</th>
                                <th>Total Price</th>
                                <th>Paid Amount</th>
                                <th>Due Amount</th>
                                <th>Intallment Number</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

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

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {

        const table = $('#sale-datatable').DataTable({
            ajax: {
                url: "{{ url('sale/fetch_due') }}",
                type: "GET",
                dataSrc: "data",
                error: function(xhr) {
                    console.log("Ajax Error:", xhr.responseText);
                }
            },
            columns: [{
                    data: 'id'
                },
                {
                    data: 'deed_no'
                },
                {
                    data: 'date'
                },
                {
                    data: 'deed_reciever'
                },
                {
                    data: 'flat_no'
                },
                {
                    data: 'client_name'
                },
                {
                    data: 'cell_no'
                },
                {
                    data: 'address'
                },
                {
                    data: 'total_price'
                },
                {
                    data: 'paid_amount'
                },
                {
                    data: 'due_amount'
                },
                {
                    data: 'installment'
                }

            ]
        });

    });
</script>

<style>
    .table td,
    .table th {
        font-size: 13px;
        vertical-align: middle;
    }
</style>

@endsection