@php
    // echo"test"; tester($userDetails[0]['profile']);
@endphp
<ul>
    @foreach($userDetails as $userDetail)
        @php
            $user = $userDetail['user'];
            $profile = $userDetail['profile'];
            $skills = $userDetail['skills'];
            // tester($profile);
        @endphp
        <li>

            @if(!empty($profile['photo']))
            <div class="profile-thumb-items" id="profile-thumb-items" data-toggle="modal" data-target="#addskills{{$user->id}}">

                <div class="d-inline-flex full-width">
                    <div class="profile-thumb-img">
                        @if(!empty($profile['photo']))
                            <img src="{{Voyager::image( $profile['photo']) }}"  data-toggle="modal" data-target="#uploadphoto{{$user->id}}" />

                        @else
                            <img class="fa fa-user-circle fa-4x text-muted" />
                        @endif
                    </div>
                    <div class="profile-thumb-info">
                        <div class="name">{{$user->name}}<span>{{ $profile ? emp_ranking_display($profile['total_exp']) : ""}}</span></div>
                        <div class="desc">Speak: <span>English</span></div>
                        <div class="desc">Rating: <span>{{ $profile ? emp_ranking_display($profile['total_exp']) : ""}}</span></div>
                        <div class="desc">Years: <span>{{ $profile ? $profile['total_exp'] : ""}}</span></div>
                        <div class="desc">Status: <span>Available</span></div>
                    </div>
                </div>
                <div class="profile-thumb-skills">
                    @foreach($skills->take(8) as $skill)
                        <span>{{ $skill->skill }}</span>
                    @endforeach

                </div>
                <div class="profile-thumb-options">
                    <div class="btn btn-group btn-group-justified">
                        {{--<button class="btn btn-info">Option 1</button>--}}
                        {{--<button class="btn btn-info">Option 2</button>--}}
                    </div>
                </div>
            </div>
                @endif
        </li>

        <div class="modal fade" id="addskills{{$user->id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <form action="{{ route('skill_store')}}" method="post">
                {{ csrf_field() }}
                <div class="modal-dialog modal-lg" role="document" style="max-width: 1200px !important;">
                    <div class="modal-content">
                        <div class="modal-header profile-cv-modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">{{$user->name}}</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body addskillsbody profile-cv-modal-body">
                            @component('partials.view_profile' , [
                                'user' => $user,
                                'profile' => $profile,
                                'skills' => $skills,
                                'milestones' => [],
                                'strengths' => [],
                                'educations'=> [],
                                'works' => []
                                ])
                            @endcomponent
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            {{--<button type="submit" class="btn btn-primary">Save changes</button>--}}
                        </div>
                    </div>
                </div>
            </form>
        </div>


        <div class="modal fade" id="playvideo{{$user->id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <form action="{{ route('skill_store')}}" method="post">
                {{ csrf_field() }}
                <div class="modal-dialog modal-lg" role="document" style="max-width: 1200px !important;">
                    <div class="modal-content">
                        <div class="modal-header profile-cv-modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">{{$user->name}}</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body addskillsbody profile-cv-modal-body">
                            {{--@component('partials.view_profile' , [--}}
                                {{--'user' => $user,--}}
                                {{--'profile' => $profile,--}}
                                {{--'skills' => $skills,--}}
                                {{--'milestones' => [],--}}
                                {{--'strengths' => [],--}}
                                {{--'educations'=> [],--}}
                                {{--'works' => []--}}
                                {{--])--}}
                            {{--@endcomponent--}}
                            <video id='playvideo' controls="true" preload='true'>
                                @if ($profile)
                                    @if(!empty($profile->video))
                                        <source id='mp4' src="{{'/videos/'.$user->id.'/'.$profile->video}}" type='video/mp4'  />
                                    @endif
                                @endif
                                {{--<source id='webm' src="http://media.w3.org/2010/05/sintel/trailer.webm" type='video/webm'/>--}}
                                {{--<source id='ogv' src="http://media.w3.org/2010/05/sintel/trailer.ogv" type='video/ogg'/>--}}
                                {{--<track kind="subtitles" label="English subtitles" src="subtitles_en.vtt" srclang="en" default></track>--}}
                                {{--<track kind="subtitles" label="Deutsche Untertitel" src="subtitles_de.vtt" srclang="de"></track>--}}
                                <p>Your user agent does not support the HTML5 Video element.</p>
                            </video>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            {{--<button type="submit" class="btn btn-primary">Save changes</button>--}}
                        </div>
                    </div>
                </div>
            </form>
        </div>

    @endforeach

</ul>