{{\App::setLocale(Session::get('locale'))}}
@extends('admin.layouts.app')
@section('title', 'Edit Product')
@section('content-heading')
  <section class="content-header">
    <h1>@lang('admin.edit_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.edit_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.edit.save',['id' => $prodObj->id]) }}" class="form-horizontal form-label-left" method="post" enctype="multipart/form-data">
								{{ csrf_field() }}
								
								{{--<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">
										@if($prodObj->type == 0)
											<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>
										@else
											<label class="radio-inline">
												<input type="radio" name="product_type" value="0">@lang('admin.normal_product')
											</label>
											<label class="radio-inline">
												<input type="radio" name="product_type" value="1" checked>@lang('admin.redemption_product')
											</label>
										@endif
										
									</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="{{ $prodObj->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">{{$prodObj->description}}</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"></span>
									</label>
									<div class="col-md-6 col-sm-6 col-xs-12">
										<img id="feature_image_src" style="max-height: 100px;" src="{{ asset("merchant/product/$prodObj->feature_image") }}" alt="" class="img-responsive img-thumbnail">
									</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="BankName"></label>
									<div id="gal_img_prev" class="col-md-6 col-sm-6 col-xs-12">
									@foreach($image_gallery as $image)
										<div id="img_{{$image->id}}" class="col-md-3 gallery">
											<div>
												<img src="{{ asset("merchant/product/$image->src") }}" alt="" class="gal-img img-responsive img-thumbnail">
											</div>
											<button type="button" data-src="{{ $image->src }}" data-id="{{ $image->id }}" class="gal-img-rmv">x</button>
										</div>
									@endforeach
									</div>
								</div>
								
								<input name="quantity" class="form-control" id="quantity" placeholder="@lang('admin.quantity')" required="required" type="hidden" value="{{$prodObj->stock }}">
								<input name="price" class="form-control" id="price" placeholder="@lang('0')" required="required" type="hidden" value="{!! $prodObj->price  !!}">
								<input name="retail_price" class="form-control" id="retail_price" placeholder="@lang('0')" required="required" type="hidden" value="{!! $prodObj->retail_price  !!}">
									{{--
								<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="{{$prodObj->stock }}">
									</div>
								</div>
								
								<div class="form-group">
									<label id="price_lbl" class="control-label col-md-3 col-sm-3 col-xs-12" for="BankName">@lang('admin.current_price') <span class="required">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</span></label>
									<div class="col-sm-6">
										<div class="form-line">
											<input id="price" name="price" type="number" value="{!! $prodObj->price  !!}" class="form-control" placeholder="@lang('0')" required="required" >
										</div>	
									</div>
								</div>
								
								<div class="form-group">
									<label id="price_lbl" class="control-label col-md-3 col-sm-3 col-xs-12" for="BankName">@lang('admin.retail_price') <span class="required">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</span></label>
									<div class="col-sm-6">
										<div class="form-line">
											<input id="retail_price" name="retail_price" type="number" value="{!! $prodObj->retail_price  !!}" class="form-control" placeholder="@lang('0')" required="required" >
										</div>	
									</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">
											@if($prodObj->status == 1)
												<option selected value="1">@lang('admin.enable') </option>
												<option value="0">@lang('admin.disable') </option>
											@else
												<option value="1">@lang('admin.enable')</option>
												<option selected value="0">@lang('admin.disable')</option>
											@endif
										</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(e, a) {
		if (e.files) {
			var r = e.files.length;
			for (i = 0; i < r; i++) {
				var t = new FileReader;
				t.onload = function(e) {
					h =	'<div class="col-md-2 gallery">';
					h += '<div><img src="'+e.target.result+'" alt="" class="gal-img img-responsive img-thumbnail"></div>';
					h += '<button type="button" class="gal-img-rmv">x</button>';
					h += '</div>';
					a.append(h);
					
				}, t.readAsDataURL(e.files[i])
			}
		}
	};
	
	var imagePreview = function (e, a) {
		if (e.files && e.files[0]) {
			var r = new FileReader;
			r.onload = function(e) {
				a.attr("src", e.target.result)
			}, r.readAsDataURL(e.files[0])
		}
	}

    $('#image_gallery').on('change', function() {
        imagesPreview(this, $('#gal_img_prev'));
    });
	$('#feature_image').on('change', function() {
        imagePreview(this,$('#feature_image_src'));
    });
	$(document).on('click', '.gal-img-rmv', function(e){ 
		e.preventDefault(); 
		var img_src = $(this).data('src');
		var img_id = $(this).data('id');
		var imgEl = $(this).parent();
		if (typeof img_src !== typeof undefined && img_src !== false) {
			$.ajax({
				url: '{{ route("admin.image.remove.save") }}',
				type: 'POST',
				data: {
					"_token": "{{ csrf_token() }}",
					'id':img_id,
				},
				success: function(data) {
					imgEl.hide('slow', function(){ imgEl.remove(); });
				}
			});
		}else{
			imgEl.hide('slow', function(){ imgEl.remove(); });
		}
		return false;
	});
	
	var v = $("#frm_prod_add").validate({
		rules: {
			name: {
				required: true,
			},
			category: {
				required: true,
			},
			quantity: {
				required: true,
			},
			description: {
				required: true,
			}, 
			price: {
				required: true,
				min: 1,
				number: true,
			},
			retail_price: {
				required: true,
				min: 1,
				number: true,
			},
			feature_image: {
				required: false,
			},
			image_gallery: {
				required: false,
			}			
		},
		messages: {
			name: {
				required: "@lang('mall.required_product_name')",
			},
			category: {
				required: "@lang('mall.required_category')",
			},
			quantity: {
				required: "@lang('mall.required_quantity')",
			},
			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')",
			},
		},
		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