@push('style-after-global')
{{-- font --}}
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto+Mono" />

{{-- css --}}
<link rel="stylesheet" type="text/css" href="{{ url('libraries/normalize.css/normalize.css') }}" />
<link rel="stylesheet" type="text/css" href="{{ url('libraries/material-design-bottom-navigation/style.css') }}" />
<link rel="stylesheet" type="text/css" href="{{ url('libraries/material-components-web/dist/material-components-web.css') }}" />

<style>
/* widget search mobile */
/* ----------- */
.widget-search .widget-search-container {
  position: relative;
  height: 420px;
  text-align: center;
  padding: 1.4rem;
}

.widget-search .search-content .search-body {
  overflow: hidden !important;
  margin: 0.67rem 0 0 0 !important;
}

.widget-search .search-content .search-body .search-message {
  position: relative !important;
  float: right !important;
  text-align: right !important;
  padding: 0.75rem 1rem !important;
  margin: 0.2rem 0.2rem 1.8rem 0 !important;
  max-width: calc(100% - 5rem) !important;
  clear: both !important;
  word-break: break-word !important;
  color: #FFFFFF !important;
  background: #5A8DEE !important;
  border-radius: 0.267rem !important;
  box-shadow: 0 2px 4px 0 rgba(90, 141, 238, 0.6) !important;
}

.widget-search .search-content .search-body .search-message p {
  margin-bottom: 0 !important;
}

.widget-search .search-content .search-body .search-message .search-time {
  position: absolute !important;
  bottom: -20px !important;
  right: 0px !important;
  color: #828D99 !important;
  font-size: 0.8rem !important;
  white-space: nowrap !important;
}

.widget-search .search-content .search-left .search-message {
  text-align: left !important;
  float: left !important;
  margin: 0.2rem 0 1.8rem 0.2rem !important;
  color: #727E8C !important;
  background-color: #fafbfb !important;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3) !important;
}

.widget-search.widget-search-mobile {
  position: fixed;
  z-index: 1031;
  bottom: 11.5%;
  right: 80px;
  width: 350px;
}

.widget-search.widget-search-mobile .widget-search-container {
  height: 27rem;
}

.widget-search.widget-search-mobile .search-content .search-message {
  max-width: calc(100% - 3rem);
}

.widget-search.widget-search-mobile .card {
  box-shadow: 0px 0px 22px 0 rgba(25, 42, 70, 0.25);
}

.search-mobile-button {
  position: fixed;
  bottom: 5%;
  right: 80px;
  z-index: 1031;
}

.search-mobile-button i {
  top: 0;
}

.btn-search-popup {
    border-color: #000000 !important;
    background-color: #FF9900 !important;
    color: #fff;
}

/* widget chat mobile */
/* ----------- */
.widget-chat-mobile .widget-chat-mobile-container {
  position: relative;
  height: 420px;
  text-align: center;
  padding: 1.4rem;
}

.widget-chat-mobile .chat-mobile-content .chat-mobile-body {
  overflow: hidden !important;
  margin: 0.67rem 0 0 0 !important;
}

.widget-chat-mobile .chat-mobile-content .chat-mobile-body .chat-mobile-message {
  position: relative !important;
  float: right !important;
  text-align: right !important;
  padding: 0.75rem 1rem !important;
  margin: 0.2rem 0.2rem 1.8rem 0 !important;
  max-width: calc(100% - 5rem) !important;
  clear: both !important;
  word-break: break-word !important;
  color: #FFFFFF !important;
  background: #5A8DEE !important;
  border-radius: 0.267rem !important;
  box-shadow: 0 2px 4px 0 rgba(90, 141, 238, 0.6) !important;
}

.widget-chat-mobile .chat-mobile-content .chat-mobile-body .chat-mobile-message p {
  margin-bottom: 0 !important;
}

.widget-chat-mobile .chat-mobile-content .chat-mobile-body .chat-mobile-message .chat-mobile-time {
  position: absolute !important;
  bottom: -20px !important;
  right: 0px !important;
  color: #828D99 !important;
  font-size: 0.8rem !important;
  white-space: nowrap !important;
}

.widget-chat-mobile .chat-mobile-content .chat-mobile-left .chat-mobile-message {
  text-align: left !important;
  float: left !important;
  margin: 0.2rem 0 1.8rem 0.2rem !important;
  color: #727E8C !important;
  background-color: #fafbfb !important;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3) !important;
}

.widget-chat-mobile.widget-chat-mobile {
  position: fixed;
  z-index: 1031;
  bottom: 11.5%;
  right: 80px;
  width: 350px;
}

.widget-chat-mobile.widget-chat-mobile .widget-chat-mobile-container {
  height: 27rem;
}

.widget-chat-mobile.widget-chat-mobile .chat-mobile-content .chat-mobile-message {
  max-width: calc(100% - 3rem);
}

.widget-chat-mobile.widget-chat-mobile .card {
  box-shadow: 0px 0px 22px 0 rgba(25, 42, 70, 0.25);
}

.chat-mobile-button {
  position: fixed;
  bottom: 5%;
  right: 80px;
  z-index: 1031;
}

.chat-mobile-button i {
  top: 0;
}

.btn-chat-mobile-popup {
    border-color: #000000 !important;
    background-color: #FF9900 !important;
    color: #fff;
}

