@extends('frontend::page')

@section('content')


<style>
html {
   
   overflow-y: auto;
   position: relative;
   -webkit-text-size-adjust: none;
    touch-action: manipulation;
}
body {
    height  : 100%;
    overflow-y: auto;
    overflow-x:hidden;
    position: relative;

}
</style>


<style>
#header-wrap {
    background: #ffffff;
    position: fixed;
    width: 100%;
    height: 60px;
    top: 0;
    margin-left:-12px;
    z-index: 2;
}
</style>

<!--search button start-->
<style>
    .round-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: lightgray;
  cursor: pointer;
}

.round-button .search-icon {
  color: white;
}

</style>


<!--search buttons end-->



<style>
/* show only on desktop */

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
.mymobile {
display: none
}

</style>

<style type="text/css">

/*show only on mobile */

   .mobileShow { display: none;}
   /* Smartphone Portrait and Landscape */
   @media only screen
   and (min-device-width : 320px)
   and (max-device-width : 480px){ .mobileShow { display: inline;}}
</style>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jost:wght@300&display=swap" rel="stylesheet">


<!-- Container -->
<main class="container links mt-3">
    


<div class="mobileShow" ><!--Show this status only on mobile start-->
<div id="header-wrap"  style="cursor:pointer;" onclick="document.location='javascript:history.back()'">


<div style="position: absolute;top: 35%;left: 50%;margin-right: -50%;transform: translate(-50%, -50%)">
<span style="font-weight:bold; font-size:25px; color:#000;"><img src="https://www.youmanitarian.com/images/circle_logo.png" style="width:40px; height:40px;"/>
 </span>  

</div>
<div style="text-align:center; margin-left:-12px; margin-top:40px;">JOIN YOUMANITARIAN</div>
 <div style="margin-top:-39px; float:right; margin-right:28px; color:#0909fe; font-weight:bold;">  Login </div>


 </div>
</div><!--show on mobile end-->


    <!-- Grid Row -->
    <div class="row">

        <!-- Grid Column -->
        <div class="col-md-9">

            @if(!empty($ad[4]))<div class="mb-3 text-center">{!! $ad[4] !!}</div>@endif

            @if ($settings['article_boxes_on_home_page'] == '1')
            <!-- Article Boxes -->
            @include('frontend::inc.partials', ['type' => '2'])
            <!-- /Article Boxes -->
            @endif







<div style="height:40px;"></div>
            <!-- Main Row -->
            <div class="row">

                <!-- Search Box -->
                @include('frontend::inc.partials', ['type' => '1'])
                <!-- /Search Box -->




<div class="mymobile" > <!--Show this only on desktop start HEADER-->
<div style="font-family: 'Jost', sans-serif; font-size:28px;">What do you care about?</div></br>
<!-- Search Box -->
<a href="{{ asset($language_prefix) }}" target="_parent">
   Search
</a>
<!-- /Search Box -->
</div><!--Show this status only on desktop end-->



                                <!--Categories slider category start-->


          <div style="width:100%; height:150px; margin-top:90px;  overflow-x: scroll;overflow-y: hidden;white-space:nowrap; z-index:1; position:absolute; ">
<a href="https://causes.youmanitarian.com/public/" target="_parent">
<div class="item" style="width: 120px;vertical-align: top;display: inline-block;text-align: center;" onclick="location.href='';">
    <img src="https://youmanitarian.com/images/causes_category_btn.png" style="width:70px; height:70px;-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; border-radius:100%; vertical-align: top;display: inline-block;text-align: center; "/>
       <div style="height:10px;"></div>
       <span class="caption" style="display: block; color:#000000; font-weight:bold;">Causes</span>

</div>
</a>
<a href="https://causes.youmanitarian.com/public/category/movements" target="_parent">
<div class="item" style="width: 120px;vertical-align: top;display: inline-block;text-align: center;" onclick="location.href='';">
    <img src="https://www.youmanitarian.com/images/movement_category_btn.png" style="width:70px; height:70px;-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; border-radius:100%; vertical-align: top;display: inline-block;text-align: center; "/>
     <div style="height:10px;"></div>
       <span class="caption" style="display: block; color:#000000; font-weight:bold;">Movements</span>

