@extends('backend.admin.index')
@section('body')

    <!-- Main Container -->
    <main id="main-container">

        <!-- Hero -->
        <div class="bg-body-light">
            <div class="content content-full">
                <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center">
                    <h1 class="flex-sm-fill font-size-h2 font-w400 mt-2 mb-0 mb-sm-2">{{$heading}}</h1>
                    <a href="{{url()->current().'/create'}}" class="btn btn-primary"><i class="fa fa-plus-circle"></i> Add New Video</a>
                </div>
            </div>
        </div>
        <!-- END Hero -->
        <!-- Page Content -->
        <div class="content">

        <!-- Full Table -->
            <div class="block block-rounded block-bordered">
                <div class="block-content">
                    <div class="table-responsive">
                        <table class="table table-md table-striped table-vcenter">
                            <thead>
                            <tr>
                                <th>SN</th>
                                <th>Video</th>
                                <th>Title</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($videos as $key=>$video)
                                <tr>
                                    <td>{{++$key}}</td>
                                    <td><a href="javascript:void(0)" data-toggle="modal" data-target="#featured_videos_{{$video->id}}" data-effect="mfp-zoom-in">View</a></td>
                                    <td>{{$video->video_title}}</td>
                                    <td>
                                        @if($video->status=='active')
                                            <button class="btn btn-success btn-sm">Active</button>
                                        @else
                                            <button class="btn btn-warning btn-sm">Pending</button>
                                        @endif
                                    </td>
                                    <td>
                                        <a href="{{url()->current().'/'.$video->id.'/edit'}}" class="btn btn-sm btn-primary" title="Edit">
                                            <i class="fa fa-pencil-alt"></i>
                                        </a>
                                        <a href="{{url()->current().'/'.$video->id.'/delete'}}" onclick="return confirm('Are you sure to delete this Record?')" type="button" class="btn btn-sm btn-danger" data-toggle="tooltip" title="Delete">
                                            <i class="fa fa-trash"></i>
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!-- END Full Table -->
        </div>
        <!-- END Page Content -->

    </main>
    <!-- END Main Container -->

    @foreach($videos as $video)
        <div class="modal fade" id="featured_videos_{{$video->id}}" tabindex="-1" role="dialog" aria-labelledby="modal-block-large" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <!--Content-->
                <div class="modal-content">

                    <!--Body-->
                    <div class="modal-body mb-0 p-0">

                        <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
                            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/{{$video->embed_code}}" allowfullscreen></iframe>
                        </div>

                    </div>

                    <!--Footer-->
                    <div class="modal-footer justify-content-center">
                        <span class="mr-4">Share on</span>
                        <a type="button" class="btn-floating btn-sm btn-fb"><i class="fab fa-facebook-f"></i></a>
                        <!--Twitter-->
                        <a type="button" class="btn-floating btn-sm btn-tw"><i class="fab fa-twitter"></i></a>
                        <!--Google +-->
                        <a type="button" class="btn-floating btn-sm btn-gplus"><i class="fab fa-google-plus-g"></i></a>
                        <!--Linkedin-->
                        <a type="button" class="btn-floating btn-sm btn-ins"><i class="fab fa-linkedin-in"></i></a>

                        <button type="button" class="btn btn-outline-primary btn-rounded btn-md ml-4" data-dismiss="modal">Close</button>

                    </div>

                </div>
                <!--/.Content-->

            </div>
        </div>
    @endforeach

@endsection
@section('script')
@endsection