@extends('layouts.admin')
@section('css')
<style>
    .for-ProgressBar{
        margin-top: 5px;
    }
</style>
@endsection

@section('vite')
@vite(['resources/css/app.css', 'resources/js/app.js'])
@endsection
@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">
                                    <input type="hidden" name="video_id" id="video_id" />
                                    <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>

                                @php
                                    $trailer = 'trailer';
                                    $movie = 'movie';
                                    $uppyOptions = "{
                                        autoProceed: true,
                                        restrictions: {
                                            allowedFileTypes:['video/*'],
                                            maxNumberOfFiles : 5,
                                        }
                                    }";
                                    $extraJSForOnUploadSuccess = "
                                        document.getElementById('saveImageButton').removeAttribute('disabled');
                                        document.getElementById('saveImageButton').click();
                                    ";
                                @endphp
                                <div class="col-6 video d-none">
                                    <div class="form-group">
                                        <div id="upload-container">
                                            <label>Trailer</label>
                                            <input type="hidden" name="trailer_link" id="trailer" />
                                            <input type="hidden" name="trailer_link1" id="trailer1" value="0" />
                                            <x-input.uppy :hiddenField="$trailer" :options="$uppyOptions" :uploadElementClass="$trailer" />
                                        </div>
                                    </div>
                                </div>

                                <div class="col-6 video d-none">
                                    <div class="form-group">
                                        <div id="upload-container">
                                            <label>Movie</label>
                                            <input type="hidden" name="movie_link" id="movie" />
                                            <input type="hidden" name="movie_link1" id="movie1" value="0" />
                                            <x-input.uppy :hiddenField="$movie" :options="$uppyOptions" :uploadElementClass="$movie" />
                                        </div>
                                    </div>
                                </div>
                                {{-- <div class="col-6">
                                    <div class="form-group">
                                        <label>Trailer</label>
                                        <input type="file" name="trailer_link" class="dropify trailer" id="trailer-container" 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="col-6">
                                    <div class="form-group">
                                        <div id="upload-container">
                                            <label>Movie</label>
                                            <input type="file" name="movie_link" 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> --}}

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

@section('js')
    <script>
        $("#video-form").validate({
            rules: {
                title_id: "required",
                movie: "required",
            },
            messages: {
                title_id: "Please enter title",
                movie: "Please add video",
            },
            submitHandler: function(form) {
                form.submit();
            }
        });

        // $("#submit").click(function(){
        //     $("#video-form").submit();
        //     return false;
        // });

        $(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');
                        $('.video').removeClass('d-none');
                    } else {
                        $('.mov').removeClass('d-none');
                        $('.title').addClass('col-4').removeClass('col-12');
                        $('.video').addClass('d-none');
                    }
                    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);

                    if(data.video == null) {
                        $('#video_id').val(0);
                        addfile('.trailer .uploaded-files ol', '');
                        addfile('.movie .uploaded-files ol', '');
                    } else {
                        if(data.data.type == 1){
                            $('#video_id').val(data.video.id);
                            if(data.video.trailer_link != null) {
                                $('#trailer').val(data.video.trailer_link);
                                $('#trailer1').val(1);
                                addfile('.trailer .uploaded-files ol', data.video.trailer_link);
                            } else {
                                addfile('.trailer .uploaded-files ol', '');
                            }
                            if(data.video.movie_link != null) {
                                $('#movie').val(data.video.movie_link);
                                $('#movie1').val(1);
                                addfile('.movie .uploaded-files ol', data.video.movie_link);
                            } else {
                                addfile('.movie .uploaded-files ol', '');
                            }
                        }
                    }
                }
            });
        });

        $(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);
                }
            });
        });

        $(document).on('change','#season_id', function(e) {
            var episode_id = $(this).val();
            var title_id = $('#title_id').val();
            $.ajax({
                type: "get",
                url: "{{ route('admin.video.episodeno',['_episode','_id']) }}".replace('_episode', title_id).replace('_id', episode_id),
                dataType: "json",
                success: function(data) {
                    if(data.video == null) {
                        $('#video_id').val(0);
                        addfile('.trailer .uploaded-files ol', '');
                        addfile('.movie .uploaded-files ol', '');
                    } else {
                        $('#video_id').val(data.video.id);
                        if(data.video.trailer_link != null) {
                            $('#trailer').val(data.video.trailer_link);
                            $('#trailer1').val(1);
                            addfile('.trailer .uploaded-files ol', data.video.trailer_link);
                        } else {
                            addfile('.trailer .uploaded-files ol', '');
                        }
                        if(data.video.movie_link != null) {
                            $('#movie').val(data.video.movie_link);
                            $('#movie1').val(1);
                            addfile('.movie .uploaded-files ol', data.video.movie_link);
                        } else {
                            addfile('.movie .uploaded-files ol', '');
                        }
                    }
                    $('.video').removeClass('d-none');
                }
            });
        });

        function saveVideo(type, url){
            if(type == 'movie') {
                $('#movie1').val(0);
            }
            if(type == 'trailer') {
                $('#trailer1').val(0);
            }
            var form = $('#video-form');
            $.ajax({
                type: "post",
                url: "{{ route('admin.video.saveVideo') }}",
                dataType: "json",
                data: form.serialize(),
                success: function(data) {
                    console.log(data);
                    if(type == 'movie') {
                        $('#movie1').val(1);
                    }
                    if(type == 'trailer') {
                        $('#trailer1').val(1);
                    }
                    $('#video_id').val(data.video.id);
                }
            });
        }

        function addfile(id, url) {
            const element = document.querySelector(id).children[0];
            const li = document.createElement('li');
            const a = document.createElement('a');
            a.href = url;
            a.target = '_blank';
            a.appendChild(document.createTextNode(url.replace('https://d47a3uo502lqc.cloudfront.net/new/','')));
            li.appendChild(a);
            document.querySelector(id).replaceChild(li, element);
        }
    </script>
@endsection