@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-3 col-sm-3 offset-md-1">
                <div class="card" >
                    <div class="col-md-12 form-group mt-3 ">
                        <span class="mr-4" style="font-size: 14px;">{{Auth::user()->name}} </span>
                        <hr>
                    </div>
                    @if(Auth::user()->profile_image == null)
                         <img src="http://via.placeholder.com/300" class="card-img-top"  alt="...">
                    @else
                        <img src="{{asset('uploads/'.Auth::user()->profile_image)}}" class="card-img-top img-fluid" style="max-height: 250px; max-width: 250px"  alt="...">
                    @endif
                    <hr>
                </div>
            </div>
            <div class="col-md-7 col-sm-3">
                <div>
                    <hr style="margin-top: -1px"/>
                    <div class="col-md-12 form-group">
                        <a href="{{route('user.boards')}}"><span class="mr-4" style="font-size: 14px;">{{count($boards)}} Boards </span></a>
{{--
                        <span class="mr-4" style="font-size: 14px;">{{count($followers)}} Following</span>
--}}
                       <a href="{{route('user.feed')}}"> <span class="mr-4" style="font-size: 14px;">{{count($pins)}} Pins</span></a>
                        <a href="{{route('user.boards')}}"><span class="mr-4" style="font-size: 14px;">{{count($likes)}} Likes</span></a>
                        <a href="{{route('user.boards')}}"><span class="mr-4" style="font-size: 14px;">My Media</span></a>
                        <span class="mr-4" style="font-size: 14px;">{{count($followers)}}Follower</span>
                        <a href="{{route('user.view-board')}}"><span class="mr-4" style="font-size: 14px;">+ Create a New Board</span></a>
                        <a href="{{route('settings')}}"><span class="mr-4" style="font-size: 14px;">Edit Profile</span></a>
                    </div>
                    <hr/>
                </div>
                @if(count($boards) > 0)
                    <div class="col-12 row">
                        @foreach($boards as $main_key => $board)
                            <div class="col-md-6">
                                <div class="card" >
                                    <div class="col-md-12 form-group mt-3 ">
                                        <span class="mr-4" style="font-size: 14px;">{{$board->name}} </span>
                                    </div>
                                    <div class="row p-3">
                                        @foreach($board_details[$main_key] 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[$main_key]); $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>
                                    <div class="card-body">
                                        @if(count($board_details[$main_key]) < 4)
                                          <a href="{{route('user.add-media', ["board_id" => $board->id])}}" class="btn btn-outline-success text-lowercase mt-2">+ Add Media</a>
                                        @endif
                                        <a href="{{route('user.edit-board', ["board_id" => $board->id])}}" class="btn btn-outline-dark text-lowercase mt-2">Edit Board</a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <div class="mt-5">
                        {{$boards->links()}}
                    </div>
                @else
                    <div class="col-12 row">
                        <span class="mr-4" style="font-size: 20px; color: red"> No Board created yet </span>
                    </div>
                @endif
            </div>
        </div>
    </section>
@endsection