@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>Edit Kid Videos</h3>
            </div>
            <div class="pull-right">
                <button class="btn btn-primary btn-sm" onclick="window.history.back();">Back</button>
            </div>
        </div>
    </div>
</div>

@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

<form id="editVOD" class="form-horizontal addBorderClass" method="POST" action="{{ route('kids.vod.kid_update', $video->id) }}">
	<input type="hidden" name="_token" value="{{ csrf_token() }}">
	<input type="hidden" name="_method" value="PATCH">
	<input type="hidden" name="type" value="vod">
	<input type="hidden" name="status" value="{{ $video->status }}">
	<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">Choose Video:</label>
            
            <input type="text" id="selVOD" class="col-md-4" name="video_name" value="{{ $video->video_name }}">

            <div class="col-md-2 watchBTN">
                <a class="btn btn-success btn-sm space_buttons watch_video" id="row_dim" data-id='' data-src=''>Watch Video</a>
            </div>
            <input type="hidden" class="col-md-4" id="videoId" name="video_id" value="{{ $video->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" value="{{ $video->start_date }}" />
                    
            <input type="date" id="end_date" name="end_date" class="col-md-2 datepicker" value="{{ $video->end_date }}" />
            <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 parentId" data-id="childCategory" data-text="Child Category" name="parent_id" class="form-control" >
				@foreach($kidParentCat as $video_category)
				<option {{$video_category->id==$video->kid_category_id?'selected':''}}  value="{{$video_category->id}}"> {{$video_category->name}} </option>
				@endforeach                
			</select>
		</div>
	</div>

	@foreach($kidCategory as $key=>$category)	
		<div class="col-xs-12 col-sm-12 col-md-12 childCategory">
			@if($key == 0)
				<div class="form-group">
					<label class="col-md-3">Child Category</label>
					<select class="col-md-4 parentId" id="childCategory" data-text="Sub Child Category" data-id="subChildCategory" name="parent_id" class="form-control" >
						@foreach($category as $video_category)
						<option {{$video_category->id==$video->kid_category_id?'selected':''}}  value="{{$video_category->id}}"> {{$video_category->name}} </option>
						@endforeach                
					</select>
				</div>
			@endif
		</div>		
		
		<div class="col-xs-12 col-sm-12 col-md-12 subChildCategory">
			@if($key == 1)
				<div class="form-group">
					<label class="col-md-3">Sub Child Category</label>
					<select class="col-md-4" id="subChildCategory" name="parent_id" class="form-control" >
						@foreach($category as $video_category)
						<option {{$video_category->id==$video->kid_category_id?'selected':''}}  value="{{$video_category->id}}"> {{$video_category->name}} </option>
						@endforeach                
					</select>
				</div>
			@endif
		</div>
	@endforeach
    <!-- Georestrictions -->
    <div class="col-xs-12 col-sm-12 col-md-12">
        <div class="form-group">
            <label class="col-md-3">Geo restrictions:</label>

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

            <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_container2">
    @foreach($georestrictions as $key=>$georestriction)
    @if($key > 0)
    <div class="addCoun2 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" name="location[]" value="{{ $georestriction }}"">
            <div class="col-md-2">
                <button class="btn btn-sm btn-danger remove_field">Remove</button>
            </div>
        </div>
    </div>
    @endif
    @endforeach
    </div>
    <div class="country_fields_container"></div>
    <!-- End georestrictions -->
    
    <div class="col-xs-12 col-sm-12 col-md-12 text-right">
		<button type="submit" class="btn btn-primary btn-sm">Update</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 precount = "