@php
    if (!isset($headerType)) {
        $headerType = 'PLAIN';
    }
@endphp

<style>
    .masuk {
        background-color: #ecb12e;
        border: 2px solid #026b85;
        border-radius: 50px;
        color: #e9ecef;
    }

    @media (max-width: 768px) {
        .padding-mobile {
            display: flex;
            justify-content: space-between;
            padding: 0px !important;
        }

        .nav-link {
            color: #e9ecef !important;
        }

        .masuk {
            margin: 30px 0px;
            position: relative;
            left: -30px;
        }

        .nav-mobile {
            padding-top: 20px;
        }
    }

    @media (min-width: 768px) and (max-width: 992px) {
        .containerz {
            padding: 0px 30px !important;
        }

        .btn-mobile {
            display: block;
        }
    }
</style>

@if ($headerType == 'LANDING')
    <div class="d-none d-md-flex" id="top-bar" style="background-color: #026b85;">
        <div class="containerz" style="padding-left: 100px;">
            <div class="bar-wrapper">
                {{-- <img class="app-icon" src="{!! url('/') !!}/assets/frontend/images/app-ico.png" alt="app icon"> --}}

                <div id="top-bar-description">
                    {{-- <h3><span>App Duha Syariah!</span> Pembiayaan Syariah, Bebas Riba, Bebas Ribet!</h3> --}}

                    <div id="top-bar-info" style="justify-content:center; align-items:center">
                        <div class="download-wrapper">
                            {{-- <a href="{{ @getSetting()->appStoreUrl }}">
                                <img src="{!! url('/') !!}/assets/frontend/images/button-download-apple.png" alt="apple download">
                            </a> --}}
                            <a href="{{ @getSetting()->playStoreUrl }}">
                                <img style="height: 100%; object-fit: contain;"
                                    src="{!! url('/') !!}/assets/frontend/images/button-download-gplay.png"
                                    alt="gplay download">
                            </a>
                        </div>

                        <div class="download-wrapper">
                            <a href="{{ @getSetting()->appStoreUrl }}">
                                <img style="height: 100%; object-fit: contain;"
                                    src="{!! url('/') !!}/assets/frontend/images/button-download-apple.png"
                                    alt="apple download">
                            </a>
                        </div>
                        <div class="download-wrapper">
                            <img style="height: 50px; object-fit: contain;"
                                src="{!! url('/') !!}/assets/frontend/images/AFPI.png" alt="AFPI Image">
                        </div>
                        <div class="download-wrapper">
                            <img style="height: 40px; object-fit: contain;"
                                src="{!! url('/') !!}/assets/frontend/images/BSI.png" alt="BSI Image">
                        </div>
                        <div class="download-wrapper d-flex justify-content-center align-items-center">
                            <p class="m-0" style="color: #e9ecef">Berizin dan diawasi oleh Otoritas Jasa Keuangan</p>
                        </div>

                        @php
                            $tkbRate = getTkb();
                        @endphp
                        @if (is_array($tkbRate))
                            <div class="tkb90-wrapper">
                                <div>
                                    <div data-toggle="modal" data-target="#modal-tkb90">
                                        <span>TKB90 </span> <span class="tkb-rate">{{ $tkbRate[3]->tkb90 }} %</span>&nbsp;
                                        <i class="fa fa-info-circle"></i>
                                    </div>
                                    <div class="tkb90-dropdown">
                                        <ul>
                                            <li data-toggle="modal" data-target="#modal-tkb60">
                                                <span>TKB60 </span> <span class="tkb-rate">{{ $tkbRate[2]->tkb60 }} %</span>
                                                <i class="fa fa-info-circle"></i>
                                            </li>
                                            <li data-toggle="modal" data-target="#modal-tkb30">
                                                <span>TKB30 </span> <span class="tkb-rate">{{ $tkbRate[1]->tkb30 }} %</span>
                                                <i class="fa fa-info-circle"></i>
                                            </li>
                                            <li data-toggle="modal" data-target="#modal-tkb0">
                                                <span>TKB0 </span> <span class="tkb-rate">{{ $tkbRate[0]->tkb0 }} %</span>
                                                <i class="fa fa-info-circle"></i>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        @endif
                        {{-- <div class="tkb90-wrapper">
                            <a>
                                <span>TKB90 = </span> <span id="tkb90-rate">{{ @getSetting()->tkbRate }} %</span>&nbsp;
                                <i class="fa fa-info-circle"></i>
                                <div class="tkb90-dropdown">
                                    <p>{{ @getSetting()->tkbNote }}</p>
                                </div>
                            </a>
                        </div> --}}
                    </div>
                </div>
            </div>
        </div>
    </div>
