@extends('front.layouts.app')
@section('content')



<style>


.criteria {
    background: #f1f1f100;
}

.criteria {
    margin: 0 0 50px;
    padding: 70px 0;
}

.con {
    padding-left: unset;
}

.criteria li {
    font-size: 17px;
    padding: 10px 0;
    padding-left: 31px;
    font-weight: 500;
    line-height: 32px;
    font-weight: 500;
}

.criteria li::before {
    height: 11px;
    width: 11px;
    top: 20px;
    transform: unset;
}

.col-12.col-lg-5 img {
    height: 380px;
}

.exa h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 45px;
    font-weight: 600;
    margin: 0 0 15px 0;
    color: #fff !important;
    margin-top: 45px;
}

.extramar {}

a {
    color: #000;
    text-decoration: underline;
    text-decoration-color: #000000;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}
.theAPp {
    margin-top: 0;
}
.selectti {
    margin-top: 0;
}

a.relative.inline-flex.items-center.px-2.py-2.text-sm.font-medium.text-gray-500.bg-white.border.border-gray-300.rounded-l-md.leading-5.hover\:text-gray-400.focus\:z-10.focus\:outline-none.focus\:ring.ring-gray-300.focus\:border-blue-300.active\:bg-gray-100.active\:text-gray-500.transition.ease-in-out.duration-150 {
    background: #000 !important;
    outline: 0;
    border: 1px solid #000 !important;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px)
{
.criteria {
    margin: 0 0 50px;
    padding: 45px 0;
}
.cops-ad  {
margin: 55px 0 100px !important;
padding: 40px 0 55px 0 !important;
}
}
</style>
<main>

    <section class="banner">
        <div class="main-slide">
            <div class="h-100 position-relative">
                <img src="{{ URL::asset('uploads/dirtycopsus/cms/featuredpage/'.$featuredPage->banner) }}" class="img-fluid banner-img" alt="">
                <div class="exa">
                    <div class="container">
                        <div class="row justify-content-center">
                            <div class="col-12 col-lg-10">
                                <div class="banner-slider">
                                    <div class="content aos-init aos-animate" data-aos="fade-right"
                                        data-aos-duration="1500">
                                        <h3 style="">{{ !empty($featuredPage) ? $featuredPage->title : '' }}</h3>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <section class="statements criteria">
        <div class="container">
            <div class="row justify-content-end">
                <div class="col-12">
               <div class="d-flex justify-content-end">
                  <form action="{{ route('rs.newest.oldest') }}" method="get" style="width: 100%;" >
                     <div class="row justify-content-end">
                         <div class="col-12 col-lg-2">
                        <select name="sort" id="sort" class="selectti">
                            @foreach($sortOptions as $key => $value)
                              <option value="{{ $key }}" {{ $selectedSort === $key ? 'selected' : '' }}>{{ $value }}</option>
                              
                            @endforeach
                        </select>
                         </div>
                         <div class="col-12 col-lg-2">
                             <button type="submit" class="theAPp">Apply</button>
                         </div>
                     </div>
                 
                  </form>
               </div>
            </div>
            </div>
            
      
        
        @if(count($featuredreports) > 0)
            @foreach($featuredreports as $featured)
           
            <div class="cops-ad row gy-3" >
                <div class="container-fluid">
                    <div class="row justify-content-center">
                        <div class="col-12 col-lg-12">
                            
                            <!--<h2>{{!empty($featured) ?  $featured->heading: ''}}</h2>-->

                            <!--<div class="frst-big">-->
                            <!--    <p><span> {{!empty($featured->victime) ?  $featured->victime: ''}} </span></p>-->
                            <!--</div>-->
                            <!--<span class="top-update">{{  date('h:i A',strtotime($featured->created_at))  }} PT {{  date('d M y',strtotime($featured->date))  }} </span>-->
                            <!--<br>-->
                            <!-- <br>-->
                            
                            <!--<figure>-->
                            <!--    <img src="{{ URL::asset('uploads/dirtycopsus/featured/'.$featured->image) }}" alt="" class="img-fluid">-->
                            <!--</figure>-->

                                {!! !empty($featured) ?  $featured->description: '' !!}

                           
                        </div>
                    </div>
                </div>
            </div>
            
            @endforeach
        @endif
        
        
        
        <div class="pagination_feeds pagi5867">
        
      {{--  {{ $featuredreports->links() }} --}}
        
        </div>
       
        
            
        </div>
    </section>


</main>

@endsection