@php
use Illuminate\Support\Facades\Auth;
use Tymon\JWTAuth\Facades\JWTAuth;
use Tymon\JWTAuth\Token;
use Illuminate\Support\Carbon;

$menus = get_all_menu();
$user_bo = Auth::user();

$jwtTotalSeconds = session('jwt_total_seconds');
$jwtExpirationDate = session('jwt_web_expired');

@endphp
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<script>
    // Pass the targetDateTime value from the controller to JavaScript
    const jwtTotalSeconds = {{ $jwtTotalSeconds }};
    const targetDateTime = @if($jwtExpirationDate) new Date("{{ $jwtExpirationDate->format('Y-m-d\TH:i:s') }}") @else 0 @endif;

    // Function to check if targetDateTime exists
    function hasTargetDateTime() {
        return targetDateTime !== null;
    }

    function updateCountdownAndProgressBar() {
        const now = new Date(); // Update the current time each time the function runs
        const timeDifference = targetDateTime - now;

        if (timeDifference > 0) {
            const totalSeconds = timeDifference / 1000;
            const remainingSeconds = Math.max(0, Math.floor(totalSeconds));
            const percentage = Math.max(remainingSeconds / jwtTotalSeconds) * 100;

            // Update the countdown timer
            const hours = Math.floor(remainingSeconds / 3600);
            const minutes = Math.floor((remainingSeconds % 3600) / 60);
            const seconds = remainingSeconds % 60;
            const timerElement = document.getElementById('timer');
            timerElement.innerHTML = `${hours}h ${minutes}m ${seconds}s`;

            // Update the progress bar with CSS transition
            const progressBarElement = document.getElementById('progress-bar');
            const iconElement = document.getElementById("icon-token-jwt");

            if (percentage >= 75) { // Blue
            progressBarElement.className = 'progress-bar progress-bar-info'; 
            iconElement.className = 'fa fa-circle text-info'; 
            } else if (percentage >= 50) { // Green
            progressBarElement.className = 'progress-bar progress-bar-success'; 
            iconElement.className = 'fa fa-circle text-success'; 
            } else if (percentage >= 25) { // Yellow
            progressBarElement.className = 'progress-bar progress-bar-warning'; 
            iconElement.className = 'fa fa-circle text-warning'; 
            } else if (percentage < 25) { // Red
            progressBarElement.className = 'progress-bar progress-bar-danger'; 
            iconElement.className = 'fa fa-circle text-danger'; 
            } else { // Black
            progressBarElement.className = 'progress-bar'; 
            iconElement.className = 'fa fa-circle'; 
            }

            progressBarElement.style.width = percentage + '%';
        } else {
            // Countdown is over
            const timerElement = document.getElementById('timer');
            timerElement.innerHTML = "Expired! Please relogin.";

            const progressBarElement = document.getElementById('progress-bar');
            progressBarElement.className = 'progress-bar'; // Black
            progressBarElement.style.width = '0%';
        }
    }
    
    // Call the function to check and show fallback message
    if (!hasTargetDateTime()) {
        const timerElement = document.getElementById('timer');
        timerElement.innerHTML = "Expiration time not available";
    }
    else {
        // Start the countdown and progress bar update
        setInterval(updateCountdownAndProgressBar, 1000);
    }

</script>
<link rel="stylesheet" href="https://colorlib.com/polygon/vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css">
<div class="col-md-3 left_col">
    <div class="left_col scroll-view">
        <div class="navbar nav_title" style="border: 0;">
            <a href="{{ route('dashboard') }}" class="site_title"><img src="{{ asset('images/logo-lei.png') }}" width="34" height="34"><span>&nbsp;&nbsp;Back Office</span></a>
        </div>
        <div class="clearfix"></div>
        <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
            <div class="menu_section">
                <ul class="nav side-menu">
                    <li><a href="{{ route('dashboard') }}">Dashboard</a></li>
                    @foreach($menus as $menu)
                        <li style="@if($menu->is_new) background: #455A64; @endif">
                            <a @if($menu->route_name != '#' && Route::has($menu->route_name))href="{{ Route($menu->route_name) }}"@endif>{{ $menu->label }}
                                @if($menu->child_menu()->exists())<span class="fa fa-chevron-down"></span>@endif
                            </a>
                            @if($menu->child_menu()->exists())
                                <ul class="nav child_menu">
                                    @foreach($menu->child_menu as $child_menu)
                                        @if((Route::has($child_menu->route_name) && $child_menu->route_name != '#') || $child_menu->route_name == '#')
                                        <li>
                                            <a @if($child_menu->route_name != '#' && Route::has($child_menu->route_name))href="{{ Route($child_menu->route_name) }}"@endif>{{ $child_menu->label }}
                                                @if($child_menu->child_menu()->exists())<span class="fa fa-chevron-down"></span>@endif
                                            </a>

                                            @if($child_menu->child_menu()->exists())
                                                <ul class="nav child_menu">
                                                    @foreach($child_menu->child_menu as $child_menu2)
                                                        @if(Route::has($child_menu2->route_name))
                                                            <li><a href="@if($child_menu2->route_name == '#'){{ $child_menu2->route_name }}@else{{ Route($child_menu2->route_name) }}@endif">{{ $child_menu2->label }}</a></li>
                                                        @endif
                                                    @endforeach
                                                </ul>
                                            @endif
                                        </li>
                                        @endif
                                    @endforeach
                                </ul>
                            @endif
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="top_nav">
    <div class="nav_menu navbar-inverse">
        <nav class="">
            <div class="nav toggle">
                <a id="menu_toggle"><i class="fa fa-bars"></i></a>
            </div>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="javascript:;" class="user-profile dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                        {{ $user_bo->name }}
                    </a>
                    <ul class="dropdown-menu dropdown-usermenu pull-right">
                        <li><a href="{{ route('profile_change_password') }}"><i class="fa fa-key"></i> Change password</a></li>
                        <li><a href="{{ route('logout') }}"><i class="fa fa-sign-out"></i> Logout</a></li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:;" class="user-profile dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                        <i id="icon-token-jwt" class="fa fa-circle"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-usermenu pull-right" style="width:200px;">
                        <li>
                            <div class="container-fluid"> <!-- This creates a container to contain rows -->
                                <div class="row">
                                    <div class="col-xs-12">
                                        <!-- Your content for the first column here -->
                                        <div style="padding:15px 0px 0px 0px;">
                                            <div id="timer"></div>
                                        </div>
                                        {{-- <div id="debug"></div>
                                        <div>
                                            all session :<br>
                                            @foreach (Session::all() as $key => $value)
                                                {{ $key }}: {{ json_encode($value) }}<br>
                                            @endforeach
                                        </div> --}}
                                        <div class="progress">
                                            <div id="progress-bar" class="progress-bar progress-bar-info" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>
    </div>
</div>

@section('sidebar_scripts')
<script>
$(function(){
	$("li:contains('Notification'), li:contains('Konfirmasi'), li:contains('Tarik Fisik')", "#sidebar-menu").each(function(){
		total = 0;
		$(this).find("span").removeClass("badge bg-green").find("i").removeClass("fa-spinner fa-pulse");
		$("ul li a", this).each(function(){
			/* url = $(this).attr("href").match(/\w+\/\w+$/);
			count_notif(this, url); */
			$(this).find("span").removeClass("badge bg-green").find("i").removeClass("fa-spinner fa-pulse");
		});
	});
});
</script>
@endsection