@extends('layouts.master')

@push('additional-css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

    @vite(['resources/css/theme-comply.css'])
@endpush

@push('additional-js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js"></script>

    @vite(['resources/js/theme-comply.js'])
@endpush

@section('page-content')

<nav class="navbar navbar-expand navbar-dark bg-navbar fixed-top sticky-navigation bg-primary-color">
    <a class="navbar-brand hero-heading" href="{{route("home")}}">{{ env('APP_NAME') }}</a>
    <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav ms-auto">

            @yield('nav-bar-context-icon')

            <li class="nav-item mr-3">
                <a class="nav-link" data-bs-toggle="offcanvas" href="#offcanvasLeftMenu" role="button"
                    aria-controls="offcanvasLeftMenu">
                    <i class="bi bi-list"></i>
                </a>
            </li>
        </ul>
    </div>
</nav>

<div id="app" style='margin-top:80px;'>
    <main class="" style="">

        @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>



<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasLeftMenu" aria-labelledby="offcanvasLeftMenu">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasExampleLabel">{{env('APP_NAME')}}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <div>
            {{__('app.menus.introduction')}}
        </div>

        <ul class="list-group list-group-flush mt-3 border-top ">
            <a class="list-group-item" href="{{route('records')}}"><i class="bi bi-database me-2"></i>
                {{__('app.menus.items.records')}}</a>
        </ul>

        <ul class="list-group list-group-flush border-top ">
            @if(Auth::user()->isAdmin)
            <a class="list-group-item" href="{{route('admin-home')}}"><i class="bi bi-gear me-2"></i>
                {{__('app.menus.items.admin')}}</a>
            @endif
        </ul>

        <ul class="list-group list-group-flush border-top ">
            <a class="list-group-item" href="{{route('profile')}}"><i class="bi bi-person-vcard-fill me-2"></i>
                {{__('app.menus.items.profile')}}</a>
            <a class="list-group-item" 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>
        </ul>

    </div>
</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