@extends('layouts.app')

@section('content')
<div class="row well">
    <div class="col-lg-12">
        <div class="pull-left">
            <h3>Add Kid Categories</h3>
        </div>
        <div class="pull-right">
            <button class="btn btn-primary btn-sm" onclick="window.history.back();">Back</button>
        </div>
    </div>
</div>

<div class="row">
	<form id="createKidCategory" class="form-horizontal addBorderClass" role="form" method="POST" action="{{ route('kids.update', $kidsCategory->id) }}">
        <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">Category Name<span class="mandatory_field">*</span>:</label>
                    <input type="text" class="col-md-4" name="category_name" value="{{ $kidsCategory->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">Parent Category:</label>
                    <select class="col-md-4 movieType" name="parent_id">
                        <option value='0'>Select</option>
						@foreach($category as $kidCat)
							<option value="{{ $kidCat->id }}" @if(isset($kidCat->id) && ($kidCat->id == $kidsCategory->parent_id)) selected @endif;;>{{ $kidCat->name }}</option>
                        @endforeach
                    </select>
                    <div class="col-md-2"></div>
                </div>
            </div>

            <div class="col-xs-12 col-sm-12 col-md-12 text-right">
    			<button type="submit" class="btn btn-primary btn-sm">Submit</button>
            </div>
    	</div>
	</form>
</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