@media (max-width: 575.98px) {
  .widget-search.widget-search-mobile {
    right: 0;
    padding: 0 1.2rem;
    width: 100%;
  }
  .widget-search.widget-search-mobile .widget-search-container {
    height: 21rem;
  }

  .widget-chat-mobile.widget-chat-mobile {
    right: 0;
    padding: 0 1.2rem;
    width: 100%;
  }
  .widget-chat-mobile.widget-chat-mobile .widget-chat-mobile-container {
    height: 21rem;
  }
}
</style>
@endpush

<div class="demo-nav demo-card-7 demo-nav-theme nav-mobile-responsive">
    <div class="mdc-bottom-navigation mdc-bottom-navigation--shifting" style="background-color: #056e4f;">
        <nav class="mdc-bottom-navigation__list">

            {{-- use : nav-link nav-menu-main menu-toggle from template frest --}}
            <a href="{{ url('/')}}">
                <span class="mdc-bottom-navigation__list-item">
                    <span class="material-icons mdc-bottom-navigation__list-item__icon">home</span>
                    <span class="mdc-bottom-navigation__list-item__text">@lang('menu.Beranda')</span>
                </span>
            </a>
            <span class="nav-link nav-menu-main menu-toggle mdc-bottom-navigation__list-item">
                <span class="material-icons mdc-bottom-navigation__list-item__icon">menu</span>
                <span class="mdc-bottom-navigation__list-item__text">@lang('widget.MobileMenu')</span>
            </span>
            <span onclick="redirectTawkTo();" class="mdc-bottom-navigation__list-item">
                <span class="material-icons mdc-bottom-navigation__list-item__icon">local_phone</span>
                <span class="mdc-bottom-navigation__list-item__text">@lang('widget.MobileBantuan')</span>
            </span>
            <span onclick="showSearch();" class="mdc-bottom-navigation__list-item">
                <span class="material-icons mdc-bottom-navigation__list-item__icon">search</span>
                <span class="mdc-bottom-navigation__list-item__text">@lang('widget.MobilePencarian')</span>
            </span>
            <span onclick="topFunction();" class="mdc-bottom-navigation__list-item">
                <span class="material-icons mdc-bottom-navigation__list-item__icon">north</span>
                <span class="mdc-bottom-navigation__list-item__text">@lang('widget.MobileUp')</span>
            </span>
            <span class="mdc-bottom-navigation__list-item">
                @if (request()->segment(1) == 'search')
                    @if(request()->segment(1) != 'en')
                        <a href="{{ url('/en/' . request()->segment(1) . '/' . request()->segment(2)) }}">
                            <span class="material-icons mdc-bottom-navigation__list-item__icon">
                                <span class="flag-icon flag-icon-us"></span>
                            </span>
                        </a>
                    @else
                    <a href="{{ url('/id/' . request()->segment(1) . '/' . request()->segment(2)) }}">
                        <span class="material-icons mdc-bottom-navigation__list-item__icon">
                            <span class="flag-icon flag-icon-id"></span>
                        </span>
                    </a>
                    @endif
                @else
                    @if(request()->segment(1) != 'en')
                        <a href="{{ url('/en/' . request()->segment(2) . '/' . request()->segment(3)) }}">
                            <span class="material-icons mdc-bottom-navigation__list-item__icon">
                                <span class="flag-icon flag-icon-us"></span>
                            </span>
                        </a>
                    @else
                    <a href="{{ url('/id/' . request()->segment(2) . '/' . request()->segment(3)) }}">
                        <span class="material-icons mdc-bottom-navigation__list-item__icon">
                            <span class="flag-icon flag-icon-id"></span>
                        </span>
                    </a>
                    @endif
                @endif
            </span>
        </nav>
    </div>
</div>

{{-- popup help --}}
<div class="widget-chat-mobile widget-chat-mobile" style="display: none;" id="showHelp">
    <div class="card mb-0">
        <div class="card-footer p-1" style="border-top: 2px solid #FF9900;">
            <form class="d-flex" id="chat-message-mobile">
                <input type="text" class="form-control chat-message-mobile mr-75" name="message" placeholder="@lang('widget.BantuanCaption')">
                <button type="submit" class="btn btn-chat-mobile-popup glow px-1"><i class="bx bx-paper-plane"></i></button>
            </form>
        </div>
    </div>
</div>

{{-- popup search --}}
<div class="widget-search widget-search-mobile" style="display: none;" id="showSearch">
    <div class="card mb-0">
        <div class="card-footer p-1" style="border-top: 2px solid #FF9900;">
            <form class="d-flex" id="search-mobile">
                <input type="text" class="form-control search-message-mobile mr-75" name="search-mobile" placeholder="@lang('widget.PencarianCaption')">
                <button type="submit" class="btn btn-search-popup glow px-1"><i class="bx bx-search"></i></button>
            </form>
        </div>
    </div>
</div>

@push('script-after-global')
<script>
function showHelp() {
    var x = document.getElementById("showHelp");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

function redirectTawkTo() {
    window.open('https://tawk.to/chat/612c4abcd6e7610a49b29ee3/1feag7t1r');
}

function showSearch() {
    var x = document.getElementById("showSearch");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

$('#chat-message-mobile').submit( function () {
    const message = $(this).find('input[name=message]').val();

    window.open('https://api.whatsapp.com/send?phone=6281225708838&text='+ message);
    return false;
});

$('#search-mobile').submit( function () {
    const search = $(this).find('input[name=search-mobile]').val();

    clickLink('{{ url('search') }}/'+ search);
    return false;
})

function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}
</script>
@endpush