{{-- Styles --}}
    <style>
      /* Navbar */
        .harsi-navbar {
            border-radius: 5rem;
            box-shadow: 5px 5px 15px 0 rgba(20, 20, 20, 0.3);
            background: #ffffffa2;
        }

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

      /* Text */
        .navbar-title {
            color: #0d6889;
            text-transform: uppercase;

            font-size: 1.75rem;
            font-weight: 600 !important;
            letter-spacing: 2px;
        }

        .time-text {
            color: #0d6889;
            text-transform: uppercase;

            font-weight: 500 !important;
            font-size: 1rem;
        }
    </style>

{{-- Controls --}}
@php
    use \Carbon\Carbon;
    Carbon::setLocale(app()->getLocale());

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

{{-- Structure --}}
    <nav
        class="px-4 py-2 mx-4 harsi-navbar navbar d-flex justify-content-between align-items-center"
    >

        {{-- Logo --}}
        @if ($hotel_logo === null)
            <img class="img-fluid hotel-logo" src="{{ asset('images/harsi_logo.png') }}" alt="Menu Item">
        @else
            <img class="py-2 hotel-logo ps-2" src="{{ $hotel_logo }}" alt="Menu Item">
        @endif

        <h3 class="mb-0 navbar-title">
            {{ $hotel_name }}
        </h3>

        {{-- Time --}}
        <div class="text-center pe-3">
            <p id="date" class="mb-0 time-text">{{$current_date}}</p>
            <p id="hour" class="mb-0 time-text">...</p>
        </div>

    </nav>

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

        function getCurrentTime() {
            const now = moment().format('h:m:s');
            $('#hour').text(now);
        }
    </script>