<div class="top_nav">
    <div class="nav_menu">
        <div class="nav toggle">
            <a id="menu_toggle"><i class="fa fa-bars"></i></a>
        </div>
        <div class="nav_toggleBtns {{ auth()->guard('trans')->user()->mode == 1 ? 'nav_toggleBtns_green' : 'nav_toggleBtns_red' }}"
            id="statusToggle">
            <a href="#!" class="toggleBtn {{ auth()->guard('trans')->user()->mode == 0 ? 'active' : '' }}"
                data-status="offline">Offline</a>
            <a href="#!" class="toggleBtn {{ auth()->guard('trans')->user()->mode == 1 ? 'active' : '' }}"
                data-status="online">Online</a>
        </div>
        <nav class="nav navbar-nav navbar_tranporter">
            {{-- <div class="nav_toggleBtns {{ auth()->guard('trans')->user()->mode == 1 ? 'nav_toggleBtns_green' : 'nav_toggleBtns_red' }}"
                id="statusToggle">
                <a href="#!" class="toggleBtn {{ auth()->guard('trans')->user()->mode == 0 ? 'active' : '' }}"
                    data-status="offline">Offline</a>
                <a href="#!" class="toggleBtn {{ auth()->guard('trans')->user()->mode == 1 ? 'active' : '' }}"
                    data-status="online">Online</a>
            </div> --}}
            <ul class=" navbar-right">
                <li class="nav-item dropdown open" style="padding-left: 15px;">
                    <a href="javascript:;" class="user-profile dropdown-toggle" aria-haspopup="true" id="navbarDropdown"
                        data-toggle="dropdown" aria-expanded="false">
                         <img src="{{ auth('trans')->user()->image 
                                ? asset('storage/' . auth('trans')->user()->image) 
                                : asset('images/user_logo.png') }}" 
                            alt="Profile Image">
                        {{-- <img src="{{ asset('images/user_logo.png') }}" alt=""> --}}
                        {{-- {{ auth()->user()->first_name . ' ' . auth()->user()->last_name }} --}}
                    </a>
                    <div class="dropdown-menu dropdown-usermenu pull-right" aria-labelledby="navbarDropdown">
                        <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                            @csrf
                        </form>
                        <a class="dropdown-item" href="{{ route('profile') }}">
                            <i class="fa fa-user-out pull-right"></i> Profile
                        </a>
                        <a class="dropdown-item" href="javascript:void(0);"
                            onclick="document.getElementById('logout-form').submit();">
                            <i class="fa fa-sign-out pull-right"></i> Log Out
                        </a>
                    </div>
                </li>
            </ul>
        </nav>
    </div>
</div>

@push('script')
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const container = document.getElementById("statusToggle");
            const buttons = container.querySelectorAll(".toggleBtn");

            buttons.forEach(btn => {
                btn.addEventListener("click", function(e) {
                    e.preventDefault();
                    buttons.forEach(b => b.classList.remove("active"));
                    this.classList.add("active");

                    let mode = this.dataset.status === "online" ? 1 : 0;

                    if (mode === 1) {
                        container.classList.remove("nav_toggleBtns_red");
                        container.classList.add("nav_toggleBtns_green");
                    } else {
                        container.classList.remove("nav_toggleBtns_green");
                        container.classList.add("nav_toggleBtns_red");
                    }

                    fetch("{{ route('transporter.updateMode') }}", {
                            method: "POST",
                            headers: {
                                "Content-Type": "application/json",
                                "X-CSRF-TOKEN": "{{ csrf_token() }}"
                            },
                            body: JSON.stringify({
                                mode: mode
                            })
                        })
                        .then(res => res.json())
                        .then(data => {
                            console.log(data.message);
                        })
                        .catch(err => console.error(err));
                });
            });
        });
    </script>
@endpush