@extends('layouts.app')

@section('content')

<section class="content-header" style="margin-bottom:20px">
    <h1>Update Video</h1>
</section>
<!-- /.box -->

@if (count($errors) > 0)
<div class="alert alert-danger">
    <strong>Whoops!</strong> There were some problems with your input.<br><br>
    <ul>
        @foreach ($errors->all() as $error)
        <li>{{ $error }}</li>
        @endforeach
    </ul>
</div>
@endif

<div class="box">
    <div class="box-header">
        <h3 class="box-title">Edit Video</h3>
        <div class="pull-right">
            <button class="btn btn-success btn-sm pull-right" onclick="window.history.back();">Back</button>
        </div>
    </div>
    <!-- /.box-header -->
    <div class="box-body">
        <form id="editVideoID" class="form-horizontal addBorderClass" enctype="multipart/form-data" method="POST" action="{{ route('videos.update', $video->id) }}">
            <input type="hidden" name="_token" value="{{ csrf_token() }}">
            <input type="hidden" name="_method" value="PATCH">
            <input type="hidden" name="url" value="{{ $url }}">	
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <label class="col-md-3">Video Name<span class="mandatory_field">*</span>:</label>
                        <input type="text" class="col-md-4" name="video_name" value="{{ $video->video_name }}">
                        <div class="col-md-2"></div>
                    </div>
                </div>
                
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <label class="col-md-3">User Type:</label>
                        <select class="col-md-4" name="user_type">
                            <option value=''>Select</option>
                            @foreach($userType as $uType)
                            <option value="{{ $uType->id }}" @if($video->user_type_id == $uType->id) selected @endif>{{ $uType->name }}</option>
                            @endforeach
                        </select>
                        <div class="col-md-2"></div>
                    </div>
                </div>

                <!--  'vod','karaoke','kid','tv_series','commercial','series' -->
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <label class="col-md-3">Type:</label>
                        <select class="col-md-4 movieType" name="type">
                            <option value=""> -- Select Type -- </option>
                            <option value='vod' @if($video->type == 'vod') selected @endif > VOD </option>
                            <option value='karaoke' @if($video->type == 'karaoke') selected @endif > Karaoke </option>
                            <option value='kid' @if($video->type == 'kid') selected @endif > Kid </option>
                            <option value='commercial' @if($video->type == 'commercial') selected @endif > Commercial </option>
                            <option value='tv_series' @if($video->type == 'tv_series') selected @endif> TV Series </option>
                            <option value='series' @if($video->type == 'series') selected @endif > Series </option>
                            
                            
                            <option value='art_color' @if($video->type == 'art_color') selected @endif  >Arts & Color</option>
                            <option value='kid_club' @if($video->type == 'kid_club') selected @endif>Kids Club</option>
                            <option value='trends' @if($video->type == 'trends') selected @endif>Trends</option>
                            <option value='manner_conduct' @if($video->type == 'manner_conduct') selected @endif>Manner Conduct</option>
                            <option value='town' @if($video->type == 'town') selected @endif>Town</option>
                            <option value='international_language' @if($video->type == 'international_language') selected @endif>International Language</option>
                            <option value='kids_alley' @if($video->type == 'kids_alley') selected @endif>Kids Alley</option>
                            
                        </select>
                        <div class="col-md-2"></div>
                    </div>
                </div>

                <!-- Artist -->
                <div class="col-xs-12 col-sm-12 col-md-12" id="artistDiv">
                    <div class="form-group">
                        <label class="col-md-3">Artist:</label>
                        <input type="text" class="col-md-4 artist" name="artist" value="{{ $video->artist }}">
                        <div class="col-md-2">
                            <!-- <button class="btn btn-sm btn-primary add_artist">Add</button> -->
                        </div>
                    </div>
                </div>
                <div class="artist_fields_container"></div>
                <!-- End Artist -->

                <!-- Karaoke movie year -->
                <div class="col-xs-12 col-sm-12 col-md-12" id="yearDiv">
                    <div class="form-group">
                        <label class="col-md-3">Year:</label>
                        <select name="year" class="col-md-3 movieYear">
                                                                                    <option value="">Select Year</option>
                            @for ($i = $now; $i >= $last; $i--)
                            <option value="{{ $i }}" @if($video->year == $i) selected @endif>{{ $i }}</option>
                            @endfor
                        </select>
                        <div class="col-md-2"></div>
                    </div>
                </div>
                <!-- End karaoke movie year -->

                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <label class="col-md-3">Default Audio Language:</label>
                        <input type="text" class="col-md-4" name="default_language" value="{{ $video->default_language }}">
                        <div class="col-md-2"></div>
                    </div>
                </div>

                <!-- Other Audio Languages -->
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <label class="col-md-3">Other Audio Languages:</label>

                        @foreach($videolangs as $key=>$videolang)
                        @if($key == 0)
                        <input type="text" class="col-md-4 language" name="language[0]" value="{{ $videolang }}">
                        @endif
                        @endforeach

                        <div class="col-md-2">
                            <button class="btn btn-sm btn-primary add_language">Add</button>
                        </div>
                    </div>
                </div>

                <div class="language_fields_container2">
                    @foreach($videolangs as $key=>$videolang)
                    @if($key > 0)
                    <div class="addLang2 col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group">
                            <div class="col-md-3"></div>
                            <input type="text" class="col-md-4 language" name="language[]" value="{{ $videolang }}"">
                            <div class="col-md-2">
                                <button class="btn btn-sm btn-danger remove_field">Remove</button>
                            </div>
                        </div>
                    </div>
                    @endif
                    @endforeach
                </div>
                <div class="language_fields_container"></div>
                <!-- End Other Audio Languages -->

                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <label class="col-md-3">Encryption Key:</label>
                        <input type="text" class="col-md-4" name="encryption_key" id="encryptionKey" value="{{ $video->encryption_key }}">
                        <div class="col-md-2"><button class="btn btn-sm btn-primary genKey">Generate Key</button></div>
                        <div class="col-md-2"></div>
                    </div>
                </div>

                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <label class="col-md-3">Logo:</label>
                        <input type="file" class="col-md-4" name="logo">
                        <div class="col-md-2"></div>
                    </div>
                </div>

                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <label class="col-md-3">Cover Image:</label>
                        <input type="file" class="col-md-4" name="cover_image">
                        <div class="col-md-2"></div>
                    </div>
                </div>

                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <label class="col-md-3">Video:</label>
                        <input type="file" class="col-md-4" name="filename">
                        <div class="col-md-2"></div>
                    </div>
                </div>

                <!--Video Resolution -->
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <label class="col-md-3">Video Resolution:</label>
                        @foreach($videosizes as $key=>$videosize)
                        @if($key == 0)
                        <input type="text" class="col-md-4 resolution" name="resolution[0]" value="{{ $videosize }}">
                        @endif
                        @endforeach
                        <div class="col-md-2">
                            <button class="btn btn-sm btn-primary add_resolution">Add</button>
                        </div>
                    </div>
                </div>

                <div class="resolution_fields_container2">
                    @foreach($videosizes as $key=>$videosize)
                    @if($key > 0)
                    <div class="addResol2 col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group">
                            <div class="col-md-3"></div>
                            <input type="text" class="col-md-4 resolution" name="resolution[]" value="{{ $videosize }}">
                            <div class="col-md-2">
                                <button class="btn btn-sm btn-danger remove_field">Remove</button>
                            </div>
                        </div>
                    </div>
                    @endif
                    @endforeach
                </div>
                <div class="resolution_fields_container"></div>
                <!--End Video Resolution -->

                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <label class="col-md-3">Length(time):</label>
                        <input type="text" class="col-md-4" name="movie_length" value="{{ $video->movie_length }}">
                        <div class="col-md-2"></div>
                    </div>
                </div>

                <!--Video Genre -->
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <label class="col-md-3">Genre:</label>
                        @foreach($videogenres as $key=>$videogenre)
                        @if($key == 0)
                        <input type="text" class="col-md-4 genre" name="genre[0]" value="{{ $videogenre }}">
                        @endif
                        @endforeach
                        <div class="col-md-2">
                            <button class="btn btn-sm btn-primary add_genre">Add</button>
                        </div>
                    </div>
                </div>

                <div class="genre_fields_container2">
                    @foreach($videogenres as $key=>$videogenre)
                    @if($key > 0)
                    <div class="addGenr2 col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group">
                            <div class="col-md-3"></div>
                            <input type="text" class="col-md-4 genre" name="genre[]" value="{{ $videogenre }}">
                            <div class="col-md-2">
                                <button class="btn btn-sm btn-danger remove_field">Remove</button>
                            </div>
                        </div>
                    </div>
                    @endif
                    @endforeach
                </div>
                <div class="genre_fields_container"></div>
                <!--End Video Genre -->

                <!-- Video Category -->
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <label class="col-md-3">Category:</label>
                        @foreach($videocategories as $key=>$videocategory)
                        @if($key == 0)
                        <input type="text" class="col-md-4 category" name="category[0]" value="{{ $videocategory }}">
                        @endif
                        @endforeach
                        <div class="col-md-2">
                            <button class="btn btn-sm btn-primary add_category">Add</button>
                        </div>
                    </div>
                </div>

                <div class="category_fields_container2">
                    @foreach($videocategories as $key=>$videocategory)
                    @if($key > 0)
                    <div class="addCat2 col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group">
                            <div class="col-md-3"></div>
                            <input type="text" class="col-md-4 category" name="category[]" value="{{ $videocategory }}">
                            <div class="col-md-2">
                                <button class="btn btn-sm btn-danger remove_field">Remove</button>
                            </div>
                        </div>
                    </div>
                    @endif
                    @endforeach
                </div>
                <div class="category_fields_container"></div>
                <!--End Video Category -->

                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <label class="col-md-3">Video Codec:</label>
                        <input type="text" class="col-md-4 codec" name="codec" value="{{ $video->codec }}">
                        <div class="col-md-2"></div>
                    </div>
                </div>

                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <label class="col-md-3">Cast:</label>
                        <input type="text" class="col-md-4" name="cast" value="{{ $video->cast }}">
                        <div class="col-md-2"></div>
                    </div>
                </div>

                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <label class="col-md-3">Upload Account:</label>
                        <input type="text" class="col-md-4" name="upload_account" placeholder="Enter Account name" value="{{ $video->upload_account }}">
                        <div class="col-md-2">
                        </div>
                    </div>
                </div>


                <div class="col-xs-12">
                    @foreach($file as $imageFile) 
                    <div class="form-group col-md-2">
                        <img class="img-responsive menu-thumbnails" src="{{ Storage::disk('local')->url("cover-images/$video->id/$imageFile") }}" width="100" height="100"/>
                        <input type="radio" class="col-md-4" name="default_image" value="{{ $imageFile }}" @if($imageFile == $video->default_image) checked @endif >
                               <div class="col-md-2"></div>
                    </div>
                    @endforeach
                </div>

                <div class="col-xs-12 col-sm-12 col-md-12 text-center">
                    <button type="submit" class="btn btn-primary btn-sm">Update</button>
                </div>
            </div>
        </form>
    </div>
