@extends('layouts.master')
@section('title')
    {{ 'Page Title Goes Here' }}
@endsection
@section('contain')
    <!-- Start Page Content -->
    <!-- ============================================================== -->
    <!-- Row -->
    @foreach ($userData as $user)
        <div class="row">
            <!-- Column -->
            <div class="col-lg-4 col-xlg-3 col-md-5">
                <div class="card">
                    <img class="card-img" src="{{ asset('images/4Reel_Logo_Icon_OL_Final-01.png') }}" height="456"
                        alt="Card image">
                    <div
                        class="card-img-overlay card-inverse text-white social-profile d-flex no-block justify-content-center">
                        <div class="align-self-center">
                            {{-- <img src="{{ $user->profile_image != null ? env('MEDIA_URL') . $user->profile_image : asset('images/placeholderprofile.png') }}" class="img-circle" width="100"> --}}
                            <a href="{{ URL::asset($user->profile_image != null ? env('MEDIA_URL') . $user->profile_image : 'images/placeholderprofile.png') }}"
                                target="_blank">
                                <img src="{{ $user->profile_image != null ? env('MEDIA_URL') . $user->profile_image : asset('images/placeholderprofile.png') }}"
                                    class="img-circle" style="    height: 210px; width: 210px;" />
                            </a>
                            <h4 class="card-title">{{ $user->full_name }}</h4>
                            <h6 class="card-title text-success">{{ $user->username }}</h6>
                            {{-- <h6 class="card-subtitle text-white">{{$user->full_name}}</h6>
                        <p class="text-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt </p> --}}
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-body">
                        <ul class="float-right">
                            <li><a><i class="fa fa-users"></i></a></li>
                            <li><a><em class="mr-5">{{ $user->followers_count }} Followers</em></a></li>
                        </ul>
                        <ul>
                            <li><a><i class="fa fa-users"></i></a></li>
                            <li><a><span>{{ $user->followings_count }} Followings</span></a></li>
                        </ul>
                        <br />
                        {{-- <h6>+91 654 784 547</h6> <small class="text-muted p-t-30 db">Address</small>
                        <h6>71 Pilgrim Avenue Chevy Chase, MD 20815</h6> --}}
                        <small class="font-bold">Email address </small>
                        <h6>{{ $user->email }}</h6>
                        <small class="font-bold">Registeration Date </small>
                        <h6>{{ $user->created_at }}</h6>
                    </div>
                </div>
            </div>
            <!-- Column -->
            <!-- Column -->
            <div class="col-lg-8 col-xlg-9 col-md-7">
                <div class="card">
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs profile-tab" role="tablist">
                        <li class="nav-item font-bold"> <a class="nav-link active" data-bs-toggle="tab" href="#home"
                                role="tab">Posts</a> </li>
                        {{-- <li class="nav-item font-bold"> <a id="tab" class="nav-link" data-bs-toggle="tab"
                                href="#meals" role="tab">Meals</a> </li> --}}
                        {{-- <li class="nav-item font-bold"> <a class="nav-link" data-bs-toggle="tab" href="#stories"
                                role="tab">Stories</a> </li>
                        <li class="nav-item font-bold"> <a class="nav-link" data-bs-toggle="tab" href="#highlight"
                                role="tab">Highlights</a> </li> --}}
                    </ul>
                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div class="tab-pane active" id="home" role="tabpanel">
                            <div class="card-body">
                                <div class="tab-content">
                                    <div class="tab-pane active" id="profile" role="tabpanel">
                                        <div class="card-body">
                                            {{-- <div class="row  m-t-5">
                                            <form method="POST" action="">
                                                @csrf
                                                <div class="col-md-6">
                                                    <input name="createSession" type="number" min="0" max="10"
                                                    class="form-control @error('createSession') is-invalid @enderror"
                                                    placeholder="Select number of sessions">
                                                    <input type="hidden" name="user_id" value="{{ $userData[0]->id }}">
                                                    @error('createSession')
                                                    <span class="invalid-feedback" style=" right: 5px; top: 48px;"
                                                    role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                                @enderror
                                            </div>
                                            <div class="col-md-2">
                                                <button type="submit" class="btn btn-success">Create Session</button>
                                            </div>
                                        </form>
                                    </div> --}}
                                            <style>
                                                table.dataTable tbody td {
                                                    text-align: center;
                                                }
                                            </style>
                                            <div class="row">
                                                <div class="table-responsive">
                                                    <table style="font-size: small;" id="myTable11"
                                                        class="table table-striped border dataTable no-footer">
                                                        <thead>
                                                            <tr style="background-color: gray " class="text-white">
                                                                <th>S.No</th>
                                                                {{-- <th>Full Name</th> --}}
                                                                <th>Title</th>
                                                                <th>Comments Count</th>
                                                                <th>Reactions Count</th>
                                                                <th>Description</th>
                                                                <th>Media</th>
                                                                <th>Date</th>
                                                                {{-- <th>Action</th> --}}
                                                            </tr>
                                                        </thead>
                                                        @php
                                                            $num = 1;
                                                        @endphp
                                                        <tbody>
                                                            @foreach ($user->posts as $post)
                                                                <td>{{ $num++ }}</td>
                                                                {{-- <td><a
                                                                        href="{{ Route('user.info', $post->user->id) }}">{{ $post->user->full_name }}</a>
                                                                </td> --}}
                                                                <td>{{ $post->title ?? '-' }}</td>
                                                                <td><i class="fa fa-comments">
                                                                        {{ $post->comments_count ?? 0 }}</i></td>
                                                                <td><i class="fa fa-thumbs-up">
                                                                        {{ $post->reaction_post_count ?? 0 }}</i></td>
                                                                <td>{{ $post->description ?? '-' }}</td>
                                                                <td>
                                                                    {{-- @if ($post->media_type == 'image')
                                                                        <a href="{{ URL::asset($post->media != null ? env('MEDIA_URL') . $post->media : 'images/placeholderprofile.png') }}"
                                                                            target="_blank">
                                                                            <img src="{{ $post->media != null ? env('MEDIA_URL') . $post->media : asset('images/placeholderprofile.png') }}"
                                                                                class="img-circle"
                                                                                style="    height: 50px; width: 50px;" />
                                                                        </a>
                                                                    @else
                                                                        <a href="{{ URL::asset($post->media != null ? env('MEDIA_URL') . $post->media : 'images/placeholderprofile.png') }}"
                                                                            target="_blank">
                                                                            <video
                                                                                src="{{ URL::asset($post->media != null ? env('MEDIA_URL') . $post->media : 'images/placeholderprofile.png') }}"
                                                                                controls width="100">
                                                                                Your browser does not support the video tag.
                                                                            </video>
                                                                        </a>
                                                                    @endif --}}
                                                                    <a type="button" title="media"
                                                                    onclick="openMediaModal({{ $post->multimedia }})"
                                                                    style="background-image: linear-gradient(to right, #FC10F4 0%, #109FFF 70%); display: inline-block; padding: 0px 5px; border-radius: 5px; color: white; margin-right: 5px; border-bottom: none;">
                                                                    <i class="fas fa-file-video btn" style="font-size:17px;"></i>
                                                                </td>
                                                                <td>{{ $post->created_at->format('Y-m-d') }}</td>
                                                                {{-- <td>
                                                                        <a href="{{Route('user.edit',$post->id)}}"><i title="Edit" class="far fa-edit" style="font-size:20px"></i></a>
                                                                        <a href="{{Route('post.detail',$post->id)}}"> <i title="post info" class="far fa-eye" style="font-size:20px"></i></a>
                                                                        <a title="delete" class="btn" onclick="swalll({{ $post->id }})"><i class="fa fa-trash" style="font-size:20px"></i></a>
                                                                            <form id="delete-form-{{ $post->id }}" action="{{ route('user.delete', $post->id) }}" method="POST" class="d-none">
                                                                            @csrf
                                                                            @method('DELETE')
                                                                            </form>
                                                                </td> --}}
                                                                </tr>
                                                            @endforeach
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--second tab-->
                        <!-- sample modal content -->
                        <div class="modal" id="exampleModal" tabindex="-1" role="dialog"
                            aria-labelledby="exampleModalLabel1">
                            <div class="modal-dialog " role="document">
                                <div class="modal-content" style="background-color: darkgray;border-radius: 5%;">
                                    <div class="modal-header">
                                        <h4 class="font-bold" id="exampleModalLabel1">Ad Media
                                        </h4>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                            aria-label="Close"><span aria-hidden="true"></span></button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="table-responsive m-t-40">
                                            <table id="" class="table table-striped">
                                                <thead>
                                                    <tr class="text-white" style="background-color: gray">
                                                        <th>S.No</th>
                                                        <th>Thumbnail</th>
                                                        {{-- <th>Media</th> --}}
                                                        {{-- <th>Created</th> --}}
                                                    </tr>
                                                </thead>
                                                <tbody class="mydata">

                                                    <tr>
                                                        <td>0</td>
                                                        <td
                                                            value="https://images.unsplash.com/photo-1604964432806-254d07c11f32?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8ZGV2ZWxvcGVyfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=700&q=60">
                                                            image</td>
                                                        <td>null</td>
                                                    </tr>
                                                    <tr>
                                                        <td>1</td>
                                                        <td
                                                            value="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/WeAreGoingOnBullrun.mp4">
                                                            video</td>
                                                        <td>null</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    {{-- <div class="modal-footer"> --}}
                                    <button type="button" class="btn btn-default text-dark"
                                        data-bs-dismiss="modal">Close</button>
                                    {{-- </div> --}}
                                </div>
                            </div>
                        </div>
                        <!-- /.modal -->
                        <div class="tab-pane" id="stories" role="tabpanel">
                            <div class="card-body">
                                <div class="table-responsive m-t-40">
                                    <table id="myTable2" class="table table-striped border">
                                        <thead>
                                            <tr class="text-white" style="background-color: gray">
                                                <th>S.No</th>
                                                <th>Media</th>
                                                <th>views</th>
                                                <th>created_at</th>
                                                {{-- <th>description</th> --}}

                                            </tr>
                                        </thead>
                                        <tbody>
                                            @php
                                                $num = 1;
                                            @endphp

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane" id="highlight" role="tabpanel">
                            <div class="card-body">
                                <div class="table-responsive m-t-40">
                                    <table id="myTable3" class="table table-striped border">
                                        <thead>
                                            <tr class="text-white" style="background-color: gray">
                                                <th>S.No</th>
                                                <th>Description</th>
                                                <th>Media</th>
                                                <th>created_at</th>
                                            </tr>
                                        </thead>
                                        @php
                                            $num = 1;
                                        @endphp
                                        <tbody>
    @endforeach
    </tbody>
    </table>
    </div>
    </div>
    </div>

    <script src="{{ asset('modules/amazingslider/amazingslider.js') }}"></script>
    <link rel="stylesheet" type="text/css" href="{{ asset('modules/amazingslider/amazingslider-1.css') }}">
    <script src="{{ asset('modules/amazingslider/initPostSlider.js') }}"></script>
    <div class="tab-pane" id="customerDevice" role="tabpanel">
        <div class="card-body">
            <div class="table-responsive m-t-40">
                <table id="myTable11" class="table table-striped border">
                    <thead>
                        <tr style="background-color: #77eded;">
                            <th>Device Type</th>
                            <th>Device Brand</th>
                            <th>Device os</th>
                            <th>App Version</th>
                            <th>is notify</th>
                            <th>udid</th>

                        </tr>
                    </thead>
                    <tbody>

                        {{-- @foreach ($user->nannyBookings as $Cusdevices) --}}
                        {{-- @foreach ($user->devices as $Cusdevices)
                                            <tr>
                                                <td>{{ $Cusdevices->device_type }}</td>
                                                <td>{{ $Cusdevices->device_brand }}</td>
                                                <td>{{ $Cusdevices->device_os }}</td>
                                                <td>{{ $Cusdevices->app_version }}</td>
                                                <td>
                                                    @if ($Cusdevices->is_notify == 0)
                                                        <p class="badge rounded-pill bg-danger ms-auto mb-2 mb-md-0">
                                                            Pending</p>
                                                    @else
                                                        <p class="badge rounded-pill bg-success ms-auto mb-2 mb-md-0">
                                                            Notified</p>
                                                    @endif
                                                </td>
                                                <td>{{ $Cusdevices->udid }}</td>
                                            </tr>
                                        @endforeach --}}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    <!-- Column -->
    </div>
    <!-- Row -->
    <!-- ============================================================== -->
    <!-- End PAge Content -->
    {{-- Custom pagination --}}
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAquzgo847shlU-SpPXLZMgShv6EW9pQmw&callback=initMap"></script>
    <script>
        // Initialize and add the map
        // function initMap() {
        //     // The location of Uluru
        //     const lati = document.getElementById("lat").value;
        //     const long1 = document.getElementById("long").value;
        //     const uluru = {
        //         lat: parseFloat(lati),
        //         lng: parseFloat(long1)
        //     };
        //     // The map, centered at Uluru
        //     const map = new google.maps.Map(document.getElementById("map"), {
        //         zoom: 20,
        //         center: uluru,
        //     });
        //     // The marker, positioned at Uluru
        //     const marker = new google.maps.Marker({
        //         position: uluru,
        //         map: map,
        //     });
        // }
    </script>
    <script>
         function openMediaModal(images) {
            var mediaUrl = "{{ env('MEDIA_URL') }}";
            var mediaList = [];

            // Iterate through each media item
            console.log(images);
            images.forEach(function(media) {
                var mediaSrc = mediaUrl + media.media;

                // Check the media type
                if (media.media_type === 'image') {
                    // alert(media.media_type);
                    mediaList.push({
                        src: mediaSrc,
                        type: 'image', // Specify the media type
                        title: media.title // Set the title for images
                    });
                } else if (media.media_type === 'video') {
                    // For videos, use type: 'iframe' and provide the video URL
                    mediaList.push({
                        src: mediaSrc,
                        type: 'iframe', // Specify the media type as iframe
                        title: media.title, // Set the title for videos
                        iframe: {
                            patterns: {
                                youtube: {
                                    index: 'youtube.com/', // Check for YouTube videos
                                    id: 'v=',
                                    src: 'https://www.youtube.com/embed/%id%?autoplay=1' // YouTube embed URL
                                }
                            }
                        }
                    });
                }
            });

            // Initialize Magnific Popup
            $.magnificPopup.open({
                items: mediaList,
                gallery: {
                    enabled: true // Enable gallery mode if needed
                },
                type: 'image' // Default type (images)
            });
        }
        function setMsg(e) {
            let dataList = '';
            var s_no = 1;
            let mydata = $(e).attr("data-msg");
            if (mydata.length > 0) {
                mydata = eval(mydata);
                $.each(mydata, function(key, value) {
                    if (value.thumbnail) {
                        let thumbnail = '<a href="{{ URL::asset(env('MEDIA_URL')) }}' + value.thumbnail +
                            '" target="_blank"><img width="50px" style ="height: 50px" class="img-circle" src="{{ URL::asset(env('MEDIA_URL')) }}' +
                            value.thumbnail +
                            '" /></a>';
                        dataList += '<tr><td>' + s_no++ + '</td><td>' + thumbnail + '</td></tr><br>';
                    }
                });
            } else {
                dataList = '<tr><td colspan="2"> No Data </td></tr>';
            }
            console.log(dataList);
            $('.mydata').empty();
            $('.mydata').html(dataList);
            // $('#tdMdlMsg').html($(e).attr("data-msg"));
        }
        // popup method end

        function setid(e) {
            let dataList = '';
            var s_no = 1;
            let Type = $(e).attr("data-mealType");
            mealType = (JSON.parse(Type))
            console.log(mealType)
            let category = $(e).attr("data-mealCategory");
            mealcategory = (JSON.parse(category))
            let mealitem = $(e).attr("data-mealitem");
            mealitem = (JSON.parse(mealitem))
            console.log(mealcategory)
            console.log(mealitem)
            $.each(mealitem, function(key, value) {
                $('#mealName').text(value['name']);
                $('#mealQuantity').text(value['quantity']);
                $('#mealCalories').text(value['calories']);
                $('#mealMacros').text(value['macros']);
                $('#mealWeight').text(value['weight']);
            })
            // $.each(mealType, function(key, value) {
            var images = ['jpg', 'PNG', 'png', 'jpeg', 'avif', 'jpg'];
            var videos = ['mp4'];
            // alert(mealType['title'])
            var ext = mealType['media'].split('.');
            console.log(ext[1]);
            if (images.includes(ext[1])) {
                title =
                    '<div class="d-flex align-items-center justify-content-between border-bottom p-3"><div class="d-flex"><h4 style="font-size: larger;">Meal Type : <span class="text-success">' +
                    mealType['title'] +
                    '</span></h4></div><div class="d-flex"><a target="_blank" href="{{ URL::asset(env('MEDIA_URL')) }}' +
                    mealType['media'] + '"><img class="image-circle" src="{{ URL::asset(env('MEDIA_URL')) }}' + mealType[
                        'media'] + '"alt="" width="150" /></a></div></div>';
            } else {
                title =
                    '<div class="d-flex align-items-center justify-content-between border-bottom p-3"><div class="d-flex"><h4 style="font-size: larger;">Meal Type : <span class="text-success">' +
                    mealType['title'] +
                    '</span></h4></div><div class="d-flex"><a target="_blank" href="{{ URL::asset(env('MEDIA_URL')) }}' +
                    mealType['media'] + '"><video class="image-circle" src="{{ URL::asset(env('MEDIA_URL')) }}' + mealType[
                        'media'] + '"alt="" width="150" ></video></a></div></div>';
            }
            if (images.includes(ext[1])) {
                category =
                    '<div class="d-flex align-items-center justify-content-between border-bottom p-3"><div class="d-flex"><h4 style="font-size: larger;">Meal Category : <span class="text-success">' +
                    mealcategory['title'] +
                    '</span></h4></div><div class="d-flex"><a target="_blank" href="{{ URL::asset(env('MEDIA_URL')) }}' +
                    mealcategory['media'] + '"><img class="image-circle" src="{{ URL::asset(env('MEDIA_URL')) }}' +
                    mealcategory['media'] + '"alt="" width="150" /></a></div></div>';
            } else {
                Category =
                    '<div class="d-flex align-items-center justify-content-between border-bottom p-3"><div class="d-flex"><h4 style="font-size: larger;">Meal Category : <span class="text-success">' +
                    mealcategory['title'] +
                    '</span></h4></div><div class="d-flex"><a target="_blank" href="{{ URL::asset(env('MEDIA_URL')) }}' +
                    mealcategory['media'] + '"><video class="image-circle" src="{{ URL::asset(env('MEDIA_URL')) }}' +
                    mealcategory['media'] + '"alt="" width="150" ></video></a></div></div>';
            }
            $('#meal_types').empty();
            $('#meal_types').append(title);
            $('#meal_category').empty();
            $('#meal_category').append(category);
            // })
            // let type = $(e).attr("data-type");
            // if (id) {
            //     var URL = "/user/userMealDetail" + '/' + id + '/'+type;
            //     $.ajax({
            //         url: URL,
            //         type: "GET",
            //         dataType: "json",
            //         success: function(data) {
            //             var images = ['jpg', 'PNG', 'png', 'jpeg', 'avif', 'jpg'];
            //             var videos = ['mp4'];
            //             if (data.length > 0) {
            //                 var title = '';
            //                 $.each(data[0]['mealinfo'], function(key, value) {
            //                     var ext = value['media'].split('.');
            //                     console.log(ext[1]);
            //                     if(images.includes(ext[1])){
            //                         title += '<div class="d-flex align-items-center justify-content-between border-bottom p-3"><div class="d-flex"><h4 style="font-size: larger;">Meal Type : <span class="text-success">'+value['title']+'</span></h4></div><div class="d-flex"><a target="_blank" href="{{ URL::asset(env('MEDIA_URL')) }}' + value['media'] + '"><img class="image-circle" src="{{ URL::asset(env('MEDIA_URL')) }}' + value['media'] + '"alt="" width="150" /></a></div></div>';
            //                     }else{
            //                         title += '<div class="d-flex align-items-center justify-content-between border-bottom p-3"><div class="d-flex"><h4 style="font-size: larger;">Meal Type : <span class="text-success">'+value['title']+'</span></h4></div><div class="d-flex"><a target="_blank" href="{{ URL::asset(env('MEDIA_URL')) }}' + value['media'] + '"><video class="image-circle" src="{{ URL::asset(env('MEDIA_URL')) }}' + value['media'] + '"alt="" width="150" ></video></a></div></div>';
            //                     }
            //                 })
            //                 $.each(mealitem, function(key, value) {
            //                         alert(mealitem)
            //                     $('#mealName').text(value['name']);
            //                     $('#mealQuantity').text(value['quantity']);
            //                     $('#mealCalories').text(value['calories']);
            //                     $('#mealMacros').text(value['macros']);
            //                     $('#mealWeight').text(value['weight']);
            //                 })
            //                 $('#meal_types').empty();
            //                 $('#meal_types').append(title);
            //             } else {
            //                 $('select[name="wellness_program_category_id"]').append(
            //                     '<option value=""> No Category </option>');
            //             }
            //         }
            //     })
            // } else {
            //     console.log("not responce")
            //     $('select[name="wellness_program_category_id"]').empty();
            // }
            console.log(dataList);
            $('.mydata').empty();
            $('.mydata').html(dataList);
            // $('#tdMdlMsg').html($(e).attr("data-msg"));
        }
        // popup method
        function swalll(id) {
            event.preventDefault();
            swal({
                    title: "Are you sure?",
                    text: "Once deleted, you will not be able to recover this imaginary file!",
                    icon: "warning",
                    buttons: true,
                    dangerMode: true,
                })
                .then((willDelete) => {
                    if (willDelete) {
                        var formId = "delete-form-" + id;
                        document.getElementById(formId).submit();
                        // swal("Poof! Your imaginary file has been deleted!", {
                        //     icon: "success",
                        // });
                    } else {
                        // swal("Your imaginary file is safe!");
                    }
                });
        }

        function deleteuserMeal(id) {
            event.preventDefault();
            swal({
                    title: "Are you sure?",
                    text: "Once deleted, you will not be able to recover this imaginary file!",
                    icon: "warning",
                    buttons: true,
                    dangerMode: true,
                })
                .then((willDelete) => {
                    if (willDelete) {
                        var URL = "/user/userMealDelete" + '/' + id;
                        $.ajax({
                            url: URL,
                            type: "GET",
                            dataType: "json",
                            success: function(data) {
                                toastr.success("{{ 'Meal Deleted Successfully' }}");
                            }
                        })
                        var formId = "delete-tr-" + id;
                        document.getElementById(formId).remove();

                    } else {
                        // swal("Your imaginary file is safe!");
                    }
                });
        }
        $(document).ready(function() {
            $('#myTable11').DataTable({
                dom: 'Bfrtip',
                lengthMenu: [
                    [5, 10, 25, 50, -1],
                    ['5 rows', '10 rows', '25 rows', '50 rows', 'Show all']
                ],
                buttons: [
                    'pageLength'
                ]
            });
        });
        $(document).ready(function() {
            $('#myTable2').DataTable({
                dom: 'Bfrtip',
                lengthMenu: [
                    [5, 10, 25, 50, -1],
                    ['5 rows', '10 rows', '25 rows', '50 rows', 'Show all']
                ],
                buttons: [
                    'pageLength'
                ]
            });
        });
        $(document).ready(function() {
            $('#myTable3').DataTable({
                dom: 'Bfrtip',
                lengthMenu: [
                    [5, 10, 25, 50, -1],
                    ['5 rows', '10 rows', '25 rows', '50 rows', 'Show all']
                ],
                buttons: [
                    'pageLength'
                ]
            });
        });
        $(document).ready(function() {
            $('#myTablemeal').DataTable({
                dom: 'Bfrtip',
                lengthMenu: [
                    [5, 10, 25, 50, -1],
                    ['5 rows', '10 rows', '25 rows', '50 rows', 'Show all']
                ],
                buttons: [
                    'pageLength'
                ]
            });
        });
    </script>
@endsection
{{-- tr id="meal_id"
    td
    td
    td
    td
    td data-id="meal_id onclick="delete()"
tr




jquery(
    var id = data.val();
    ajax(

    success:{
        if(result = true){
            $('table#test tr#3').remove();
        }
    }
    )
) --}}