@extends('admin.layout')
@section('custom-style')
    <style>
        .alert{
            padding: 2px 10px;
        }


        .files input {
            outline: 2px dashed #92b0b3;
            outline-offset: -10px;
            -webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
            transition: outline-offset .15s ease-in-out, background-color .15s linear;
            padding: 120px 0px 85px 42%;
            text-align: center !important;
            margin: 0;
            width: 100% !important;
        }
        .files input:focus{     outline: 2px dashed #92b0b3;  outline-offset: -10px;
            -webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
            transition: outline-offset .15s ease-in-out, background-color .15s linear; border:1px solid #92b0b3;
        }
        .files{ position:relative}
        .files:after {  pointer-events: none;
            position: absolute;
            top: 60px;
            left: 0;
            width: 50px;
            right: 0;
            height: 56px;
            content: "";
            background-image: url(https://image.flaticon.com/icons/png/128/109/109612.png);
            display: block;
            margin: 0 auto;
            background-size: 100%;
            background-repeat: no-repeat;
        }
        .files:before {
            position: absolute;
            bottom: 10px;
            left: 0;  pointer-events: none;
            width: 100%;
            right: 0;
            height: 57px;
            content: " or drag it here. ";
            display: block;
            margin: 0 auto;
            padding-top:10px;
            color: #2ea591;
            font-weight: 600;
            text-transform: capitalize;
            text-align: center;
        }


        /*for video process*/
        .progress {border: 1px solid #7F98B2;  }
        #go-back-button
        {
            display:none;
        }
        #ajax-error
        {
            display: none;
        }
        /*for video process end*/

    </style>

@endsection
@section('content')
    <section class="content-header">
        <h1>
            Videos
        </h1>
        <ol class="breadcrumb">
            <li><a><i class="fa fa-video-camera"></i> Trailer</a></li>
            <li class="active">Upload</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <!-- Info boxes -->
        <div class="row">
            <div class="col-md-12">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">Upload Trailer for <b>{{$video->title." - ".$video->sub_title}}</b></h3>
                    </div>


                    <div id="ajax-error">

                    </div>

                    <!-- /.box-header -->
                    <!-- form start -->
                    <form role="form" method="post" enctype="multipart/form-data">
                        {{csrf_field()}}
                        <div class="box-body">
                            <div class="row">

                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <div class="form-group files">
                                            <input type="file" name="trailer" id="poster" class="form-control" required>
                                            <div class="progress progress-md active">
                                                <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar">
                                                    <span class="percent">0%</span>
                                                </div>
                                            </div>

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

                            </div>
                        </div>
                        <!-- /.box-body -->
                        <div class="box-footer">
                            @if(isset($video->trailer_path))
                                <p>
                                    <b>Note: </b>
                                    Previous trailer will be change if you upload new video.
                                </p>
                            @endif
                            <button type="submit" id="video-submit-button" class="btn btn-primary" style="width: 100%;">Submit</button>
                            <a id="go-back-button" class="btn btn-info" style="width: 100%;">
                                Please Wait...<i class="fa fa-refresh fa-spin"></i>
                            </a>


                        </div>
                    </form>

                </div>
            </div>
        </div>
        <!-- /.row -->
    </section>
@endsection

@section('custom-scripts')
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.js"></script>
    <script type="text/javascript">
        var SITEURL = "{{URL('/')}}";
        $(function() {
            $(document).ready(function()
            {
                var bar = $('.progress-bar');
                var percent = $('.percent');
                var videoButton = $('#video-submit-button');
                var goBackButton = $('#go-back-button');
                $('form').ajaxForm({
                    beforeSend: function() {
                        var percentVal = '0%';
                        bar.width(percentVal)
                        percent.html(percentVal);
                        videoButton.css('display', 'none');
                        goBackButton.css('display', 'block');
                    },
                    uploadProgress: function(event, position, total, percentComplete) {
                        var percentVal = percentComplete + '%';
                        bar.width(percentVal)
                        percent.html(percentVal);
                    },
                    error: function(res){
                        if( res.status === 422 ) {
                            console.log(res);
                            bar.css('display', 'none');
                            $('#ajax-error').css('display', 'block');
                            var error = ((JSON.parse(res.responseText)).errors)['trailer'];
                            videoButton.css('display', 'block');
                            goBackButton.css('display', 'none');
                            $('#ajax-error').append('<li class="alert alert-danger">'+error+'</li>');
                        }
                    },
                    success: function (res) {
                        console.log(res);
                        goBackButton.html('Trailer Uploaded Successfully. It will be reviewed and pushed live after approval. Approval process might take up to 72hrs. Go Back');
                        goBackButton.removeClass('btn-info');
                        goBackButton.addClass('btn-success');
                        goBackButton.attr('href', "{{route('admin.allVideos')}}");
                    }
                });
            });
        });
    </script>
@endsection