@extends('layouts.admin.admin')

@section('content')
<script>
    function resetVideoModalData(){
       $("#image_preview").empty();
       $("#file_name").empty();
   //    $("#progress_div").hide();
       $('.operation').show();
       $("#exist_image_preview").hide();
    }
</script>
<div class="container-fluid">
     <hr />
     <input type="hidden" name="_token" id="_token" value="{{csrf_token()}}">

    <div class="row">
        <div class="col-sm-8 col-lg-8">
            <div class=" p-3 ">
                 <div class="d-flex justify-content-center">
                  <h5>All Video's</h5>
                </div>
            </div>
        </div>
        <div class="col-sm-2 col-lg-2">
            <div class=" p-3">
                <button type="button" id="delete_action"   class="btn btn-danger" style="float: right;" onclick="deleteVg();" disabled><i class="fa fa-trash fa-lg fa-fw"  aria-hidden="true"></i> Delete</button>

        </div>

        </div>
        <div class="col-sm-2 col-lg-2">
            <div class=" p-3">
                <button type="button" class="btn btn-primary" style="float: right;" onclick="resetVideoModalData();$('#video_upload_modal').modal('show');"><b><i class="fa fa-plus fa-lg fa-fw"></i> Upload New Video</b></button>
            </div>

        </div>
    </div>
    <hr />



    <div class="row row-cards">
        @forelse($videos as $video)
        {{dd($video);}}
        <div class="col-sm-6 col-lg-4">
            <div class="card text-">
                <div class="card-footer text-muted">
                    <div class="d-flex align-items-center px-2">
                        <div>
                            <div><button type="button" class="btn btn-red text-blue" onclick="updateVg('{{json_encode($video)}}');"><b><i class="fa fa-edit fa-lg fa-fw"></i>Edit</b></button>
                                {{-- <button type="button" class="btn btn-red text-red" onclick="deleteVg('{{json_encode($video)}}');"><b><i class="fa fa-trash fa-lg fa-fw"></i>Delete</b></button> --}}
                            </div>
                        </div>
                        <div class="ml-auto text-muted">
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" style="transform : scale(2); float:right;" onchange="selVideos(this,'{{$video->id}}');" >
                                <label class="form-check-label" for="inlineCheckbox1"></label>
                              </div>
                        </div>
                    </div>
                </div>
                   <div class="card-body">
                    <a href="javascript:void(0)" class="mb-3">
                        <div class="embed-responsive embed-responsive-16by9">
                            <iframe class="" src="https://www.youtube.com/embed/{{$video->link}}"></iframe>
                        </div>
                        </a>
                        <hr />
                        <!-- <p class="card-text"><b>{{$video->caption}}</b></p> -->
                        <h6 class="card-user_occupation d-block text-muted">{{$video->caption}}</h6>

                   </div>
                  <div class="card-footer text-muted">
                   <div class="d-flex align-items-center px-2">
                    <div>
                        <div>Cover Image</div>
                    </div>
                    <div class="ml-auto text-muted">
                    <img src="{{$video->cover_image}}" alt="Photo by Nathan Guerrero" class="rounded" height="100" width="100">

                    </div>
                </div>
               </div>
              </div>
        </div>
        @empty
        <div class="col-lg-12 col-sm-12 col-md-12" style="text-align: center">
            <div style="">
                <span>This section is Empty</span>
            </div>
        </div>
        @endforelse
        </div>
        <input type="file" name="fileToUpload" id="fileToUpload" style="display: none;" onchange="uploadOnChange('video')">
               <!----------------------------------------->
               <!-----------New Video Upload-------------->
               <!----------------------------------------->
                <div class="modal fade" id="video_upload_modal" role="dialog" data-keyboard="false" data-backdrop="static" >
                    <div class="modal-dialog modal-lg">
                <!-- Modal content-->
                    <div class="modal-content" >
                        <div class="modal-header">
                        <h4 class="modal-title" style="float: left;" id="modal_title">New Video Upload</h4>
                        </div>
                        <div class="modal-body">
                            <div class="row">

                                <div class="col-lg-12 col-md-12">

                                    <table class="table">
                                        <thead>
                                          <tr>
                                            <th scope="col"><label for="video_id"><b>Enter Youtube Video ID</b></label></th>
                                            <th scope="col"></th>
                                            <th scope="col"></th>
                                            <th scope="col"></th>
                                          </tr>
                                        </thead>
                                        <tbody>
                                          <tr>
                                            <th scope="row">
                                                <input type="text" class="form-control" placeholder="Video ID" name="video_id" id="video_id" style="width:100%">
                                                <input type="hidden" class="form-control" placeholder="" name="exist_id" id="exist_id" >
                                            </th>
                                            <!-- <td><button type="button" class="btn btn-outline-success">Verify</button></td> -->

                                          </tr>
                                          <tr>
                                         <th scope="row">
                                            <label for="video_caption"><b>Enter Video Caption</b></label>
                                            <input type="text" class="form-control" placeholder="Vido Caption in short" id="video_caption" name="video_caption" style="width:100%">
                                        <span id="caption_no_input" class="text-danger" style="display: none"><sup>Caption is required!</sup></span>
                                        </th>
                                        {{-- <td colspan="3"> <label for="video_id"><b>Youtube Video Preview</b></label>
                                            <div class="embed-responsive embed-responsive-16by9" id="iframe">

                                            <iframe class="" src="https://www.youtube.com/embed/{{$video->link}}"></iframe>
                                        </div></td> --}}
                                        <td></td>
                                      </tr>
                                        </tbody>
                                    </table>
                                </div>


                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <label for="cover_image"><b>Upload Cover Image *</b></label>
                                        <small style="color: rgba(255, 0, 0, 0.685)">( The image Resolution '380 x 500' pixels are allowed )</small>
                                        <span id="file_no_input" class="text-danger" style="display: none">Cover Image is required!</span>
                                        <button type="button" id="sel_img" style="float: right;" class="btn btn-primary ml-2"  onclick="document.getElementById('fileToUpload').click()">Select Cover Image</button>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="form-group" id="exist_image_preview" style="display: none">
                                        <div class="col-sm-12 col-lg-12">
                                            <div class="card p-3">
                                                <div class="d-flex align-items-center px-2">
                                                    <img src="" alt="" id="vid_cover_image" width="30%" height="30%">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group" id="image_preview">


                                    </div>
                                    <div id="progress_div" style="display:">
                                        <label class="d-block">Progress <span class="float-right" id="percent">0%</span></label>
                                <div class="progress progress-sm">
                             <div class="progress-bar" id="progress_bar" role="progressbar" aria-valuenow="77" aria-valuemin="0" aria-valuemax="100" style="width:0%;">
                        </div>
                     </div>
                    </div>
                 </div>
                </div>
              </div>
             <div class="modal-footer">
            {{-- <button type="button" class="btn btn-primary done" onclick="location.reload();">Done</button> --}}
            <button type="button"  class="btn btn-primary operation" onclick="uploadNow();">Start Upload</button>
          <button type="button" class="btn btn-default operation" data-dismiss="modal" onclick="clearData()">Cancel</button>
        </div>
      </div>
    </div>
    </div>
 <!----------------------------------------->
 <!-----------New Video Upload end----------->
 <!----------------------------------------->


    </div>

@endsection