@extends('layouts.frontend')

@section('content')
<div class="banner">
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center">
                <h2 class="page-title">Training Videos</h2>
            </div>
        </div>
    </div>
    <a href="#" class="btn-chat">Chat With Us</a>
</div>

<section class="main-sec">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="rt-pnl">
                    <!-- <div class="VideoNav">
                        <ul>
                            <li><a href="#">View Latest</a></li>
                            <li><a href="#">Most Viewed</a></li>
                        </ul>
                    </div> -->
                    <div class="row mar-top">
                            <h3 style="margin-left: 43%; margin-top: 100px;margin-bottom: 150px;">Coming Soon</h3>
                        {{--@if(isset($videos))
                            @foreach($videos as $video)
                                <div class="col-md-4">
                                    <div class="vid-bx">
                                        <video width="100%" controls="" controlsList="nodownload">
                                            <source src="{{url('uploads/videos/',$video->video)}}" type="video/mp4">
                                            <source src="{{url('uploads/videos/',$video->video)}}" type="video/ogg">
                                            
                                        </video>
                                        <div class="video-description">
                                            <h3>{{$video->title}}</h3>
                                            <!-- <p>This video explains of Importance of Planning for Retirement.</p> -->
                                            <a href="#" class="btn btn-primary btn-round mt-2" data-toggle="modal" data-target="#videodetailModal{{$video->id}}">Details of this video</a>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @endif--}}

                        
                        



                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="btm-shape-prt">
        <img class="img-fluid" src="{{asset('f/images/shape2.png')}}" alt="">
    </div>
</section>


@if(isset($videos))
    @foreach($videos as $video)
        <!-- Video Details Modal -->
        <div class="modal fade" id="videodetailModal{{$video->id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">DETAILS</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>
                    {{$video->description}}
                    </p>
                </div>
                </div>
            </div>
        </div>
    @endforeach
@endif

@endsection