@endif

{{-- Modal TKB90 --}}
<div class="modal fade" id="modal-tkb90" tabindex="-1" aria-labelledby="tkb90Label" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="tkb90Label">TKB90</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>TKB90 adalah ukuran tingkat keberhasilan Penyelenggara dalam memfasilitasi penyelesaian kewajiban Pendanaan dalam jangka waktu sampai dengan 90 (sembilan puluh) hari kalender terhitung sejak jatuh tempo;</p>
        </div>
      </div>
    </div>
</div>
{{-- Modal TKB60 --}}
<div class="modal fade" id="modal-tkb60" tabindex="-1" aria-labelledby="tkb60Label" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="tkb60Label">TKB60</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>TKB60 adalah ukuran tingkat keberhasilan Penyelenggara dalam memfasilitasi penyelesaian kewajiban Pendanaan dalam jangka waktu sampai dengan 60 (enam puluh) hari kalender terhitung sejak jatuh tempo;</p>
        </div>
      </div>
    </div>
</div>
{{-- Modal TKB30 --}}
<div class="modal fade" id="modal-tkb30" tabindex="-1" aria-labelledby="tkb30Label" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="tkb30Label">TKB30</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>TKB30 adalah ukuran tingkat keberhasilan Penyelenggara dalam memfasilitasi penyelesaian kewajiban Pendanaan dalam jangka waktu sampai dengan 30 (tiga puluh) hari kalender terhitung sejak jatuh tempo;</p>
        </div>
      </div>
    </div>
</div>
{{-- Modal TKB0 --}}
<div class="modal fade" id="modal-tkb0" tabindex="-1" aria-labelledby="tkb0Label" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="tkb0Label">TKB0</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>TKB0 adalah ukuran tingkat keberhasilan Penyelenggara dalam memfasilitasi penyelesaian kewajiban Pendanaan dalam jangka waktu sampai dengan 0 (nol) hari kalender terhitung sejak jatuh tempo;</p>
        </div>
      </div>
    </div>
</div>

@if ($headerType == 'LANDING')
    <nav class="navbar navbar-expand-lg navbar-dark nav-fixed-scroll" id="landing-nav">
        <div class="d-flex padding-mobile" style="padding-left: 100px;">
            <a class="navbar-brand" href="{{ route('home') }}">
                <img class="logo" src="{!! url('/') !!}/assets/frontend/images/LOGO.png" alt="logo">
            </a>
        </div>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content"
            aria-controls="navbar-content" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse justify-content-start" id="navbar-content">
            <ul class="navbar-nav nav-mobile">
                <li class="nav-item active">
                    <a class="nav-link" href="#caraPinjamAnchor" style="color:#026b85">Pengajuan Pembiayaan</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#tipePinjamanAnchor" style="color:#026b85">Tipe Pembiayaan</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#kerjaSamaAnchor" style="color:#026b85">Kerja Sama</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#faqAnchor" style="color:#026b85">FAQ</a>
                </li>
                <li class="nav-item mx-5 d-md-none">
                    <a href="https://app.duhasyariah.id/account">
                        <button type="button" class="btn masuk">Masuk/Daftar</button>
                    </a>
                </li>
            </ul>
        </div>
        <div class="float-right ml-auto d-none d-lg-flex" style="padding-right: 100px;">
            <a href="https://app.duhasyariah.id/account">
                <button type="button" class="btn"
                    style="background-color: #ecb12e; border: 2px solid #026b85; border-radius: 50px; color:#e9ecef;">Masuk/Daftar</button>
            </a>
        </div>
    </nav>
@else
    <nav id="nav" class="nav-fixed-scroll">
        <div class="container">
            <div class="inline-nav">
                <a href="{!! route('home') !!}">
                    <img class="logo" src="{!! url('/') !!}/assets/frontend/images/logo.png" alt="logo">
                </a>

                @if ($headerType != 'HELP-CENTER')
                    <a class="help-link" href="#" data-toggle="modal" data-target="#helpCenterModal">Butuh
                        Bantuan?</a>
                @else
                    <a class="help-page-link btn" href="{{ route('home') }}">
                        <img src="{{ url('/assets/frontend/images/back-icon.png') }}" />
                        <span>Kembali ke Duha Syariah</span>
                    </a>
                @endif
            </div>
        </div>
    </nav>
@endif