@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">Edit 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 @if($titles->type == 1) col-12 @else col-4 @endif title">
                                    <label for="title">Title</label>
                                    <input type="hidden" id="length" placeholder="length" name="length">
                                    <input type="hidden" name="video_id" id="video_id" value="{{ $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 }}" {{ $video->title_id == $item->id ? 'selected' : '' }}>{{ $item->title }}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>

                                <div class="form-group col-4 mov @if($titles->type == 1) d-none @endif">
                                    <label for="season_no">Season No.</label>
                                    <select class="form-control" name="season_no" id="season_no">
                                        <option value="">Season No</option>
                                        @if ($titles->season)
                                            @foreach (json_decode($titles->season) as $season)
                                                <option value="{{ $season }}" {{ $video->season_no == $season ? 'selected' : '' }}>{{ $season }}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>

                                <div class="form-group col-4 mov @if($titles->type == 1) d-none @endif">
                                    <label for="episode_no">Episode No.</label>
                                    <select class="form-control" name="season_id" id="season_id">
                                        <option value="">Episode No</option>
                                        @if ($episode)
                                            @foreach ($episode as $e)
                                                <option value="{{ $e->id }}" {{ $video->season_id == $e->id ? 'selected' : '' }}>{{ $e->episodeNumber }}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                                {{-- <div class="col-6">
                                    <div class="form-group">
                                        <div id="upload-container">
                                            <input type="file" name="trailer" class="dropify trailer" id="trailer" accept="video/*" data-default-file="{{ $video->trailer_link }}" >
                                        </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>
                                    <input type="hidden" class="form-control trailer" id="trailer_link" placeholder="Trailer link" name="trailer_link" value="{{ $video->trailer_link }}">
                                </div>

                                <div class="col-6">
                                    <div class="form-group">
                                        <div id="upload-container">
                                            <input type="file" name="trailer" class="dropify movie" id="movie" accept="video/*" data-default-file="{{ $video->movie_link }}" >
                                        </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>
                                    <input type="hidden" class="form-control movie" id="movie_link" placeholder="movie link" value="{{ $video->movie_link }}" name="movie_link">
                                </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">
                                    <div class="form-group">
                                        <div id="upload-container">
                                            <label>Trailer</label>
                                            <input type="hidden" name="trailer_link" id="trailer" value="{{ $video->trailer_link }}" />
                                            <input type="hidden" name="trailer_link1" id="trailer1" @if($video->trailer_link != null) value="1" @else value="0" @endif />
                                            <x-input.uppy :hiddenField="$trailer" :options="$uppyOptions" :uploadElementClass="$trailer" />
                                            @if($video->trailer_link != null)
                                                <ol>
                                                    <li><a href="{{ $video->trailer_link }}" target="_blank">{{ str_replace('https://d47a3uo502lqc.cloudfront.net/new/', '', $video->trailer_link) }}</a></li>
                                                </ol>
                                            @endif
                                        </div>
                                    </div>
                                </div>

                                <div class="col-6">
                                    <div class="form-group">
                                        <div id="upload-container">
                                            <label>Movie</label>
                                            <input type="hidden" name="movie_link" id="movie" value="{{ $video->movie_link }}" />
                                            <input type="hidden" name="movie_link1" id="movie1" @if($video->movie_link != null) value="1" @else value="0" @endif />
                                            <x-input.uppy :hiddenField="$movie" :options="$uppyOptions" :uploadElementClass="$movie" />
                                            @if($video->movie_link != null)
                                            <ol>
                                                <li><a href="{{ $video->movie_link }}" target="_blank">{{ str_replace('https://d47a3uo502lqc.cloudfront.net/new/', '', $video->movie_link) }}</a></li>
                                            </ol>
                                            @endif
                                        </div>
                                    </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">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();
        //     }
        // });

        $(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