@extends('layouts.admin')
@section('content')
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h1>Training Video</h1>
                    </div>
                    <div class="panel-body">
                      <div class="row">
                          <div class="col-md-4">
                              <div class="panel-heading text-center">
                                  <h4>Create Item</h4>
                              </div>
                              <form action="{{route('create.video')}}" method="post" id="training-video-form" class="needs-validation"  >
                                  @csrf
                                  <div class="form-row">
                                      <div class="form-group col-md-12">
                                          <label>Section Name</label>
                                          <input name="section_name" type="text" class="form-control" >
                                      </div>
                                  </div>
                                  <div class="form-row">
                                      <div class="form-group col-md-12">
                                          <label>Video Link</label>
                                          <input id="link" name="link" type="text" placeholder="e.g. https://vimeo.com/773528229" class="form-control link"   autocomplete="off"  >
                                      </div>
                                  </div>
                                  <div class="form-row">
                                      <div class="form-group col-md-12">
                                          <input class="form-check-input" type="checkbox" name="welcome_video_create"
                                                 value="1" id="welcome_video_create">
                                          <label class="form-check-label" data-toggle="tooltip" data-placement="right" title="">
                                              Set As Welcome Video
                                          </label>
                                      </div>
                                  </div>
                                  <div class="form-row">
                                      <div class="form-group col-md-12">
                                          <label>Status</label>
                                          <select name="status" class="form-control" >
                                              <option value="">Please Select</option>
                                              <option value="1" selected>Active</option>
                                              <option value="0">Inactive</option>
                                          </select>
                                      </div>
                                  </div>


                                  <div class="form-row">
                                      <div class="form-group pull-right" style="margin-right: 5px">
                                          @if(isShowContent('create.video'))
                                          <button id="submit-button" type="submit"  class="btn btn-md btn-info" >
                                              <i class="fa fa-save fa-lg"></i>&nbsp;
                                              <span>Save</span>
                                          </button>
                                          @endif
                                      </div>
                                  </div>

                              </form>
                          </div>
                          <div class="col-md-4">
                            <div class="panel-heading text-center">
                                <h4>Edit Item</h4>
                            </div>
                            <form action="{{route('update.video')}}" method="post" id="training-video-edit-form" class="needs-validation"  >
                                @csrf
                                <div class="form-row">
                                    <div class="form-group col-md-12">
                                        <label>Section Name</label>
                                        <select name="edit_section_id" id="section_id"
                                                class="form-control" >
                                            <option value="0">Select Section</option>
                                            @foreach ($videos as $video)
                                                <option value="{{$video->id}}">{{$video->section_name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="form-group col-md-12">
                                        <label>Name</label>
                                        <input name="edit_section_name" id="section-name"  type="text" class="form-control" disabled >
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="form-group col-md-12">
                                        <label>Video Link</label>
                                        <input  name="edit_link" type="text" placeholder="e.g. https://vimeo.com/773528229" class="form-control link"   autocomplete="off"  >
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="form-group col-md-12">
                                        <input class="form-check-input" type="checkbox" name="welcome_video_edit"
                                               value="1" id="welcome_video_edit">
                                        <label class="form-check-label" data-toggle="tooltip" data-placement="right" title="">
                                            Set As Welcome Video
                                        </label>
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="form-group col-md-12">
                                        <label>Status</label>
                                        <select name="edit_status" class="form-control" >
                                            <option value="">Please Select</option>
                                            <option value="1">Active</option>
                                            <option value="0">Inactive</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-row">
                                    <div class="form-group pull-right" style="margin-right: 5px">
                                        @if(isShowContent('update.video'))
                                        <button id="submit-button" type="submit" name="edit"  class="btn btn-md btn-info" >
                                            <i class="fa fa-save fa-lg"></i>&nbsp;
                                            <span>Save Change</span>
                                        </button>
                                        @endif
                                    </div>
                                </div>

                            </form>
                        </div>
                          <div class="col-md-4">
                            <div class="panel-heading text-center">
                                <h4>Delete Item</h4>
                            </div>
                            <form action="{{route('delete.video')}}" method="post" id="video-delete-from"  class="needs-validation">
                                @csrf
                                <div class="form-row">
                                    <div class="form-group col-md-12">
                                        <label>Section Name</label>
                                        <select name="delete_section_id"
                                                class="form-control" >
                                            <option value="0">Select Section</option>
                                            @foreach ($videos as $video)
                                                <option value="{{$video->id}}">{{$video->section_name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="form-group pull-right" style="margin-right: 5px">
                                        @if(isShowContent('delete.video'))
                                        <button id="submit-button" type="submit" value="delete" name="delete" class="btn btn-md btn-danger" >
                                            <i class="fa fa-delete-left fa-lg"></i>&nbsp;
                                            <span>Delete</span>
                                        </button>
                                        @endif
                                    </div>
                                </div>

                            </form>
                        </div>
                      </div>
                    </div>
                </div>
            </div>
        </div>
@endsection
@push('script')
    <script>
        $(document).ready(function() {
            common_helper.formValidate('#training-video-form',
                {'section_name':'required','link': 'required','status': 'required'},
                {
                    'section_name':{required: "Please enter section name"},
                    'link': {required: "Please enter valid link"},
                    'status':{required: "Please select status"},
                }
            );
            common_helper.formValidate('#video-delete-from',
                {'delete_section_id':'required'},
                {
                    'delete_section_id':{required: "Please select a section"},
                }
            );
            common_helper.formValidate('#training-video-edit-form',
                {'edit_section_name':'required','edit_link': 'required','edit_status': 'required'},
                {
                    'edit_section_name':{required: "Please select a section"},
                    'edit_link': {required: "Please enter valid link"},
                    'edit_status': {required: "Please select status"}
                })

        })

        $('#section_id').on('change', function(){
            let videos=[];
            let sectionid= $(this).val();
            videos=@php echo json_encode($videos);@endphp;
            if(sectionid>0) {
                const video = videos.find(x=>x.id===parseInt(sectionid));

                $('[name="edit_section_name"]').val(video.section_name);
                $('[name="edit_link"]').val(video.link);
                $('[name="edit_status"]').val(video.status);
                $('#welcome_video_edit').prop('checked',video.is_welcome_video);

            }
        });

    </script>
@endpush