<?php
// Ambil detail pengguna berdasarkan role
$user = Auth::user();
$detail = null;

switch ($user->role) {
    case 'pemerintah':
        $detail = $user->pemerintahDetails; // Mengambil detail dari relasi
        break;
    case 'umkm':
        $detail = $user->umkmDetails; // Mengambil detail dari relasi
        break;
    case 'investor':
        $detail = $user->investorDetails; // Mengambil detail dari relasi
        break;
    case 'akademisi':
        $detail = $user->akademisiDetails; // Mengambil detail dari relasi
        break;
    case 'komunitas':
        $detail = $user->komunitasDetails; // Mengambil detail dari relasi
        break;
}
?>

<!-- Navbar Area -->
<div class="navbar-area two fixed-top">
    <!-- Menu For Mobile Device -->
    <div class="mobile-nav">
        <a href="{{ url('/') }}" class="logo">
            <img src="{{ asset('assetslixi/img/logo.png') }}" alt="Logo">
        </a>
    </div>

    <!-- Menu For Desktop Device -->
    <div class="main-nav">
        <div class="container">
            <nav class="navbar navbar-expand-md navbar-light">
                <a class="navbar-brand" href="{{ url('/') }}">
                    <img src="{{ asset('assetslixi/img/logo.png') }}" alt="Logo">
                </a>
                <div class="collapse navbar-collapse mean-menu" id="navbarSupportedContent">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a href="{{ url('pemerintah') }}" class="nav-link">Beranda</a>
                        </li>
                        <li class="nav-item">
                            <a href="{{ url('permohonanpelatihan') }}" class="nav-link">Pelatihan</a>
                        </li>
                        <li class="nav-item">
                            <a href="{{ url('permohonanpendanaan') }}" class="nav-link">Pendanaan</a>
                        </li>

                    </ul>
                </div>


                <div class="nav-item dropdown ms-auto">
                    <!-- Profile Dropdown -->
                    <button class="btn btn-secondary dropdown-toggle d-flex align-items-center flex-grow-0"
                        type="button" id="profileDropdown" data-bs-toggle="dropdown" aria-expanded="false"
                        style="padding: 10px;">
                        @if ($detail && $detail->foto)
                            <img src="{{ asset('storage/' . $detail->foto) }}" alt="Profile" class="rounded-circle"
                                width="40" height="40" style="margin-right: 8px; object-fit: cover;">
                        @else
                            <img src="{{ asset('default_profile.png') }}" alt="Default Profile" class="rounded-circle"
                                width="40" height="40" style="margin-right: 8px; object-fit: cover;">
                        @endif
                        <span style="font-size: 16px;">{{ $user->full_name }}</span>
                    </button>

                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="profileDropdown">
                        <li>
                            <x-responsive-nav-link :href="route('profile.show')">
                                {{ __('Profile') }}
                            </x-responsive-nav-link>
                        </li>
                        <li>
                            <form method="POST" action="{{ route('logout') }}">
                                @csrf
                                <x-responsive-nav-link :href="route('logout')"
                                    onclick="event.preventDefault(); this.closest('form').submit();">
                                    {{ __('Log Out') }}
                                </x-responsive-nav-link>
                            </form>
                        </li>
                    </ul>
                </div>

            </nav>

        </div>
    </div>

    <div class="nav-item dropdown ms-auto">
        <!-- Profile Dropdown -->
        <button class="btn btn-secondary dropdown-toggle d-flex align-items-center flex-grow-0" type="button"
            id="profileDropdown" data-bs-toggle="dropdown" aria-expanded="false">
            @if ($detail && $detail->foto)
                <img src="{{ asset('storage/' . $detail->foto) }}" alt="Profile" class="rounded-circle" width="40"
                    height="40" style="margin-right: 8px; object-fit: cover;">
            @else
                <img src="{{ asset('default_profile.png') }}" alt="Default Profile" class="rounded-circle"
                    width="40" height="40" style="margin-right: 8px; object-fit: cover;">
            @endif
            <span style="font-size: 16px;">{{ $user->full_name }}</span>
        </button>

        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="profileDropdown">
            <li>
                <x-responsive-nav-link :href="route('profile.show')">
                    {{ __('Profile') }}
                </x-responsive-nav-link>
            </li>
            <li>
                <form method="POST" action="{{ route('logout') }}">
                    @csrf
                    <x-responsive-nav-link :href="route('logout')"
                        onclick="event.preventDefault(); this.closest('form').submit();">
                        {{ __('Log Out') }}
                    </x-responsive-nav-link>
                </form>
            </li>
        </ul>
    </div>

</div>


<style>
    @media (max-width: 991px) {
        .nav-item.dropdown button {
            width: 100%;
            justify-content: center;
            padding-top: 65px;
            padding-bottom: 10px;
        }


        .nav-item.dropdown .dropdown-menu {
            width: 100%;
            text-align: center;
        }

        .nav-item.dropdown .dropdown-menu a {
            display: block;
            width: 100%;
        }


    }
</style>
