{{\App::setLocale(Session::get('locale'))}}
@extends('admin.layouts.app')
@section('title', trans('admin.add_product'))
@section('content-heading')
  <section class="content-header">
    <h1>@lang('admin.add_product')<small></small></h1>
    <ol class="breadcrumb">
      <li><a href="{{ route('admindashboard') }}"><i class="fa fa-dashboard"></i> @lang('admin.dashboard')</a></li>
      <li><a href="#">@lang('admin.products')</a></li>
      <li class="active">@lang('admin.add_product')</li>
    </ol>
    </section>
@endsection
@section('content')
<section class="content">
	<div class="row">
		<div class="col-xs-12">
			<div class="box">
				<div class="box-header"></div>
				<div class="box-body">
					<div class="x_panel">
						<div class="x_title">
							<h2></h2>
							<div class="clearfix"></div>
						</div>
						<div class="x_content">
						
						@if($errors->all())
							@foreach($errors->all() as $message)
								<div class="box no-border">
									<div class="box-tools">
										<p class="alert alert-warning alert-dismissible">
											{{ $message }}
											<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
										</p>
									</div>
								</div>
							@endforeach
						@elseif(session()->has('message'))
							<div class="box no-border">
								<div class="box-tools">
									<p class="alert alert-success alert-dismissible">
										{{ session()->get('message') }}
										<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
									</p>
								</div>
							</div>
						@elseif(session()->has('error'))
							<div class="box no-border">
								<div class="box-tools">
									<p class="alert alert-danger alert-dismissible">
										{{ session()->get('error') }}
										<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
									</p>
								</div>
							</div>
						@endif
						
							<form id="frm_prod_add" action="{{ route('admin.products.add.save') }}" class="form-horizontal form-label-left" method="post" enctype="multipart/form-data">
								{{ csrf_field() }}
								<input type="hidden" name="product_type" value="0" checked>
								{{--<div class="form-group">
									<label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name">@lang('admin.product_type') 
										<span class="required">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</span>
									</label>
									<div class="col-md-6 col-sm-6 col-xs-12">
										<label class="radio-inline">
											<input type="radio" name="product_type" value="0" checked>@lang('admin.normal_product')
										</label>
										<label class="radio-inline">
											<input type="radio" name="product_type" value="1">@lang('admin.redemption_product')
										</label>
									</div>
								</div>--}}
								
								<div class="form-group">
									<label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name">@lang('admin.product_name') 
										<span class="required">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</span>
									</label>
									<div class="col-md-6 col-sm-6 col-xs-12">
										<input type="text" id="name" name="name" value="{{ old('name') }}" placeholder="@lang('admin.product_name') " class="form-control col-md-7 col-xs-12">
									</div>
								</div>
								
								<div class="item form-group">
									<label class="control-label col-md-3 col-sm-3 col-xs-12">
										@lang('admin.category')<span class="required">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</span>
									</label>
									<div class="col-md-6 col-sm-6 col-xs-12">
										<select class="form-control" name="category" id="category" required>
											<option value="">-- Select --</option>
											{!! $cats_html !!}
										</select>
									</div>
								</div>
								
								<div class="form-group">
									<label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name">@lang('admin.description')
										<span class="required">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</span>
									</label>
									<div class="col-md-6 col-sm-6 col-xs-12">
										<textarea id="description" name="description" class="edtr form-control col-md-7 col-xs-12">
										
										</textarea>
									</div>
								</div>
								
								<div class="form-group">
									<label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name">@lang('admin.cover_image') 
										<span class="required">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</span>
									</label>
									<div class="col-md-6 col-sm-6 col-xs-12">
										<input class="form-control" id="feature_image" name="feature_image" type="file" /> 
									</div>
								</div>
								
								<div class="form-group">
									<label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name">@lang('admin.image')
										<span class="required">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</span>
									</label>
									<div class="col-md-6 col-sm-6 col-xs-12">
										<input class="form-control" id="image_gallery" name="image_gallery[]" multiple="" type="file" /> 
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name"></label>
									<div class="col-md-6 col-sm-6 col-xs-12">
										<div class="gallery"></div>	
									</div>
									
								</div>
								<input name="quantity" class="form-control" id="quantity" placeholder="@lang('admin.quantity')" required="required" type="hidden" value="10">
								<input name="price" class="form-control" id="price" placeholder="@lang('0')" required="required" type="hidden" value="10">
								<input name="retail_price" class="form-control" id="retail_price" placeholder="@lang('0')" required="required" type="hidden" value="10">
								{{--<div class="form-group">
									<label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name">@lang('admin.quantity')
										<span class="required">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</span>
									</label>
									<div class="col-md-6 col-sm-6 col-xs-12">
										<input name="quantity" class="form-control" id="quantity" placeholder="@lang('admin.quantity')" required="required" type="text" value="">
									</div>
								</div>
												 				
								<div class="form-group">
									<label id="price_lbl" class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name">@lang('admin.current_price')<span class="required">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</span>
									</label>
									<div class="col-md-6 col-sm-6 col-xs-12">
										<input name="price" class="form-control" id="price" placeholder="@lang('0')" required="required" type="number" value="">
									</div>
								</div>
								
								<div class="form-group">
									<label id="price_lbl" class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name">@lang('admin.retail_price')<span class="required">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</span>
									</label>
									<div class="col-md-6 col-sm-6 col-xs-12">
										<input name="retail_price" class="form-control" id="retail_price" placeholder="@lang('0')" required="required" type="number" value="">
									</div>
								</div>--}}
								
								<div class="item form-group">
									<label class="control-label col-md-3 col-sm-3 col-xs-12">@lang('admin.status')<span class="required">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</span>

									</label>
									<div class="col-md-6 col-sm-6 col-xs-12">
										<select id="status" name="status" class="form-control">
											<option selected value="1">@lang('admin.enable')</option>
											<option value="0">@lang('admin.disable')</option>
										</select>
									</div>
								</div>

								<div class="ln_solid"></div>
								<div class="form-group">
									<div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
										<button type="submit" class="btn btn-success" name="submit">Publish Product</button>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
