@extends('layouts.admin', ['title' => 'ویدئو جدید'])
 
@section('css')
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.4/croppie.min.css">
@endsection

@section('content')

	<h3>مدیریت ویدیوها</h3>
	<hr />

		<h4>ویدیو جدید</h4>
	<div class="row">
		<div class="col-md-12">
			<form action="{{ url('admin/video/add')}}" method="post"  enctype="multipart/form-data">
			<input type="hidden" name="_token" value="{{ csrf_token() }}">

			<div class="form-group">
				<label for="title">عنوان</label>
				<input type="text" class="form-control" id="title" name="title" placeholder="عنوان">
				<span class="error">{{ $errors->first('title') }}</span>
			</div>
			
			<div class="form-group">
				<label for="link">لینک</label>
				<input type="text" class="form-control" id="link" name="link" placeholder="لینک">
				<span class="error">{{ $errors->first('link') }}</span>
			</div>
			
			<div class="form-group">
				<label for="date_time">کد یکتا</label>
				<input type="text" class="form-control" style="direction:ltr;text-align:right;" id="videocode" name="videocode" placeholder="کد یکتا ویدئو">
				<span class="error">{{ $errors->first('videocode') }}</span>
			  </div>

			<div class="form-group">
				<label for="content">متن</label>
				<textarea  class="ckeditor" name="content" id="content" ></textarea>
				<span class="error">{{ $errors->first('content') }}</span>
			</div>

			<div class="form-group"  >
				<label for="image">تصویر</label>
				<input type="file" id="image" name="image">
				<span class="error">{{ $errors->first('image') }}</span>
				<p class="help-block">اندازه مناسب برای صفحه اول 600*600 پیکسل</p>
			</div>

			<div class="form-group"> 
				<img id="my-image" src="#" /> 
				<input type="hidden" name="imagedata" id="imagedata">
			</div>

			<div class="form-group"  >
				<label for="video">ویدیو</label>
				<input type="file" id="video" name="video">
				<span class="error">{{ $errors->first('video') }}</span>
				<!-- <p class="help-block">Example block-level help text here.</p> -->
			</div>

			<button type="submit" class="btn btn-primary" id="save">ذخیره</button>
			<a href="/admin/video" class="btn btn-default">بازگشت</a>

			<p class="success">{{ session('message') }}</p>
			<p class="error">{{ session('error') }}</p>
		</form>
		</div>
	</div>

@stop

@section('javascript')
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.4/croppie.min.js"></script> 
<script src="/ckeditor/ckeditor.js?u=2"></script>

<script type="text/javascript">
	  
	function readURL(input) {
		if (input.files && input.files[0]) {
			var reader = new FileReader();
			reader.onload = function(e) {
				$('#my-image').attr('src', e.target.result);
				var resize = new Croppie($('#my-image')[0], {
					viewport: { width: 600, height: 600 },
					boundary: { width: 650, height: 650 },
					showZoomer: false,
					enableResize: false,
					enableOrientation: true,
					enableZoom: true,
				});
			
				$('#save').on('click', function() {
					resize.result('base64').then(function(dataImg) { 
						$('#imagedata').val(dataImg);
					}) 
				})
			}
			reader.readAsDataURL(input.files[0]);
		}
	}
		
	$("#image").change(function() {
		readURL(this);
	});
  
</script>
@stop