@extends('layouts.backend')
@section('css_after')
    <style>
        .progress { position:relative; width:100%; }
        .bar { background-color: #008000; width:0%; height:20px; }
        .percent { position:absolute; display:inline-block; left:50%; color: #7F98B2;}
    </style>
@endsection
@section('js_after')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.js"></script>
    <script type="text/javascript">
        $(function() {
            $(document).ready(function()
            {
                $("#video-type").change(function() {
                    var video_type = $('option:selected', this).val();
                   if (video_type==1){
                       $('.paid-video-container').show();
                       $('.free-video-container').hide();
                   }else {
                       $('.paid-video-container').hide();
                       $('.free-video-container').show();
                   }
                });

                var bar = $('.bar');
                var percent = $('.percent');

                $('form').ajaxForm({
                    beforeSend: function() {
                        var percentVal = '0%';
                        bar.width(percentVal)
                        percent.html(percentVal);
                    },
                    uploadProgress: function(event, position, total, percentComplete) {
                        var percentVal = percentComplete + '%';
                        bar.width(percentVal)
                        percent.html(percentVal);
                    },
                    success: function(data) {
                        window.location.reload();
                    },
                    error: function (request, status, error) {
                        bar.width('0%');
                        percent.html('0%');
                        json = $.parseJSON(request.responseText);
                        $('.ajax-error-message').text('');
                        $.each(json.errors, function(key, value){
                            $('#'+key+'-message').text(value);
                        });
                    }
                });
            });
        });
    </script>

    @if(isset($video_details['is_payable']) && $video_details['is_payable']==1 )
        <script>
            $('.paid-video-container').show();
            $('.free-video-container').hide();
        </script>
    @else
        <script>
            $('.paid-video-container').hide();
            $('.free-video-container').show();
        </script>
    @endif
@endsection
@section('content')
    <div class="content">
        <div class="row">

            <div class="col-lg-12">
                <div class="block block-themed">
                    <div class="block-header">
                        <h3 class="block-title">EDIT VIDEO</h3>
                        <div class="block-options">
                            <a href="{{route('webadmin.videoIndex')}}" class="btn btn-alt-secondary mr-5 mb-5">
                                <i class="fa fa-list-ul mr-5"></i>All List
                            </a>
                        </div>
                    </div>
                    <div class="block-content">
                        <form action="{{route('webadmin.videoUpdate',['id'=> $video_details['id']])}}" class="offset-1" method="post" enctype="multipart/form-data">
                            @csrf
                            <div class="form-group row">
                                <label class="col-12 col-form-label">Title<span class="text-danger">*</span></label>
                                <div class="col-6">
                                    <input type="text" class="form-control {{ $errors->has('title') ? ' is-invalid' : '' }}" value="{{old('title',isset($video_details['title'])?$video_details['title']:'')}}" name="title" autocomplete="off">

                                    <div class="text-danger ajax-error-message" id="title-message" role="alert">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-12 col-form-label">Type</label>
                                <div class="col-6">
                                    <select class="form-control" name="video_type" id="video-type">
                                        <option value="0" {{(isset($video_details['is_payable']) && $video_details['is_payable']==0)?'selected':''}} >Free Video</option>
                                        <option value="1" {{(isset($video_details['is_payable']) && $video_details['is_payable']==1)?'selected':''}} >Paid Video</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-12 col-form-label">Description<span class="text-danger">*</span></label>
                                <div class="col-6">
                                    <textarea class="form-control" name="description" autocomplete="off">{{isset($video_details['description'])?$video_details['description']:''}}</textarea>
                                    <div class="text-danger ajax-error-message" id="description-message" role="alert"></div>
                                </div>
                            </div>
                            <div class="form-group row paid-video-container">
                                <label class="col-12">Video Cover Image</label>
                                <div class="col-6">
                                    <div class="custom-file ">
                                        <input type="file" class="custom-file-input js-custom-file-input-enabled {{ $errors->has('video_cover_image') ? ' is-invalid' : '' }}" id="custom-file-input-cover-image" name="video_cover_image" data-toggle="custom-file-input-cover-image">
                                        <label class="custom-file-label" for="custom-file-input-cover-image">Choose file</label>
                                        <div class="text-danger ajax-error-message" id="video_cover_image-message" role="alert"></div>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <img src="{{(isset($video_details['video_cover_image']) && $video_details['video_cover_image']!='')?asset('uploads/videos/cover/thumbnail/'.$video_details['video_cover_image']):''}}">
                                </div>
                            </div>
                            <div class="form-group row paid-video-container">
                                <label class="col-12">Video</label>
                                <div class="col-6">
                                    <div class="custom-file ">
                                        <input type="file" class="custom-file-input js-custom-file-input-enabled {{ $errors->has('video') ? ' is-invalid' : '' }}" id="example-file-input-custom" name="video" data-toggle="custom-file-input">
                                        <label class="custom-file-label" for="example-file-input-custom">Choose file</label>
                                        <div class="text-danger ajax-error-message" id="video-message" role="alert"></div>
                                        <p></p>
                                        <div class="progress">
                                            <div class="bar"></div >
                                            <div class="percent">0%</div >
                                        </div>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <video width="200" controls>
                                        <source src="{{(isset($video_details['video']) && $video_details['video']!='')?asset('uploads/videos/'.$video_details['video']):''}}" type="video/mp4">
                                        Your browser does not support HTML5 video.
                                    </video>
                                </div>
                            </div>
                            <div class="form-group row paid-video-container">
                                <label class="col-12 col-form-label">Price<span class="text-danger">*</span></label>
                                <div class="col-6">
                                    <input type="text" class="form-control {{ $errors->has('price') ? ' is-invalid' : '' }}" value="{{old('price',isset($video_details['price'])?$video_details['price']:'')}}" name="price" autocomplete="off">
                                    <div class="text-danger ajax-error-message" id="price-message" role="alert"></div>
                                </div>
                            </div>
                            <div class="form-group row free-video-container">
                                <label class="col-12 col-form-label">Youtube Video ID<span class="text-danger">*</span></label>
                                <div class="col-6">
                                    <input type="text" class="form-control" name="youtube_url" autocomplete="off" value="{{old('price',isset($video_details['youtube_url'])?$video_details['youtube_url']:'')}}" />
                                    <div class="text-danger ajax-error-message" id="youtube_url-message" role="alert"></div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-12">Status</label>
                                <div class="col-12">
                                    <div class="custom-control custom-checkbox custom-control-inline mb-5">
                                        <input class="custom-control-input" type="checkbox" name="status" id="status" value="1" {{(isset($video_details['is_active']) && $video_details['is_active']==1)?'checked':''}} >
                                        <label class="custom-control-label" for="status">Is Active ?</label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <button type="submit" class="btn btn-alt-primary">Update</button>
                            </div>

                        </form>
                    </div>
                </div>
            </div>

        </div>
    </div>

@endsection