@php($header = \App\Models\Header::first())
<div class="header header_d">
    <div style="display:flex;"><a href="/"><img src="{{ $header->logo }}" class="logo_img" alt="Logo"></a></div>
    <div class="header_options">
        @foreach (json_decode($header->menu, true) as $menus)
            <a href="{{ $menus['url'] }}" class="h_op">{{ $menus['name'] }}</a>
        @endforeach
    </div>
    <div class="header_options">
        <a href="{{ $header->button_url }}" class="applynow_btn apn_btn">
            {{ $header->button }} &nbsp;&nbsp;<i class="fas fa-long-arrow-alt-right"></i>
        </a>
    </div>
</div>
<div class="header header_ss">
    <div class="header_options"><i class="fas fa-bars menu_ss" onclick="menu_open()"></i></div>
    <div style="display:flex;"><a href="/"><img src="{{ $header->logo }}" class="logo_img logo_img_ss" alt="Logo"></a>
    </div>
</div>
<div class="menu_right">
    <i class="fas fa-times menu_close" id="menu_close" onclick="menu_close()"></i>
    @foreach (json_decode($header->menu, true) as $menus)
        <a href="{{ $menus['url'] }}" class="h_op_ss">
            <i class="fas fa-chevron-right hc_arrow"></i>
            {{ $menus['name'] }}</a>
    @endforeach
</div>
<script type="text/javascript">
    $(window).scroll(function() {
        if ($(window).scrollTop() >= 50) {
            $('.header').addClass('fixed_header');
            $('.temp').addClass('fixed_temp');
            $('.h_op').addClass('fh_op');
            $('.applynow_btn').addClass('ap_fixed');
            $('.menu_ss').addClass('menu_ss_fixed');
        } else {
            $('.header').removeClass('fixed_header');
            $('.h_op').removeClass('fh_op')
            $('.applynow_btn').removeClass('ap_fixed');
            $('.menu_ss').removeClass('menu_ss_fixed');
            $('.temp').removeClass('fixed_temp');
        }
    });

    function menu_close() {
        $(".menu_right").css({
            "-webkit-transform": "translate(-120% , 0% )",
            "-ms-transform": "translate(-120% , 0% )",
            "transform": "translate(-120% , 0% )"
        })
    }

    function menu_open() {
        $(".menu_right").css({
            "-webkit-transform": "translate(0px , 0% )",
            "-ms-transform": "translate(0px , 0% )",
            "transform": "translate(0px , 0% )"
        })
    }
</script>