</div>
</div>
@include('elements.popup')

<script src="{{ asset('/js/custom.js') }}"></script>
<script type="text/javascript">
//Add multiple languages
                $(document).ready(function () {
                    //Display artist div if video type karaoke selected
                    if ($(".movieType option:selected").val() == 'vod') {
                        $('#artistDiv').hide();
                        $('#yearDiv').hide();
                    }
                    $(document).on('change', '.movieType', function () {
                        if ($(".movieType option:selected").val() == 'karaoke') {
                            $('#artistDiv').show();
                            $('#yearDiv').show();
                        } else {
                            $('#artistDiv').hide();
                            $('#yearDiv').hide();
                        }
                    });

                    var x = 0; //initialize counter for text box
                    $('.add_language').click(function (e) { //click event on add more fields button
                        e.preventDefault();

                        x++; //counter increment
                        $('.language_fields_container').append('<div class="addLang col-xs-12 col-sm-12 col-md-12"><div class="form-group"><div class="col-md-3"></div><input type="text" class="col-md-4 language" id="language_' + x + '" name="language[]"><div class="col-md-2"><button class="btn btn-sm btn-danger remove_field">Remove</button></div></div></div>');

                        $('#language_' + x).rules('add', {required: true, notEqualToLanguage: ['.language'], messages: {required: "Please enter language."}});

                    });
                    $('.language_fields_container').on("click", ".remove_field", function (e) {
                        //user click on remove text links
                        e.preventDefault();
                        $(this).parents('div[class^="addLang"]').remove();
                    })
                });

