@extends('Admin.layout')

<style>
    .dt-search {
        display: none !important;
    }
</style>

@section('content')

<div>
    <h3>Fees Management</h3>
</div>


<div class="card p-5">

    <div class="row justify-content-between">
        <div class="col-lg-6 mb-3">
            <select class="form-select w-auto">
                <option>10</option>
            </select>
        </div>
        <div class="col-lg-6">

            <div class="row">

                <div class="col-lg-8 mb-3">
                    <input type="search"
                        class="form-control"
                        id="customSearch"
                        placeholder="Search">
                </div>

                <div class="col-lg-4 mb-3">
                    <button class="btn btn-light border w-100" id="exportBtn">
                        <i class="ti tabler-download me-2"></i>
                        Export
                    </button>
                </div>

            </div>

        </div>
    </div>

    <div class="table-responsive pt-0 pb-2">

        <table id="table" style="width:100%;" class="table">

            <thead>
                <tr>
                    <th>SNO</th>
                    <th>DATE</th>
                    <th>STUDENT NAME</th>
                    <th>ADMISSION NO</th>
                    <th>TOTAL FEE</th>
                    <th>PAID</th>
                    <th>BALANCE</th>
                    <th>STATUS</th>

                </tr>
            </thead>

            <tbody>
            </tbody>

        </table>

    </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>
    $(document).ready(function() {

        const feesData = [

            {
                sno: 1,
                date: '23/03/2026',
                studentname: 'Arun Kumar',
                admissionno: 'ADM001',
                totalfee: '₹50,000',
                paid: '₹50,000',
                balance: '₹0',
                status: 'Paid'
            },

            {
                sno: 2,
                date: '23/03/2026',
                studentname: 'Rahul Raj',
                admissionno: 'ADM002',
                totalfee: '₹45,000',
                paid: '₹30,000',
                balance: '₹15,000',
                status: 'Pending'
            },

            {
                sno: 3,
                date: '23/03/2026',
                studentname: 'Priya S',
                admissionno: 'ADM003',
                totalfee: '₹50,000',
                paid: '₹20,000',
                balance: '₹30,000',
                status: 'Pending'
            },


        ];


        var table = $('#table').DataTable({

            data: feesData,

            pageLength: 10,

            lengthChange: false,

            buttons: [{
                extend: 'excelHtml5',

                title: 'Student_Fees_Report',

                exportOptions: {
                    columns: [0, 1, 2, 3, 4, 5, 6, 7]
                }

            }],

            columnDefs: [{
                targets: '_all',
                className: 'text-nowrap'
            }],

            columns: [

                {
                    data: 'sno'
                },

                {
                    data: 'date'
                },

                {
                    data: 'studentname'
                },

                {
                    data: 'admissionno'
                },
                {
                    data: 'totalfee'
                },

                {
                    data: 'paid'
                },

                {
                    data: 'balance'
                },

                {
                    data: 'status',

                    render: function(data) {

                        if (data === 'Paid') {

                            return `
                                <span class="badge bg-success">
                                    Paid
                                </span>
                            `;

                        } else {

                            return `
                                <span class="badge bg-danger">
                                    Pending
                                </span>
                            `;

                        }

                    }

                },
            ]

        });


        // Hide default DataTables buttons

        table.buttons().container().hide();


        // Custom Search

        $('#customSearch').on('keyup', function() {

            table.search(this.value).draw();

        });


        // Custom Page Length

        $('#pageLength').on('change', function() {

            table.page.len(this.value).draw();

        });


        // Excel Export

        $('#exportBtn').on('click', function() {

            table.button('.buttons-excel').trigger();

        });

    });
</script>



@endsection