@extends('layouts.master')

@section('page-content')

    <div id="app">

        <nav class="navbar navbar-dark bg-dark fixed-bottom">
            <div class="container-fluid justify-content-center">
              <a class="btn btn-secondary btn-lg me-2 border-0 bg-dark" href="{{route('battle-passes')}}" style="width:100px"><img src="{{asset('resources/img/battle_pass.png')}}" width="48" height="48" /></a>
              <a class="btn btn-secondary btn-lg me-2 border-0 bg-dark" href="{{route('home')}}" style="width:100px"><img src="{{asset('resources/img/good-habits.png')}}" width="48" height="48" /></a>
              <a class="btn btn-secondary btn-lg me-2 border-0 bg-dark" href="{{route('tasks')}}" style="width:100px"><img src="{{asset('resources/img/labors.png')}}" width="48" height="48" /></a>
            </div>
        </nav>

        <nav class="navbar navbar-dark bg-dark fixed-top text-secondary">
            <div class="container-fluid">
                <a class="navbar-brand text-secondary  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/heracles.png')}}" alt="Logo" width="32" height="32" class=""></span>
                    <span class="fs-3 ms-2">{{env('APP_NAME')}}</span>
                </a>
              
                @yield('nav-bar-context-icon')
              
                <div class="offcanvas offcanvas-start bg-dark" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
                    <div class="offcanvas-header text-secondary">
                        <img src="{{asset('resources/img/heracles.png')}}" alt="Logo" width="48" height="48" class="d-inline-block align-text-middle me-3">
                        <h1 class="offcanvas-title" id="offcanvasNavbarLabel">{{env('APP_NAME')}}</h1>
                        <button type="button" class="btn-close bg-secondary text-secondary" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                    </div>
               
                    <div class="offcanvas-body">
                        <div class="text-secondary mb-3" ><small>{{__('app.menus.introduction')}}</small></div>

                        @if(Auth::user()->isAdmin)
                            <h4 class="text-secondary border-top pt-3 border-secondary">{{__('app.menus.sections.control-panel')}}</h4>
                        
                            <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
                                <li class="nav-item">
                                    <a class="nav-link" aria-current="page" href="#"><i class="bi bi-clock-history me-2"></i> {{__('app.menus.items.timeslot')}}</a>
                                </li>
                            </ul>
    
                            <ul class="navbar-nav justify-content-end flex-grow-1 pe-3 mb-3">
                                <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>
                            </ul>
                        @endif

                        <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>
                        </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="py-4 mt-5" style="margin-bottom:50px">
            
            @yield('content')

            @if (session('message'))
            <div class="toast-container position-fixed bottom-0 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>

    @include('layouts.notification')

@endsection