@extends('Admin.layout')

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

@section('content')

<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h3>Students</h3>
    </div>

    <div>
        <a href="{{route('admin.add_student')}}">
            <button class="btn btn-primary">
                <svg xmlns="http://www.w3.org/2000/svg"
                    class="me-2"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round">

                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                    <path d="M12 5l0 14" />
                    <path d="M5 12l14 0" />
                </svg>

                Add Student
            </button>
        </a>
    </div>
</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>PHONE</th>
                    <th>STATUS</th>
                    <th>ACTION</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 studentData = [

            {
                sno: 1,
                date: '23/03/2026',
                studentname: 'Arun Kumar',
                admissionno: 'ADM001',
                phone: '+91 9876543210',
                status: 'Active',
            },

            {
                sno: 2,
                date: '23/03/2026',
                studentname: 'Rahul Raj',
                admissionno: 'ADM002',
                phone: '+91 9876543211',
                status: 'Active',
            },

            {
                sno: 3,
                date: '23/03/2026',
                studentname: 'Priya S',
                admissionno: 'ADM003',
                phone: '+91 9876543212',
                status: 'Inactive',
            },
        ];


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

            data: studentData,

            pageLength: 10,

            lengthChange: false,

            buttons: [{
                extend: 'excelHtml5',

                title: 'Student_Report',

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

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

            columns: [

                {
                    data: 'sno'
                },

                {
                    data: 'date'
                },

                {
                    data: 'studentname'
                },

                {
                    data: 'admissionno'
                },

                {
                    data: 'phone'
                },

                {
                    data: 'status',

                    render: function(data) {

                        if (data === 'Active') {

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

                        } else {

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

                        }

                    }
                },

                {
                    data: null,

                    orderable: false,

                    searchable: false,

                    render: function(data, type, row) {

                        return `
                        
                        <a href="{{route('admin.view_student')}}"
                            class="btn btn-secondary btn-sm">
                            <i class="ti tabler-eye"></i>
                        </a>

                         <a href="{{route('admin.edit_student')}}"
                            class="btn btn-secondary btn-sm">
                            <i class="ti tabler-edit"></i>
                        </a>

                        <button
                            class="btn btn-danger btn-sm"
                            data-bs-toggle="modal"
                            data-bs-target="#delete">

                            <i class="ti tabler-trash"></i>

                        </button>

                        `;
                    }
                }

            ]

        });


        // 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