@extends('restaurant.layout.index')
@section('title','Muftaax | Menu History')
@section('custom-style')
<link rel="stylesheet" href="{{asset('assets/libs/quill/quill.snow.css')}}">
<link rel="stylesheet" href="{{asset('assets/libs/quill/quill.bubble.css')}}">
<style>
    .description-cell .short-text {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        /* limit to 3 lines */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .dataTables_processing {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 10px 20px;
            border-radius: 5px;
            font-size: 14px;
            z-index: 9999;
        }
</style>
@endsection
@section('content')

<!-- Start::app-content -->
<div class="main-content app-content">
    <div class="container-fluid">

        <!-- Page Header -->
        <div class="my-4 page-header-breadcrumb d-flex align-items-center justify-content-between flex-wrap gap-2">
            <div>
                <h1 class="page-title fw-medium fs-18 mb-2">Menu List</h1>
                <div class="">
                    <nav>
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item"><a href="javascript:void(0);">Dashboard</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Menu</li>
                        </ol>
                    </nav>
                </div>
            </div>

        </div>
        <!-- Page Header Close -->

        <div class="row align-items-center mb-4">
            <div class="col-lg-12">
                <div class="card custom-card mb-0">
                    <div class="card-header justify-content-between">
                        <div class="card-title">
                            Apply Filters
                        </div>
                    </div>


                    <!-- Custom Search Bar Layout -->
                    <div class="card-body">
                        <!-- <div class="input-group companies-search-input w-20-block"> -->
                            <!-- <input class="form-control" type="search" placeholder="Search" aria-label="Search" id="datatable-search-input">
                            <input type="date" class="form-control w-20-block d-none" aria-label="Apply date" id="datatable-date-input" placeholder="Apply date">
                            <input type="number" class="form-control d-none" placeholder="Price" id="datatable-price-input">
                            <button type="button" class="btn btn-primary" id="search-btn"><i class="ri-search-line"></i></button> -->
                            <div class="d-flex justify-content-end mb-3">
                            <div class="input-group" style="width: 250px;">
                                <input class="form-control" type="search" placeholder="Search" aria-label="Search" id="datatable-search-input">
                                <button type="button" class="btn btn-primary" id="search-btn">
                                    <i class="ri-search-line"></i>
                                </button>
                            </div>
                        </div>
                        <!-- </div> -->
                    </div>

                </div>

            </div>
        </div>

        <!-- Start::row-1 -->
        <div class="row">
            <div class="col-xl-12">
                <div class="card custom-card">
                    <div class="card-header justify-content-between">
                        <div class="card-title">
                            Manage Menu
                        </div>
                        <div class="d-flex">
                            <a class="btn btn-sm btn-primary-light btn-wave me-2 waves-effect waves-light"
                                href="javascript:void(0)" data-bs-toggle="modal"
                                data-bs-target="#createMenu"> <i class="bx bx-plus align-middle"></i> Create Menu</a>
                            <div class="dropdown ms-2 d-none">
                                <button class="btn btn-icon btn-secondary-light btn-sm btn-wave waves-light"
                                    type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="ti ti-dots-vertical"></i>
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="javascript:void(0);">All</a></li>
                                    <li><a class="dropdown-item" href="javascript:void(0);">Active</a></li>
                                    <li><a class="dropdown-item" href="javascript:void(0);">Inctive</a></li>

                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="card-body p-2 mb-5">
                        <div class="table-responsive">
                            <table class="table" id="menu-table" style="width: 100%">
                                <thead>
                                    <tr>
                                        <th scope="col">Icon</th>
                                        <th scope="col">Title</th>
                                        <th scope="col">Description</th>
                                        <th>Price</th>
                                        <th>Availability</th>
                                        <th>Category</th>
                                        <th scope="col">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {{-- <tr class="invoice-list">--}}
                                    {{-- <td>--}}
                                    {{-- <img src="{{asset('assets/images/media/media-75.jpg')}}"--}}
                                    {{-- class="banner-preview rounded" alt="Banner Preview" height="100"--}}
                                    {{-- width="100">--}}
                                    {{-- </td>--}}
                                    {{-- <td>--}}
                                    {{-- <a data-bs-toggle="offcanvas" href="#offcanvasExample" role="button"--}}
                                    {{-- aria-controls="offcanvasExample">Zinger Burger</a>--}}
                                    {{-- </td>--}}
                                    {{-- <td>--}}
                                    {{-- Lorem ipsum dolor sit amet consectetur. Mi pretium lacus dolor lec--}}
                                    {{-- </td>--}}
                                    {{-- <td>--}}
                                    {{-- <span class="badge bg-info-transparent">$45.00</span>--}}
                                    {{-- </td>--}}
                                    {{-- <td>--}}
                                    {{-- <span class="badge bg-success-transparent">Yes</span>--}}
                                    {{-- </td>--}}
                                    {{-- <td>--}}
                                    {{-- <div class="hstack gap-2 fs-15">--}}
                                    {{-- <a href="javascript:void(0)" data-bs-toggle="tooltip"--}}
                                    {{-- data-bs-custom-class="tooltip-primary"--}}
                                    {{-- aria-label="Edit Menu"--}}
                                    {{-- title="Edit Menu"--}}
                                    {{-- data-modal-target="#editMenu"--}}
                                    {{-- class="btn btn-primary-light btn-icon ms-1 btn-sm invoice-btn"><i--}}
                                    {{-- class="ri-edit-line"></i></a>--}}
                                    {{-- <button id="alert-confirm" data-bs-toggle="tooltip"--}}
                                    {{-- data-bs-custom-class="tooltip-danger"--}}
                                    {{-- aria-label="Delete"--}}
                                    {{-- title="Delete"--}}
                                    {{-- data-modal-target="#delete-modal"--}}
                                    {{-- class="btn btn-danger-light btn-icon ms-1 btn-sm invoice-btn"><i--}}
                                    {{-- class="ri-delete-bin-5-line"></i></button>--}}
                                    {{-- </div>--}}
                                    {{-- </td>--}}
                                    {{-- </tr>--}}


                                </tbody>
                            </table>
                        </div>
                    </div>
                    {{-- <div class="card-footer border-top-0">--}}
                    {{-- <nav aria-label="Page navigation">--}}
                    {{-- <ul class="pagination mb-0 float-end">--}}
                    {{-- <li class="page-item disabled">--}}
                    {{-- <a class="page-link">Previous</a>--}}
                    {{-- </li>--}}
                    {{-- <li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>--}}
                    {{-- <li class="page-item active" aria-current="page">--}}
                    {{-- <a class="page-link" href="javascript:void(0);">2</a>--}}
                    {{-- </li>--}}
                    {{-- <li class="page-item"><a class="page-link" href="javascript:void(0);">3</a></li>--}}
                    {{-- <li class="page-item">--}}
                    {{-- <a class="page-link" href="javascript:void(0);">Next</a>--}}
                    {{-- </li>--}}
                    {{-- </ul>--}}
                    {{-- </nav>--}}
                    {{-- </div>--}}
                </div>
            </div>
        </div>
        <!--End::row-1 -->


    </div>
</div>



<div class="modal fade" id="createMenu" tabindex="-1"
    aria-labelledby="exampleModalLgLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="exampleModalLgLabel">Create Menu
                </h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"
                    aria-label="Close"></button>
            </div>
            <form method="post" id="storeForm" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <div class="form-group mb-2">
                        <label for="input-label" class="form-label">Menu Category</label>
                        <select class="form-select" name="category_id">
                            <option value="">-- Select --</option>
                            @foreach($menuCategory as $menu)
                            <option value="{{$menu->id}}">{{$menu->title}}</option>
                            @endforeach
                        </select>
                        <span class="text-danger d-none" id="category_idError"></span>
                    </div>
                    <div class="form-group mb-2">
                        <label for="input-label" class="form-label">Title</label>
                        <input type="text" class="form-control" name="title" id="title">
                        <span class="text-danger d-none" id="titleError"></span>
                    </div>

                    <div class="form-group mb-2">
                        <label for="input-label" class="form-label">Thumbnail</label>
                        <input type="file" class="form-control" name="thumbnail" id="thumbnail">
                        <span class="text-danger d-none" id="thumbnailError"></span>
                    </div>
                    <div class="form-group mb-2">
                        <label for="input-label" class="form-label">Description</label>
                        <textarea type="description" class="form-control" name="description" id="description"
                            rows="3"></textarea>
                        <span class="text-danger d-none" id="descriptionError"></span>
                    </div>
                    <div class="form-group mb-2">
                        <label for="input-label" class="form-label">Price</label>
                        <input type="text" class="form-control" name="price" id="price">
                        <span class="text-danger d-none" id="priceError"></span>
                    </div>
                    <div class="form-group mb-2">
                        <label for="input-label" class="form-label">Availability</label>
                        <select class="form-select" name="availability">
                            <option value="">-- Select --</option>
                            <option value="Yes">Yes</option>
                            <option value="No">No</option>
                            <option value="Out">Out of stock</option>
                        </select>
                        <span class="text-danger d-none" id="availabilityError"></span>
                    </div>
                    <div class="form-group mb-2">
                        <label for="input-label" class="form-label">Status</label>
                        <select class="form-select" name="status">
                            <option value="">-- Select --</option>
                            <option value="Active">Active</option>
                            <option value="Inactive">Inactive</option>
                        </select>
                        <span class="text-danger d-none" id="statusError"></span>
                    </div>

                    {{-- <div class="form-group mb-2">--}}
                    {{-- <label for="input-label" class="form-label">Is Extra Menu Item</label>--}}
                    {{-- <div class="d-flex align-items-center gap-4 mt-1 ms-2">--}}
                    {{-- <div class="d-flex align-items-center gap-2">--}}
                    {{-- <input type="radio" name="add_on" value="1" id="isAddonYes" required>--}}
                    {{-- <label for="isAddonYes">Yes</label>--}}
                    {{-- </div>--}}
                    {{-- <div class="d-flex align-items-center gap-2">--}}
                    {{-- <input type="radio" name="add_on" value="0" id="isAddonNo" checked--}}
                    {{-- required>--}}
                    {{-- <label for="isAddonNo">No</label>--}}
                    {{-- </div>--}}
                    {{-- </div>--}}
                    {{-- </div>--}}

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
            </form>

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

<div class="modal fade" id="editMenu" tabindex="-1"
    aria-labelledby="exampleModalLgLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="exampleModalLgLabel">Edit Menu
                </h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"
                    aria-label="Close"></button>
            </div>
            <form method="post" id="editForm" enctype="multipart/form-data">
                @csrf
                {{ method_field('PUT') }}
                <div class="modal-body">

                    <input type="hidden" id="editId" name="id" />
                    <div class="form-group mb-2">
                        <label for="input-label" class="form-label">Menu Category</label>
                        <select class="form-select" id="editCategory" name="category_id">
                            <option value="">-- Select --</option>
                            @foreach($menuCategory as $category)
                            <option value="{{ $category->id }}">{{ $category->title }}</option>
                            @endforeach
                        </select>
                        <span class="text-danger" id="category_idEditError"></span>
                    </div>
                    <div class="form-group mb-2">
                        <label for="input-label" class="form-label">Title</label>
                        <input type="text" class="form-control" name="title" id="editTitle">
                        <span class="text-danger" id="titleEditError"></span>
                    </div>
                    {{-- <div class="form-group mb-2">--}}
                    {{-- <label for="input-label"  class="form-label">Thumbnail</label>--}}
                    {{-- <input type="file" class="form-control" name="thumbnail" id="editThumbnail">--}}

                    {{-- </div>--}}

                    <div class="form-group mb-2">
                        <h5 class="fs-14 mb-1">Thumbnail</h5>
                        <div class="text-center">
                            <div class="position-relative d-inline-block">
                                <div class="position-absolute top-100 start-100 translate-middle">
                                    <label for="product-image-input" class="mb-0" data-bs-toggle="tooltip" data-bs-placement="right" title="Select Image">
                                        <div class="avatar-xs">
                                            <div class="avatar-title bg-light border rounded-circle text-muted cursor-pointer d-flex align-items-center justify-content-center" style="width: 30px; height: 30px;">
                                                <i class="ri-image-fill"></i>
                                            </div>
                                        </div>
                                    </label>
                                    <input class="form-control d-none " id="product-image-input" type="file" accept="image/png, image/gif, image/jpeg" name="thumbnail" onchange="previewImageEdit(event)">
                                </div>
                                <div class="avatar-md">
                                    <div class="avatar-title bg-light rounded">
                                        <img src="" id="product-img-edit" class="avatar-md" style="display:none; width: 80px; height: 80px; object-fit: cover;" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group mb-2">
                        <label for="input-label" class="form-label">Description</label>
                        <textarea type="description" class="form-control" name="description" id="editDescription"
                            rows="3"></textarea>
                    </div>
                    <div class="form-group mb-2">
                        <label for="input-label" class="form-label">Price</label>
                        <input type="text" class="form-control" name="price" id="editPrice">
                        <span class="text-danger" id="priceEditError"></span>
                    </div>
                    <div class="form-group mb-2">
                        <label for="input-label" class="form-label">Availability</label>
                        <select class="form-select" name="availability" id="editAvailability">
                            <option value="">-- Select --</option>
                            <option value="Yes">Yes</option>
                            <option value="No">No</option>
                            <option value="Out">Out of stock</option>
                        </select>
                        <span class="text-danger" id="availabilityEditError"></span>
                    </div>
                    <div class="form-group mb-2">
                        <label for="input-label" class="form-label">Status</label>
                        <select class="form-select" name="status" id="editStatus">
                            <option value="">-- Select --</option>
                            <option value="Active">Active</option>
                            <option value="Inactive">Inactive</option>
                        </select>
                        <span class="text-danger" id="statusEditError"></span>
                    </div>

                    {{-- <div class="form-group mb-2">--}}
                    {{-- <label for="input-label" class="form-label">Is Extra Menu Item</label>--}}
                    {{-- <div class="d-flex align-items-center gap-4 mt-1 ms-2">--}}
                    {{-- <div class="d-flex align-items-center gap-2">--}}
                    {{-- <input type="radio" name="add_on" value="1" id="isAddonYes" required>--}}
                    {{-- <label for="isAddonYes">Yes</label>--}}
                    {{-- </div>--}}
                    {{-- <div class="d-flex align-items-center gap-2">--}}
                    {{-- <input type="radio" name="add_on" value="0" id="isAddonNo" required>--}}
                    {{-- <label for="isAddonNo">No</label>--}}
                    {{-- </div>--}}
                    {{-- </div>--}}
                    {{-- </div>--}}


                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade flip" id="deleteCamp" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body p-5 text-center">
                <lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop"
                    colors="primary:#405189,secondary:#f06548" style="width:90px;height:90px">
                </lord-icon>
                <div class="mt-4 text-center">
                    <h4>Are You Sure?</h4>
                    <p class="text-muted fs-15 mb-4">You won't be able to revert this action!</p>
                    <form method="POST" id="deleteCampForm" class="form-submit">
                        @csrf
                        {{ method_field('DELETE') }}
                        <button type="button" class="btn btn-sm btn-outline-danger m-1" data-bs-dismiss="modal">
                            Cancel
                        </button>
                        <button class="btn btn-sm btn-primary m-1" type="submit">Yes, Delete It</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Start::Delete task modal -->
{{-- <div class="modal fade" id="delete-modal" tabindex="-1" aria-hidden="true">--}}
{{-- <div class="modal-dialog modal-dialog-centered" style="display: grid;">--}}
{{-- <div class="card bg-white border-0 rounded">--}}
{{-- <div class="alert custom-alert1 alert-primary">--}}
{{-- <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert" aria-label="Close"><i--}}
{{-- class="bi bi-x"></i></button>--}}
{{-- <div class="text-center px-5 pb-0 svg-primary">--}}
{{-- <svg class="custom-alert-icon" xmlns="http://www.w3.org/2000/svg" height="1.5rem"--}}
{{-- viewBox="0 0 24 24" width="1.5rem" fill="#000000">--}}
{{-- <path d="M0 0h24v24H0z" fill="none"></path>--}}
{{-- <path--}}
{{-- d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"></path>--}}
{{-- </svg>--}}
{{-- <h5>Are You Sure?</h5>--}}
{{-- <p class="">You won't be able to revert this!</p>--}}
{{-- <div class="">--}}
{{-- <button class="btn btn-sm btn-primary m-1">Yes, delete it!</button>--}}
{{-- <button class="btn btn-sm btn-outline-danger m-1" data-bs-dismiss="modal" >Cancel</button>--}}
{{-- </div>--}}
{{-- <form method="POST" id="deleteCampForm" class="form-submit">--}}
{{-- @csrf--}}
{{-- {{ method_field('DELETE') }}--}}
{{-- <button class="btn btn-sm btn-primary m-1 mt-4" type="submit">Yes, Delete It</button>--}}
{{-- <button type="button" class="btn btn-sm btn-outline-danger m-1 mt-4" data-bs-dismiss="modal">--}}
{{-- Cancel--}}
{{-- </button>--}}
{{-- </form>--}}
{{-- </div>--}}
{{-- </div>--}}
{{-- </div>--}}
{{-- </div>--}}
{{-- </div>--}}



<!-- Start:: Company Details Offcanvas -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasExample"
    aria-labelledby="offcanvasExample">
    <div class="offcanvas-body p-0">
        <div
            class="d-sm-flex align-items-top p-4 border-bottom border-block-end-dashed main-profile-cover bg-primary">
            <div>
                <span class="avatar avatar-xxl avatar-rounded me-3 bg-light-transparent p-2">
                    <img src="{{asset("assets/images/company-logos/1.png")}}" alt="">
                </span>
            </div>
            <div class="flex-fill main-profile-info">
                <div class="d-flex align-items-center justify-content-between">
                    <h6 class="fw-medium mb-1 text-fixed-white">Zinger Burger</h6>
                    <button type="button" class="btn-close crm-contact-close-btn" data-bs-dismiss="offcanvas"
                        aria-label="Close"></button>
                </div>

                <div class="d-flex mb-0 mt-2">
                    <div class="me-4">
                        <p class="fw-medium fs-20 text-fixed-white text-shadow mb-0">113</p>
                        <p class="mb-0 fs-11 op-5 text-fixed-white">Deals</p>
                    </div>
                    <div class="me-4">
                        <p class="fw-medium fs-20 text-fixed-white text-shadow mb-0">$12.2k</p>
                        <p class="mb-0 fs-11 op-5 text-fixed-white">Orders</p>
                    </div>

                </div>
            </div>
        </div>
        <div class="p-4 border-bottom border-block-end-dashed">
            <div class="mb-0">
                <p class="fs-15 mb-2 fw-medium">Description :</p>
                <p class="text-muted op-8 mb-0">
                    Lorem ipsum dolor sit amet consectetur. Mi pretium lacus dolor lectus. Facilisis amet mi nibh at
                    et in ultricies rhoncus nunc. Sed venenatis lectus leo donec maecenas tortor. Velit et velit
                    amet arcu.
                </p>
            </div>
        </div>

        <div class="p-4 border-bottom border-block-end-dashed d-flex align-items-center gap-3">
            <div class="fs-14 fw-medium">Price:</div>
            <div>
                <span class="badge bg-primary-transparent m-1">$8.00</span>
            </div>
        </div>

        <div class="p-4 border-bottom border-block-end-dashed d-flex align-items-center gap-3">
            <div class="fs-14 fw-medium">Status:</div>
            <div>
                <span class="badge bg-danger-transparent m-1">Inactive</span>
            </div>
        </div>

    </div>
</div>
<!-- End:: Company Details Offcanvas -->

@endsection
@section('custom-script')

<script>
    document.addEventListener("DOMContentLoaded", function() {
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });
    });
</script>

<!-- DataTable Search -->
<script>
    $(function() {
        let URL = "{{ route('get-menu') }}";

        var t = $('#menu-table').DataTable({
            processing: true,
            serverSide: true,
            searching: true, // Enable default search functionality
            order: [
                [1, 'desc']
            ],
            bDestroy: true,
            dom: 'lrtip', // Remove 'f' to hide the search bar
            dom: '<"d-flex justify-content-between"l<"d-flex">>rt<"d-flex justify-content-between"ip>', // Custom dom layout
            ajax: {
                "type": "GET",
                "url": URL
            },
            columns: [{
                    data: null
                },
                {
                    data: 'title'
                },
                {
                    data: 'description'
                },
                {
                    data: null
                },
                {
                    data: null
                },
                {
                    data: null
                },
                {
                    data: null
                }
            ],
            columnDefs: [{
                    render: function(data, type, row, meta) {
                        var image = data.thumbnail;
                        return '<div class="d-flex align-items-center">' +
                            '<img class="avatar-sm me-2" style="width: 80px; height:80px" src="' + image + '" alt="No Image Uploaded"/>' +
                            '</div>';
                    },
                    searchable: false,
                    orderable: false,
                    targets: 0
                },
                {
                    targets: 2, // adjust if your description column is elsewhere
                    render: function(data, type, row, meta) {
                        var shortText = data.length > 100 ? data.substring(0, 100) + '...' : data;

                        return `
            <div class="description-cell">
                <span class="short-text">${shortText}</span>
                <span class="full-text d-none">${data}</span>
                ${data.length > 100 ? '<a href="#" class="toggle-description">Show more</a>' : ''}
            </div>
        `;
                    }
                },

                {
                    render: function(data, type, row, meta) {
                        return `<div class="d-flex align-items-center">
                            <span class="badge bg-info-transparent">${data.price}</span>
                        </div>`;
                    },
                    searchable: false,
                    orderable: false,
                    targets: 3
                },
                {
                    render: function(data, type, row, meta) {
                        if (data.availability === 'Yes') {
                            return `<div class="d-flex align-items-center">
                            <span class="badge bg-success-transparent">${data.availability}</span>
                        </div>`;
                        }
                        if (data.availability === 'No') {
                            return `<div class="d-flex align-items-center">
                            <span class="badge bg-danger-transparent">${data.availability}</span>
                        </div>`;
                        }
                        if (data.availability === 'Out') {
                            return `<div class="d-flex align-items-center">
                            <span class="badge bg-danger-transparent">${data.availability}</span>
                        </div>`;
                        } else {
                            return `<div class="d-flex align-items-center">

                        </div>`;
                        }
                    },
                    searchable: false,
                    orderable: false,
                    targets: 4
                },
                {
                    render: function(data, type, row, meta) {
                        return `<div class="d-flex align-items-center">
                            <span class="badge bg-success-transparent">${data.category}</span>
                        </div>`;
                    },
                    searchable: false,
                    orderable: false,
                    targets: 5
                },
                {
                    render: function(data, type, row, meta) {
                        var url = '{{ route("menu.show", ":id") }}';
                        url = url.replace(':id', data.id);
                        var update = '{{ route("menu.update", ":id") }}';
                        update = update.replace(':id', data.id);

                        return '<div class="d-flex">' +
                            '<a data-id="' + row.id + '" data-title="' + row.title + '" data-description="' + row.description + '" data-thumbnail="' + row.thumbnail + '" data-status="' + row.status + '" data-availability="' + row.availability + '" data-price="' + row.price + '" data-addon="' + row.add_on + '" data-category="' + row.category_id + '" data-url="' + update + '" data-bs-toggle="modal" data-bs-target="#editMenu" class="btn btn-primary-light btn-icon ms-1 btn-sm invoice-btn me-2" href="javascript:void(0)" id="alert-confirm" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-primary" title="Edit">' +
                            '<span type="button" >' +
                            '<i class="ri-edit-line"></i>' +
                            '</span>' +
                            '</a>' +
                            '<a data-url="' + url + '" data-bs-toggle="modal" data-bs-target="#deleteCamp" class="btn btn-danger-light btn-icon ms-1 btn-sm invoice-btn" href="javascript:void(0)" id="alert-confirm" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-danger" title="Delete">' +
                            '<span type="button">' +
                            '<i class="ri-delete-bin-5-line"></i>' +
                            '</span>' +
                            '</a>' +
                            '</div>';

                    },
                    searchable: false,
                    orderable: false,
                    targets: -1
                }
            ],
            language: {
                paginate: {
                    previous: '&lsaquo;',
                    next: '&rsaquo;'
                }
            },
            drawCallback: function(settings) {
                var api = this.api();
                var dataCount = api.data().count();

                // Hide pagination if no data is available
                if (dataCount === 0) {
                    $('.dataTables_paginate').hide();
                } else {
                    $('.dataTables_paginate').show();
                }
            },
            initComplete: function() {
                // Hook up the search input
                $('#menu-table_filter input').unbind().bind('keyup', function() {
                    t.search(this.value).draw();
                });
            }
        });
    });

    function selectRange() {
        $('.dataTable').DataTable().ajax.reload();
    }
</script>

<script>
    // Activate the search button
    $('#search-btn').on('click', function() {
        let searchValue = $('#datatable-search-input').val();
        let dateValue = $('#datatable-date-input').val();
        let priceValue = $('#datatable-price-input').val();

        // You can implement logic to filter data based on date and price too
        let filterString = searchValue;

        // Reload DataTable with filter
        $('#menu-table').DataTable().search(filterString).draw();
    });
</script>



{{--Ajax Store--}}
<script>
    $("#storeForm").on('submit', function(event) {
        event.preventDefault();

        // Disable the submit button and change its text
        var submitButton = $('#storeForm button[type="submit"]');
        submitButton.prop('disabled', true).text('Processing...');

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $.ajax({
            type: 'POST',
            url: "{{route('menu.store')}}",
            data: new FormData(this),
            dataType: 'JSON',
            contentType: false,
            cache: false,
            processData: false,
            success: function(data) {
                if (data.success) {
                    // Hide the modal
                    $('#createMenu').modal('hide');

                    // Update the table content with the new HTML
                    $('#menu-table').DataTable().ajax.reload();

                    // Trigger the success toast notification
                    Toast.fire({
                        icon: 'success',
                        title: data.message
                    });

                    // Reset the form
                    $('#storeForm')[0].reset();
                }
                if (data.error) {
                    // $('#createMenu').modal('hide');

                    // Update the table content with the new HTML
                    // $('#menu-table').DataTable().ajax.reload();

                    // Trigger the success toast notification
                    Toast.fire({
                        icon: 'warning',
                        title: data.message
                    });

                    // $('#storeForm')[0].reset();
                }

                // Re-enable the button and reset its text
                submitButton.prop('disabled', false).text('Submit'); // Change to original text or appropriate label
            },
            error: function(data) {
                $('#titleError').addClass('d-none');
                $('#thumbnailError').addClass('d-none');
                $('#availabilityError').addClass('d-none');
                $('#statusError').addClass('d-none');
                $('#priceError').addClass('d-none');
                $('#category_idError').addClass('d-none');
                $('#descriptionError').addClass('d-none');

                var errors = data.responseJSON;
                if ($.isEmptyObject(errors) == false) {
                    $.each(errors.errors, function(key, value) {
                        var ErrorID = '#' + key + 'Error';
                        $(ErrorID).removeClass("d-none");
                        $(ErrorID).text(value);
                    });
                }
                // Re-enable the button and reset its text
                submitButton.prop('disabled', false).text('Submit'); // Change to original text or appropriate label
            }
        });
    });
    // Clear error messages on input change
    $('#storeForm input, #storeForm select , #storeForm textarea').on('input change', function() {
        var errorID = '#' + $(this).attr('name') + 'Error';
        if ($(this).val() !== '') {
            $(errorID).addClass('d-none');
        }
    });
</script>`

{{--Ajax Delete--}}
<script>
    $(document).ready(function() {
        $("#deleteCamp").on('show.bs.modal', function(event) {
            var triggerLink = $(event.relatedTarget);
            var url = triggerLink.data("url");
            $("#deleteCampForm").attr('action', url);

            // Reset the button state
            var submitButton = $("#deleteCampForm button[type='submit']");
            submitButton.prop('disabled', false).text('Yes, Delete It'); // Reset to original state
        });

        // Handle form submission for deletion
        $("#deleteCampForm").on('submit', function(event) {
            event.preventDefault(); // Prevent the default form submission

            // Get the action URL from the form, which contains the record ID
            var actionUrl = $(this).attr('action');
            var submitButton = $("#deleteCampForm button[type='submit']");
            submitButton.prop('disabled', true).text('Processing...'); // Disable the button and change text

            $.ajax({
                type: 'POST',
                url: actionUrl, // Use the action URL which includes the record ID
                data: $(this).serialize(), // Serialize the form data
                success: function(data) {
                    if (data.success) {
                        // Hide the modal
                        $('#deleteCamp').modal('hide');

                        // Update the table content with the new HTML
                        $('#menu-table').DataTable().ajax.reload(); // Refresh the data table

                        // Trigger the success toast notification
                        Toast.fire({
                            icon: 'success',
                            title: data.message
                        });
                    }
                },
                error: function(data) {
                    // Handle errors here if needed
                    Toast.fire({
                        icon: 'error',
                        title: 'Failed to delete the record!'
                    });

                    // Re-enable the button and reset its text
                    submitButton.prop('disabled', false).text('Yes, Delete It'); // Reset button state
                }
            });
        });
    });
</script>

{{--Edit Modal Pass--}}
<script>
    $(document).ready(function() {
        $('#editMenu').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget);
            var id = button.data('id');
            var title = button.data('title');
            var description = button.data('description');
            var status = button.data('status');
            var image = button.data('thumbnail');
            var category = button.data('category');
            var price = button.data('price')
            var availability = button.data('availability');
            var addon = button.data('addon');
            var url = button.data('url');
            var imageUrl = `${image}`;

            // Update the modal's form action and fields
            var modal = $(this);
            modal.find('#editForm').attr('action', url);
            modal.find('#editId').val(id);
            modal.find('#editTitle').val(title);
            modal.find('#editDescription').val(description);
            modal.find('#editPrice').val(price);
            modal.find('#editCategory').val(category);
            modal.find('#editAvailability').val(availability);
            modal.find('#editStatus').val(status);
            // modal.find('#editAddOn').val(addon);

            // Set radio buttons based on `addon` value
            modal.find('#isAddonYes').prop('checked', addon === true || addon === "true" || addon == 1);
            modal.find('#isAddonNo').prop('checked', addon === false || addon === "false" || addon == 0);


            modal.find('#product-img-edit').attr('src', imageUrl).show();
        });
    });
</script>

{{--Ajax Update--}}
<script>
    // Edit record with AJAX POST method
    $("#editForm").on('submit', function(event) {
        event.preventDefault();

        $('#titleEditError').addClass('d-none').text('');
        $('#statusEditError').addClass('d-none').text('');
        $('#availabilityEditError').addClass('d-none').text('');
        $('#priceEditError').addClass('d-none').text('');
        $('#category_idEditError').addClass('d-none').text('');

        // Re-enable the submit button and reset its text
        var submitButton = $('#editForm button[type="submit"]');
        submitButton.prop('disabled', true).text('Processing...');


        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        var rowId = $('#editForm input[name="id"]').val();

        $.ajax({
            type: 'POST',
            url: "{{ route('menu.update', '') }}/" + rowId,
            data: new FormData(this),
            dataType: 'JSON',
            contentType: false,
            cache: false,
            processData: false,
            success: function(data) {
                if (data.success) {
                    // Hide the modal
                    $('#editMenu').modal('hide');

                    // Update the table content with the new HTML
                    $('#menu-table').DataTable().ajax.reload();

                    // Trigger the success toast notification
                    Toast.fire({
                        icon: 'success',
                        title: data.message
                    });

                    var submitButton = $('#editForm button[type="submit"]');
                    submitButton.prop('disabled', false).text('Submit'); // Reset button state
                }
                if (data.error) {
                    $('#editMenu').modal('hide');

                    // Update the table content with the new HTML
                    $('#menu-table').DataTable().ajax.reload();

                    // Trigger the success toast notification
                    Toast.fire({
                        icon: 'warning',
                        title: data.message
                    });

                    var submitButton = $('#editForm button[type="submit"]');
                    submitButton.prop('disabled', false).text('Submit'); // Reset button state
                }
                // Re-enable the button and reset its text
                submitButton.prop('disabled', false).text('Submit'); // Change to original text or appropriate label
            },
            error: function(data) {
                // Clear previous error messages
                $('#titleEditError').addClass('d-none').text('');
                $('#statusEditError').addClass('d-none').text('');
                $('#availabilityEditError').addClass('d-none').text('');
                $('#priceEditError').addClass('d-none').text('');
                $('#category_idEditError').addClass('d-none').text('');

                var errors = data.responseJSON;
                if ($.isEmptyObject(errors) == false) {
                    // Display error messages
                    $.each(errors.errors, function(key, value) {
                        var ErrorID = '#' + key + 'EditError'; // Ensure this ID is correct
                        $(ErrorID).removeClass("d-none").text(value);
                    });
                }

                // Re-enable the button and reset its text
                submitButton.prop('disabled', false).text('Submit'); // Change to original text or appropriate label
            }
        });
    });
    // Clear error messages on input change
    $('#editForm input, #editForm select').on('input change', function() {
        var errorID = '#' + $(this).attr('name') + 'EditError';
        if ($(this).val() !== '') {
            $(errorID).addClass('d-none');
        }
    });
</script>

{{--Preview Image--}}
<script>
    function previewImageEdit(event) {
        const file = event.target.files[0];
        const imgElement = document.getElementById('product-img-edit');

        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                imgElement.src = e.target.result;
                imgElement.style.display = 'block';
            };
            reader.readAsDataURL(file);
        } else {
            imgElement.src = '';
            imgElement.style.display = 'none';
        }
    }
</script>
<script>
    $(document).on('click', '.toggle-description', function(e) {
        e.preventDefault();
        var container = $(this).closest('.description-cell');
        container.find('.short-text, .full-text').toggleClass('d-none');

        if ($(this).text() === 'Show more') {
            $(this).text('Show less');
        } else {
            $(this).text('Show more');
        }
    });
</script>
@endsection