@endsection

@section('extra-script')
<style>
.error {
  color: red;
}
.gallery img {
	max-width: 100px;
	max-height: 100px;
	border: 2px solid;
	border-radius: 5px;
	margin: 3px;
}
</style>
<link rel="stylesheet" href="{{asset('css/sweetalert.css')}}">
<script src="{{asset('js/sweetalert.min.js')}}"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>

<script>
$(function() {
	$('.edtr').wysihtml5();
    var imagesPreview = function(input, placeToInsertImagePreview) {
        if (input.files) {
            var filesAmount = input.files.length;
            for (i = 0; i < filesAmount; i++) {
                var reader = new FileReader();
                reader.onload = function(event) {
                    $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
                }
                reader.readAsDataURL(input.files[i]);
            }
        }
    };

    $('#image_gallery').on('change', function() {
		$('div.gallery').empty();
        imagesPreview(this, 'div.gallery');
    });
	
	var v = $("#frm_prod_add").validate({
		rules: {
			name: {
				required: true,
			},
			category: {
				required: true,
			},
			quantity: {
				required: true,
			},
			feature_image: {
				required: true,
			},			
			description: {
				required: true,
			}, 
			price: {
				required: true,
				min: 1,
				number: true,
			},
			retail_price: {
				required: true,
				min: 1,
				number: true,
			},
			image_gallery: {
				required: false,
			},
			se_password: {
				required: true,
			},
		},
		messages: {
			name: {
				required: "@lang('mall.required_product_name')",
			},
			category: {
				required: "@lang('mall.required_category')",
			},
			quantity: {
				required: "@lang('mall.required_quantity')",
			},
			feature_image: {
				required: "@lang('mall.required_feature_image')",
			},
			description: {
				required: "@lang('mall.required_product_desc')",
			},
			price: {
				required: "@lang('mall.required_price')",
				number: "@lang('mall.number_price')",
				min: "@lang('mall.min_price')",
			},
			retail_price: {
				required: "@lang('mall.required_price')",
				number: "@lang('mall.number_price')",
				min: "@lang('mall.min_price')",
			},
			se_password: {
				required: "@lang('word.se_password_required')",
			},
		},
		errorElement: "span",
		submitHandler: function(event) {
			event.submit();
		},
        highlight: function (input) {
            $(input).parents('.form-line').addClass('error');
        },
        unhighlight: function (input) {
            $(input).parents('.form-line').removeClass('error');
        }
	});
});
    </script>
@endsection