@extends('layouts.master')

@section('page-content')

    <div id="app">

        <nav class="navbar fixed-top bg-charcoal" style="z-index:1000;">
            <div class="container-fluid">
                <a class="navbar-brand flex-fill d-flex align-items-center" href="#" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation" >
                    <span><img src="{{asset('resources/img/logo.png')}}" alt="Logo" width="32" height="32" class=""></span>
                    <span class="fs-3 ms-2 text-white">{{env('APP_NAME')}}</span>
                </a>
              
                @yield('nav-bar-context-icon')
              
                <div class="offcanvas offcanvas-start " tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel" style="z-index:5000">
                    <div class="offcanvas-header ">
                        <img src="{{asset('resources/img/logo.png')}}" alt="Logo" width="48" height="48" class="d-inline-block align-text-middle me-3">
                        <h1 class="offcanvas-title" id="offcanvasNavbarLabel"><a href="{{route('home')}}" class="text-black link-underline link-underline-opacity-0">{{env('APP_NAME')}}</a></h1>
                        <button type="button" class="btn-close bg-secondary " data-bs-dismiss="offcanvas" aria-label="Close"></button>
                    </div>
               
                    <div class="offcanvas-body">
                        <div class=" mb-3" ><small>{{__('app.menus.introduction')}}</small></div>

                        <ul class="navbar-nav justify-content-end flex-grow-1 py-3 border-top border-secondary">
                            <li class="nav-item">
                                <a class="nav-link" aria-current="page" href="{{route('topics')}}"><i class="bi bi-tag-fill me-2"></i> {{__('app.menus.items.topics')}}</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" aria-current="page" href="{{route('notes')}}"><i class="bi bi-file-earmark-text-fill me-2"></i> {{__('app.menus.items.notes')}}</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" aria-current="page" href="{{route('tasks')}}"><i class="bi bi-check-square-fill me-2"></i> {{__('app.menus.items.tasks')}}</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" aria-current="page" href="{{route('events')}}"><i class="bi bi-flag-fill me-2"></i> {{__('app.menus.items.events')}}</a>
                            </li>
                        </ul>
                        

                        <ul class="navbar-nav justify-content-end flex-grow-1 py-3 border-top border-secondary">
                            <li class="nav-item">
                                <a class="nav-link" aria-current="page" href="{{route('profile')}}"><i class="bi bi-person-vcard-fill me-2"></i> {{__('app.menus.items.profile')}}</a>
                            </li>
                            @if(Auth::user()->isAdmin)
                                <li class="nav-item">
                                    <a class="nav-link" aria-current="page" href="{{route('admin-home')}}"><i class="bi bi-gear me-2"></i> {{__('app.menus.items.admin')}}</a>
                                </li>
                            @endif
                        </ul>

                        <ul class="navbar-nav justify-content-end flex-grow-1 py-3 border-top border-secondary">
                            <li class="nav-item ">
                                <a class="nav-link" href="{{ route('logout') }}"
                                    onclick="event.preventDefault();
                                                    document.getElementById('logout-form').submit();">
                                    <i class="bi bi-box-arrow-left me-2"></i> {{__('app.menus.items.log_out')}}
                                </a>
        
                                <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                                    @csrf
                                </form>
                            </li>
                        </ul>

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

        <main class="mt-5" style="margin-bottom:50px; padding-top:1px;">
            
            @yield('content')

            @if (session('message'))
            <div class="toast-container position-fixed bottom-50 start-50 translate-middle p-3" style="margin-bottom:30px">
                <div class="toast show align-items-center text-bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="true">
                    <div class="d-flex">
                        <div class="toast-body">
                        {{ session('message') }}
                        </div>
                        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
                    </div>
                </div>
            </div>
            @endif

        </main>

    </div>

    <!-- FLASH MESSAGE -->
    @if (session()->has('message'))
        <div class="toast-container position-fixed bottom-0 start-50 translate-middle p-3" style="margin-bottom:80px">
            <div class="toast show align-items-center text-bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="true">
                <div class="d-flex">
                    <div class="toast-body">
                    {{ session('message') }}
                    </div>
                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
            </div>
        </div>
    @endif

    @include('layouts.notification')

@endsection