@if (!is_null($selfActiveTimer) && in_array('tasks', user_modules()))

    <span class="border rounded f-14 py-2 px-2 d-none d-sm-block mr-3">
        <span id="active-timer" class="mr-2">{{ $selfActiveTimer->timer }}</span>

        @if (is_null($selfActiveTimer->activeBreak))
            <a href="javascript:;" class="pause-active-timer mr-1 border-right" data-url="{{ url()->current() }}"
                data-toggle="tooltip" data-original-title="{{ __('modules.timeLogs.pauseTimer') }}"
                data-time-id="{{ $selfActiveTimer->id }}">
                <i class="fa fa-pause-circle text-primary"></i>
            </a>
        @else
            <a href="javascript:;" class="resume-active-timer mr-1 border-right" data-url="{{ url()->current() }}"
                data-toggle="tooltip" data-original-title="{{ __('modules.timeLogs.resumeTimer') }}"
                data-time-id="{{ $selfActiveTimer->activeBreak->id }}">
                <i class="fa fa-play-circle text-primary"></i>
            </a>
        @endif
        <a href="javascript:;" class="stop-active-timer" id="stop-active-timer" data-toggle="tooltip"
            data-original-title="{{ __('modules.timeLogs.stopTimer') }}" data-url="{{ url()->current() }}"
            data-time-id="{{ $selfActiveTimer->id }}">
            <i class="fa fa-stop-circle text-danger"></i>
        </a>

    </span>

    @if (is_null($selfActiveTimer->activeBreak))
        <a href="javascript:;"
            class='btn-danger btn btn-sm rounded mr-3 f-14 py-2 px-2 stop-active-timer d-block d-sm-none mr-2'
            data-time-id="{{ $selfActiveTimer->id }}" data-url="{{ url()->current() }}" id="stop-active-timer">
            {{ __('modules.timeLogs.stopTimer') }}
        </a>
    @endif
@endif

<script>
    var $worked = $("#active-timer");
    var activeBreak = "{{ !is_null($selfActiveTimer) && !is_null($selfActiveTimer->activeBreak) }}";

    function updateTimerTask() {
        var myTime = $worked.html();
        var ss = myTime.split(":");

        var hours = ss[0];
        var mins = ss[1];
        var secs = ss[2];
        secs = parseInt(secs) + 1;

        if (secs > 59) {
            secs = '00';
            mins = parseInt(mins) + 1;
        }

        if (mins > 59) {
            secs = '00';
            mins = '00';
            hours = parseInt(hours) + 1;
        }

        if (hours.toString().length < 2) {
            hours = '0' + hours;
        }
        if (mins.toString().length < 2) {
            mins = '0' + mins;
        }
        if (secs.toString().length < 2) {
            secs = '0' + secs;
        }
        var ts = hours + ':' + mins + ':' + secs;

        $worked.html(ts);

        if (runTimeClock) {
            return setTimeout(updateTimerTask, 1000);
        }
    }

    if ($('#active-timer').length && activeBreak != '1') {
        runTimeClock = true;
        setTimeout(updateTimerTask, 1000);
    } else {
        runTimeClock = false;
    }
        document.addEventListener("visibilitychange", function() {
            if (document.visibilityState === "visible") {
                var url = "{{ route('timelogs.timer_data') }}";
                    $.easyAjax({
                    url: url,
                    container: '#startTimerForm',
                    type: "GET",
                    blockUI: true,
                    success: function (response) {
                        if (response.status == 'success') {
                            $('#active-timer').html(response.data.timer);
                        }
                    }
                });
            }
        });

@if(!is_null($selfActiveTimer))
    $('.stop-active-timer').click(function(){
        var url = "{{ route('timelogs.stopper_alert', ':id') }}?via=timelog";
        var id = "{{$selfActiveTimer->id}}";
        url = url.replace(':id', id);
        $(MODAL_LG + ' ' + MODAL_HEADING).html('...');
        $.ajaxModal(MODAL_LG, url);
    })
@endif

// Check for project time limit every minute
@if(!is_null($selfActiveTimer) && $selfActiveTimer->project_id)
    setInterval(function() {
        var url = "{{ route('timelogs.check_project_time_limit', $selfActiveTimer->project_id ?? 0) }}";
        $.easyAjax({
            url: url,
            type: "GET",
            success: function (response) {
                if (response.status == 'success' && response.timeLimitReached) {
                    // Stop the timer automatically
                    stopTimerOnTimeLimit();
                }
            }
        });
    }, 30000); // Check every 30 seconds
@endif

function stopTimerOnTimeLimit() {
    // Stop the timer by calling the stop timer endpoint
    var stopUrl = "{{ route('timelogs.stop_timer') }}";
    var timeId = "{{ $selfActiveTimer->id ?? 0 }}";
    
    $.easyAjax({
        url: stopUrl,
        type: "POST",
        data: {
            timeId: timeId,
            memo: 'Timer stopped due to project time limit reached',
            _token: '{{ csrf_token() }}'
        },
        success: function (response) {
            if (response.status == 'success') {
                // Show warning modal
                showProjectTimeLimitModal(response.message || '@lang("messages.projectTimeReached")');
                
                // Reload the page to update the timer display
                setTimeout(function() {
                    window.location.reload();
                }, 2000);
            }
        }
    });
}

function showProjectTimeLimitModal(message) {
    var modalHtml = `
        <div class="modal fade" id="projectTimeLimitModal" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">@lang('messages.projectTimeReached')</h5>
                        <button type="button" class="close" data-dismiss="modal">
                            <span>&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p>${message}</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-dismiss="modal">@lang('app.ok')</button>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    // Remove existing modal if any
    $('#projectTimeLimitModal').remove();
    
    // Add modal to body
    $('body').append(modalHtml);
    
    // Show modal
    $('#projectTimeLimitModal').modal('show');
}

</script>
