@extends('layouts.app')

@section('content')
<meta name="csrf-token" id="csrf-token" content="{{ csrf_token() }}">
<div class="well">
    <div class="row">
        <div class="col-lg-12 margin-tb">
            <div class="pull-left">
                <h3>Publish Video</h3>
            </div>
            <div class="pull-right">
                <button class="btn btn-primary btn-sm" onclick="window.history.back();">Back</button>
            </div>
        </div>
    </div>
</div>

<form id="publishVOD" class="form-horizontal addBorderClass" role="form" method="POST" action="{{ route('kids.kid_save') }}">
    <input type="hidden" name="_token" value="{{ csrf_token() }}">
    <input type="hidden" name="type" value="vod">
    <div class="row">

        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <label class="col-md-3">Choose Video:</label>

                <input type="text" id="selVOD" class="col-md-4" name="video_name">

                <div class="col-md-2 watchBTN">
                    <a class="btn btn-success btn-sm space_buttons watch_video" id="row_dim" data-id='1' data-src='{{ asset("uploads/video/movies/vid/filename") }}'>Watch Video</a>
                </div>
                <input type="hidden" class="col-md-4" id="videoId" name="video_id">
            </div>
        </div>

        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <label class="col-md-3">Publish Date:</label>
                <input type="date" id="start_date" name="start_date" class="col-md-2 datepicker" placeholder="Start date" />

                <input type="date" id="end_date" name="end_date" class="col-md-2 datepicker" placeholder="End date" />
                <div class="col-md-2"></div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 parentCategory">
            <div class="form-group">
                <label class="col-md-3">Parent Category</label>
                <select class="col-md-4 parentId" data-id="childCategory" data-text="Child Category" name="parent_id" class="form-control">
					<option value="0"> Select </option>
                    @foreach($kidCategory as $video_category)
						<option value="{{$video_category->id}}"> {{$video_category->name}} </option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 childCategory"></div>
        <div class="col-xs-12 col-sm-12 col-md-12 subChildCategory"></div>
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <label class="col-md-3">Geo restrictions:</label>
                <input type="text" class="col-md-4 country" name="location[0]">
                <div class="col-md-2">
                    <button class="btn btn-sm btn-primary add_country">Add</button>
                </div>
                <br><br>
                <span class="col-md-3"></span><span>(Exclude countries to watch this video.)</span>
            </div>
        </div>
        <div class="country_fields_container"></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>

@include('elements.popup')

<script src="{{ asset('/js/custom.js') }}"></script>
<script type="text/javascript">
//Add multiple georestrictions
	$(document).ready(function () {
		var max_fields_limit = 4; //set limit for maximum input fields
		var x = 0; //initialize counter for text box
		$('.add_country').click(function (e) { //click event on add more fields button
			e.preventDefault();
			if (x < max_fields_limit) { //check conditions
				x++; //counter increment
				$('.country_fields_container').append('<div class="addCoun 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 country" id="country_' + x + '" name="location[]"><div class="col-md-2"><button class="btn btn-sm btn-danger remove_field">Remove</button></div></div></div>');

				$('#country_' + x).rules('add', {required: true, notEqualToGroup: ['.country'], messages: {required: "Please enter country."}});
			}
		});
		$('.country_fields_container').on("click", ".remove_field", function (e) {
			//user click on remove text links
			e.preventDefault();
			$(this).parents('div[class^="addCoun"]').remove();
			x--;
		})
	});

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

	$('#row_dim').hide();
	
	//For videos
	$(document).on("focus", "#selVOD", function () { 
		var that = $(this);
		
		$(this).autocomplete({
			source: function (request, response) {
				$.ajax({
					url: '/kids/get_kid_videos',
					type: "POST",
					data: {"_token": "{{ csrf_token() }}", "name": that.val()},
					success: function (data) {
						response(data);
					}
				});
			},
			minLength: 1,
			select: function (event, ui) {
				//console.log(ui.item);
				$('#row_dim').show();
				that.data('id', ui.item.id);
				that.data('src', ui.item.src);

				that.siblings('.watchBTN').find('.watch_video').attr('data-id', ui.item.id);
				that.siblings('.watchBTN').find('.watch_video').attr('data-src', ui.item.src);
				that.siblings('#videoId').val(ui.item.id);
			}
		});
	});
	
	$(document).on('change', '.parentId', function(){
		var parentId = $(this).val();
		var id = $(this).data("id");
		var text = $(this).data("text");
		
		if(id == 'childCategory') {
			$('.childCategory'+id).html('');
			$('.subChildCategory').html('');
		}else if(id == 'subChildCategory') {
			$('.subChildCategory').html('');
		}
		// console.log("ID = "+id);
		$.ajax({
			headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
			type: "POST",
			url: "/ajax/child-ajax?random="+randNumGen(),
			data: {"parentId": parentId, "id": id, "text": text},
			cache: false,
			success: function(data){
				$('.'+id).html(data);
			}	
		});
	});

	$(document).ready(function () {
		$(".datepicker").datepicker({
			dateFormat: "yy-mm-dd",
			minDate: "0",
		});
	});

	$(document).on('click', '.watch_video', function (e) {
		e.preventDefault();
		$('#vodClass').attr("src", $(this).data('src'));
		$('#modalWatchVideo').modal('show');
		var video_block = $('#video');
		video_block.load();
	});

	//Unique validation
	$("#publishVOD").validate({
		rules: {
			'country[0]': {
				notEqualToGroup: ['.country']
			}
		},
		messages: {
			'country[0]': {
				notEqualToGroup: "Please enter different country."
			}
		}
	});
		
	//Generate encription key
    function randNumGen() {
        var encKey = "";
        var possible = "0123456789";

        for (var i = 0; i < 20; i++) {
            encKey += possible.charAt(Math.floor(Math.random() * possible.length));
        }
        return encKey;
    }
</script>

@endsection