</div>
</a>
<a href="https://causes.youmanitarian.com/public/category/sustainability" target="_parent">
<div class="item" style="width: 120px;vertical-align: top;display: inline-block;text-align: center;"  onclick="location.href='https://causes.youmanitarian.com/public/category/sustainability';">
    <img src="https://www.youmanitarian.com/images/sustainability_categories_btn.png"  style="width:70px; height:70px;-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; border-radius:100%; vertical-align: top;display: inline-block;text-align: center;"/>
     <div style="height:10px;"></div>
    <span class="caption" style="display: block; color:#000000; font-weight:bold;">UN Sustainability</br>Goals</span>
   

</div>
</a>
<a href="https://causes.youmanitarian.com/public/category/mental-health" target="_parent">
<div class="item" style="width: 120px;vertical-align: top;display: inline-block;text-align: center;" onclick="location.href=' ';">
    <img src="https://www.youmanitarian.com/images/mentalhealth_category_btn.png"  style="width:70px; height:70px;-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; border-radius:100%; vertical-align: top;display: inline-block;text-align: center;"/>
    <div style="height:10px;"></div>
    <span class="caption" style="display: block; color:#000000; font-weight:bold;">Mental Health</span>
 

</div>
</a>
<a href="https://causes.youmanitarian.com/public/category/mental-health" target="_parent">
<div class="item" style="width: 120px;vertical-align: top;display: inline-block;text-align: center;" onclick="location.href='';">
    <img src="https://www.youmanitarian.com/images/decentralizedcharity_categories_btn.png"  style="width:70px; height:70px;-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; border-radius:100%; vertical-align: top;display: inline-block;text-align: center;"/>
     <div style="height:10px;"></div>
    <span class="caption" style="display: block; color:#000000; font-weight:bold;">Decentralized</br> Charity</span>
    

</div>
</a>
<div class="item" style="width: 120px;vertical-align: top;display: inline-block;text-align: center;" onclick="location.href='';">
    <img src="https://youmanitarian.com/images/kindness_categories_btn.png"  style="width:70px; height:70px;-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; border-radius:100%; vertical-align: top;display: inline-block;text-align: center;"/>
     <div style="height:10px;"></div>
    <span class="caption" style="display: block; color:#000000; font-weight:bold;">Kindness</span>
  

</div>
<div class="item" style="width: 120px;vertical-align: top;display: inline-block;text-align: center;" onclick="location.href=' ';">
    <img src="https://youmanitarian.com/images/nonprofit_categories_btn.png"  style="width:70px; height:70px;-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; border-radius:100%; vertical-align: top;display: inline-block;text-align: center;"/>
    <div style="height:10px;"></div>
    <span class="caption" style="display: block; color:#000000; font-weight:bold;">Non-profits</span>
</div>

<div class="item" style="width: 120px;vertical-align: top;display: inline-block;text-align: center;" onclick="location.href=' ';">
    <img src="https://youmanitarian.com/images/events_category_btn.png"  style="width:70px; height:70px;-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; border-radius:100%; vertical-align: top;display: inline-block;text-align: center;"/>
     <div style="height:10px;"></div>
    <span class="caption" style="display: block; color:#000000; font-weight:bold;">Events</span>
</div>


</div>
<div style="height:100px;"></div>
<!--Categories slider category end-->

<div style="height:70px;"></div>

