@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">
                        <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->user_name }}</h4>

                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <small class="font-bold">Department </small>
                    <h6>{{ $user->department->name ?? '-' }}</h6>
                    <small class="font-bold">Registeration Date </small>
                    <h6>{{ $user->created_at }}</h6>
                </div>
            </div>
        </div> --}}
        <!-- Column -->
        <!-- Column -->
        <div class="col-lg-12 col-xlg-12 col-md-7">
            <div class="card">
                <div class="container">
                    <div class="row">
                        <div class="col">
                            <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">Suggestions</a>
                                </li>
                                <li class="nav-item font-bold">
                                    <a id="tab" class="nav-link" data-bs-toggle="tab" href="#incident"
                                        role="tab">Incidents</a>
                                </li>
                                <p style="color: chocolate;" class="col text-end mt-3"><strong
                                        style="color: grey">Department :</strong> {{ $user->department->name ?? '-' }}
                                    <strong style="color: grey">User Name :</strong> {{ $user->user_name ?? '-' }}
                                </p>
                                {{-- <p  class="col text-end mt-3"><strong style="color: grey">User Name :</strong> {{ $user->user_name ?? '-' }}</p> --}}
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- 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="card">
                                                <div class="card-body">
                                                    <ul class="nav nav-tabs" role="tablist">
                                                        <li class="nav-item">
                                                            <a class="nav-link active" id="pending-tab" data-bs-toggle="tab"
                                                                href="#pending" role="tab" aria-controls="pending"
                                                                aria-selected="false">Pending</a>
                                                        </li>
                                                        <li class="nav-item">
                                                            <a class="nav-link " id="approved-tab" data-bs-toggle="tab"
                                                                href="#approved" role="tab" aria-controls="approved"
                                                                aria-selected="true">Approved</a>
                                                        </li>
                                                        <li class="nav-item">
                                                            <a class="nav-link" id="reject-tab" data-bs-toggle="tab"
                                                                href="#reject" role="tab" aria-controls="reject"
                                                                aria-selected="false">Rejected</a>
                                                        </li>
                                                    </ul>
                                                    <div class="tab-content">
                                                        <div class="tab-pane fade " id="approved" role="tabpanel"
                                                            aria-labelledby="approved-tab">
                                                            <div class="table-responsive">
                                                                <table style="font-size: smaller;width: 100%" id="myTable11"
                                                                    class="table table-striped border dataTable no-footer"
                                                                    style="width:100%">
                                                                    <thead>
                                                                        <tr>
                                                                            <th>S.No</th>
                                                                            <th>Description</th>
                                                                            <th>Like Count</th>
                                                                            <th>Dislike Count</th>
                                                                            <th>Media</th>
                                                                            <th>Created At</th>
                                                                            <th>Status</th>
                                                                        </tr>
                                                                    </thead>
                                                                    @php
                                                                        $num = 1;
                                                                    @endphp
                                                                    <tbody>
                                                                        @foreach ($user->approvedSuggestions as $Psuggestion)
                                                                            <tr>
                                                                                <td>{{ $num++ }}</td>
                                                                                <td>{{ $Psuggestion->description }}</td>
                                                                                <td>{{ $Psuggestion->likes_count ?? 0 }} <i
                                                                                        class="fa fa-thumbs-up"></i></td>
                                                                                <td>{{ $Psuggestion->dislikes_count ?? 0 }}<i
                                                                                        class="fas fa-thumbs-down"></i></td>
                                                                                <td>
                                                                                    @if ($Psuggestion->media_type == 'video')
                                                                                        <a href="{{ URL::asset($Psuggestion->media != null ? env('MEDIA_URL') . $Psuggestion->media : 'images/placeholderprofile.png') }}"
                                                                                            target="_blank">
                                                                                            <video
                                                                                                src="{{ URL::asset($Psuggestion->media != null ? env('MEDIA_URL') . $Psuggestion->media : 'images/placeholderprofile.png') }}"
                                                                                                controls width="100">
                                                                                                Your browser does not
                                                                                                support the video tag.
                                                                                            </video>
                                                                                        </a>
                                                                                    @else
                                                                                        <a href="{{ URL::asset($Psuggestion->media != null ? env('MEDIA_URL') . $Psuggestion->media : 'images/placeholderprofile.png') }}"
                                                                                            target="_blank">
                                                                                            <img src="{{ $Psuggestion->media != null ? env('MEDIA_URL') . $Psuggestion->media : asset('images/placeholderprofile.png') }}"
                                                                                                class="img-circle"
                                                                                                style="    height: 50px; width: 50px;" />
                                                                                        </a>
                                                                                    @endif
                                                                                </td>
                                                                                <td>{{ $Psuggestion->created_at->format('Y-m-d') }}
                                                                                </td>
                                                                                <td><span
                                                                                        class="badge badge-success">Approved</span>
                                                                                </td>
                                                                            </tr>
                                                                        @endforeach
                                                                    </tbody>
                                                                </table>

                                                            </div>
                                                        </div>
                                                        <div class="tab-pane fade show active" id="pending"
                                                            role="tabpanel" aria-labelledby="pending-tab">
                                                            <div class="table-responsive">
                                                                <table style="font-size: smaller;width: 100%" id="myTable3"
                                                                    class="table table-striped border dataTable no-footer"
                                                                    style="width:100%">
                                                                    <thead>
                                                                        <tr>
                                                                            <th>S.No</th>
                                                                            <th>Description</th>
                                                                            <th>Like Count</th>
                                                                            <th>Dislike Count</th>
                                                                            <th>Media</th>
                                                                            <th>Created At</th>
                                                                            <th>Action</th>
                                                                        </tr>
                                                                    </thead>
                                                                    @php
                                                                        $num = 1;
                                                                    @endphp
                                                                    <tbody>
                                                                        @foreach ($user->pendingSuggestions as $Psuggestion)
                                                                            <tr>
                                                                                <td>{{ $num++ }}</td>
                                                                                <td>{{ $Psuggestion->description }}</td>
                                                                                <td>{{ $Psuggestion->likes_count ?? 0 }} <i
                                                                                        class="fa fa-thumbs-up"></i></td>
                                                                                <td>{{ $Psuggestion->dislikes_count ?? 0 }}<i
                                                                                        class="fas fa-thumbs-down"></i>
                                                                                </td>
                                                                                <td>
                                                                                    @if ($Psuggestion->media_type == 'video')
                                                                                        <a href="{{ URL::asset($Psuggestion->media != null ? env('MEDIA_URL') . $Psuggestion->media : 'images/placeholderprofile.png') }}"
                                                                                            target="_blank">
                                                                                            <video
                                                                                                src="{{ URL::asset($Psuggestion->media != null ? env('MEDIA_URL') . $Psuggestion->media : 'images/placeholderprofile.png') }}"
                                                                                                controls width="100">
                                                                                                Your browser does not
                                                                                                support the video tag.
                                                                                            </video>
                                                                                        </a>
                                                                                    @else
                                                                                        <a href="{{ URL::asset($Psuggestion->media != null ? env('MEDIA_URL') . $Psuggestion->media : 'images/placeholderprofile.png') }}"
                                                                                            target="_blank">
                                                                                            <img src="{{ $Psuggestion->media != null ? env('MEDIA_URL') . $Psuggestion->media : asset('images/placeholderprofile.png') }}"
                                                                                                class="img-circle"
                                                                                                style="    height: 50px; width: 50px;" />
                                                                                        </a>
                                                                                    @endif
                                                                                </td>
                                                                                <td>{{ $Psuggestion->created_at->format('Y-m-d') }}
                                                                                </td>
                                                                                {{-- <td>{{ $Psuggestion->status }}</td> --}}
                                                                                <td style="width: 100%">
                                                                                    <button data-bs-toggle="modal"
                                                                                        data-bs-target="#responsive-modal"
                                                                                        title="Reject suggestion"
                                                                                        onclick="populateModal()"
                                                                                        class="btn-danger rounded-circle"><i
                                                                                            class="fa fa-times"></i></button>
                                                                                    <button title="Approve suggestion"
                                                                                        onclick="approveSuggestion()"
                                                                                        class="btn-success rounded-circle"><i
                                                                                            class="fa fa-check"></i></button>

                                                                                </td>
                                                                            </tr>
                                                                        @endforeach
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                        <div class="tab-pane fade" id="reject" role="tabpanel"
                                                            aria-labelledby="reject-tab">
                                                            <div class="table-responsive">
                                                                <table style="font-size: smaller;width: 100%"
                                                                    id="myTablemeal"
                                                                    class="table table-striped border dataTable no-footer"
                                                                    style="width:100%">
                                                                    <thead>
                                                                        <tr>
                                                                            <th>S.No</th>
                                                                            <th>Description</th>
                                                                            <th>Like Count</th>
                                                                            <th>Dislike Count</th>
                                                                            <th>reason</th>
                                                                            <th>Media</th>
                                                                            <th>Created At</th>
                                                                            <th>Status</th>
                                                                        </tr>
                                                                    </thead>
                                                                    @php
                                                                        $num = 1;
                                                                    @endphp
                                                                    <tbody>
                                                                        @foreach ($user->rejectedSuggestions as $Psuggestion)
                                                                            <tr>
                                                                                <td>{{ $num++ }}</td>
                                                                                <td>{{ $Psuggestion->description }}</td>
                                                                                <td>{{ $Psuggestion->likes_count ?? 0 }} <i
                                                                                        class="fa fa-thumbs-up"></i></td>
                                                                                <td>{{ $Psuggestion->dislikes_count ?? 0 }}
                                                                                    <i class="fas fa-thumbs-down"></i>
                                                                                </td>
                                                                                <td>{{ $Psuggestion->reason ?? '-' }} </td>
                                                                                <td>
                                                                                    @if ($Psuggestion->media_type == 'video')
                                                                                        <a href="{{ URL::asset($Psuggestion->media != null ? env('MEDIA_URL') . $Psuggestion->media : 'images/placeholderprofile.png') }}"
                                                                                            target="_blank">
                                                                                            <video
                                                                                                src="{{ URL::asset($Psuggestion->media != null ? env('MEDIA_URL') . $Psuggestion->media : 'images/placeholderprofile.png') }}"
                                                                                                controls width="100">
                                                                                                Your browser does not
                                                                                                support the video tag.
                                                                                            </video>
                                                                                        </a>
                                                                                    @else
                                                                                        <a href="{{ URL::asset($Psuggestion->media != null ? env('MEDIA_URL') . $Psuggestion->media : 'images/placeholderprofile.png') }}"
                                                                                            target="_blank">
                                                                                            <img src="{{ $Psuggestion->media != null ? env('MEDIA_URL') . $Psuggestion->media : asset('images/placeholderprofile.png') }}"
                                                                                                class="img-circle"
                                                                                                style="    height: 50px; width: 50px;" />
                                                                                        </a>
                                                                                    @endif
                                                                                </td>
                                                                                <td>{{ $Psuggestion->created_at->format('Y-m-d') }}
                                                                                </td>
                                                                                <td><span
                                                                                        class="badge badge-danger">Rejected</span>
                                                                                </td>
                                                                            </tr>
                                                                        @endforeach
                                                                    </tbody>
                                                                </table>

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


                                                    {{-- <h6 class="card-subtitle">Data table example</h6> --}}

                                                </div>
                                            </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="incident" role="tabpanel">
                        <div class="card-body">
                            <div class="table-responsive m-t-40">
                                <table id="myTable2" class="table table-striped border">
                                    <thead>
                                        <tr>
                                            <th>S.No</th>
                                            <th>Name</th>
                                            <th>Email</th>
                                            <th>Phon</th>
                                            <th>Date</th>
                                            <th>Time</th>
                                            <th>Location</th>
                                            <th>Description</th>
                                            <th>Media</th>
                                            <th>Status</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php
                                            $num = 1;
                                        @endphp
                                        @foreach ($user->incident as $incid)
                                            <tr>
                                                <td>{{ $num++ }}</td>
                                                <td>{{ $incid->name ?? '-' }}</td>
                                                <td>{{ $incid->email ?? '-' }}</td>
                                                <td>{{ $incid->phone ?? '-' }}</td>
                                                <td>{{ $incid->date ?? '-' }}</td>
                                                <td>{{ $incid->time ?? '-' }}</td>
                                                <td>{{ $incid->location ?? '-' }}</td>
                                                <td>{{ $incid->description ?? '-' }}</td>
                                                <td>
                                                    <a href="{{ URL::asset($incid->media != null ? env('MEDIA_URL') . $incid->media : 'images/placeholderprofile.png') }}"
                                                        target="_blank">
                                                        <img src="{{ $incid->media != null ? env('MEDIA_URL') . $incid->media : asset('images/placeholderprofile.png') }}"
                                                            class="img-circle" style="    height: 50px; width: 50px;" />
                                                    </a>
                                                </td>
                                                <td>
                                                    <span class="badge"
                                                        style="background-color:
                                                        @switch($incid->status)
                                                            @case('submitted') #f01e1e @break
                                                            @case('received') #ffd65b @break
                                                            @case('on the case') #ffbf00 @break
                                                            @case('in progress') #4da64d @break
                                                            @case('resolved') #10cc10 @break
                                                            @default '' /* Default color if status doesn't match any case */
                                                        @endswitch">
                                                        {{ $incid->status ?? '-' }}
                                                    </span>
                                                </td>


                                                <td>
                                                    <a href="#" data-bs-toggle="modal"
                                                        data-bs-target="#responsive-modal-incident" title="Update Status"
                                                        onclick="populateModalIncident('{{ $incid->id }}', '{{ $incid->status }}')"
                                                        class="btn btn-info" role="button"><i
                                                            class="fa fa-edit"></i></a>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </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>
    <div id="responsive-modal-incident" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
        aria-hidden="true">
        <!-- Modal content -->
        <div class="modal-dialog">
            <div class="modal-content topbar" style="height: 40vh;">
                <div class="modal-header" style="padding: 2%;">
                    <h4 class="font-bold">Update Status</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ Route('incident.status') }}" method="get">
                    @csrf
                    <div class="modal-body" style="padding: 14px;">
                        <div class="form-group">
                            {{-- <label for="message-text" class="form-label">Reason:</label> --}}
                            <select required class="form-control form-select" id="message-text" name="status">
                                <option value="submitted">submitted</option>
                                <option value="received">received</option>
                                <option value="in progress">in progress</option>
                                <option value="on the case">on the case</option>
                                <option value="resolved">resolved</option>
                            </select>
                            <input type="hidden" name="incidentId" id="suggestionId">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default text-dark" data-bs-dismiss="modal"
                            aria-label="Close">Close</button>

                        <button type="submit" class="btn btn-danger waves-effect waves-light text-white">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div id="responsive-modal" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
        aria-hidden="true">
        <!-- Modal content -->
        <div class="modal-dialog">
            <div class="modal-content topbar">
                <div class="modal-header" style="padding: 2%;">
                    <h4 class="font-bold">Enter Reason</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ Route('suggestion.status') }}" method="get">
                    @csrf
                    <div class="modal-body" style="padding: 14px;">
                        <div class="form-group">
                            <label for="message-text" class="form-label">Reason:</label>
                            <textarea required class="form-control" id="message-text" maxlength="255" name="reason"></textarea>
                            <input type="hidden" name="suggestionId" id="suggestion_Id">
                            <input type="hidden" name="status" value="reject">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default text-dark" data-bs-dismiss="modal"
                            aria-label="Close">Close</button>

                        <button type="submit" class="btn btn-danger waves-effect waves-light text-white">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </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>
        function populateModalIncident(suggestionId, status) {
            var modal = new bootstrap.Modal(document.getElementById('responsive-modal-incident'));
            $('#suggestionId').val(suggestionId);
            $('#message-text').val(status); // Pre-select the option matching the status
            // modal.show();
        }

        function approveSuggestion(suggestionId) {
            var baseUrl = '{{ route('suggestion.status', [':suggestionId', 'approve']) }}';
            baseUrl = baseUrl.replace(':suggestionId', suggestionId);

            swal({
                title: 'Are you sure?',
                text: 'You are about to approve this suggestion.',
                icon: 'warning',
                buttons: {
                    cancel: 'No, cancel!',
                    confirm: 'Yes, approve it!'
                },
                dangerMode: true
            }).then((isConfirmed) => {
                if (isConfirmed) {
                    // Perform the approve action here, e.g., submit a form or make an AJAX request
                    window.location.href = baseUrl;
                }
            });
        }


        function populateModal(suggestionId) {
            var form = document.getElementById('my-form');
            var reasonInput = document.getElementById('message-text').value;

            var modal = new bootstrap.Modal(document.getElementById('responsive-modal'));
            $('#suggestion_Id').val(suggestionId);
            // modal.show();
        }
        // 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 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();
        }
    }
    )
) --}}