{{-- Styles --}}
<style>

  /* Images */
    .hotel-logo {
        max-height: 3.8rem;
        max-width: 12.2rem;
        object-fit: contain;
    }

  /* Text */
    .time-text {
        font-weight: 500;
        text-transform: uppercase !important;
        color: #0d6889 !important;
        font-size: 0.85rem !important;
        margin-bottom: 0px !important;
    }

    .bolder {
        font-weight: bolder;
    }

  /* Indicators */
    .dropdown-indicators {
        width: 13.5rem !important;
        border-radius: 10px !important;
        background-color: #fbfbfb !important;
    }

    .indicators-shadow {
        box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.25);
    }

    .fixed-indicator-icons {
        width: 1.05rem !important;
        height: 1.05rem !important;
        flex-shrink: 0 !important;
    }

</style>


@php
    $has_only_invoicing_system = \App\Helpers\Environment\SystemFeaturesHelper::getFeatureStatus('only_invoicing_system');
@endphp

{{-- Navbar --}}
<nav
    class="@if($is_dashboard) pl-4 @endif harsi-navbar navbar navbar-expand-md navbar-expand-sm"
>
    <div class="container-fluid">

        {{-- Logo --}}
        <div class="my-2">
            <a @if(Auth::user()->role === 'administrador')href="{{ route('establishments.index') }}"@endif>
                @if (Auth::user()->profile_photo === null)
                    <img class="img-fluid hotel-logo" src="{{ asset('images/harsi_logo.png') }}" alt="Menu Item">
                @else
                    <img class="hotel-logo" src="{{ Auth::user()->profile_photo }}" alt="Menu Item">
                @endif
            </a>
        </div>

        {{-- Fecha --}}
        <div class="mt-3 ml-5 text-center">
            @php
                use \Carbon\Carbon;
                Carbon::setLocale(app()->getLocale());

                $fecha = Carbon::now()->translatedFormat(__('neutral_words')['date_format']);
            @endphp

            <p id="date" class="time-text">{{$fecha}}</p>
            <p id="hour" class="time-text">...</p>
        </div>

        {{-- Basic Interactions --}}
        <div class="collapse navbar-collapse" id="navbar-content">

            <!-- User Data -->
            <ul class="ml-5 navbar-nav">
                <li class="nav-item dropdown ">

                    {{-- Trigger --}}
                    <a id="user-dropdown" href="#" role="button" class="nav-link dropdown-toggle harsi-color"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>

                        <img class="pr-2 a" src="{{ asset('icons/user.svg') }}" alt="Menu Item">
                        {{ Auth::user()->name }} <span class="caret"></span>
                    </a>

                    {{-- Content --}}
                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="user-dropdown">
                        <a class="text-center dropdown-item" href="#" onclick="logoutUser(event)">
                            {{ __('session')['logout'] }}
                        </a>
                    </div>
                </li>
            </ul>

            <!-- Opciones de Navegación -->
            <ul class="ml-5 navbar-nav">
                <li class="nav-item dropdown">

                    {{-- Trigger --}}
                    <a
                        id="navigation-dropdown" href="#" role="button"
                        class="nav-link mayus" title="{{ __('navbar')['navigation']['title'] }}"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre
                    >
                        <img class="pr-2 a" src="{{ asset('icons/staggered_menu_.svg') }}" alt="Menu Item">
                        <span class="caret">{{ __('navbar')['navigation']['title'] }}</span>
                    </a>

                    {{-- Content --}}
                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navigation-dropdown">

                        @php
                            $navbar_navigation = [
                                [ // Inicio
                                    "display" => true,
                                    "title" => __('navbar')['navigation']['home'],
                                    "route" => route('home.index')
                                ],
                                [ // Dashboard
                                    "display" => true,
                                    "title" => __('navbar')['navigation']['settings'],
                                    "route" => route('dashboard')
                                ],
                                [ // Reportes de Hotelería
                                    "display" => !$has_only_invoicing_system,
                                    "title" => __('navbar')['navigation']['reports'],
                                    "route" => route('hotel.reports')
                                ],
                            ];
                        @endphp

                        @foreach ($navbar_navigation as $item)
                            @if ($item['display'])
                                <a class="dropdown-item" href="{{ $item['route'] }}">
                                    {{ $item['title'] }}
                                </a>
                            @endif
                        @endforeach

                    </div>
                </li>
            </ul>

            <!-- Indicadores -->
            @if (!$has_only_invoicing_system)
                <ul class="ml-5 cursor-pointer navbar-nav">
                    <li class="nav-item dropdown">

                        {{-- Trigger --}}
                        <a id="indicators-dropdown" href="#" role="button"
                            title="{{ __('navbar')['indicators']['title'] }}" class="nav-link"
                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre
                        >
                            <img src="{{ asset('icons/indicator.svg') }}" alt="Menu Item">
                        </a>

                        {{-- Content --}}
                        <div class="dropdown-menu dropdown-menu-right dropdown-indicators" aria-labelledby="indicators-dropdown">
                            <div class="mb-2 container-fluid">
                                <div class="row justify-content-center align-items-center">

                                    {{-- Title --}}
                                    <div class="mt-3 text-center col-12">
                                        <h5 class="text-uppercase harsi-color bolder">
                                            {{ __('navbar')['indicators']['title'] }}
                                        </h5>
                                    </div>

                                    @php
                                        $indicators_margin = $expand_indicators ? 'my-2' : 'mt-1';
                                    @endphp

                                    {{-- Occupancy % --}}
                                    <div class="{{ $indicators_margin }} mt-3 col-11">
                                        <div class="pt-1 pb-1 text-center card indicators-shadow" title="{{ __('navbar')['indicators']['occupation'] }}">
                                            <p class="text-center indicadores">
                                                <img class="fixed-indicator-icons" src="{{ asset('icons/porcentaje.svg') }}" alt="Menu Item">
                                                &nbsp;
                                                <span id='ocupation'></span> {{ __('navbar')['indicators']['occupancy'] }}
                                            </p>
                                        </div>
                                    </div>

                                    {{-- Occupancy Summary --}}
                                    <div class="{{ $indicators_margin }} col-11">
                                        <div class="pt-1 pb-1 text-center card indicators-shadow" title="{{ __('navbar')['indicators']['occupied_rooms'] }}">
                                            <p class="text-center indicadores">
                                                <img class="icon-indicadores" src="{{ asset('icons/double_bed_blue.svg') }}" alt="Menu Item">
                                                &nbsp;
                                                <span id='occupied_rooms'></span> &nbsp;-&nbsp; <span id='rooms_on_use'></span>
                                            </p>
                                        </div>
                                    </div>

                                    {{-- Blocked Rooms --}}
                                    <div class="{{ $indicators_margin }} col-11">
                                        <div class="pt-1 pb-1 text-center card indicators-shadow" title="{{ __('navbar')['indicators']['blocked_rooms'] }}">
                                            <p class="text-center indicadores">
                                                <img class="icon-indicadores" src="{{ asset('icons/block.svg') }}" alt="Menu Item">
                                                &nbsp;
                                                <span id='blocked_rooms'></span>
                                            </p>
                                        </div>
                                    </div>

                                    {{-- Arrives & Departures --}}
                                    <div class="{{ $indicators_margin }} col-11">
                                        <div class="p-0 row justify-content-center align-items-center g-0">

                                            {{-- Arrives --}}
                                            <div class="pr-1 col-6">
                                                <div class="card indicators-shadow">
                                                    <div class="p-0 card-body" title="{{ __('navbar')['indicators']['total_arrives'] }}">
                                                        <p class="py-1 text-center indicadores ">
                                                            <img class="icon-indicadores-xl" src="{{ asset('icons/checkIn_blue.svg') }}" alt="Menu Item">
                                                            &nbsp;
                                                            #<span id='total_arrives'></span>
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>

                                            {{-- Departures --}}
                                            <div class="pl-1 col-6">
                                                <div class="card indicators-shadow">
                                                    <div class="p-0 card-body" title="{{ __('navbar')['indicators']['total_departures'] }}">
                                                        <p class="py-1 text-center indicadores ">
                                                            <img class="icon-indicadores-xl" src="{{ asset('icons/checkOut.svg') }}" alt="Menu Item">
                                                            &nbsp;
                                                            #<span id='total_departures'></span>
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>

                                    {{-- Total Guest --}}
                                    <div class="{{ $indicators_margin }} col-11">
                                        <div class="pt-1 pb-1 text-center card indicators-shadow" title="{{ __('navbar')['indicators']['total_guests'] }}">
                                            <p class="text-center indicadores">
                                                <img class="fixed-indicator-icons" src="{{ asset('icons/home.svg') }}"alt="Menu Item">
                                                &nbsp;
                                                <span id='total_guests'></span> px
                                            </p>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>

                    </li>
                </ul>
            @endif

        </div>

    </div>