//Language edit
                $('.language_fields_container2').on("click", ".remove_field", function (e) {
                    //user click on remove text links
                    e.preventDefault();
                    $(this).parents('div[class^="addLang2"]').remove();
                });

//Add more resolution
                $(document).ready(function () {
                    var x = 0; //initialize counter for text box
                    $('.add_resolution').click(function (e) { //click event on add more fields button
                        e.preventDefault();

                        x++; //counter increment
                        $('.resolution_fields_container').append('<div class="addResol col-xs-12 col-sm-12 col-md-12"><div class="form-group"><div class="col-md-3"></div><input type="text" class="col-md-4 resolution" id="resolution_' + x + '" name="resolution[]"><div class="col-md-2"><button class="btn btn-sm btn-danger remove_field">Remove</button></div></div></div>');

                        $('#resolution_' + x).rules('add', {required: true, notEqualToResolution: ['.resolution'], messages: {required: "Please enter video resolution."}});

                    });
                    $('.resolution_fields_container').on("click", ".remove_field", function (e) {
                        //user click on remove text links
                        e.preventDefault();
                        $(this).parents('div[class^="addResol"]').remove();
                    });
                });

//For video edit form
                $('.resolution_fields_container2').on("click", ".remove_field", function (e) {
                    //user click on remove text links
                    e.preventDefault();
                    $(this).parents('div[class^="addResol2"]').remove();
                });

