@include('articles.partials.home-css')
<h1 class="name mt-1" style="text-align:center">Africa <span style="color:#155E95">Tech</span><span style="color:#00796b">
        Insights</span></h1>
<p style="text-align: center;margin-top:-2rem;font-size:18px;color:#2E5077">Insights into Africa's Tech Evolution</p>
<div class="tim" style="margin-top:0rem ">
    <ul>
        <li class="time-widget" id="nat"><span class="icon"> &nbsp;</span>NAT (North Africa): </li>
        <li class="time-widget" id="wat"><span class="icon"></span>WAT (West Africa): </li>
        <li class="time-widget" id="eat"><span class="icon"></span>EAT (East Africa): </li>
        <li class="time-widget" id="sat"><span class="icon"></span>SAT (Southern Africa): </li>
    </ul>
</div>
@include('messages.index')

<script>
    function updateTime() {
        const timeZones = {
            'nat': 'Africa/Casablanca',
            'wat': 'Africa/Lagos',
            'eat': 'Africa/Nairobi',
            'sat': 'Africa/Johannesburg',
        };
        for (const [id, timeZone] of Object.entries(timeZones)) {
            const currentTime = new Date().toLocaleString("en-US", {
                timeZone,
                timeStyle: "medium",
                hour12: false
            });
            document.getElementById(id).textContent = `${id.toUpperCase()} (${timeZone.split('/')[1]}): ${currentTime}`;
        }
    }
    setInterval(updateTime, 1000);
    updateTime();
</script>
<nav class="navbar navbar-expand-sm navbar-light mt-3" style="background: whitesmoke">
    <div class="container-fluid">
        <a class="navbar-brand" href="#"></a>

        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse justify-content-center" id="navbarNav">

            @php
                $categories = DB::connection('flask_mysql')
                    ->table('scraped_article')
                    ->selectRaw('MIN(id) as id, category')
                    ->groupBy('category')
                    ->orderBy('category', 'asc')
                    ->get();
            @endphp

            <ul class="nav nav-pills nav justify-content-center ">

                <li class="nav-link">
                    <img src="https://flagpedia.net/data/flags/w1160/us.webp"
                        style="width:28px; margin-top: 5px; float: right !important;" alt="">
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{{ url('/') }}">
                        Home
                    </a>
                </li>



                @foreach ($categories as $category)
                    <li class="nav-item">
                        <a class="nav-link" href="{{ route('flask.category', $category->category) }}">
                            {{ $category->category }}
                        </a>
                    </li>
                @endforeach
                <li class="nav-item" mb-0>
                    <a href="/trends" class="nav-link">
                        Latest News
                    </a>
                </li>
                {{-- Interviews --}}
                <li class="nav-item">
                    <a class="nav-link" href="{{ route('interviews.index') }}">
                        Interviews
                    </a>
                </li>

                {{-- Articles --}}
                <li class="nav-item">
                    <a class="nav-link" href="{{ route('articles.listing') }}">
                        Insights
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{{ route('podcasts.index') }}">
                        Podcasts
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="{{ route('tech-events.index') }}">
                        Events
                    </a>
                </li>


                <li class="nav-item">
                    <a class="nav-link" href="{{ route('fund.index') }}">
                        Startups
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="{{ route('gadgets.index') }}">
                        Gadgets
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{{ route('analysis.index') }}">
                        App Decode
                    </a>
                </li>
                {{-- Contact --}}
                {{-- <li class="nav-item">
                    <button class="btn nav-link shadow-none" data-bs-toggle="modal" data-bs-target="#leaveMessageModal">
                        Contact Us
                    </button>
                </li> --}}

                {{-- Dark Mode --}}
                {{-- <li>
                    <button id="dark-light-toggle" onclick="toggleDarkMode()" style="margin-bottom: 1px;">
                        <i id="moon-icon" class="fas fa-moon" style="font-size: 18px;padding-bottom:1px !important"></i>
                        <i id="sun-icon" class="fas fa-sun"
                            style="display:none; color: orange !important;padding-top:10px !important"></i>
                    </button>
                </li> --}}
            </ul>

        </div>
    </div>
</nav>
<br>