@extends('layout.app')
@section('contents')
    <div class="row">
        <div class="col-12">
            @if(count($media)>0)
                <div class="row ">
                    <div class=" col-md-8 col-xs-12">
                        <p  style="font-size: 16px !important;">Your Search Result</p>
                    </div>
                    <div class="col-md-2 col-xs-6">
                        <select class="form-control" name="filter" onchange="location = this.value">
                            <option>Filter By</option>
                            <option value="{{route('homepage')}}">All</option>
                            @foreach($filters as $filter)
                                <option value="{{route('homepage.filter', ['filter_id' => $filter->id])}}">{{$filter->section}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2 col-xs-6">
                        <select class="form-control" name="filter" onchange="location = this.value">
                            <option value="{{route('homepage')}}">Popular This Week</option>
                            <option value="{{route('homepage')}}">Popular This Month</option>
                            <option value="{{route('homepage')}}">Popular This Year</option>
                        </select>
                    </div>
                </div>
                <section style="padding-top: 2px !important;">
                    <div class="collection-wrapper">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="row">
                                    <div class="col-12">
                                        <div class="section-t-space portfolio-section portfolio-padding metro-section port-col" style="padding-top:1px!important;">
                                            <div class="isotopeContainer row">
                                                @foreach($media as $key => $content)
                                                    <div class="col-xl-4 col-lg-4 col-md-4 col-sm-6 isotopeSelector mb-5">
                                                        <div class="product-box">
                                                            <div class="img-wrapper">
                                                                <div class="front show-image">
                                                                    <a href="{{route('multimedia.check-page', ['ref_link' => $content->ref_link])}}">
                                                                        @if($content->upload->section_id == 2 || $content->upload->section_id == 4)
                                                                            <video
                                                                                src="{{asset('uploads/'.$content->ref_link)}}"
                                                                                class="img-fluid blur-up lazyload" style="width: 100% !important;" autoplay muted alt="">
                                                                            </video>
                                                                        @else
                                                                            <img
                                                                                src="{{asset('uploads/'.$content->ref_link)}}"
                                                                                class="img-fluid blur-up lazyload" alt="">
                                                                        @endif
                                                                    </a>
                                                                    <div class="cart-info cart-wrap">
                                                                        <a href="{{route('multimedia.pin', ['ref_link' => $content->ref_link])}}" title="Pin Picture">
                                                                            <span class="text-lowercase"><i class="fa fa-thumb-tack" style="color: red"></i></span>
                                                                        </a>
                                                                        <a href="{{route('multimedia.check-page', ['ref_link' => $content->ref_link])}}" title="View Comments">
                                                                            <span class="text-lowercase"><i class="fa fa-comment" style="color: black"></i></span>
                                                                        </a>
                                                                    </div>
                                                                    <div class="card" style="margin-top: -8px!important;">
                                                                        <div style="background-color: purple" class="text-center text-white media-design">
                                                                            <span class="text-lowercase ">{{$content->title}}</span>
                                                                        </div>
                                                                        <div class="card-body" style="padding: 1px!important;">
                                                                            <div style="margin-top: 1px !important;">
                                                                                @foreach($tags[$key] as $tag)
                                                                                    <label class="btn btn-sm rounded btn-outline-dark">
                                                                                        <span class="text-lowercase">{{$tag}}</span>
                                                                                    </label>
                                                                                @endforeach
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                        {{--<div class="offset-md-4">{{$media->links()}}</div>--}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            @else
                <div class="row ">
                    <div class=" col-md-8 col-xs-12">
                        <p  style="font-size: 16px !important;">Your Search Result</p>
                    </div>
                    <div class="col-md-2 col-xs-6">
                        <select class="form-control" name="filter" onchange="location = this.value">
                            <option>Filter By</option>
                            <option value="{{route('homepage')}}">All</option>
                            @foreach($filters as $filter)
                                <option value="{{route('homepage.filter', ['filter_id' => $filter->id])}}">{{$filter->section}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2 col-xs-6">
                        <select class="form-control" name="filter" onchange="location = this.value">
                            <option value="{{route('homepage')}}">Popular This Week</option>
                            <option value="{{route('homepage')}}">Popular This Month</option>
                            <option value="{{route('homepage')}}">Popular This Year</option>
                        </select>
                    </div>
                </div>
                <div class="offset-md-1 text-center">
                    <h3 class="text-danger">No Result Found</h3>
                </div>

            @endif
        </div>
    </div>
@endsection