//Add multiple genre
                $(document).ready(function () {
                    var x = 0; //initialize counter for text box
                    $('.add_genre').click(function (e) { //click event on add more fields button
                        e.preventDefault();

                        x++; //counter increment
                        $('.genre_fields_container').append('<div class="addGenr col-xs-12 col-sm-12 col-md-12"><div class="form-group"><div class="col-md-3"></div><input type="text" class="col-md-4 genre" id="genre_' + x + '" name="genre[]"><div class="col-md-2"><button class="btn btn-sm btn-danger remove_field">Remove</button></div></div></div>');

                        $('#genre_' + x).rules('add', {required: true, notEqualToGenre: ['.genre'], messages: {required: "Please enter genre."}});

                    });
                    $('.genre_fields_container').on("click", ".remove_field", function (e) {
                        //user click on remove text links
                        e.preventDefault();
                        $(this).parents('div[class^="addGenr"]').remove();
                    })
                });

                $('.genre_fields_container2').on("click", ".remove_field", function (e) {
                    //user click on remove text links
                    e.preventDefault();
                    $(this).parents('div[class^="addGenr2"]').remove();
                });

//Add multiple category
                $(document).ready(function () {
                    var x = 0; //initialize counter for text box
                    $('.add_category').click(function (e) { //click event on add more fields button
                        e.preventDefault();

                        x++; //counter increment
                        $('.category_fields_container').append('<div class="addCat col-xs-12 col-sm-12 col-md-12"><div class="form-group"><div class="col-md-3"></div><input type="text" class="col-md-4 category" id="category_' + x + '" name="category[]"><div class="col-md-2"><button class="btn btn-sm btn-danger remove_field">Remove</button></div></div></div>');

                        $('#category_' + x).rules('add', {required: true, notEqualToCategory: ['.category'], messages: {required: "Please enter category."}});

                    });
                    $('.category_fields_container').on("click", ".remove_field", function (e) {
                        //user click on remove text links
                        e.preventDefault();
                        $(this).parents('div[class^="addCat"]').remove();
                    })
                });

                $('.category_fields_container2').on("click", ".remove_field", function (e) {
                    //user click on remove text links
                    e.preventDefault();
                    $(this).parents('div[class^="addCat2"]').remove();
                });

