@extends('layouts.admin.admin')

@section('content')
<script>
        

</script>
<div class="container-fluid">
    <input type="hidden" name="_token" id="_token" value="{{csrf_token()}}">
    <input type="hidden" name="page_type" id="page_type" value="add">

    <button type="button" style="display:none"
                          onclick="addYoutubeLinkToFinalObject('{{($videos)}}')"
                          id="addYoutubeLinkToFinalObjectButton">click-me</button>





    <div class="row layout-top-spacing">

        <div id="tableHover" class="col-lg-12 col-12 layout-spacing">
            <div class="statbox widget box box-shadow">

                <div class="widget-header">
                    <div class="row">
                        <div class="col-sm-10 col-lg-10 ">
                            <div class=" p-3 ">
                                <div class="d-flex justify-content-center">
                                    <h5> <i class="fa fa-youtube-play fa-lg fa-fw "></i> All Videos</h5>
                                </div>
                            </div>
                        </div>
                        <!-- <div class="col-sm-1 col-lg-1">
                            <div class=" p-1">
                            <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>
                                </button>    
                            </div>
                        </div> -->
                        <div class="col-sm-2 col-lg-2">
                            <div class=" p-3">

                                <button type="button" class="btn btn-sm btn-primary" style="float: right;"
                                    onclick="resetVideoModalData();"><b><i
                                            class="fa fa-plus fa-lg fa-fw"></i> New</b></button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="widget-content widget-content-area">
                    <div class="table-responsive">
                        @include('layouts.admin.alerts')

                        @if (count($videos)>0)
                        <table class="table table-bordered table-hover mb-4">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Album</th>
                                    <th>Video Url</th>
                                    <th colspan="2">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($videos as $key => $video)
                                <tr>
                                    <!-- <td>  <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></td> -->
                                    <td>{{ $key+1 }}</td>

                                    <td>{{ $video->caption }}</td>
                                    <td><iframe class=""
                                            src="https://www.youtube.com/embed/{{$video->video_id}}"></iframe>
                                    </td>
                                    <td>
                                        <button type="button" class="btn btn-outline-warning btn-sm"
                                            onclick="updateVg('{{json_encode($video)}}');"><b><i
                                                    class="fa fa-edit fa-lg fa-fw"></i></b> Edit</button>
                                    </td>
                                    <td>
                                      <form action="{{ route('video.delete',$video->id) }}" id="delete-entry_{{$video->id}}" method="post" style="">
                                            @csrf                                           
                                            
                                            <button type="submit" class="btn btn-outline-danger btn-sm" onclick="deleteEntry(event,'delete-entry_{{$video->id}}');"><b><i
                                                        class="fa fa-trash fa-lg fa-fw" ></i></b> Delete</button>
                                     </form> 

                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                        @else
                          <table class="table table-bordered table-hover mb-4">
                            <tbody>
                                <tr>                                 
                                    <td colspan="5"> No Video Added Yet</td>
                                </tr>
                            </tbody>
                        </table>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <input type="file" name="fileToUpload" id="fileToUpload" style="display: none;" onchange="uploadOnChange()"
        accept=".jpg,.jpeg">
    <!----------------------------------------->
    <!-----------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 id="video_tbody_tr">
                                        <td style="width:80%">
                                            <label for="video_id"><b>Enter Youtube Id</b></label>
                                            <input type="text" class="form-control video_modal_inputs" placeholder="Enter Youtube Id"
                                                name="video_id" id="video_id" style="width:100%" onkeyup="makeVerifiedBtnVisible()">
                                            <input type="hidden" class="form-control video_modal_inputs" placeholder="" name="exist_id"
                                                id="exist_id">
                                            <input type="hidden" class="form-control video_modal_inputs" placeholder="" name="existing_video_id"
                                                id="existing_video_id">
                                              
                                                <span id="error_video_id" class="text-danger error_span" style="display:none"></span>                                           
                                        </td>
                                        <td style="width:10%">

                                            <span id="emptySpan" style="margin-top:20px;"></span> 
                                            <button type="button" class="btn btn-outline-success verifyYoutubeLinkButton"  id="verifyYoutubeLinkInsertedButton" style="margin-top:20px;display:none"  onclick="validVideoId()">Verify</button>                            

                                        </td>
                                        <td style="width:10%">
                                             <button type="button" class="btn btn-sm btn-outline-danger" onclick="clearYoutubeIdField()" id="delete_video_id" style="margin-top:20px;display:none"><i class="fa fa-trash fa-xl fa-fw"> </i></button> 

                                        </td>
                                      
                                      
                                       
                                    </tr>



                                    <tr>
                                        <td scope="row" style="width:80%">
                                            <label for="video_caption"><b>Enter Video Caption</b></label>
                                            <input type="text" class="form-control video_modal_inputs" placeholder="Video Caption"
                                                id="video_caption" name="video_caption" style="width:100%">
                                            <span id="error_video_caption" class="text-danger error_span"
                                                style="display: none"></span>
                                        </td>
                                        <td style="width:10%">

                                        </td>
                                        <td style="width:10%">
                                        </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:#ffeb3b">( The image Resolution '380 x 500' pixels
                                    are allowed )</small>
                                <span id="file_no_input" class="text-danger error_span" 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-4 col-sm-4 col-md-4 col-lg-4">
                                    <div class="card" style='border:1px solid;margin-top:5px;margin-bottom:5px;' >
                                            <img src="" alt="" id="vid_cover_image" style="height:100%;width=100%" class="center-block">
                                    </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-success operation" onclick="validateVideoModal();">Start Upload</button>
                    <button type="button" class="btn btn-danger operation" data-dismiss="modal"
                        onclick="resetVideoModalData()">Cancel</button>
                </div>
            </div>
        </div>
    </div>
    <!----------------------------------------->
    <!-----------New Video Upload end----------->
    <!----------------------------------------->


</div>

@endsection