@extends('admin.layout.master')

@section('content')
<div id="uploadimageModal1" class="modal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Upload & Crop Image</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12 text-center">
                        <div id="image_demo" style="width:350px; margin-top:30px"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-success crop_image">Crop & Upload Image</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<div class="app-content  my-3 my-md-5">
<div class="side-app">
<div class="page-header">
	<h4 class="page-title">Edit Listing</h4>
	<ol class="breadcrumb">
		<li class="breadcrumb-item"><a href="{{ route('admin.propList') }}">Listings</a></li>
		<li class="breadcrumb-item active" aria-current="page">Edit Listing</li>
	</ol>

</div>
@if(Session::has('success'))

			<div class="alert alert-primary">
				<p>{{ Session::get('success') }}</p>
			</div>

		@endif

		@if(Session::has('errors'))

			<div class="alert alert-danger">
				<p>{{ Session::get('errors') }}</p>
			</div>

		@endif
<div class="row ">
	
	<div class="col-lg-12">
		<form class="card" method="post" action="{{ route('admin.propupdate', base64_encode($prop->id))}}" enctype="multipart/form-data">
			@csrf
			<div class="card-header">
				<h3 class="card-title">Edit Listing </h3>
			</div>
			<div class="card-body">
				<div class="row">
					<input type="hidden" name="edit_id" value="{{ $prop->id }}" id="edit_id">


					<div class="col-sm-6 col-md-4">
						<div class="form-group">
							<label class="form-label">Company Name*</label>
							<span><p id="editcompanynamecheck" style="color: red; display: none;"></p></span>
							<select class="form-control" name="company_id" id="editcompany_id" onchange="getuserval(this)">
								<option value="">--Select--</option>
								@if($prop->company_id == NULL)
									@foreach($com as $val)
										<option value="{{ $val->id }}">{{ $val->company_name }}</option>
									@endforeach
								@else
									@foreach($com as $val)
										<option value="{{ $val->id }}" {{ $prop->company_id == $val->id ? 'selected' : '' }}>{{ $val->company_name }}</option>
									@endforeach
								@endif
							</select>
						</div>
					</div>

					<div class="col-sm-6 col-md-4">
						<div class="form-group">
							<label class="form-label">Client Name*</label>
							<span><p id="editclientnamecheck" style="color: red; display:none;"></p></span>
							<select class="form-control" name="user_id" id="edituser_id">
								<option value="">--Select--</option>
								@if($prop->user_id != NULL)
									@foreach($user as $val)
										<option value="{{ $val->id }}" {{ $prop->user_id == $val->id ? 'selected' : '' }}>{{ $val->name }}</option>
									@endforeach
								@endif
								
							</select>
						</div>
					</div>
					

					<div class="col-sm-6 col-md-4">
						<div class="form-group">
							<label class="form-label">Listing Name*</label>
							<span><p id="editpropnamecheck" style="color: red; display:none;"></p></span>
							<input type="text" class="form-control" name="name" value="{{ $prop->prop_name }}" id="editname">
						</div>
					</div>


					<div class="col-sm-6 col-md-4">
						<div class="form-group">
							<label class="form-label">Category First Level*</label>
							<span><p id="editpropcatcheck" style="color: red; display:none;"></p></span>
							
							<select class="form-control" name="propcat" id="propcat1" onchange="getpropval(this)">
								<option value="">--Select--</option>
								@if($prop->parent_catid == NULL)
									@foreach($cat as $val)
										<option value="{{ $val->id }}">{{ $val->cat_name }}</option>
									@endforeach
								@else
									@foreach($parentcatall as $val)
										<option value="{{ $val->id }}" {{ $parentcat->id == $val->id ? 'selected' : '' }}>{{ $val->cat_name }}</option>
									@endforeach
								@endif
							</select>
						</div>
					</div>


					<div class="col-sm-6 col-md-4">
						<div class="form-group">
							<label class="form-label">Category Second Level*</label>
							<span><p id="editpropsubcatcheck" style="color: red; display:none;"></p></span>
							<select class="form-control" name="subcat" id="propsubcat1" onchange="getpropsubval(this)">
								<option value="">--Select--</option>
								@if($prop->catid != NULL)
									@foreach($subcatall as $val)
										<option value="{{ $val->id }}" {{ $childcat->id == $val->id ? 'selected' : '' }}>{{ $val->cat_name }}</option>
									@endforeach
								@endif						
							</select>
						</div>
					</div>


					<div class="col-sm-6 col-md-4">
						<div class="form-group">
							<label class="form-label">Category Third Level</label>
							<select class="form-control" name="subsubcat" id="propsubsubcat1">
								<option value="">--Select--</option>
								@if($prop->sub_catid != NULL)
									@foreach($subsubcatall as $val)
										<option value="{{ $val->id }}" {{ $gchildcat->id == $val->id ? 'selected' : '' }}>{{ $val->cat_name }}</option>
									@endforeach
								@endif
								
							</select>
						</div>
					</div>



					
					
					<div class="col-sm-6 col-md-12">
						<div class="form-group">
							<label class="form-label">Address*
							</label>
							<span><p id="editpropaddrcheck" style="color: red; display:none;"></p></span>
							<input type="text" class="form-control" name="addr" value="{{ $prop->prop_addr }}" id="editaddr">
						</div>
					</div>


					<div class="col-sm-6 col-md-3">
						<div class="form-group">
							<label class="form-label">City*
							</label>
							<span><p id="editpropcitycheck" style="color: red; display:none;"></p></span>
							<input type="text" class="form-control" name="city" value="{{ $prop->prop_city }}" id="editcity">
						</div>
					</div>


					<div class="col-sm-6 col-md-3">
						<div class="form-group">
							<label class="form-label">State</label>
							<span><p id="editpropstatecheck" style="color: red; display:none;"></p></span>
							<input type="text" class="form-control" name="state" value="{{ $prop->prop_state }}" id="esditstate">
						</div>
					</div>
					

					<div class="col-sm-6 col-md-3">
						<div class="form-group">
							<label class="form-label">Country*
							</label>
							<span><p id="editpropcountrycheck" style="color: red; display:none;"></p></span>
							<select class="form-control" name="country" id="editcountry">
								@foreach($country as $val)
								<option value="{{$val->id}}" {{ $prop->prop_country == $val->id ? 'selected' : '' }}>{{$val->country_name}}
								</option>
								@endforeach
							</select>
						</div>
					</div>


					
					<div class="col-sm-6 col-md-3">
						<div class="form-group">
							<label class="form-label">Postal Code</label>
							<span><p id="editpropzipcodecheck" style="color: red; display:none;"></p></span>
							<input type="text" class="form-control" name="zipcode" value="{{ $prop->prop_pincode }}" id="editzipcode" {{$prop->parent_catid==2 ? 'disabled':''}}>
						</div>
					</div>
					

					<div class="col-sm-6 col-md-12">
						<div class="form-group">
							<label class="form-label">Description</label>
							<span><p id="editpropdesccheck" style="color: red; display:none;"></p></span>
							<textarea class="form-control ckeditor" name="desc" id="editdesc">{{ $prop->prop_desc }}</textarea>
						</div>
					</div>

					
					<div class="col-sm-6 col-md-4">
						<div class="form-group">
							<label class="form-label">End Date</label>
							<span><p id="editpropenddatecheck" style="color: red; display:none;"></p></span>
							<input class="form-control" type="date" id="example-date-input" name="enddate" value="{{ $prop->endDate }}">
						</div>
					</div>


					<div class="col-sm-6 col-md-4">
						<div class="form-group">
							<label class="form-label">End Time</label>
							<span><p id="editpropendtimecheck" style="color: red; display:none;"></p></span>
							<input class="form-control" type="time" id="example-time-input" name="etime" value="{{ $prop->endTime }}">
						</div>
					</div>


					<div class="col-sm-6 col-md-4">
						<div class="form-group">
							<label class="form-label">Min Bid Price</label>
							<span><p id="editcurrencycheck" style="color: red; display:none;"></p></span>
							<div class="input-group mb-2">
							<div class="input-group-prepend">
									@if($prop->curr_id != NULL)
										<div class="input-group-text">
											<input type="hidden" name="currency" value="{{$prop->curr_id}}">
											{{$prop->currency['curr_code']}}
										</div>
									@else
										<select class="form-control" name="currency" id="acurrency">
											<option value="">--Select--</option>
											@foreach($curr1 as $val)
												<option value="{{$val->id}}">{{$val->curr_name}}</option>
											@endforeach	
										</select>
									@endif
							</div>
								<input type="text" class="form-control" name="price" value="{{ $prop->prop_price }}" id="editprice">
							</div>
						</div>	
					</div>

					
					<div class="col-sm-6 col-md-12">
						<div class="form-group">
							<label class="form-label">Main Picture</label>
							<span><p id="propgallerypiccheck" style="color: red; display:none;"></p></span>
							<input type="file" class="form-control" name="mainpic1" id="gallerypic1">
						</div>
						<textarea name="mainpic2"  id="gallerypic" style="display: none;"></textarea>
						<!-- <input type="file" name="mainpic" id="gallerypic" style="display: none;"> -->
					</div>	

					<div id="uploaded_image"></div>

					

				</div>
			</div>
			<div class="card-footer text-center">
				@if($prop->status != 5)
				<input type="submit" class="btn btn-primary btn-lg custom-btn mr-2" name="update" value="Update" id="update" onclick="return edit()">
				@else
				<input type="submit" class="btn btn-warning btn-lg custom-btn mr-2" name="save" value="Save" id="save">
							
				<input type="submit" class="btn btn-secondary btn-lg custom-btn" name="stcfa" value="Send To Client For Approval" id="stcfa" onclick="return edit()">

				<input type="submit" class="btn btn-primary btn-lg custom-btn mr-2" name="publish" value="Publish" id="publish" onclick="return edit()">
				@endif
			</div>
		</form>
	</div>
