8889841c@php

    use App\Models\Task_Comments;
    use App\Models\Task_Post;

    //$comments = Task_Comments::with('commentUser')->latest()->take(12)->get();
    $posts = Task_Post::with('postuser')->latest()->take(12)->get();

    $userRole = Auth::user()->role_id;
    $userId = Auth::user()->id;
    $read = 1;
    $unread = 0;
    if ($userRole === 1) {
        $allComments = Task_Comments::with('commentUser', 'user')->orderBy('updated_at', 'desc')->take(50)->get();
    } else {
        $Comments = Task_Comments::where('user_id', $userId)
            ->with('commentUser', 'user')
            ->orderBy('updated_at', 'desc')
            ->take(50)
            ->get();
    }

@endphp
<div class="row">
    <!-- Profile Info and Notifications -->
    <div class="col-md-6 col-sm-8 clearfix">

        <ul class="user-info pull-left pull-none-xsm">

            <!-- Profile Info -->
            <li class="profile-info dropdown">
                <!-- add class "pull-right" if you want to place this from right -->
                <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown"
                    style="text-transform: capitalize;">
                    @php
                        $image = Auth::guard()->user()->profile_image;
                    @endphp
                    <img src="{{ Storage::url('public/images/' . $image) }}" alt="" class="img-circle"
                        width="44" />
                    @php
                        $name = Auth::guard()->user()->name;
                        echo $name;
                    @endphp
                </a>
                <ul class="dropdown-menu">
                    <!-- Reverse Caret -->
                    <li class="caret"></li>

                    <!-- Profile sub-links -->

                    <li>
                        <a href="{{ URL::to('/viewemployee/' . Auth::user()->id) }}">
                            <i class="entypo-user"></i>
                            Profile
                        </a>
                    </li>
                    @if (Auth::user()->role_id < 2)
                        <li>
                            <a href="{{ URL::to('/reminder') }}">
                                <i class="entypo-calendar"></i>
                                Reminder
                            </a>
                        </li>
                        <li>
                            <a href="{{ URL::to('/tasks') }}">
                                <i class="entypo-clipboard"></i>
                                Tasks
                            </a>
                        </li>
                    @endif

                </ul>
            </li>

        </ul>
        <ul class="user-info pull-left pull-right-xs pull-none-xsm">
            <!-- Task Notifications -->
            @php

            @endphp
            @if (Auth::user()->role_id < 2)
                <li class="notifications dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown"
                        data-close-others="true">
                        <i class="entypo-list"></i>
                        <span id="counterTask" class="badge badge-warning"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li class="top">
                            <p>You have 6 pending tasks</p>
                        </li>
                        <li>
                            <ul class="taskNotify dropdown-menu-list scroller">
                                <!--List of task notification-->
                            </ul>
                        </li>
                        <li class="external">
                            <a href="{{ route('task.tasks') }}">See all tasks</a>
                        </li>
                    </ul>
                </li>
            @endif
            <!-- Raw Notifications -->
            <li class="notifications dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown"
                    data-close-others="true">
                    <i class="entypo-attention"></i>
                    <!--<span class="notification-icon">
                         <img src="{{ asset('assets/images/notification.gif') }}" width="auto" height="26px"
                            alt="GIF Image">
                    </span>-->
                    <span class="badge badge-info"></span>
                </a>
                <!--animated icon-->
                <ul class="dropdown-menu">
                    <li class="top">
                        <p class="small">
                            <a href="#" class="pull-right">Mark all Read</a>
                            You have <strong>3</strong> new notifications.
                        </p>
                    </li>
                    <li>
                        <ul class="dropdown-menu-list scroller">
                            <li class="unread notification-success">
                                <a href="#">
                                    <i class="entypo-user-add pull-right"></i>

                                    <span class="line">
                                        <strong>New user registered</strong>
                                    </span>

                                    <span class="line small">
                                        30 seconds ago
                                    </span>
                                </a>
                            </li>
                            <li class="unread notification-secondary">
                                <a href="#">
                                    <i class="entypo-heart pull-right"></i>

                                    <span class="line">
                                        <strong>Someone special liked this</strong>
                                    </span>

                                    <span class="line small">
                                        2 minutes ago
                                    </span>
                                </a>
                            </li>
                            <li class="notification-primary">
                                <a href="#">
                                    <i class="entypo-user pull-right"></i>
                                    <span class="line">
                                        <strong>Privacy settings have been changed</strong>
                                    </span>
                                    <span class="line small">
                                        3 hours ago
                                    </span>
                                </a>
                            </li>
                            <li class="notification-danger">
                                <a href="#">
                                    <i class="entypo-cancel-circled pull-right"></i>
                                    <span class="line">
                                        John cancelled the event
                                    </span>
                                    <span class="line small">
                                        9 hours ago
                                    </span>
                                </a>
                            </li>
                            <li class="notification-info">
                                <a href="#">
                                    <i class="entypo-info pull-right"></i>
                                    <span class="line">
                                        The server is status is stable
                                    </span>
                                    <span class="line small">
                                        yesterday at 10:30am
                                    </span>
                                </a>
                            </li>
                            <li class="notification-warning">
                                <a href="#">
                                    <i class="entypo-rss pull-right"></i>
                                    <span class="line">
                                        New comments waiting approval
                                    </span>
                                    <span class="line small">
                                        last week
                                    </span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="external">
                        <a href="#">View all notifications</a>
                    </li>
                </ul>
            </li>
            <!-- Message Notifications Number-->
            <li id="sms_notification" class="notifications dropdown">
                <a href="#" id="message_notif" class="dropdown-toggle" data-toggle="dropdown"
                    data-hover="dropdown" data-close-others="true">
                    <i class="entypo-mail"></i>
                    <span id="counterComment" class="badge badge-secondary" style="font-size: 8.7px;"></span>
                </a>
                <ul class="dropdown-menu alert-dismissible" id="drop-menu-message">
                    <li>
                        <ul id="comment-list" class="dropdown-menu-list scroller">

                        </ul>
                    </li>
                    <li class="external">

                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <!-- Raw Links -->
    <div class="col-md-6 col-sm-4 clearfix hidden-xs">

        <ul class="list-inline links-list pull-right">
            <li>
                <div class="hiddenForm" style="display: none">
                    <input type="text" name="userid" value="{{ Auth::user()->id }}">
                </div>
                <a type="submit" id="punch-in-btn" class="btn btn-warning">
                    Punch In
                </a>
            </li>
            <li class="sep"></li>
            <li>
                <a type="submit" id="punch-out-btn" class="btn btn-primary">
                    Punch Out
                </a>
            </li>
            <li class="sep"></li>
            <li>
                <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                    @csrf
                    <button class="btn btn-default btn-icon icon-right">
                        Log Out <i class="entypo-logout"></i>
                    </button>
                </form>
            </li>
        </ul>

    </div>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        function updateNotification() {
            $.ajax({
                url: '/notification/update',
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    $('#counterComment').text(response.commentCount);
                    $('#comment-list').empty();
                    response.comments.forEach(function(comment) {
                        let listItem = `
                        <li id="comentNotify" class="active" onclick="CommentDelete( ${comment.commentId})">
                            <a href="{{ URL::to('/tasksprogress/${comment.taskId}') }}">
                                <span class="image pull-right">
                                    <img src="${comment.avatar}" width="44" class="img-circle" />
                                </span>
                                <span class="line">
                                    <strong><span class="username">${comment.username}</span></strong>
                                    - <span class="timeDifferent">${comment.time}</span>
                                </span>
                                <span class="comment line desc small">${comment.comment}</span>
                            </a>
                        </li>`;
                        $("#comment-list").append(listItem);
                    });
                    localStorage.setItem('unreadCount', response.commentCount);
                },
                error: function(xhr, status, error) {
                    console.error('Error occurred while checking for new messages!');
                }
            });
        }
        var storedCount = localStorage.getItem('unreadCount');
        if (storedCount !== null) {
            $('#counterComment').text(storedCount);
        }
        var notificationInterval = setInterval(updateNotification, 500);
        $('#counterComment').on('click', function() {
            $('#counterComment').text('');
            clearInterval(notificationInterval);
            localStorage.removeItem('unreadCount');
        });
    });

    function CommentDelete(commentId) {
        $.ajax({
            type: 'GET',
            url: '/commentdelete/' + commentId,
            success: function(response) {
                console.log("Successfull update the comment");
                /*setTimeout(function() {
                    var opts = {
                        "closeButton": true,
                        "debug": false,
                        "positionClass": rtl() || public_vars.$pageContainer.hasClass(
                                'right-sidebar') ?
                            "toast-top-left" : "toast-top-right",
                        "toastClass": "black",
                        "onclick": null,
                        "showDuration": "300",
                        "hideDuration": "1000",
                        "timeOut": "5000",
                        "extendedTimeOut": "1000",
                        "showEasing": "swing",
                        "hideEasing": "linear",
                        "showMethod": "fadeIn",
                        "hideMethod": "fadeOut"
                    };

                    toastr.success("You have been awarded with 1 year free subscription. Enjoy it!",
                        "Comment Update", opts);
                }, 3000);*/
            },
            error: function(response) {
                console.log("Error update the comment");
            }
        });
    }
    /*setTimeout(function() {
        var opts = {
            "closeButton": true,
            "debug": false,
            "positionClass": rtl() || public_vars.$pageContainer.hasClass('right-sidebar') ?
                "toast-top-left" : "toast-top-right",
            "toastClass": "black",
            "onclick": null,
            "showDuration": "300",
            "hideDuration": "1000",
            "timeOut": "5000",
            "extendedTimeOut": "1000",
            "showEasing": "swing",
            "hideEasing": "linear",
            "showMethod": "fadeIn",
            "hideMethod": "fadeOut"
        };

        toastr.success("You have been awarded with 1 year free subscription. Enjoy it!",
            "You have new Comment", opts);
    }, 3000);*/
