@extends('layout.app')
@section('contents')
    <div class="row">
        <div class="col-12">
            <div class="row ">
                <div class=" col-md-8 col-xs-12">
                    <p  style="font-size: 16px !important;">Your Favourite Media</p>
                </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">
                                                @if(count($media) > 0)
                                                    @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">
                                                                    <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.remove', ['ref_link' => $content->ref_link])}}" title="Remove Media">
                                                                            <span class="text-lowercase"><i class="fa fa-remove" 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: grey" class="text-center">
                                                                            <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 rounded btn-outline-dark">
                                                                                        <span class="text-lowercase">{{$tag}}</span>
                                                                                    </label>
                                                                                @endforeach
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                            @endforeach
                                                @else
                                                    <div class="offset-md-3">
                                                        <p  class="text-danger" style="font-size: 20px !important;">Your Dont Have Any Pinned Media Yet</p>
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                </div>
            </section>
        </div>
    </div>
@endsection