@extends('layouts.admin')
@section('content')
    <div class="row">
        <div class="col-md-12 grid-margin">
            <div class="row">
                <div class="col-12 grid-margin stretch-card">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">New Video</h4>
                            <form class="forms-sample form-row" action="{{ route('admin.video.store') }}" method="POST" id="video-form" enctype="multipart/form-data">
                                @csrf
                                <div class="form-group col-12 title">
                                    <label for="title">Title</label>
                                    <input type="hidden" id="length" placeholder="length" name="length">
                                    <select class="form-control" name="title_id" id="title_id">
                                        <option value="">Title</option>
                                        @if ($title)
                                            @foreach ($title as $item)
                                                <option value="{{ $item->id }}">{{ $item->title }}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>

                                <div class="form-group col-4 mov d-none">
                                    <label for="season_no">Season No.</label>
                                    <select class="form-control" name="season_no" id="season_no">
                                        <option value="">Season No</option>
                                    </select>
                                </div>

                                <div class="form-group col-4 mov d-none">
                                    <label for="episode_no">Episode No.</label>
                                    <select class="form-control" name="season_id" id="season_id">
                                        <option value="">Episode No</option>
                                    </select>
                                </div>

                                <div class="col-6">
                                    {{-- <div class="form-group">
                                        <label>Trailer</label>
                                        <input type="file" name="trailer" class="dropify trailer" id="trailer-container" accept="video/*">
                                    </div> --}}
                                    <div class="form-group">
                                        <div id="upload-container">
                                            <label>Trailer</label>
                                            <input type="file" name="trailer" class="dropify trailer" id="trailer" accept="video/*">
                                        </div>
                                        <div  style="display: none" class="progress1 mt-3" style="height: 25px">
                                            <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%; height: 100%">75%</div>
                                        </div>
                                    </div>
                                    {{-- <div class="text-center">OR</div>
                                    <div class="form-group">
                                        <label>Trailer Link</label> --}}
                                        <input type="hidden" class="form-control trailer" id="trailer_link" placeholder="Trailer link" name="trailer_link">
                                    {{-- </div> --}}
                                </div>

                                <div class="col-6">
                                    {{-- <div class="form-group">
                                        <label>Movie</label>
                                        <input type="file" name="movie" class="dropify movie" id="movie-container" accept="image/*">
                                    </div> --}}
                                    <div class="form-group">
                                        <div id="upload-container">
                                            <label>Movie</label>
                                            <input type="file" name="trailer" class="dropify movie" id="movie" accept="video/*">
                                        </div>
                                        <div  style="display: none" class="progress2 mt-3" style="height: 25px">
                                            <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%; height: 100%">75%</div>
                                        </div>
                                    </div>
                                    {{-- <div class="text-center">OR</div>
                                    <div class="form-group">
                                        <label>Movie Link</label> --}}
                                        <input type="hidden" class="form-control movie" id="movie_link" placeholder="movie link" name="movie_link">
                                    {{-- </div> --}}
                                </div>

                                <div class="col-12 text-center">
                                    <button type="submit" class="btn btn-primary mr-2">Submit</button>
                                    <a href="{{ route('admin.video.index') }}" class="btn btn-warning">Cancel</a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/resumable.js/1.0.3/resumable.min.js" integrity="sha512-OmtdY/NUD+0FF4ebU+B5sszC7gAomj26TfyUUq6191kbbtBZx0RJNqcpGg5mouTvUh7NI0cbU9PStfRl8uE/rw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script type="text/javascript">
        let trailer = $('#trailer');
        let resumable = new Resumable({
            target: '{{ route('admin.video.large') }}',
            query:{_token:'{{ csrf_token() }}'},
            fileType: ['mp4'],
            chunkSize: 1*1024*1024,
            headers: {
                'Accept' : 'application/json'
            },
            testChunks: false,
            throttleProgressCallbacks: 1,
        });
        resumable.assignBrowse(trailer[0]);

        resumable.on('fileAdded', function (file) {
            showProgress();
            resumable.upload();
        });

        resumable.on('fileProgress', function (file) {
            updateProgress(Math.floor(file.progress() * 100));
        });

        resumable.on('fileSuccess', function (file, response) {
            progress.find('.progress-bar').addClass('bg-success');
            $('#trailer_link').val(response);
            $("#trailer").attr("data-default-file", response);
            $('.dropify').dropify();
            $('.progress1').hide();
        });

        resumable.on('fileError', function (file, response) {
            alert('file uploading error.')
        });

        let progress = $('.progress1');
        function showProgress() {
            progress.find('.progress-bar').css('width', '0%');
            progress.find('.progress-bar').html('0%');
            progress.find('.progress-bar').removeClass('bg-success');
            progress.show();
        }

        function updateProgress(value) {
            progress.find('.progress-bar').css('width', `${value}%`)
            progress.find('.progress-bar').html(`${value}%`)
        }

    </script>
    <script type="text/javascript">
        let movie = $('#movie');
        let resumable2 = new Resumable({
            target: '{{ route('admin.video.large') }}',
            query:{_token:'{{ csrf_token() }}'},// CSRF token
            fileType: ['mp4'],
            chunkSize: 1*1024*1024, // default is 1*1024*1024, this should be less than your maximum limit in php.ini
            headers: {
                'Accept' : 'application/json'
            },
            testChunks: false,
            throttleProgressCallbacks: 1,
        });
        resumable2.assignBrowse(movie[0]);

        resumable2.on('fileAdded', function (file) { // trigger when file picked
            showProgress2();
            resumable2.upload() // to actually start uploading.
        });

        resumable2.on('fileProgress', function (file) { // trigger when file progress update
            updateProgress2(Math.floor(file.progress() * 100));
        });

        resumable2.on('fileSuccess', function (file, response) { // trigger when file upload complete
            progress2.find('.progress-bar').addClass('bg-success');
            $('#movie_link').val(response);
            $("#movie").attr("data-default-file", response);
            $('.dropify').dropify();
            $('.progress2').hide();
        });

        resumable2.on('fileError', function (file, response) { // trigger when there is any error
            alert('file uploading error.')
        });

        let progress2 = $('.progress2');
        function showProgress2() {
            progress2.find('.progress-bar').css('width', '0%');
            progress2.find('.progress-bar').html('0%');
            progress2.find('.progress-bar').removeClass('bg-success');
            progress2.show();
        }

        function updateProgress2(value) {
            progress2.find('.progress-bar').css('width', `${value}%`)
            progress2.find('.progress-bar').html(`${value}%`)
        }

    </script>

    <script src="{{ asset_public_admin('js/file-upload.js') }}"></script>
    <script>
        $(function() {
            $("#video-form").validate({
                rules: {
                    title: "required",
                },
                messages: {
                    title: "Please enter title",
                },
                submitHandler: function(form) {
                    form.submit();
                }
            });
        });

        $(document).on('change','#title_id', function(e) {
            var title_id = $(this).val();
            $.ajax({
                type: "get",
                url: "{{ route('admin.video.season',['_id']) }}".replace('_id', title_id),
                dataType: "json",
                success: function(data) {
                    if(data.data.type == 1){
                        $('.mov').addClass('d-none');
                        $('.title').addClass('col-12').removeClass('col-4');
                    } else {
                        $('.mov').removeClass('d-none');
                        $('.title').addClass('col-4').removeClass('col-12');
                    }
                    var option = '<option value="">Season No</option>';
                    $.each(JSON.parse(data.data.season), function(key, season) {
                        option += '<option value="'+ season +'">'+ season +'</option>';
                    });
                    $('#season_no').html(option);
                }
            });
        });
        $(document).on('change','#season_no', function(e) {
            var season_no = $(this).val();
            var title_id = $('#title_id').val();
            $.ajax({
                type: "get",
                url: "{{ route('admin.video.episode',['_episode','_id']) }}".replace('_episode', title_id).replace('_id', season_no),
                dataType: "json",
                success: function(data) {
                    var option = '<option value="">Episode No</option>';
                    $.each(data.data, function(key, episode) {
                        option += '<option value="'+ episode.id +'">'+ episode.episodeNumber +'</option>';
                    });
                    $('#season_id').html(option);
                }
            });
        });

    </script>
@endsection