</div>
</div>
</div>


@endsection
@section('scripts')
<script type="text/javascript">
	function getpropval(sel)
	{
		var catId   = sel.value;
		var _token  = $('input[name="_token"]').val();

		if(catId != '')
		{

			$.ajax({
			    method: "POST", 
			    url	  : "{{ route('admin.catPropFetch') }}", 
			    data  : {'id' : catId, '_token':_token},
			    success: function(result)
			    { 
			       	$('#propsubcat1').html(result);
			       	// alert(result);
				}
			});
		}
	}



function getpropsubval(id)
{
	var catId = id.value;
	var _token    = $('input[name="_token"]').val();


	if(catId != '')
	{

		$.ajax({
		    method: "POST", 
		    url	  : "{{ route('admin.catPropSubFetch') }}", 
		    data  : {'id' : catId, '_token':_token},
		    success: function(result)
		    { 
		       	$('#propsubsubcat1').html(result);
		       	// alert(result);
			}
		});
	}
}


function getuserval(id) {
			var comId = id.value;
			var _token    = $('input[name="_token"]').val();

			if(comId != '')
			{

				$.ajax({
				    method: "POST", 
				    url	  : "{{ route('admin.userFetch') }}", 
				    data  : {'id' : comId, '_token':_token},
				    success: function(result)
				    { 
				       	$('#edituser_id').html(result);
				       	// alert(result);
					}
				});
			}
		}