</nav><br>

{{-- Horario --}}
<script>
    $(document).ready(function () {
        setInterval(getCurrentTime, 500); //Cada 5 segundo
    });

    function getCurrentTime() {
        const now = new Date();
        const hours = now.getHours();
        const minutes = now.getMinutes();
        const seconds = now.getSeconds();

        $('#hour').text(`${hours}:${minutes}:${seconds}`);
    }
</script>

{{-- Indicadores --}}
@if (!$has_only_invoicing_system)
    <script>
        // On api token generated
        window.apiTokenReady.then(token => {
            // Initial Call
            getIndicadoresData();
        });

        function getIndicadoresData() {
            $.get("{{ route('api.hotel.indicators') }}", function(chartData) {
                chartData = JSON.parse(chartData);
                    $("#ocupation").text(chartData.occupancy);
                    $("#occupied_rooms").text(`${chartData.roomsOccupancy}/${chartData.totalRooms}`);
                    $("#rooms_on_use").text(chartData.roomsOnUse);
                    $("#blocked_rooms").text(chartData.blockedRooms);
                    $("#total_guests").text(chartData.totalGuests);
                    $("#total_arrives").text(chartData.totalArrives);
                    $("#total_departures").text(chartData.totalDepartures);
            });
        }
    </script>
@endif