@extends('layouts.app')

@section('content')

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

<div class="box">
    <div class="box-header">
        <h3 class="box-title">Add 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="createVideoID" class="form-horizontal addBorderClass" role="form" enctype="multipart/form-data" method="POST" action="{{ route('videos.store') }}">
            <input type="hidden" name="_token" value="{{ csrf_token() }}">
            <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">
                        <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 }}">{{ $uType->name }}</option>
                            @endforeach
                        </select>
                        <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">Type:</label>
                        <select class="col-md-4 movieType" name="type">
                            <option value=""> -- Select Type -- </option>
                            <option value='vod'>VOD</option>
                            <option value='karaoke'>Karaoke</option>
                            <option value='kid'>Kid</option>
                            <option value='series'>TV Series</option>
                            <option value='commercial'>Commercial</option>
                            
                            <option value='art_color'>Arts & Color</option>
                            <option value='kid_club'>Kids Club</option>
                            <option value='trends'>Trends</option>
                            <option value='manner_conduct'>Manner Conduct</option>
                            <option value='town'>Town</option>
                            <option value='international_language'>International Language</option>
                            <option value='kids_alley'>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" style="display: none;">
                    <div class="form-group">
                        <label class="col-md-3">Artist:</label>
                        <input type="text" class="col-md-4 artist" name="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" style="display: none;">
                    <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 }}">{{ $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">
                        <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">Other Audio Languages:</label>

                        <input type="text" class="col-md-4 language" name="language[0]">
                        <div class="col-md-2">
                            <button class="btn btn-sm btn-primary add_language">Add</button>
                        </div>
                    </div>
                </div>
                <div class="language_fields_container"></div>

                <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">
                        <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<span class="mandatory_field">*</span>:</label>
                        <input type="file" class="col-md-4" name="filename">
                        <div class="col-md-2"></div>
                    </div>
                </div>

                <!-- Resolution -->
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <label class="col-md-3">Video Resolution:</label>
                        <input type="text" class="col-md-4 resolution" name="resolution[0]">
                        <div class="col-md-2">
                            <button class="btn btn-sm btn-primary add_resolution">Add</button>
                        </div>
                    </div>
                </div>

                <div class="resolution_fields_container"></div>
                <!-- End 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">
                        <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">Codec:</label>
                        <input type="text" class="col-md-4 codec" name="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">Genre:</label>
                        <input type="text" class="col-md-4 genre" name="genre[0]">
                        <div class="col-md-2">
                            <button class="btn btn-sm btn-primary add_genre">Add</button>
                        </div>
                    </div>
                </div>
                <div class="genre_fields_container"></div>

                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <label class="col-md-3">Category:</label>
                        <input type="text" class="col-md-4 category" name="category[0]">
                        <div class="col-md-2">
                            <button class="btn btn-sm btn-primary add_category">Add</button>
                        </div>
                    </div>
                </div>
                <div class="category_fields_container"></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">
                        <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">
                        <div class="col-md-2">
                        </div>
                    </div>
                </div>

                <div class="col-xs-12 col-sm-12 col-md-12 text-center">
                    <button type="submit" class="btn btn-primary btn-sm">Submit</button>
                </div>
            </div>
        </form>
    </div>
</div>

@include('elements.popup')

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

                    //Add multiple languages
                    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();
                        x--;
                    })


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

                        x1++; //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_' + x1 + '" name="resolution[]"><div class="col-md-2"><button class="btn btn-sm btn-danger remove_field">Remove</button></div></div></div>');

                        $('#resolution_' + x1).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();
                        x1--;
                    })

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

                        x2++; //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_' + x2 + '" name="genre[]"><div class="col-md-2"><button class="btn btn-sm btn-danger remove_field">Remove</button></div></div></div>');

                        $('#genre_' + x2).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();
                        x2--;
                    })

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

                        x3++; //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_' + x3 + '" name="category[]"><div class="col-md-2"><button class="btn btn-sm btn-danger remove_field">Remove</button></div></div></div>');

                        $('#category_' + x3).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();
                        x3--;
                    })

                    //Add multiple artist
                    var x4 = 0; //initialize counter for text box
                    $('.add_artist').click(function (e) { //click event on add more fields button
                        e.preventDefault();

                        x4++; //counter increment
                        $('.artist_fields_container').append('<div class="addArtist 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 artist" id="artist_' + x4 + '" name="artist[]"><div class="col-md-2"><button class="btn btn-sm btn-danger remove_field">Remove</button></div></div></div>');

                        $('#artist_' + x4).rules('add', {required: true, notEqualToArtist: ['.resolution'], messages: {required: "Please enter artist."}});

                    });

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

                    //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,
                        });
                    });

                    //For codec
                    $(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,
                        });
                    });

                    //For resolution
                    $(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
                    $("#createVideoID").validate({
                        rules: {
                            video_name: {required: true},
                            'language[0]': {
                                notEqualToLanguage: ['.language']
                            },
                            filename: {required: true},
                            '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."
                            },
                            filename: {required: "Please select video."},
                            '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