@extends('frontend::page')

@section('content')





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

<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>





 
<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="margin-top:-23px; position: absolute;top: 60%;left:2%;"> <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#0d0c0c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H6M12 5l-7 7 7 7"/></svg></div>
<div style="position: absolute;top: 50%;left: 50%;margin-right: -50%;transform: translate(-50%, -50%)">
What do you care about?
</div>



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



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

    <!-- 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

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

            @if ($settings['breadcrumbs'] == '1')
            <div class="d-flex" style="margin-top:40px;">
                
                
        <div class="mobileShow" ><!--Show this status only on mobile--> 
        <a href="{{ asset($language_prefix) }}" target="_parent">
         <svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 24 24" fill="none" stroke="#141313" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H6M12 5l-7 7 7 7"/></svg>
         @if ($category_query->parent_id != 0) {{ $data_to_pass['parent_category_name'] }} <span class="sep">›</span> @endif {{ $data_to_pass['category_name'] }}
        </a>
        <div style="height:30px;"></div>
        </div><!--Show this status only on mobile end-->
                
                <!-- Breadcrumbs -->
                <div class="mymobile" > <!--Show this only on desktop start HEADER-->
                <div class="breadcrumbs mb-3">
                    <a href="{{ asset($language_prefix) }}">@lang('general.homepage')</a> <span class="sep">›</span> @if ($category_query->parent_id != 0) <a href="{{ asset($language_prefix.$settings['category_base']) }}/{{ $data_to_pass['parent_category_slug'] }}">{{ $data_to_pass['parent_category_name'] }}</a> <span class="sep">›</span> @endif <a href="{{url()->current()}}">{{ $data_to_pass['category_name'] }}</a>
                </div>
                </div><!--Show this status only on desktop end-->
                <div class="ms-auto">
                    <div class="btn-group">
                        <button class="btn dropdown-toggle ms-2" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                            @lang('general.sort'): <b>{{$current_filter}}</b>
                            <i class="icon-angle-down ml-2"></i>
                        </button>
                        <div class="dropdown-menu dropdown-menu-sort mt-1 px-2">
                            <b class="ps-1">@lang('general.sort_options')</b>
                            <div class="dropdown-divider mt-1 mb-1"></div>
                            <a class="dropdown-item ps-1" href="{{url()->current()}}?sort=NewestFirst"><i class="icon-check-circle mr-1{{ $filter_name == 'NewestFirst' ? ' active' : '' }}"></i> @lang('general.newest_first')</a>
                            <a class="dropdown-item ps-1" href="{{url()->current()}}?sort=OldestFirst"><i class="icon-check-circle mr-1{{ $filter_name == 'OldestFirst' ? ' active' : '' }}"></i> @lang('general.oldest_first')</a>
                            <a class="dropdown-item ps-1" href="{{url()->current()}}?sort=MostViews"><i class="icon-check-circle mr-1{{ $filter_name == 'MostViews' ? ' active' : '' }}"></i> @lang('general.most_page_views')</a>
                            <a class="dropdown-item ps-1" href="{{url()->current()}}?sort=LeastViews"><i class="icon-check-circle mr-1{{ $filter_name == 'LeastViews' ? ' active' : '' }}"></i> @lang('general.least_page_views')</a>
                            <a class="dropdown-item ps-1" href="{{url()->current()}}?sort=MostClicks"><i class="icon-check-circle mr-1{{ $filter_name == 'MostClicks' ? ' active' : '' }}"></i> @lang('general.most_clicks')</a>
                            <a class="dropdown-item ps-1" href="{{url()->current()}}?sort=LeastClicks"><i class="icon-check-circle mr-1{{ $filter_name == 'LeastClicks' ? ' active' : '' }}"></i> @lang('general.least_clicks')</a>
                            <a class="dropdown-item ps-1" href="{{url()->current()}}?sort=MostVotes"><i class="icon-check-circle mr-1{{ $filter_name == 'MostVotes' ? ' active' : '' }}"></i> @lang('general.most_votes')</a>
                            <a class="dropdown-item ps-1" href="{{url()->current()}}?sort=LeastVotes"><i class="icon-check-circle mr-1{{ $filter_name == 'LeastVotes' ? ' active' : '' }}"></i> @lang('general.least_votes')</a>
                        </div>
                    </div>
                </div>
            </div>

            @if ($settings['schema_breadcrumbs'] == '1')
            {!! $breadcrumb_schema_data->toScript() !!}
            @endif
            <!-- /Breadcrumbs -->
            @endif

            @if($sub_categories->isNotEmpty())
            <!-- Subcategories -->
            <div class="col-12 mb-3">
                <div class="sub-categories">
                    <div class="row pb-2">
                        <span class="section-title mb-2 pt-2">@lang('general.subcategories')</span>
                        @foreach($sub_categories as $submenu)
                        <div class="col-md-4 col-6 pb-1">
                            <a href="{{ asset($language_prefix.$settings['category_base']) }}/{{ $category_query->slug }}/{{ $submenu->slug }}" target="_parent"><i class="icon-chevron-right"></i> {{ $submenu->title }}@if ($settings['sub_count_category'] == '1') ({{ $submenu->item_count }})@endif</a>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
            <!-- /Subcategories -->
            @endif

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

            <div class="infinite-scroll">

                <!-- Links -->
                @foreach ($links as $key => $link)

                @if(empty($link->image))
                @php $link->image='no_image.png'; @endphp
                @endif
                
                <div class="other-links col-12 mb-3">
                    <div class="shadow-sm p-2 @if($link->featured_category == '1') bg-featured @else bg-white @endif rounded">
                        <div class="row p-1">
                            <a href="@if ($link->bypass_details == '0'){{ asset($language_prefix.$settings['detail_base']) }}/{{ $link->slug }}@else{{ $link->url }}@endif" @if ($link->bypass_details == '1') target="_parent" {!! $link_types[$link->bypass_details_type] !!}@endif>
                                <div class="d-flex">
                                    <div class="me-2">
                                        @if($settings['infinite_scroll'] == '1' && $links->currentPage() != 1 )
                                        <img src="{{ asset('images/links') }}/{{ $link->image }}" class="site-icon rounded" alt="{{ $link->title }}">
                                        @else
                                        <img src="{{ asset('images/pixel.png') }}" data-src="{{ asset('images/links') }}/{{ $link->image }}" class="site-icon rounded lazy" alt="{{ $link->title }}">
                                        <noscript>
                                            <img src="{{ asset('images/links') }}/{{ $link->image }}" class="site-icon rounded" alt="{{ $link->title }}" />
                                        </noscript>
                                        @endif
                                    </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($link->featured_category == '1' && $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
                <!-- /Links -->

            </div>

            @if($settings['infinite_scroll'] == '0' )
            @if ($links->hasPages())
            <!-- Pagination -->
            <div class="d-flex mt-3">
                <div class="mx-auto">
                    {{ $links->onEachSide(1)->links() }}
                </div>
            </div>
            <!-- /Pagination -->
            @endif
            @endif

            @if($category_query->custom_content != null )
            <div class="shadow-sm p-2 bg-white custom-content rounded mb-3">
                <div class="mx-1">
                    {!! $category_query->custom_content !!}
                </div>
            </div>
            @endif

            @if($settings['infinite_scroll'] == '1' )
            @if($links->currentPage() != $links->lastPage() )

            <!-- Loading -->
            <div class="container text-center">
                <div class="page-load-status">
                    <div class="infinite-scroll-request loader-ellips mb-3">
                        @lang('general.loading')
                    </div>
                </div>
            </div>
            <!-- /Loading -->

            <!-- Pagination -->
            <p class="pagination-next">
                <a class="pagination__next" href="{{$links->nextPageUrl()}}">Next Page</a>
            </p>
            <!-- /Pagination -->

            @endif
            @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