<?php $__env->startSection('title', 'Menu Grp'); ?>
<?php $__env->startPush('css'); ?>
    <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>" />
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }

        /* th all sides border */
        th {
            border: 1px solid #e6edef;
            padding: 8px;
        }

        /* tr bottom border only */
        tbody tr {
            border-bottom: 1px solid #e6edef;
        }

        /* td without borders */
        td {
            border: none;
            padding: 8px;
        }

        /* remove tbody border */
        tbody {
            border: none;
        }

    </style>
<?php $__env->stopPush(); ?>
<?php $__env->startSection('content'); ?>
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="">
                            <h4 class="mb-1">Menu Group</h4>
                            <nav style="--bs-breadcrumb-divider: '|';"  aria-label="breadcrumb" >
                                <ol class="breadcrumb m-0">
                                    <li class="breadcrumb-item"><a href="#!" class="text-primary">Menu Group</a></li>
                                    <li class="breadcrumb-item active" aria-current="page">List</li>
                                </ol>
                            </nav>
                        </div>
                        <div>
                            <a href="<?php echo e(route('menugrp.create')); ?>" class="btn btn-primary">Add Menu Grp</a>
                        </div>
                    </div>


                    <div>
                        <form id="search">
                            <div class="mt-4 search-collapse row g-3">
                                <div class="search-input-div col-lg-3 col-md-4 col-sm-6">
                                    <label for="name">Name</label>
                                    <input type="text" placeholder="Name" id="name" class="form-control">
                                </div>
                                <div class="search-input-div col-lg-3 col-md-4 col-sm-6">
                                    <label for="phone">Phone</label>
                                    <input type="text" placeholder="Phone Number" id="phone" class="form-control">
                                </div>
                                <div class="search-input-div col-lg-3 col-md-4 col-sm-6">
                                    <label for="status">Status</label>
                                    <select name="status" class="form-select" id="status">
                                        <option value="">--select one--</option>
                                        <?php $__currentLoopData = config('constant.NON_STATUS'); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key => $val): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                            <option value="<?php echo e($key); ?>" <?php echo e(request('status') == $key ? 'selected' : ''); ?>><?php echo e($val); ?></option>
                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                    </select>
                                </div>
                                <div class="mb-4">
                                    <button class="btn btn-primary px-4" id="search">Search</button>
                                    <button class="btn btn-outline-danger px-4"  id="reset">Reset</button>
                                </div>
                            </div>
                        </form>
                    </div>

                    <div class="">
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="text-primary m-0">
                                <a href="#!" class="btn btn-primary d-none">Add Admission</a>
                            </div>

                        </div>
                        <div class="table-card card">
                            <div class="table-responsive">
                                <table id="enquireTable" class="table table-bordered table-striped">
                                    <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Name</th>
                                        <th>Menu Access</th>
                                        <th>Status</th>
                                        <th>#</th>
                                    </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <?php $__env->startPush('scripts'); ?>
        <script src="<?php echo e(asset('/assets/js/datepicker/datepicker.js')); ?>"></script>
        <script src="<?php echo e(asset('/assets/js/datepicker/datepicker.en.js')); ?>"></script>
        <script>

            $(document).ready(function() {
                let useServer = true; // Start in server mode
                const triggerEditUrl = "<?php echo e(route('menugrp.edit', ['id' => ':id'])); ?>";

                var bed_status = JSON.parse('<?php echo json_encode(config('constant.NON_STATUS')); ?>')
                let localData = [];
                $.fn.dataTable.ext.errMode = 'none';
                var enquireTable = new DataTable('#enquireTable', {
                    serverSide: true,
                    processing: true,
                    ajax: {
                        url: "<?php echo e(route('get.menu.list')); ?>",
                        type: "POST",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        data: function (data) {
                            // Add filter parameters
                            data.district = $("#district").val();
                            data.name = $("#name").val();
                            data.block = $("#block").val();
                            data.phone = $("#phone").val();
                            data.status = $("#status").val();
                        }
                    },
                    columns: [
                        {
                            data: null,
                            render: function (data, type, row, meta) {
                                return meta.row + meta.settings._iDisplayStart + 1;
                            }
                        },
                        { data: 'menu_grp_name' },
                        { data: 'menu_name' },
                        {
                            data: 'status',
                            render: function (data, type, row) {
                                let statusText = bed_status[row.status] || 'Unknown';
                                let badgeClass =
                                    row.status == 1 ? 'bg-success' :
                                        row.status == 0 ? 'bg-danger' : 'bg-secondary';
                                return `<span class="badge ${badgeClass}">${statusText}</span>`;
                            }
                        },
                        {
                            data: null,
                            orderable: false,
                            searchable: false,
                            render: function (data, type, row) {
                                const editUrl = triggerEditUrl.replace(':id', row.id);
                                return `<a href="${editUrl}" class="btn btn-sm btn-primary me-1">Edit</a>`;
                            }
                        }
                    ]
                });

                $(function () {
                    $("#search").click(function () {

                    })
                })
                $('#enquireTable').on('order.dt', function () {
                    var order = $('#enquireTable').DataTable().order();
                    console.log("Sorting triggered");
                    console.log("Column index:", order[0][0]);
                    console.log("Direction:", order[0][1]); // asc or desc
                    useServer = false; // Next draw will be from localData
                });
                $(function () {
                    $("#reset").click(function () {
                        alert("dsfghjm")
                        enquireTable.ajax.reload();

                    })
                })
            })
        </script>
    <?php $__env->stopPush(); ?>


<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.admin.master', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/educatio/public_html/nari.hosteldesk.in/resources/views/admin/role_list.blade.php ENDPATH**/ ?>