<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <link rel="shortcut icon" type="images/ico" href="{{ asset('img/loguito.ico') }}">

    <link rel="canonical" href="https://getbootstrap.com/docs/4.0/layout/grid/">

    <title>{{ config('Unidad de Gestion de Talento Humano - MCDyD', 'Unidad de Gestion de Talento Humano - MCDyD') }}</title>

    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    <link href="{{ asset('css/select2.min.css') }}" rel="stylesheet">
    <link href="{{ asset('css/styles.css') }}" rel="stylesheet">
    <link href="{{ asset('css/estilo.css') }}" rel="stylesheet">
    <link href="{{ asset('css/estilonav.css') }}" rel="stylesheet">

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.dataTables.min.css">

    <script src="{{ asset('js/app.js') }}" defer></script>
    <script src="{{ asset('js/select2.min.js') }}" defer></script>
    <script src="{{ asset('js/composicion/funciones.js') }}" defer></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js" defer></script>
    <script src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap4.min.js" defer></script>

</head>

<body>
    <div id="app">

        {{-- =====================================================
             NAVBAR
             No se muestra en la pantalla de login
             ===================================================== --}}
        @if (!request()->routeIs('login'))

        <nav class="navbar navbar-expand-md navbar-laravel navbar-nav nav-link">

            <div class="container">

                <a class="navbar-brand" href="{{ url('/home') }}">
                    <img src="{{ asset('img/sin.png') }}" alt="...">
                </a>

                <button
                    class="navbar-toggler"
                    type="button"
                    data-toggle="collapse"
                    data-target="#navbarSupportedContent"
                    aria-controls="navbarSupportedContent"
                    aria-expanded="false"
                    aria-label="{{ __('Toggle navigation') }}"
                >
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">

                    {{-- =================================================
                         LEFT SIDE OF NAVBAR
                         ================================================= --}}
                    <ul class="navbar-nav mr-auto">

                        @can('cargos.menu')

                            <li class="nav-item dropdown">

                                <a
                                    class="nav-link dropdown-toggle"
                                    data-toggle="dropdown"
                                    href="#"
                                >
                                    CREDENCIALES
                                </a>

                                <div
                                    class="dropdown-menu"
                                    style="background-color: #ffffff"
                                >

                                    @can('cargos.index')
                                        <a
                                            class="dropdown-item"
                                            href="{{ route('cargos.index') }}"
                                        >
                                            CARGOS
                                        </a>
                                    @endcan

                                    @can('dependencias.index')
                                        <a
                                            class="dropdown-item"
                                            href="{{ route('dependencias.index') }}"
                                        >
                                            DEPENDENCIAS
                                        </a>
                                    @endcan

                                    @can('personas.index')
                                        <a
                                            class="dropdown-item"
                                            href="{{ route('personas.index') }}"
                                        >
                                            PERSONAS
                                        </a>
                                    @endcan

                                    @can('credencials.index')
                                        <a
                                            class="dropdown-item"
                                            href="{{ route('credencials.index') }}"
                                        >
                                            CREDENCIAL
                                        </a>
                                    @endcan

                                </div>

                            </li>

                        @endcan

                        @can('users.index')
                            <li class="nav-item">
                                <a
                                    class="nav-link"
                                    href="{{ route('users.index') }}"
                                >
                                    USUARIOS
                                </a>
                            </li>
                        @endcan

                        @can('roles.index')
                            <li class="nav-item">
                                <a
                                    class="nav-link"
                                    href="{{ route('roles.index') }}"
                                >
                                    ROLES
                                </a>
                            </li>
                        @endcan

                    </ul>


                    {{-- =================================================
                         RIGHT SIDE OF NAVBAR
                         ================================================= --}}
                    <ul class="navbar-nav ml-auto">

                        {{-- Authentication Links --}}
                        @guest

                            <li class="nav-item">
                            </li>

                            @if (Route::has('register'))
                                <li class="nav-item">
                                </li>
                            @endif

                        @else

                            <li class="nav-item dropdown">

                                <a
                                    id="navbarDropdown"
                                    class="nav-link dropdown-toggle"
                                    href="#"
                                    role="button"
                                    data-toggle="dropdown"
                                    aria-haspopup="true"
                                    aria-expanded="false"
                                    v-pre
                                >
                                    {{ Auth::user()->name }}
                                </a>

                                <div
                                    class="dropdown-menu dropdown-menu-right"
                                    aria-labelledby="navbarDropdown"
                                >

                                    <a
                                        class="dropdown-item"
                                        href="{{ route('logout') }}"
                                        onclick="event.preventDefault();
                                        document.getElementById('logout-form').submit();"
                                    >
                                        {{ __('Logout') }}
                                    </a>

                                    <form
                                        id="logout-form"
                                        action="{{ route('logout') }}"
                                        method="POST"
                                        class="d-none"
                                    >
                                        @csrf
                                    </form>

                                </div>

                            </li>

                        @endguest

                    </ul>

                </div>

            </div>

        </nav>

        @endif


        {{-- =========================================================
             CONTENIDO DE LA PÁGINA
             ========================================================= --}}
        <main class="py-4">
            @yield('content')
        </main>

    </div>
</body>

</html>
