@php
    $usuario = auth()->user();
    $cantidad = $usuario->unreadNotifications->count() ?? 0;
@endphp
<div id="kt_app_header" class="app-header " data-kt-sticky="true" data-kt-sticky-activate="{default: true, lg: true}"
    data-kt-sticky-name="app-header-minimize" data-kt-sticky-offset="{default: '200px', lg: '300px'}"
    data-kt-sticky-animation="false">
    <!--begin::Header container-->
    <div class="app-container  container-fluid d-flex align-items-stretch flex-stack " id="kt_app_header_container">
        <!--begin::Sidebar toggle-->
        <div class="d-flex align-items-center d-block d-lg-none ms-n3" title="Show sidebar menu">
            <div class="btn btn-icon btn-color-gray-600 btn-active-color-primary w-35px h-35px me-1"
                id="kt_app_sidebar_mobile_toggle">
                <i class="ki-duotone ki-abstract-14 fs-2 fs-md-1">
                    <span class="path1"></span>
                    <span class="path2"></span>
                </i>
            </div>
            <!--begin::Logo image-->
            <a href="index.html">
                <img alt="Logo" src="{{ asset('assets/media/logos/logo_Gobernacion.png') }}" class="h-30px theme-light-show">
                <img alt="Logo" src="{{ asset('assets/media/logos/logo_Gobernacion.png') }}"
                    class="h-30px theme-dark-show">
            </a>
            <!--end::Logo image-->
        </div>
        <!--end::Sidebar toggle-->
        <!--begin::Toolbar wrapper-->
        <div class="app-navbar flex-lg-grow-1" id="kt_app_header_navbar">
            <!--begin::Search-->
            <div class="app-navbar-item d-flex align-items-stretch flex-lg-grow-1 me-2 me-lg-0">
                <!--begin::Search-->
                <!--begin::Form(use d-none d-lg-block classes for responsive search)-->
                <form data-kt-search-element="form" class="d-none d-lg-block w-50 position-relative mb-5 mt-3 mb-lg-0"
                    autocomplete="off">
                    <!--begin::Hidden input(Added to disable form autocomplete)-->
                    <input type="hidden">
                    <!--end::Hidden input-->

                    <!--begin::Icon-->
                    <i class="fa fa-search search-icon fs-2 text-gray-500 position-absolute mt-7 translate-middle-y ms-5 {{$mostrarBuscador ? '' : 'd-none'}}">
                        <span class="path1"></span>
                        <span class="path2"></span>
                    </i>
                    <!--end::Icon-->

                    <!--begin::Input-->
                    <input type="text" class="search-input form-control form-control-solid  ps-13 {{$mostrarBuscador ? '' : 'd-none'}}" name="search"
                        value="" placeholder="Buscar" id="searchInput">
                    <!--end::Input-->
                </form>
                <!--end::Form-->
                <!--end::Search-->
            </div>
            <!--end::Search-->

            <!--begin::Notifications-->
            <div class="seccionNotificacionesGeneral mt-6">
                @component('layouts.componentes.notificaciones')
                    @slot('cantidad', $cantidad)
                    @slot('unreadNotifications', $usuario->unreadNotifications)
                    @slot('notifications', $usuario->notifications)
                @endcomponent
            </div>
            <!--end::Notifications-->

            <!--begin::User menu-->
            <div class="app-navbar-item me-2 ms-1 ms-md-2" id="kt_header_user_menu_toggle">
                <!--begin::Menu wrapper-->
                <div class="cursor-pointer symbol symbol-circle symbol-35px ms-3"
                    data-kt-menu-trigger="{default: 'click', lg: 'hover'}" data-kt-menu-attach="parent"
                    data-kt-menu-placement="bottom-end">
                    <img src="{{$usuario->foto ? asset($usuario->foto) : asset('assets/media/avatars/150-2.jpg') }}" alt="user">
                </div>

                <!--begin::User account menu-->
                <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg menu-state-color fw-semibold py-4 fs-6 w-275px"
                    data-kt-menu="true">
                    <!--begin::Menu item-->
                    <div class="menu-item px-3">
                        <div class="menu-content d-flex align-items-center px-3">
                            <!--begin::Avatar-->
                            <div class="symbol symbol-50px me-5">
                                <img alt="Logo" src="{{$usuario->foto ? asset($usuario->foto) : asset('assets/media/avatars/150-2.jpg') }}">
                            </div>
                            <!--end::Avatar-->

                            <!--begin::Username-->
                            <div class="d-flex flex-column">
                                <div class="fw-bold d-flex align-items-center fs-5">
                                    {{$usuario?->nombre_completo}} <span
                                        class="badge badge-light-success fw-bold fs-8 px-2 py-1 ms-2"></span>
                                </div>

                                <a href="#" class="fw-semibold text-muted text-hover-primary fs-7">
                                    {{$usuario?->email}} </a>
                            </div>
                            <!--end::Username-->
                        </div>
                    </div>
                    <!--end::Menu item-->

                    <!--begin::Menu separator-->
                    {{-- <div class="separator my-2"></div> --}}
                    <!--end::Menu separator-->

                    <!--begin::Menu item-->
                    <div class="menu-item px-5">
                        <a href="{{ route('perfil') }}" class="menu-link px-5">
                            <svg width="18" height="18" class="me-2" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M9 0C4.02823 0 0 4.02823 0 9C0 13.9718 4.02823 18 9 18C13.9718 18 18 13.9718 18 9C18 4.02823 13.9718 0 9 0ZM9 3.48387C10.7637 3.48387 12.1935 4.91371 12.1935 6.67742C12.1935 8.44113 10.7637 9.87097 9 9.87097C7.23629 9.87097 5.80645 8.44113 5.80645 6.67742C5.80645 4.91371 7.23629 3.48387 9 3.48387ZM9 15.9677C6.86976 15.9677 4.96089 15.0024 3.68347 13.4927C4.36573 12.2081 5.70121 11.3226 7.25806 11.3226C7.34516 11.3226 7.43226 11.3371 7.51573 11.3625C7.9875 11.5149 8.48105 11.6129 9 11.6129C9.51895 11.6129 10.0161 11.5149 10.4843 11.3625C10.5677 11.3371 10.6548 11.3226 10.7419 11.3226C12.2988 11.3226 13.6343 12.2081 14.3165 13.4927C13.0391 15.0024 11.1302 15.9677 9 15.9677Z" fill="#A8B7D6"/>
                                </svg>
                                <span class="menu-title">Perfil</span> 
                        </a>
                    </div>
                    <!--end::Menu item-->

                    {{-- <!--begin::Menu item-->
                    <div class="menu-item px-5">
                        <a href="apps/projects/list.html" class="menu-link px-5">
                            <span class="menu-text">My Projects</span>
                            <span class="menu-badge">
                                <span class="badge badge-light-danger badge-circle fw-bold fs-7">3</span>
                            </span>
                        </a>
                    </div>
                    <!--end::Menu item-->

                    <!--begin::Menu item-->
                    <div class="menu-item px-5" data-kt-menu-trigger="{default: 'click', lg: 'hover'}"
                        data-kt-menu-placement="left-start" data-kt-menu-offset="-15px, 0">
                        <a href="#" class="menu-link px-5">
                            <span class="menu-title">My Subscription</span>
                            <span class="menu-arrow"></span>
                        </a>

                        <!--begin::Menu sub-->
                        <div class="menu-sub menu-sub-dropdown w-175px py-4">
                            <!--begin::Menu item-->
                            <div class="menu-item px-3">
                                <a href="account/referrals.html" class="menu-link px-5">
                                    Referrals
                                </a>
                            </div>
                            <!--end::Menu item-->

                            <!--begin::Menu item-->
                            <div class="menu-item px-3">
                                <a href="account/billing.html" class="menu-link px-5">
                                    Billing
                                </a>
                            </div>
                            <!--end::Menu item-->

                            <!--begin::Menu item-->
                            <div class="menu-item px-3">
                                <a href="account/statements.html" class="menu-link px-5">
                                    Payments
                                </a>
                            </div>
                            <!--end::Menu item-->

                            <!--begin::Menu item-->
                            <div class="menu-item px-3">
                                <a href="account/statements.html"
                                    class="menu-link d-flex flex-stack px-5">
                                    Statements

                                    <span class="ms-2 lh-0" data-bs-toggle="tooltip"
                                        aria-label="View your statements"
                                        data-bs-original-title="View your statements" data-kt-initialized="1">
                                        <i class="ki-duotone ki-information-5 fs-5"><span class="path1"></span><span
                                                class="path2"></span><span class="path3"></span></i> </span>
                                </a>
                            </div>
                            <!--end::Menu item-->

                            <!--begin::Menu separator-->
                            <div class="separator my-2"></div>
                            <!--end::Menu separator-->

                            <!--begin::Menu item-->
                            <div class="menu-item px-3">
                                <div class="menu-content px-3">
                                    <label class="form-check form-switch form-check-custom form-check-solid">
                                        <input class="form-check-input w-30px h-20px" type="checkbox" value="1"
                                            checked="checked" name="notifications">
                                        <span class="form-check-label text-muted fs-7">
                                            Notifications
                                        </span>
                                    </label>
                                </div>
                            </div>
                            <!--end::Menu item-->
                        </div>
                        <!--end::Menu sub-->
                    </div>
                    <!--end::Menu item-->

                    <!--begin::Menu item-->
                    <div class="menu-item px-5">
                        <a href="account/statements.html" class="menu-link px-5">
                            My Statements
                        </a>
                    </div>
                    <!--end::Menu item--> --}}

                    <!--begin::Menu separator-->
                    {{-- <div class="separator my-2"></div> --}}
                    <!--end::Menu separator-->

                    <!--begin::Menu item-->
                    <div class="menu-item px-5" data-kt-menu-trigger="{default: 'click', lg: 'hover'}"
                        data-kt-menu-placement="left-start" data-kt-menu-offset="-15px, 0">
                        <a href="#" class="menu-link px-5">
                            <span class="menu-title position-relative">
                                Apariencia

                                <span class="ms-5 position-absolute translate-middle-y top-50 end-0">
                                    <i class="ki-duotone ki-night-day theme-light-show fs-2"><span
                                            class="path1"></span><span class="path2"></span><span
                                            class="path3"></span><span class="path4"></span><span
                                            class="path5"></span><span class="path6"></span><span
                                            class="path7"></span><span class="path8"></span><span
                                            class="path9"></span><span class="path10"></span></i> <i
                                        class="ki-duotone ki-moon theme-dark-show fs-2"><span
                                            class="path1"></span><span class="path2"></span></i> </span>
                            </span>
                        </a>

                        <!--begin::Menu-->
                        <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-title-gray-700 menu-icon-gray-500 menu-active-bg menu-state-color fw-semibold py-4 fs-base w-150px"
                            data-kt-menu="true" data-kt-element="theme-mode-menu">
                            <!--begin::Menu item-->
                            <div class="menu-item px-3 my-0">
                                <a href="#" class="menu-link px-3 py-2 active" data-kt-element="mode"
                                    data-kt-value="light">
                                    <span class="menu-icon" data-kt-element="icon">
                                        <i class="fas fa-sun fs-2"><span class="path1"></span><span
                                                class="path2"></span><span class="path3"></span><span
                                                class="path4"></span><span class="path5"></span><span
                                                class="path6"></span><span class="path7"></span><span
                                                class="path8"></span><span class="path9"></span><span
                                                class="path10"></span></i> </span>
                                    <span class="menu-title">
                                        Light
                                    </span>
                                </a>
                            </div>
                            <!--end::Menu item-->

                            <!--begin::Menu item-->
                            <div class="menu-item px-3 my-0">
                                <a href="#" class="menu-link px-3 py-2" data-kt-element="mode"
                                    data-kt-value="dark">
                                    <span class="menu-icon" data-kt-element="icon">
                                        <i class="far fa-moon fs-2"><span class="path1"></span><span
                                                class="path2"></span></i> </span>
                                    <span class="menu-title">
                                        Dark
                                    </span>
                                </a>
                            </div>
                            <!--end::Menu item-->

                            <!--begin::Menu item-->
                            {{-- <div class="menu-item px-3 my-0">
                                <a href="#" class="menu-link px-3 py-2" data-kt-element="mode"
                                    data-kt-value="system">
                                    <span class="menu-icon" data-kt-element="icon">
                                        <i class="ki-duotone ki-screen fs-2"><span class="path1"></span><span
                                                class="path2"></span><span class="path3"></span><span
                                                class="path4"></span></i> </span>
                                    <span class="menu-title">
                                        System
                                    </span>
                                </a>
                            </div> --}}
                            <!--end::Menu item-->
                        </div>
                        <!--end::Menu-->

                    </div>
                    <!--end::Menu item-->

                    <!--begin::Menu item-->
                    <div class="menu-item px-5" data-kt-menu-trigger="{default: 'click', lg: 'hover'}"
                        data-kt-menu-placement="left-start" data-kt-menu-offset="-15px, 0">
                        <a href="#" class="menu-link px-5">
                            <span class="menu-title position-relative">
                                Idioma

                                <span
                                    class="fs-8 rounded bg-light px-3 py-2 position-absolute translate-middle-y top-50 end-0">
                                    Español <img class="w-15px h-15px rounded-1 ms-2"
                                        src="{{asset('assets/media/flags/spain.svg')}}" alt="">
                                </span>
                            </span>
                        </a>

                        <!--begin::Menu sub-->
                        <div class="menu-sub menu-sub-dropdown w-175px py-4">
                            {{-- <!--begin::Menu item-->
                            <div class="menu-item px-3">
                                <a href="account/settings.html" class="menu-link d-flex px-5">
                                    <span class="symbol symbol-20px me-4">
                                        <img class="rounded-1"
                                            src="{{asset('assets/media/flags/united-states.svg')}}" alt="">
                                    </span>
                                    Ingles
                                </a>
                            </div>
                            <!--end::Menu item--> --}}

                            <!--begin::Menu item-->
                            <div class="menu-item px-3">
                                <a href="account/settings.html" class="menu-link d-flex px-5 active">
                                    <span class="symbol symbol-20px me-4">
                                        <img class="rounded-1" src="{{asset('assets/media/flags/spain.svg')}}"
                                            alt="">
                                    </span>
                                    Español
                                </a>
                            </div>
                            <!--end::Menu item-->

                            {{-- <!--begin::Menu item-->
                            <div class="menu-item px-3">
                                <a href="account/settings.html" class="menu-link d-flex px-5">
                                    <span class="symbol symbol-20px me-4">
                                        <img class="rounded-1" src="assets/media/flags/germany.svg"
                                            alt="">
                                    </span>
                                    German
                                </a>
                            </div>
                            <!--end::Menu item-->

                            <!--begin::Menu item-->
                            <div class="menu-item px-3">
                                <a href="account/settings.html" class="menu-link d-flex px-5">
                                    <span class="symbol symbol-20px me-4">
                                        <img class="rounded-1" src="assets/media/flags/japan.svg"
                                            alt="">
                                    </span>
                                    Japanese
                                </a>
                            </div>
                            <!--end::Menu item-->

                            <!--begin::Menu item-->
                            <div class="menu-item px-3">
                                <a href="account/settings.html" class="menu-link d-flex px-5">
                                    <span class="symbol symbol-20px me-4">
                                        <img class="rounded-1" src="assets/media/flags/france.svg"
                                            alt="">
                                    </span>
                                    French
                                </a>
                            </div>
                            <!--end::Menu item--> --}}
                        </div>
                        <!--end::Menu sub-->
                    </div>
                    <!--end::Menu item-->

                    {{-- <!--begin::Menu item-->
                    <div class="menu-item px-5 my-1">
                        <a href="account/settings.html" class="menu-link px-5">
                            Account Settings
                        </a>
                    </div>
                    <!--end::Menu item-->

                    <!--begin::Menu item-->
                    <div class="menu-item px-5">
                        <a href="authentication/sign-in/basic.html" class="menu-link px-5">
                            Sign Out
                        </a>
                    </div>
                    <!--end::Menu item--> --}}
                </div>
                <!--end::User account menu-->
                <!--end::Menu wrapper-->
            </div>
            <!--end::User menu-->

            <!--begin::Action-->
            <div class="app-navbar-item ms-1 ms-md-2 me-n3">
                <!--begin::Link-->
                <a href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();"
                    class="btn btn-icon btn-custom btn-color-gray-600 btn-active-light btn-active-color-primary w-35px h-35px w-md-40px h-md-40px">
                    <i class="fas fa-sign-out-alt fs-2x">
                        <span class="path1"></span>
                        <span class="path2"></span>
                    </i>
                    <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                        @csrf
                    </form>
                </a>
                <!--end::Link-->
            </div>
            <!--end::Action-->
        </div>
        <!--end::Navbar-->
    </div>
    <!--end::Header container-->
</div>