@extends('layout.app')
@section('contents')
    <section class="register-page section-b-space" style="padding-top: 1px !important;">
        <div class="row col-12">
            <div class="col-md-4 col-lg-3 offset-lg-1">
                <div class="card" >
                    <div class="col-md-12 col-sm-12 row form-group mt-3 ">
                        <div class="col-md-6 col-sm-6 form-group ">
                            <span style="font-size: 10px">{{$board->name}} </span>
                        </div>
                        <div class="col-md-5 col-sm-6 form-group ">
                            <button class="btn btn-outline-danger rounded btn-sm"><span style="font-size: 10px">{{count($total_followers)}} Followers</span></button>
                        </div>
                    </div>
                    <hr style="margin-top: -10px !important;"/>
                    <div class="row p-3">
                        @foreach($board_details as $details)
                            <div class="col-md-6 mb-4">
                                @if($details->media->upload->section_id == 3)
                                    <img src="{{asset('uploads/'.$details->media->ref_link)}}" class="card-img-top" style="height: 80px" alt="...">
                                @else
                                    <video
                                        src="{{asset('uploads/'.$details->media->ref_link)}}"
                                        class="img-fluid blur-up lazyload" style="width: 100% !important;" autoplay muted alt="">
                                    </video>
                                @endif
                            </div>
                        @endforeach
                        @for($i = count($board_details); $i < 4 ; $i++)
                            <div class="col-md-6 mb-4">
                                <img src="http://via.placeholder.com/300" class="card-img-top" style="height: 80px" alt="...">
                            </div>
                        @endfor
                    </div>
                    @if(Auth::check())
                        @if(!$status)
                            <a href="{{route('follow.user.board', ['board_name' => $board->name])}}" class="btn btn-sm rounded btn-outline-success">Follow</a>
                        @else
                            <a href="{{route('unfollow.user.board', ['board_name' => $board->name])}}" class="btn btn-sm rounded btn-outline-danger">UnFollow</a>
                        @endif
                    @else
                        <a href="{{route('follow.user.board', ['board_name' => $board->name])}}" class="btn btn-sm rounded btn-outline-success">Follow</a>
                    @endif
                    <div class="row ml-2 mt-2">
                        <div class="col-md-12 col-lg-3">
                            @if($board->user->profile_image == null)
                                <img src="http://via.placeholder.com/300" class="card-img-top" style="height: 50px; width: 50px" alt="...">
                            @else
                                <img src="{{asset('uploads/'.$board->user->profile_image)}}" class="card-img-top" style="height: 50px; width: 50px" alt="...">
                            @endif
                        </div>
                        <div class="col-md-12 col-lg-6">
                            <h6 class="ml-2 ">Created By: <strong>{{$board->user->name}}</strong></h6>
                        </div>
                    </div>
                    <hr>
                    <div class="ml-3">
                        <h6  style="color: black">Followed By</h6>
                        @foreach($followers as $follower)
                            <div class="row mt-2 mb-2">
                                <div class="col-md-12 col-lg-3">
                                    @if($follower->user->profile_image == null)
                                        <img src="http://via.placeholder.com/300" class="card-img-top" style="height: 50px; width: 50px" alt="...">
                                    @else
                                        <img src="{{asset('uploads/'.$follower->user->profile_image)}}" class="card-img-top" style="height: 50px; width: 50px" alt="...">
                                    @endif
                                </div>
                                <div class="col-md-12 col-lg-6">
                                    <h6 class="ml-2 "> <strong>{{$follower->user->name}}</strong></h6>
                                </div>
                            </div>
                        @endforeach
                        <h6 class="ml-2" style="color: black">{{count($total_followers)}} more followers</h6>
                    </div>
                </div>
            </div>
            <div class="col-md-8 col-lg-7">
                <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 small-text-on-mobile ">{{$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 small-text-on-mobile">{{$tag}}</span>
                                                                                    </label>
                                                                                @endforeach
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </section>
@endsection