@extends('layouts.app')
@section('content')
    <main class="row">
        
        <!-- Sidebar -->
        @include('includes.sidebar')

        <div class=" mt-4 mb-4 col-md-8 px-4">
            <div class="row">
                <p class="h3">Dashboard</p>
                <p class="h6">Welcome back. Choose a hub to get started with your crisis management activities.</p>
            </div>
            <div class="row g-2" id="grid">
            
                <div class="col-4 item-wrapper">
                    <div class="grid-item" data-colspan="1">Item 1</div>
                </div>
            
                <div class="col-8 item-wrapper">
                    <div class="grid-item" data-colspan="2" style="height: 200px;">Item 2</div>
                </div>
            
                <div class="col-4 item-wrapper">
                    <div class="grid-item" data-colspan="1">Item 3</div>
                </div>

                <div class="col-4 item-wrapper">
                    <div class="grid-item" data-colspan="1">Item 4</div>
                </div>
                
                <div class="col-4 item-wrapper">
                    <div class="grid-item" data-colspan="1">Item 5</div>
                </div>
            
            </div>
            
            <br>
        </div>
        <div class=" col-md-2 ps-0">
            <div class="col border py-3 px-3 text-secondary bg-body border-start" style="min-height: 100vh;">
                <div class="clock-box py-2">
                    <div id="clock" class="text-dark"></div>
                </div>
                <!-- Place script in shared script src -->
                <script>
                    function updateClock() {
                        const now = new Date();
                        let hours = now.getHours();
                        let minutes = now.getMinutes();
                        let seconds = now.getSeconds();

                        hours = hours < 10 ? '0' + hours : hours;
                        minutes = minutes < 10 ? '0' + minutes : minutes;
                        seconds = seconds < 10 ? '0' + seconds : seconds;

                        const timeString = `CET: ${hours}:${minutes}:${seconds}`;
                        document.getElementById('clock').textContent = timeString;
                    }

                    updateClock(); // initial call
                    setInterval(updateClock, 1000); // update every second
                </script>
                <!-- Activities bar -->
                @include('includes.activities-bar')
                
            </div>
        </div>
    </main>
    <br>
    <br>
    <br>
    <br>
    @endsection