</script>


<script type="text/javascript">

function edit() {

	var user    = $('#edituser_id').val();
	var client  = $('#editname').val();
	var cat     = $('#propcat1').val();
	var subcat  = $('#propsubcat1').val();
	var country = $('#editcountry').val();
	var state   = $('#editstate').val();
	var city    = $('#editcity').val();
	var zip     = $('#editzipcode').val();
	var addr    = $('#editaddr').val();
	var desc    = $('#editdesc').val();
	var edate   = $('#example-date-input').val();
	var etime   = $('#example-time-input').val();
	var price   = $('#editprice').val();
	var curr    = $('#acurrency').val();


	// alert('hi');
	// return false;
	
	if(user == '' || user == 0 || user == 'NULL')
	{
		$('#editclientnamecheck').show();
		$('#editclientnamecheck').html('** Please Select Client');
		setTimeout(function(){
			  $('#editclientnamecheck').hide();
			}, 5000);

		return false;
	}
	else if(client == '')
	{
		$('#editpropnamecheck').show();
		$('#editpropnamecheck').html('** Please Enter A Name For Your Listing');
		setTimeout(function(){
			  $('#editpropnamecheck').hide();
			}, 5000);

		return false;
	}
	else if(cat == '' || cat == 'NULL' || cat == 0)
	{
		$('#editpropcatcheck').show();
		$('#editpropcatcheck').html('** Please Select Category');
		setTimeout(function(){
			  $('#editpropcatcheck').hide();
			}, 5000);

		return false;
	}
	else if(subcat == '' || subcat == 'NULL' || subcat == 0)
	{
		$('#editpropsubcatcheck').show();
		$('#editpropsubcatcheck').html('** Please Select Sub-Category');
		setTimeout(function(){
			  $('#editpropsubcatcheck').hide();
			}, 5000);

		return false;
	}

	else if(addr == '')
	{
		$('#editpropaddrcheck').show();
		$('#editpropaddrcheck').html('** Please Enter Your Address');
		setTimeout(function(){
			  $('#editpropaddrcheck').hide();
			}, 5000);

		return false;
	}

	else if(city == '')
	{
		$('#editpropcitycheck').show();
		$('#editpropcitycheck').html('** Please Enter Your City');
		setTimeout(function(){
			  $('#editpropcitycheck').hide();
			}, 5000);

		return false;
	}


	else if(country == '' || country == 0 || country == 'NULL')
	{
		$('#editpropcountrycheck').show();
		$('#editpropcountrycheck').html('** Please Select Country');
		setTimeout(function(){
			  $('#editpropcountrycheck').hide();
			}, 5000);

		return false;
	}


	else if(edate != '' && etime == '')
	{
			$('#editpropendtimecheck').show();
			$('#editpropendtimecheck').html('** Please Enter End Time');
			setTimeout(function(){
				  $('#editpropendtimecheck').hide();
				}, 5000);

			return false;
	}


	else if(etime != '' && edate == '')
	{
			$('#editpropenddatecheck').show();
			$('#editpropenddatecheck').html('** Please Enter End Date');
			setTimeout(function(){
				  $('#editpropenddatecheck').hide();
				}, 5000);

			return false;
	}

	else if(curr == '' || curr == 0 || curr == 'NULL')
	{
		$('#editcurrencycheck').show();
		$('#editcurrencycheck').html('** Please Select Currency');
		setTimeout(function(){
			  $('#editcurrencycheck').hide();
			}, 5000);

		return false;
	}

	else
	{
		return true;
	}
	
}

</script>

<script>
    $(document).ready(function () {

     var image_crop = $('#image_demo').croppie({
            enableExif: true,
            viewport: {
                width: 400,
                height: 400,
                type: 'square' //circle
            },
            boundary: {
                width: 300,
                height: 300
            }
        });

        $('#gallerypic1').on('change', function () {
            var reader = new FileReader();
            reader.onload = function (event) {
                image_crop.croppie('bind', {
                    url: event.target.result
                }).then(function () {
                    console.log('jQuery bind complete');
                });
            }
            reader.readAsDataURL(this.files[0]);
            $('#uploadimageModal1').modal('show');
        });

        $('.crop_image').click(function (event) {
            image_crop.croppie('result', {
                type: 'canvas',
                size: 'viewport'
            }).then(function (response) {
            	$('#gallerypic').html(response);
            	$('#uploadimageModal1').modal('hide');
                // alert(response);
                
        });
    });

});

                            
</script>
@endsection