@extends('frontend.layout.master')

@section('content')

<div class="app-content  my-3 my-md-5">
		<div class="side-app">
			<div class="page-header">
				<h4 class="page-title">Add New Listing</h4>
				<ol class="breadcrumb">
					<li class="breadcrumb-item">
					@if(Auth::user())
							<a href="{{route('front.profile')}}">Home</a>
					@else
							<a href="{{route('front.dashboard')}}">Home</a>
					@endif
					</li>
					<li class="breadcrumb-item active" aria-current="page">Add New 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('front.storeMotgage')}}" enctype="multipart/form-data" onsubmit="return cpropertyAdd()">
						@csrf
						<div class="card-header">
							<h3 class="card-title">Add New Listing</h3>
						</div>
						<div class="card-body">
							<div class="row">


								<input type="hidden" name="user_id" id="user_id" value="{{Auth::user()->id}}">

								<div class="col-sm-6 col-md-12">
									<div class="form-group">
										<label class="form-label">Listing Name*</label>
										<span><p id="propnamecheck" style="color: red; display: none;"></p></span>
										<input type="text" class="form-control" name="name" id="name">
									</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="propcatcheck" style="color: red; display: none;"></p></span>
										<select class="form-control" name="propcat" id="propcat" onchange="cgetpropval(this)">
											<option value="NULL">--Select--</option>
											@foreach($cat as $val)
											<option value="{{ $val->id }}">{{ $val->cat_name }}</option>
											@endforeach
										</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="propsubcatcheck" style="color: red; display: none;"></p></span>
										<select class="form-control " name="subcat" id="propsubcat" onchange="cgetpropsubval(this)">
											<option value="NULL">--Select--</option>
											
										</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 custom-select" name="subsubcat" id="propsubsubcat">
											<option value="NULL">--Select--</option>
											
										</select>
									</div>
								</div>


								<div class="col-sm-6 col-md-12">
									<div class="form-group">
										<label class="form-label">Address*</label>
										<span><p id="propaddrcheck" style="color: red; display: none;"></p></span>
										<input type="text" class="form-control" name="addr" id="addr">
									</div>
								</div>


								<div class="col-sm-6 col-md-3">
									<div class="form-group">
										<label class="form-label">City*</label>
										<span><p id="propcitycheck" style="color: red; display: none;"></p></span>
										<input type="text" class="form-control" name="city" id="city">
									</div>
								</div>


								<div class="col-sm-6 col-md-3">
									<div class="form-group">
										<label class="form-label">State</label>
										<span><p id="propstatecheck" style="color: red; display: none;"></p></span>
										<input type="text" class="form-control" name="state" id="state">
									</div>
								</div>


								

								<div class="col-sm-6 col-md-3">
									<div class="form-group">
										<label class="form-label">Country*</label>
										<span><p id="propcountrycheck" style="color: red; display: none;"></p></span>
										<select class="form-control " name="country" id="fcountry">
											@foreach($country as $val)
											<option value="{{$val->id}}">{{$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="propzipcodecheck" style="color: red; display: none;"></p></span>
										<input type="text" class="form-control" name="zipcode" id="zipcode">
									</div>
								</div>



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

								
								<div class="col-sm-6 col-md-3">
									<div class="form-group">
										<label class="form-label">End Date</label>
										<span><p id="propenddatecheck" style="color: red; display: none;"></p></span>
										<input class="form-control" type="date" id="example-date-input" name="enddate">
									</div>
								</div>


								<div class="col-sm-6 col-md-3">
									<div class="form-group">
										<label class="form-label">End Time</label>
										<span><p id="propendtimecheck" style="color: red; display: none;"></p></span>
										<input class="form-control" type="time" id="example-time-input" name="etime">
									</div>
								</div>

								<div class="col-sm-6 col-md-3">
									<div class="form-group">
										<label class="form-label">Currency*</label>
										<span><p id="propcurrencycheck" style="color: red; display: none;"></p></span>
										<select class="form-control" name="currency" id="propcurrency">
											<option value="NULL">--Select--</option>
											@foreach($currency as $val)
											<option value="{{$val->id}}">{{$val->curr_name}}</option>
											@endforeach
											
										</select>
									</div>
								</div>


								<div class="col-sm-6 col-md-3">
									<div class="form-group">
										<label class="form-label">Min Bid Price</label>
										<span><p id="proppricecheck" style="color: red; display: none;"></p></span>
										<input type="text" class="form-control" name="price" id="mprice">
									</div>
								</div>


								<div class="col-sm-6 col-md-6">
									<div class="form-group">
										<label class="form-label">Main Picture*</label>
										<span><p id="propmainpiccheck" style="color: red; display: none;"></p></span>
										<input type="file" class="form-control" name="main_pic" id="mainpic">
									</div>
								</div>


								<div class="col-sm-6 col-md-6">
									<div class="form-group">
										<label class="form-label">Gallery Picture</label>
										<span><p id="propgallerypiccheck" style="color: red; display: none;"></p></span>
										<input type="file" class="form-control"name="gallery_pic[]" multiple id="gallerypic">
									</div>
								</div>

							</div>
						</div>
						<div class="card-footer text-center">
							<!-- <button type="submit" class="btn btn-primary" id="activate">Publish</button> -->
							<input type="submit" class="btn btn-primary btn-lg custom-btn mr-2" name="publish" value="Publish">
							<input type="submit" class="btn btn-secondary btn-lg custom-btn" name="save" value="Save">
							<!-- <button class="btn btn-secondary" id="save">Save</button> -->
							
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
@endsection

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

			if(catId != '')
			{

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



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

			if(catId != '')
			{

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

		
</script>

<script type="text/javascript">
	
	function cpropertyAdd() {
		
		var user    = $('#user_id').val();
		var client  = $('#name').val();
		var cat     = $('#propcat').val();
		var subcat  = $('#propsubcat').val();
		var country = $('#fcountry').val();
		var state   = $('#state').val();
		var city    = $('#city').val();
		var zip     = $('#zipcode').val();
		var addr    = $('#addr').val();
		var desc    = $('#desc').val();
		var edate   = $('#example-date-input').val();
		var etime   = $('#example-time-input').val();
		var currency= $('#porpcurrency').val();
		var price   = $('#mprice').val();
		var mainpic = $('#mainpic').val();
		var galpic  = $('#gallerypic').val();
		// var save  = $('#save');
		
		if(user == '' || user == 0)
		{
			$('#clientnamecheck').show();
			$('#clientnamecheck').html('** Please Select User');
			setTimeout(function(){
				  $('#clientnamecheck').hide();
				}, 5000);

			return false;
		}
		else if(client == '')
		{
			$('#propnamecheck').show();
			$('#propnamecheck').html('** Please Fill Property Name');
			setTimeout(function(){
				  $('#propnamecheck').hide();
				}, 5000);

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

			return false;
		}
		else if(subcat == 'NULL' || subcat == '')
		{
			$('#propsubcatcheck').show();
			$('#propsubcatcheck').html('** Please Select SubCategory');
			setTimeout(function(){
				  $('#propsubcatcheck').hide();
				}, 5000);

			return false;
		}

		else if(addr == '')
		{
			$('#propaddrcheck').show();
			$('#propaddrcheck').html('** Please Fill This Address Field');
			setTimeout(function(){
				  $('#propaddrcheck').hide();
				}, 5000);

			return false;
		}

		else if(city == '')
		{
			$('#propcitycheck').show();
			$('#propcitycheck').html('** Please Fill This City Field');
			setTimeout(function(){
				  $('#propcitycheck').hide();
				}, 5000);

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

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

				return false;
			}
		}

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

				return false;
			}
		}

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

			return false;
		}
		
		else if(mainpic == '')
		{
			$('#propmainpiccheck').show();
			$('#propmainpiccheck').html('** Please Select Main Property Image ');
			setTimeout(function(){
				  $('#propmainpiccheck').hide();
				}, 5000);

			return false;
		}
		
		else
		{
			return true;
		} 
	}
</script>


<script type="text/javascript">
	
	function save() {
		alert('hi');
	}
</script>