//For language
                $(document).on("focus", ".language", function () {
                    var that = $(this);
                    $(this).autocomplete({
                        source: function (request, response) {
                            $.ajax({
                                url: '/videos/autoComplete',
                                type: "POST",
                                data: {"_token": "{{ csrf_token() }}", "name": that.val(), "tablename": "languages"},
                                success: function (data) {
                                    response(data);
                                }
                            });
                        },
                        minLength: 1,
                    });
                });

                $(document).on("focus", ".codec", function () {
                    var that = $(this);
                    $(this).autocomplete({
                        source: function (request, response) {
                            $.ajax({
                                url: '/videos/autoComplete',
                                type: "POST",
                                data: {"_token": "{{ csrf_token() }}", "name": that.val(), "tablename": "codecs"},
                                success: function (data) {
                                    response(data);
                                }
                            });
                        },
                        minLength: 1,
                    });
                });


                $(document).on("focus", ".resolution", function () {
                    var that = $(this);
                    $(this).autocomplete({
                        source: function (request, response) {
                            $.ajax({
                                url: '/videos/autoComplete',
                                type: "POST",
                                data: {"_token": "{{ csrf_token() }}", "name": that.val(), "tablename": "resolutions"},
                                success: function (data) {
                                    response(data);
                                }
                            });
                        },
                        minLength: 1,
                    });
                });

//For genre
                $(document).on("focus", ".genre", function () {
                    var that = $(this);
                    $(this).autocomplete({
                        source: function (request, response) {
                            $.ajax({
                                url: '/videos/autoComplete',
                                type: "POST",
                                data: {"_token": "{{ csrf_token() }}", "name": that.val(), "tablename": "genres"},
                                success: function (data) {
                                    response(data);
                                }
                            });
                        },
                        minLength: 1,
                    });
                });

//For category
                $(document).on("focus", ".category", function () {
                    var that = $(this);
                    $(this).autocomplete({
                        source: function (request, response) {
                            $.ajax({
                                url: '/videos/autoComplete',
                                type: "POST",
                                data: {"_token": "{{ csrf_token() }}", "name": that.val(), "tablename": "categories"},
                                success: function (data) {
                                    response(data);
                                }
                            });
                        },
                        minLength: 1,
                    });
                });


//Unique validation
                $("#editVideoID").validate({
                    rules: {
                        video_name: {required: true},
                        'language[0]': {
                            notEqualToLanguage: ['.language']
                        },
                        'resolution[0]': {
                            notEqualToResolution: ['.resolution']
                        },
                        'genre[0]': {
                            notEqualToGenre: ['.genre']
                        },
                        'category[0]': {
                            notEqualToCategory: ['.category']
                        }
                    },
                    messages: {
                        video_name: {required: "Please enter video title."},
                        'language[0]': {
                            notEqualToLanguage: "Please enter different language."
                        },
                        'resolution[0]': {
                            notEqualToGroup: "Please enter different resolution."
                        },
                        'genre[0]': {
                            notEqualToGenre: "Please enter different genre."
                        },
                        'category[0]': {
                            notEqualToCategory: "Please enter different category."
                        }
                    }
                });

//For generate 32 char key
                $('.genKey').click(function (e) {
                    e.preventDefault();

                    $('#encryptionKey').val(enckeyGen());
                });
                $('#encryptionKey').val(enckeyGen());

</script>
@endsection