@php
    $user_role = Auth::user()->role;
    $uid = Auth::user()->id;
@endphp

<nav class="navbar navbar-expand-lg">
    <div class="container-fluid">
        <a class="navbar-brand" href="{{ route('view_dashboard') }}">
            <img src="{{ asset('images/logogram-bonceng.png') }}" class="img-fluid" alt="" height="20" width="70">
        </a>
        <button class="navbar-toggler btn btn-outline-secondary btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation" style="width: 30px; height: 30px;">
            <span class="ion-navicon-round fz-14"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarScroll">
            <ul class="navbar-nav navbar-nav-scroll">
                {{-- all roles --}}
                @can('dashboard.view')
                    <li class="nav-item {{ Request::segment(1) == 'dashboard' ? 'active' : '' }}">
                        <a class="nav-link d-flex align-items-center text-capitalize" aria-current="page" href="{{ route('view_dashboard') }}">
                            Dashboard
                        </a>
                    </li>
                @endcan
                @can('zone.view')
                    <li class="nav-item {{ Request::segment(1) == 'zone' ? 'active' : '' }}">
                        <a class="nav-link d-flex align-items-center text-capitalize" aria-current="page" href="{{ route('view_zone') }}">
                            Zone
                        </a>
                    </li>
                @endcan
                @can('transaction.view')
                    <li class="nav-item {{ Request::segment(1) == 'transactions' ? 'active' : '' }}">
                        <a class="nav-link d-flex align-items-center text-capitalize" aria-current="page" href="{{ route('view_transactions') }}">
                            Job
                        </a>
                    </li>
                @endcan
                @can('client.view')
                    <li class="nav-item {{ Request::segment(1) == 'clients' ? 'active' : '' }}">
                        <a class="nav-link d-flex align-items-center text-capitalize" aria-current="page" href="{{ route('view_clients') }}">
                            Company
                        </a>
                    </li>
                @endcan
                @if (auth()->user()->can('report_vehicle_trip.view') || auth()->user()->can('report_abnormality.view'))
                    <li class="nav-item dropdown {{ Request::segment(1) == 'reports' ? 'active' : '' }}">
                        <a class="nav-link dropdown-toggle" href="#" id="dropdownConfig" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            Reports
                        </a>
                        <ul class="dropdown-menu" style="right: 0; left: auto;" aria-labelledby="dropdownConfig">
							@can('report_vehicle_trip.view')
								<li>
									<a class="dropdown-item {{ Request::segment(2) == 'vehicle-trips' ? 'active' : '' }}" href="{{ route('view_report_vehicle_trips') }}" title="">Vehicle Trips</a>
								</li>
							@endcan
							@can('report_abnormality.view')
								<li>
									<a class="dropdown-item {{ Request::segment(2) == 'abnormalities' ? 'active' : '' }}" href="{{ route('view_report_abnormalities') }}" title="">Abnormalities</a>
								</li>
							@endcan
                        </ul>
                    </li>
                @endif
                @if (auth()->user()->can('config_truck_type.view') || auth()->user()->can('config_master_device.view') || auth()->user()->can('config_logs_gps.view'))
                    <li class="nav-item dropdown {{ Request::segment(1) == 'config' ? 'active' : '' }}">
                        <a class="nav-link dropdown-toggle" href="#" id="dropdownConfig" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            Configuration
                        </a>
                        <ul class="dropdown-menu" style="right: 0; left: auto;" aria-labelledby="dropdownConfig">
                            @can('config_truck_type.view')
                                <li>
                                    <a class="dropdown-item {{ Request::segment(2) == 'truck_types' ? 'active' : '' }}" href="{{ route('view_config_truck_types') }}" title="">Vehicle Type</a>
                                </li>
                            @endcan
                            @can('config_master_device.view')
                                <li>
                                    <a class="dropdown-item {{ Request::segment(2) == 'devices' ? 'active' : '' }}" href="{{ route('view_config_devices') }}" title="">Master Devices</a>
                                </li>
                            @endcan
                            @can('config_logs_gps.view')                                
								<li>
                                    <a class="dropdown-item {{ Request::segment(2) == 'logs_gps' ? 'active' : '' }}" href="{{ route('view_config_logs_gps') }}" title="">Logs Gps</a>
                                </li>
                            @endcan
							@can('config_distribution_category.view')
								<li>
                                    <a class="dropdown-item {{ Request::segment(2) == 'distribution_category' ? 'active' : '' }}" href="{{ route('view_config_distribution_category') }}" title="">Distribution Category</a>
                                </li>
							@endcan
							@can('config_pool.view')
                                <!-- <li>
                                    <a href="">Pool</a>
                                </li> -->
							@endcan
                        </ul>
                    </li>
                @endif
                @can('driver.view')
                    <li class="nav-item {{ Request::segment(1) == 'drivers' ? 'active' : '' }}">
                        <a class="nav-link d-flex align-items-center text-capitalize" aria-current="page" href="{{ route('view_drivers') }}">
                            Driver
                        </a>
                    </li>
                @endcan
                @can('vehicle.view')
                    <li class="nav-item {{ Request::segment(1) == 'vehicles' ? 'active' : '' }}">
                        <a class="nav-link d-flex align-items-center text-capitalize" aria-current="page" href="{{ route('view_vehicles') }}">
                            Vehicle
                        </a>
                    </li>
                @endcan
                @can('user.view')
                    <li class="nav-item {{ Request::segment(1) == 'users' ? 'active' : '' }}">
                        <a class="nav-link d-flex align-items-center text-capitalize" aria-current="page" href="{{ route('view_users') }}">
                            User
                        </a>
                    </li>
                @endcan

                @can('role.view')
                    <li class="nav-item {{ Request::segment(1) == 'roles' ? 'active' : '' }}">
                        <a class="nav-link d-flex align-items-center text-capitalize" aria-current="page" href="{{ route('view_roles') }}">
                            Role
                        </a>
                    </li>
                @endcan
            </ul>
            <ul class="navbar-nav ms-auto my-2 my-lg-0 navbar-nav-scroll">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        Hello, {{ mb_strimwidth(Auth::user()->first_name, 0, 12, '...') }}
                    </a>
                    <ul class="dropdown-menu" style="right: 0; left: auto;" aria-labelledby="navbarDropdownMenuLink">
                        <li>
                            {{-- <a class="dropdown-item" href="javascript:void(0);" title="">My Profile</a> --}}
                            <a class="dropdown-item" href="{{ route('view_profile') }}" title="">My Profile</a>
                        </li>
                        <li>
                            <a class="dropdown-item" href="#" title="Log Out" onclick="event.preventDefault(); document.getElementById('logout-form').submit();" style="font-size: 12px">
                                Logout
                                <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                                    @csrf
                                </form>
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>