@extends('layouts.library')
@section('title', 'EndoCapture')
@section('style')
<link href="{{url('')}}/public/css/library/play.css" rel="stylesheet" type="text/css"/>

<style>
    .scoll-li{
        flex-wrap: nowrap;overflow-y: auto;
    }
    /* @media (max-width: 960px) {
        .scoll-li{
            flex-wrap: wrap;
        }
    } */
</style>
@endsection

@section('modal')
@endsection

@section('content')







<div class="row m-0">
    <div class="col-lg-7">
        {{-- <div class="carousel"> --}}
        <div>
            <div>
                {{-- <iframe src="//www.youtube.com/embed/1TYl3jhfEDA?rel=0" allowfullscreen frameborder="0" name="slider1"></iframe> --}}
                <video src="{{$vdo->vdo_url}}" width="100%" controls autoplay playsinline></video>
            </div>
            <span>
                <div class="row m-0 scoll-li">
                    @foreach ($groupvdo as $vd)
                    <div class="col-3">
                        <a href="{{url("library/$id?vdoid=$vd->vdo_id")}}">
                            {{-- {{$vd->vdo_url}}<br><br><br><br> --}}
                            <video src="{{$vd->vdo_url}}" width="100%"></video>
                        </a>
                    </div>
                    @endforeach

                </div>
                {{-- <a href="//www.youtube.com/embed/1TYl3jhfEDA?rel=0&autoplay=1" target="slider1"><img src="//img.youtube.com/vi/1TYl3jhfEDA/default.jpg"></a>
                <a href="//www.youtube.com/embed/xFa2_PVMeDQ?rel=0&autoplay=1" target="slider1"><img src="//img.youtube.com/vi/xFa2_PVMeDQ/default.jpg"></a>
                <a href="//www.youtube.com/embed/hSrOpTYKNMw?rel=0&autoplay=1" target="slider1"><img src="//img.youtube.com/vi/hSrOpTYKNMw/default.jpg"></a>
                <a href="//www.youtube.com/embed/WFhzzJjRncI?rel=0&autoplay=1" target="slider1"><img src="//img.youtube.com/vi/WFhzzJjRncI/default.jpg"></a> --}}
            </span>
        </div>
        {{--
        <div class="table-responsive">
            <table class="table">
              <tr>
                    @for ($i=1;$i<=10;$i++)
                    <td>
                        <img src="//img.youtube.com/vi/1TYl3jhfEDA/default.jpg" class="img-show">
                    </td>
                    @endfor
              </tr>
            </table>
          </div>
        --}}
    </div>
    <div class="col-lg-5">
        <h2>{{$group->vdogroup_name}}</h2>
            <p class="text-grey">{{$group->vdogroup_visit}} Views | Published on {{$group->vdogroup_date}}</p>
            <p class="text-grey">Physician : {{$group->user_prefix}}{{$group->user_firstname}} {{$group->user_lastname}}</p>
            <p class="text-grey">Description :</p>
            <p class="text-grey">
                {{$group->vdogroup_description}}
            </p>
            <br><br>
            <h3>Comment :</h3>
            <textarea name="" rows="6" class="form-control form-library"></textarea>
            <br>
            <div class="row m-0 mt-5 bt pb-5">
                <div class="col-3 text-grey text-center">
                    <i class="fas fa-user-circle icon-5x"></i>
                </div>
                <div class="col-9 text-grey">
                    <p>นพ.สดายุ ทองลอย</p>
                    It have another effect if I use this technic for long time operation.
                </div>
            </div>

            <div class="row m-0 mt-5 bt pb-5">
                <div class="col-3 text-grey text-center">
                    <i class="fas fa-user-circle icon-5x"></i>
                </div>
                <div class="col-9 text-grey">
                    <p>นพ.สุรัชณัฏฐ์ จิตรัตน์</p>
                    Great !!!
                </div>
            </div>
    </div>
</div>









@endsection

@section('script')

<script>




</script>
<script src="{{url('')}}/public/js/library/play.js"></script>

@endsection