<div style=" font-size:15px; font-weight:bold; color:#999999;"><b>PICK ONE TO ENCOURAGE</b></div>
<div style="height:20px;"></div>

                @if($categories->isEmpty())
                <div class="col-12">
                    <h6 class="alert alert-warning">@lang('general.no_category_added')</h6>
                </div>
                @endif

                <!-- Featured Links -->
                @foreach ($featured_links as $link)

                @if(empty($link->image))
                @php $link->image='no_image.png'; @endphp
                @endif

                <div class="col-12 mb-3">
                    <div class="shadow-sm p-2 bg-featured rounded">
                        <div class="row p-1">
                            <a target="_parent" href="@if ($link->bypass_details == '0'){{ asset($language_prefix.$settings['detail_base']) }}/{{ $link->slug }}@else{{ $link->url }}@endif" @if ($link->bypass_details == '1')  {!! $link_types[$link->bypass_details_type] !!}@endif >
                                <div class="d-flex">
                                    <div class="me-2"><img src="{{ asset('images/pixel.png') }}" data-src="{{ asset('images/links') }}/{{ $link->image }}" class="site-icon rounded lazy" alt="{{ $link->title }}"></div>
                                    <div class="ps-1 my-md-0 my-auto">
                                        <span class="link-title">{{ $link->title }}</span>@if($link->badge == '1') <i class="icon-check-circle title-badge" data-bs-toggle="tooltip" data-bs-placement="top" title="@lang('general.badge_title')"></i>@endif{{''}}@if ($settings['show_featured_text'] == '1')<span class="featured">@lang('general.featured')</span>@endif
                                        <p class="description m-0">{{{ $link->description }}}</p>
                                        <span class="site-url">
                                            @if(empty($link->visible_url))
                                            {{ $link->url }}
                                            @else
                                            {{ $link->visible_url }}
                                            @endif
                                        </span>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>

                @endforeach
                <!-- /Featured Links -->


                <!-- Links -->
                @foreach ($categories_home as $category)

                @if(empty($category->image))
                @php $category->image='no_image.png'; @endphp
                @endif
                
                <div class="col-md-6 col-12 mb-3"   onclick="window.top.location='{{ asset($language_prefix.$settings['category_base']) }}/{{ $category->slug }}';"  style="cursor:pointer;" >
                    <div class="shadow-sm p-2 bg-white rounded">
                        <div class="row p-1">
                            <div class="d-flex">
                                <div class="me-2 my-auto">
                                    <a href="{{ asset($language_prefix.$settings['category_base']) }}/{{ $category->slug }}" target="_parent">
                                        <img src="{{ asset('images/pixel.png') }}" data-src="{{ asset('images/categories') }}/{{ $category->image }}" class="site-icon rounded lazy" alt="{{ $category->title }}">
                                        <noscript>
                                            <img src="{{ asset('images/categories') }}/{{ $category->image }}" class="site-icon rounded" alt="{{ $category->title }}" />
                                        </noscript>
                                    </a>
                                </div>
                                <div class="ps-1">
                                   <a href="{{ asset($language_prefix.$settings['category_base']) }}/{{ $category->slug }}" style="margin-top:20px;" class="section-title" target="_parent">{{ $category->title }}@if ($settings['count_home'] == '1') ({{ $category->item_count }})@endif</a>


                                    @foreach($category->home_categories as $submenu)

                                    @if($submenu->home_page == '1')
                                    <a href="{{ asset($language_prefix.$settings['category_base']) }}/{{$category->slug}}/{{ $submenu->slug }}"  target="_parent" class="sub-link">{{ $submenu->title }}@if ($settings['sub_count_home'] == '1') ({{ $submenu->item_count }})@endif</a>
                                    @endif

                                    @endforeach
                                    
                                </div>
                               
                            </div>
                        </div>
                    </div>
                </div>

                @endforeach
                <!-- /Links -->

            </div>
            <!-- /Main Row -->

            @if ($settings['article_boxes_on_home_page'] == '2')
            <!-- Article Boxes -->
            @include('frontend::inc.partials', ['type' => '2'])
            <!-- /Article Boxes -->
            @endif

            @if(!empty($ad[3]))<div class="mb-3 text-center">{!! $ad[3] !!}</div>@endif

        </div>
        <!-- /Grid Column -->

        <!-- Grid Column -->
        <div class="col-md-3 text-center mb-3">
            @if ($settings['sticky_ads_right_column'] == '1')<div class="sticky-top sticky-top-15">@endif
                @if(!empty($ad[5]))<div class="mb-3">{!! $ad[5] !!}</div>@endif
                @if ($settings['sticky_ads_right_column'] == '1')</div>@endif
        </div>
        <!-- /Grid Column -->

    </div>
    <!-- /Grid row -->

</main>
<!-- /Container -->

@endsection