</script>
<!--Task Notificatin script-->
<script type="text/javascript">
    $(document).ready(function() {
        function updateTaskNotification() {
            $.ajax({
                type: 'GET',
                url: '/tasknotify/show',
                success: function(response) {
                    $('.taskNotify').empty();
                    response.taskNotify.forEach(function(taskItem) {
                        var progressWidth = 0;
                        if (taskItem.pre_approval === "yes") {
                            progressWidth += 17;
                            var progressBar = 'warning';
                        }
                        if (taskItem.post_approval === "yes") {
                            progressWidth += 17;
                            var progressBar = 'important';
                        }
                        if (taskItem.complete_task === "yes") {
                            progressWidth += 17;
                            var progressBar = 'success';
                        }
                        var listItem =
                            `
                    <li class="" onclick="taskNotifyDelete(${taskItem.id})">
                        <a href="{{ URL::to('/tasksprogress/${taskItem.id}') }}">
                            <span class="task">
                                <span class="desc">${taskItem.client.name}</span>
                                <span class="percent">${progressWidth}%</span>
                            </span>
                            <span class="progress progress-striped">
                                <span style="width: ${progressWidth}%;" class="progress-bar progress-bar-${progressBar}">
                                    <span class="sr-only">${progressWidth}% Complete</span>
                                </span>
                            </span>
                        </a>
                    </li>
                    `;
                        $('.taskNotify').append(listItem);
                    });

                    var taskCount = response.taskCount;
                    if (taskCount > 0) {
                        $('#counterTask').text(taskCount);
                    } else {
                        $('#counterTask').text('');
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error occurred while checking for new tasks!');
                }
            });
        }
        var storedCount = localStorage.getItem('taskCount');
        if (storedCount !== null) {
            $('#counterTask').text(storedCount);
        }
        var taskInterval = setInterval(updateTaskNotification, 400);
        $('#counterTask').on('click', function() {
            $('#counterTask').text('');
            clearInterval(taskInterval);

        });
    });

    function taskNotifyDelete(tasknotifyId) {
        $.ajax({
            type: 'GET',
            url: '/tasknotifyupdate/' + tasknotifyId,

            success: function(response) {
                console.log("Successfully updated the comment: " + tasknotifyId);
            },
            error: function(xhr, status, error) {
                console.log("Error updating the comment: " + tasknotifyId, error);
            }
        });
    }
</script>

<script type="text/javascript">
    $(document).ready(function() {
        showNotification();
        setInterval(showNotification(), 500);
    });

    function showNotification() {
        $.ajax({
            method: 'POST',
            url: "{{ route('notifications.show') }}",
            data: {
                key: '123'
            },
            cache: false,
            success: function(data) {
                var data = JSON.parse(data);
                let contentData = data;
                $('#').html('');
            }
        });
    }
</script>

<!--Punch In/Out script-->
<script type="text/javascript">
    /*$(document).ready(function() {
        $('#punch-in-btn').on('click', function(e) {
            e.preventDefault();

            var formData = {
                'userid': $('input[name="userid"]').val(),
            }

            $.ajax({
                url: "/punchin",
                type: "GET",
                data: formData,
                processData: false,
                contentType: false,
                beforeSend: function() {
                    $('#punch-in-btn').prop('disabled', true).text('Punching In...');
                },
                success: function(response) {
                    toastr.success(response.message);
                    $('#punch-in-btn').prop('disabled', false).text('Punch In');
                },
                error: function(xhr) {
                    toastr.error('Error: ' + xhr.responseJSON.message);
                    $('#punch-in-btn').prop('disabled', false).text('Punch In');
                }
            });
        });

    });*/
    $(document).ready(function() {
        $('#punch-in-btn').on('click', function(e) {
            e.preventDefault();
            // Step 1: Fetch user IP
            $.getJSON("https://api.ipify.org?format=json", function(data) {
                var userIp = data.ip;
                // Step 2: Define allowed office IPs
                var allowedIps = ["192.168.1.228", "203.0.113.50",
                    "198.51.100.23"
                ]; // Add your office IPs here
                // Step 3: Check if user IP is allowed
                if (!allowedIps.includes(userIp)) {
                    toastr.error("You are outside the office!");
                    return;
                }
                // Step 4: Proceed with AJAX request
                var formData = {
                    'userid': $('input[name="userid"]').val(),
                    'ip': userIp
                };
                $.ajax({
                    url: "/punchin",
                    type: "GET",
                    data: formData,
                    processData: true,
                    contentType: "application/x-www-form-urlencoded",
                    beforeSend: function() {
                        $('#punch-in-btn').prop('disabled', true).text(
                            'Punching In...');
                    },
                    success: function(response) {
                        toastr.success(response.message);
                        $('#punch-in-btn').prop('disabled', false).text('Punch In');
                    },
                    error: function(xhr) {
                        toastr.error('Error: ' + (xhr.responseJSON ? xhr
                            .responseJSON.message : 'Server Error'));
                        $('#punch-in-btn').prop('disabled', false).text('Punch In');
                    }
                });
            }).fail(function() {
                toastr.error("Failed to fetch IP. Please check your connection.");
            });
        });
    });
</script>
<script type="text/javascript">
    $(document).ready(function() {
        /// punch out
        $('#punch-out-btn').on('click', function(e) {
            e.preventDefault();

            var formData = {
                'userid': $('input[name="userid"]').val(),
            }

            $.ajax({
                url: "/punchout",
                type: "GET",
                data: formData,
                processData: false,
                contentType: false,
                beforeSend: function() {
                    $('#punch-out-btn').prop('disabled', true).text('Punching Out...');
                },
                success: function(response) {
                    toastr.success(response.message);
                    $('#punch-out-btn').prop('disabled', false).text('Punch Out');
                },
                error: function(xhr) {
                    toastr.error('Error: ' + xhr.responseJSON.message);
                    $('#punch-out-btn').prop('disabled', false).text('Punch Out');
                }
            });
        });
    });
</script>