@extends('frontend.layouts.app')

@section('title', app_name() . ' | ' . __('labels.frontend.auth.register_box_title'))

@section('content')
	<div class="wrapper">
		<div class="header header-top">
			<a href="{{url('/dashboard')}}" class="header-menu"><i class="fa fa-arrow-left"></i></a>
			<h2 class="page-title">Request For Quotation</h2>
		</div><!-- header -->
		<div class="quote-suc"></div>
		<form method="post" id="quoteForm" enctype="multipart/form-data" >
			{!! csrf_field() !!}
			<div class="main-content">
				<div class="container-fluid pt-4">
					<div class="sign-up-form request_quote-form">
							<input type="hidden" name="splists" value="{{$spid}}">
							<input type="hidden" name="postedid" value="{{Auth::user()->id}}">
							<input type="hidden" name="cities" id="citiesIds" value="{{$cityId}}">
						<input type="hidden" name="services" id="servicesIds" value="{{$serviceId}}">
							<div class="form-group">
								<label >Quotation Message</label>
								<span id='err-qtext' class='error mb-2' style="display:none"><small>Please write your quotation details</small></span>
								<textarea name="quote_msg" class="form-control mb-2" placeholder="Write your message" id="q_msg" maxlength="500"></textarea>
								
								<p class="rchartext"><span id="rchars">500</span> Character(s) Remaining</p>
							</div><!-- form-group -->
							
							<div class="row select-city">
								<div class="col-md-6 form-group">
									<label class="mb-2">City : </label>
									@if($cityId != 0)
										<span>{{ $cityAll->city_name }}</span>
									@else
									<div class="select-block-city">
									<select name="cities">
										  <option value="0">Choose City</option>
										@foreach($cityAll as $key => $val)									
										  <option value="{{$val->id}}">{{$val->city_name}}</option>
										  
										@endforeach
										</select>
									</div>
									@endif
									
								</div>
								<div class="col-md-6 form-group">
									<label class="mb-2">Service : </label>
									@if($serviceId !=0)
									<span>{{ $serviceAll->category_name }}</span>
									@else
										<div class="select-block-city">
										<select name="services">
											  <option value="0">Choose Service</option>
											@foreach($serviceAll as $key => $val)									
											  <option value="{{$val->id}}">{{$val->category_name}}</option>
											  
											@endforeach
											</select>
										</div>
									@endif
								</div>
							</div>
							<div class="form-group">
								<label class="mb-2">Upload Photo/Document</label>
								<div class="upload-image-block">
									<div id="image-preview">
										<label class="newbtn" for="upload-pic">
										    <img id="upload-image-add" src="{{ asset('img/upload-image.jpg') }}" alt="">
										    <input id="upload-pic" name="uploadpic[]" type="file" multiple>
										</label>
									</div>
											
								</div><!-- upload-image-block -->
			
							</div><!-- form-group -->
					</div>
				</div><!-- container-fluid -->
			</div><!-- main-content -->
			<div class="footer">
				<input type="submit" name="save" id="quote-submit" class="block-btn" value="Send" />
				<!-- <a href="javascript:void(0)" class="block-btn">Send</a> -->
			</div><!-- footer -->
		</form>
	</div><!-- wrapper -->
	<div class="loader-main">
        	<div class="loading-wrapper">
			  <div class="loading-bar"></div>
			  <div class="loading-bar"></div>
			  <div class="loading-bar"></div>
			  <div class="loading-bar"></div>
			</div>
	</div>

	<script type="text/javascript">
		var storedFiles = [];
		//alert(BASEURL + '/quotation-submit');
		function removeFile() {
				var file = $(this).data("file");
				for(var i=0;i<storedFiles.length;i++) {
					if(storedFiles[i].name === file) {
						storedFiles.splice(i,1);
						break;
					}
				}
				$(this).parent().remove();
			}

		$(document).ready(function () {
			$('#upload-pic').change(function(){
				var files = event.target.files;

				var filesArr = Array.prototype.slice.call(files);
				var selDiv = $('#image-preview');
				filesArr.forEach(function(f) {			

					/*if(!f.type.match("image.*")) {
						return;
					}*/
					storedFiles.push(f);
					var reader = new FileReader();
					reader.onload = function (e) {
						var html = "<div class='upload-new'><img class='preview'  src='"+e.target.result+"'><span class='img-cross' data-file='"+f.name+"'>x</span></div>"
						selDiv.prepend(html);
						
					}
					reader.readAsDataURL(f); 
				});
			})
		    var maxLength = 500;
			$('#q_msg').keyup(function() {
				var textlen = maxLength - $(this).val().length;
				if($('#q_msg').val() == ''){
					$('#err-qtext').css('display','inline-block');
			  		$('#rchars').text(textlen);	
				}else{
					$('#err-qtext').css('display','none');
					$('#rchars').text(textlen);	
				}
			});

			$(document).on("click", ".img-cross", removeFile);
	
			
			$("#quote-submit").click(function(e) {
				e.preventDefault();
				if($('#q_msg').val() == ''){
					$('#err-qtext').css('display','inline-block');
					return false;
				}else{
					$('#err-qtext').css('display','none');
					var form = $('form')[0]; 
					var formData = new FormData(form);
					var len = storedFiles.length;
					for(var j=0; j<len; j++) {
						formData.append('uploadfiles[]', storedFiles[j]);	
					}
					//alert(BASEURL);
					$.ajax({
					    url: BASEURL + '/quotation-submit',
					    data: formData,
					    type: 'POST',
					    contentType: false,
					    processData: false,
					     beforeSend: function() {
					       $('.loader-main').css('display','inline-block');
					    },
					    success: function(response){
					    	if(response.success == true){
					    		$('.loader-main').css('display','none');
					    		$('#quoteForm').css('display','none');
					    		$('.quote-suc').html('<div class="quotation-success"><h2>Quotation submited successfully.</h2></div> <div class="return-home"><a class="btn btn-warning mt-3" href="' + BASEURL +'/dashboard">Home</a></div>');
					    	}
					    }
					});
				  }
				
				});
			});

		
	</script>

	

@endsection