@extends('front.layout.default_layout')
@section('content')
<main class="app-content">
    <div class="app-title">
        <div>
            <h1><i class="fa fa-tree"></i> Add Video</h1>
        </div>
        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
            <li class="breadcrumb-item"><a href="#">add Video</a></li>
        </ul>
    </div>

    @if (count($errors) > 0)
    <div class="alert alert-danger">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
        <ul>
            @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif
    <div class="flash-message">
        @foreach (['danger', 'warning', 'success', 'info'] as $msg)
        @if(Session::has('alert-' . $msg))

        <p class="alert alert-{{ $msg }}">{{ Session::get('alert-' . $msg) }}
            <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
        </p>
        @endif
        @endforeach
    </div>
    <div class="d-flex justify-content-center">
        <div class="col-sm-6">

            <form action="{{url('video')}}" id="video_form" method="post" enctype="multipart/form-data">
                @csrf
                @if(!empty($user_id))<input type="hidden" name="user_id" value="{{isset($user_id)?$user_id:''}}"  />
                @endif

                <div class="field-wrapper">
                    <div class="form-group input_div_height">
                        <label class="control-label"> Title<span class="text-danger">*</span></label>
                        <input type="text" class="form-control required" name="title"  placeholder="Title">

                    </div>
                    <div class="form-group input_div_height">
                        <label class="control-label">Youtube video Link<span class="text-danger">*</span></label>
                        <input type="text"  id="youtube_link" class="form-control required" placeholder="Youtube Link">
                        <input type="hidden" name="links" id="links" value="">
                        <span id="valid-url" class="red" style="color: red;"></span>
                    </div>
                </div>
                <div class="pd_l_20">
                <button class="btn btn-primary" id="submit" type="button"><i class="fa fa-fw fa-lg fa-check-circle"></i>Save</button>
                <div style="display: none;">
                <button class="btn btn-primary" id="submit-btn" type="submit"><i class="fa fa-fw fa-lg fa-check-circle"></i>Save</button>
                </div>
                </div>
            </form>
        </div>
    </div>
</main>
<script type="text/javascript">

    function getId(url) {
        var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
        var match = url.match(regExp);

        if (match && match[2].length == 11) {
            return match[2];
        } else {
            return false;
        }
    }

    var video_link;

    $("#submit").click(function(){

        var form = $("#video_form").valid();
        var myUrl = $('#youtube_link').val();
        if (getId(myUrl) !== false) {

        video_link = getId(myUrl);
        $('#links').val(video_link);
        $("#valid-url").empty();
        
        $("#submit-btn").trigger('click');

        } else {

          if(myUrl != '')
          {
            $("#valid-url").empty();
            $("#valid-url").append('Enter a valid youtube link.');
          }
          
        }
    });
</script>
@stop