@extends('layouts.user')

@section('before-styles')

	<link href="{{asset('common/assets/css/material-bootstrap-wizard.css')}}" rel="stylesheet" />

	<link rel="stylesheet" href="{{asset('common/css/bootstrap-dialog.min.css')}}">

	<!-- CSS Just for demo purpose, don't include it in your project -->
	<link href="{{asset('common/assets/css/demo.css')}}" rel="stylesheet" />
	<link href="{{asset('common/css/bootstrap-datetimepicker.css')}}" rel="stylesheet" />
<style type="text/css">
	.common-bg-link {
		cursor: pointer;
	}
	.btn-next {
		cursor:  pointer;
	}
    #map {
        height: 100%;
        min-height: 400px; 
    }

	.disabled_tags {
	   pointer-events: none;
	   cursor: default;
	}

</style>
@endsection

@section('content')

<div class="image-container set-full-heightreq-col " style="background-color: #f1f1f1;">

    <!--   Big container   -->
    <div class="container">
        <div class="create-job-row row m-0 p-30">
	        <div class="col-sm-12">
	            <!--      Wizard container        -->
	            <div class="wizard-container">
	                <div class="card wizard-card" data-color="green" id="wizardProfile">
	                    <form action="" method="" id="create_job">
	                    	<input type="hidden" name="temp_request_id" id="temp_requests_id" value="{{$request->id}}"/>
	                    	<input type="hidden" name="job_type" id="job_type" value="{{$request->job_type}}" />
	                    	<input type="hidden" name="s_latitude" id="s_latitude" value="{{$request->s_latitude}}"/>
           					<input type="hidden" name="s_longitude" id="s_longitude" value="{{$request->s_longitude}}"/>
	                    	<div class="wizard-header">
	                        	<h3 class="wizard-title">
	                        	   {{tr('edit_job')}}
	                        	</h3>
	                    	</div>
							<div class="wizard-navigation">
								<ul>
		                            <li onclick="checkStepPosition({{REQUEST_STEP_1}}, 'Choose Job Type', 1)" id="{{REQUEST_STEP_1}}"><a href="#choose-job" data-toggle="tab">{{tr('REQUEST_STEP_1')}}</a></li>
		                            <li onclick="checkStepPosition({{REQUEST_STEP_2}}, 'Choose Category', 1)" id="{{REQUEST_STEP_2}}"><a href="#sel-category" data-toggle="tab">{{tr('REQUEST_STEP_2')}}</a></li>
		                            <li onclick="checkStepPosition({{REQUEST_STEP_3}}, 'Choose Sub Category', 1)" id="{{REQUEST_STEP_3}}"><a href="#sel-sub-category" data-toggle="tab">{{tr('REQUEST_STEP_3')}}</a></li>
		                            <li onclick="checkStepPosition({{REQUEST_STEP_4}}, 'Fill Job Details', 1)" id="{{REQUEST_STEP_4}}"><a href="#job-details" data-toggle="tab">{{tr('REQUEST_STEP_4')}}</a></li>
		                            <li onclick="checkStepPosition({{REQUEST_STEP_5}}, 'Choose Request Type', 1)" id="{{REQUEST_STEP_5}}"><a href="#sel-req-provider" data-toggle="tab">{{tr('REQUEST_STEP_5')}}</a></li>
		                            <li onclick="checkStepPosition({{REQUEST_STEP_FINAL}}, 'Select Provider', 1)" id="{{REQUEST_STEP_FINAL}}"><a href="#sel-provider" data-toggle="tab">{{tr('REQUEST_STEP_FINAL')}}</a></li>
		                        </ul>
							</div>

	                        <div class="tab-content p-30">
	                        	<!-- Choose job tab -->
	                        	<div class="tab-pane fade in sactive" id="choose-job">
		                            <div class="job-tab-row row m-0">
		                           		@if (Setting::get('request_now') == 1)
			                            	<div class="req-col col-sm-6">
												<div class="req-col-inner gray-bg text-center p-f-30 create-job-shadow">
													<h3 class="req-col-tit"><i id="{{REQUEST_NOW}}_job_i" class="fa fa-check-circle" style="color:#51af33;display: none" aria-hidden="true"></i> {{tr('request_now')}}</h3>
													<p class="req-col-txt">{{tr('request_now_content')}}</p>

													<input type="button" onclick="checkRequestNow({{REQUEST_NOW}}, {{REQUEST_STEP_1}})" class="btn btn-fill btn-success btn-wd" value= "Select &amp; Continue" />
												</div>
		                                    </div>
		                                @endif
	                                    <div class="req-col col-sm-6">
	                                    	<!-- <div class="form-check">
											    <label class="form-check-label">
											      <input type="checkbox" class="form-check-input">
											      Request Later
											    </label>
											</div> -->
											<div class="req-col-inner gray-bg text-center p-f-30 create-job-shadow">
												<h3 class="req-col-tit"><i id="{{REQUEST_LATER}}_job_i" class="fa fa-check-circle" style="color:#51af33;display: none" aria-hidden="true"></i> {{tr('request_later')}}</h3>
												<p class="req-col-txt">{{tr('request_later_content')}}</p>
												<!--<a onclick="saveJobType({{REQUEST_LATER}}, {{REQUEST_STEP_1}})" class="common-bg-link">Select &amp; Continue</a>-->
												<input type="button" onclick="saveJobType({{REQUEST_LATER}}, {{REQUEST_STEP_1}})" class="btn btn-fill btn-success btn-wd" value= "Select &amp; Continue" />
											</div>
	                                    </div>
		                            </div>
	                            </div>
	                            <!-- End of choose job tab -->

	                            <!-- Select Category tab -->
	                            <div class="tab-pane fade" id="sel-category">
	                            	<div class="job-tab-row row m-0">
	                            		@foreach ($categories as $category) 
	                            			                            		<div class="category-list-left col-lg-4 col-md-4 col-sm-6 col-xs-12">
	                            			<a id="{{$category->category_id}}_cat" class="{{$css}} category-item text-center" onclick="saveCategory({{$category->category_id}}, {{REQUEST_STEP_2}})">
	                            				<div class="category-img bg-img" style="background-image: url({{asset($category->category_picture)}})"></div>
	                            				<h3 class="category-tit">
	                      							<i id="{{$category->category_id}}_i" class="fa fa-check-circle" style="display:none;color:#51af33" aria-hidden="true"></i>
	                            					{{$category->category_name}}</h3>
	                            			</a>
	                            		</div>
	                            		@endforeach
	                            	</div>
	                            </div>
	                            <!-- End of select category tab -->

	                            <!-- Select Sub Category tab -->
	                            <div class="tab-pane fade" id="sel-sub-category">
									<div class="job-tab-row row m-0">
	                            		@foreach ($subCategories as $subCategory) 
	                            			                            		<div class="category-list-left col-lg-4 col-md-4 col-sm-6 col-xs-12">
	                            			<a id="{{$subCategory->sub_category_id}}_subcat" class="{{$subcss}} category-item text-center" onclick="saveSubCategory({{$subCategory->sub_category_id}}, {{REQUEST_STEP_3}})">
	                            				<div class="category-img bg-img" style="background-image: url({{asset($subCategory->sub_category_picture)}})"></div>
	                            				<h3 class="category-tit">
	                            					<i id="{{$subCategory->sub_category_id}}_sub_i" class="fa fa-check-circle" style="display:none;color:#51af33" aria-hidden="true"></i> {{$subCategory->sub_category_name}}</h3>
	                            			</a>
	                            		</div>
	                            		@endforeach
	                            	</div>
	                            </div>
	                            <!-- End of select sub category tab -->

	                            <!-- Job details tab-->
	                            <div class="tab-pane fade" id="job-details">
	                                <div class="job-tab-row m-0">
	                                    <div class="col-sm-12">
	                                        <!-- <h4 class="info-text">Job Details</h4> -->
	                                    </div>
	                                    <div class="col-sm-6">
                                        	<div class="form-group label-floating">
                                        		<label class="control-label">{{tr('name')}}</label>
                                    			<input type="text" class="form-control" value="{{$request->name}}" id="name" name="name" onchange="onKeyUpsaveJobDetails({{REQUEST_STEP_4}})">
                                        	</div>
	                                    </div>
	                                    
	                                    <div class="col-sm-3" style="display: none" id="price_field">
	                                        <div class="form-group label-floating">
	                                            <label class="control-label">{{tr('price_per_hour')}}</label>
	                                            <input type="text" class="form-control" id="user_price" name="user_price" value="{{$request->user_price}}" onchange="onKeyUpsaveJobDetails({{REQUEST_STEP_4}})">
	                                        </div>
	                                    </div>

	                                    <div class="col-sm-3" style="display: none" id="request_date_field">
	                                    	<div class="form-group label-floating">
		                                    	<label class="control-label">{{tr('request_date')}}</label>
		                                    	<input class="form-control" id="request_date" name="request_date" @if($request->request_date != "0000-00-00 00:00:00") value="{{date('d-m-Y h:s' , strtotime($request->request_date))}}" @endif onchange="onKeyUpsaveJobDetails({{REQUEST_STEP_4}})">
	                                    	</div>
	                                    </div>
	                                    <div class="clearfix"></div>
	                                    <div class="col-sm-6">
	                                        <div class="form-group label-floating">
	                                            <label class="control-label">{{tr('description')}}</label>
	                                            <textarea class="form-control" rows="3" id="description" name="description" onchange="onKeyUpsaveJobDetails({{REQUEST_STEP_4}})">{{$request->description}}</textarea>
	                                        </div>
	                                    </div>
	        
	                                    <div class="col-sm-6">
	                                    	<div class="form-group label-floating">
	                                    		<label class="control-label">{{tr('note')}}</label>
	                                    		<textarea class="form-control" rows="3" id="note" name="note" onchange="onKeyUpsaveJobDetails({{REQUEST_STEP_4}})">{{$request->note}}</textarea>
	                                    	</div>
	                                    </div>
	                                    <div class="col-sm-12">
	                                        <div class="form-group label-floating is-focused">
	                                            <label class="control-label">{{tr('location')}}</label>
	                                            <input type="text" class="form-control" id="pac-input" name="s_address" value="{{$request->s_address}}">
	                                        </div>
	                                    </div>

	                                    <div class="col-sm-12">
	                                        <div id="map"></div> 

	                                        <button style="display:none" type="button" id="map_button" onclick="displayMap()">{{tr('show_map')}}</button>
	                                    </div>
	                                </div>
	                            </div>
	                            <!-- End of job details tab-->

	                            <!-- Select req provider tab -->
	                            <div class="tab-pane fade" id="sel-req-provider">
	                            	<div class="job-tab-row m-0">
	                            		@if (Setting::get('request_type_location') == 1)
		                            		<div class="col-sm-4">

		                                        <div class="req-pro gray-bg p-f-30 text-center create-job-shadow">

		                                        	<h3 class="req-pro-tit">
		                            					<i id="{{REQUEST_TYPE_LOCATION}}_req_i" class="fa fa-check-circle" style="display:none;color:#51af33" aria-hidden="true"></i>
		                            				{{tr('request_type_location')}}</h3>

		                                        	<p class="req-pro-txt">
		                                        		{{tr('nearby_provider_description')}}
		                                        	</p>

		                                        	<a onclick="saveProviders({{REQUEST_TYPE_LOCATION}}, {{REQUEST_STEP_5}})" class="req-pro-link common-bg-link">Select &amp; Book</a>
		                                        </div>
		                                    </div>
	                                    @endif
	                                    @if (Setting::get('request_type_category') == 1)
		                                    <div class="col-sm-4">
		                                        <div class="req-pro gray-bg p-f-30 text-center create-job-shadow">
		                                        	<h3 class="req-pro-tit">
		                                        	<i id="{{REQUEST_TYPE_CATEGORY}}_req_i" class="fa fa-check-circle" style="display:none;color:#51af33" aria-hidden="true"></i> {{tr('request_type_category')}}</h3>
		                                        	<p class="req-pro-txt">
		                                        	{{tr('all_provider_description')}}
		                                        	</p>
		                                        	<a onclick="saveProviders({{REQUEST_TYPE_CATEGORY}}, {{REQUEST_STEP_5}})" class="req-pro-link common-bg-link">{{tr('select_book')}}</a>
		                                        </div>
		                                    
		                                    </div>
		                                @endif
		                                @if (Setting::get('request_type_direct') == 1)
		                                    <div class="col-sm-4">
		                                        <div class="req-pro gray-bg p-f-30 text-center create-job-shadow">
		                                        	<h3 class="req-pro-tit"><i id="{{REQUEST_TYPE_DIRECT}}_req_i" class="fa fa-check-circle" style="display:none;color:#51af33" aria-hidden="true"></i> {{tr('request_type_direct')}}</h3>
		                                        	<p class="req-pro-txt">{{tr('select_provider_description')}}</p>
		                                        	<a onclick="saveProviders({{REQUEST_TYPE_DIRECT}}, {{REQUEST_STEP_5}})" class="req-pro-link common-bg-link">{{tr('select_continue')}}</a>
		                                        </div>
		                                    </div>
		                                @endif
	                            	</div>
	                            </div>
	                            <!-- End of select req provider tab -->

	                            <!-- Select provider tab -->
	                            <div class="tab-pane fade" id="sel-provider">
	                            	
	                            </div>
	                            <!-- End of select provider tab -->
	                        </div>
	                        <div class="wizard-footer row m-0">
	                            <div class="pull-right">
	                                <input type='button' class='btn btn-next btn-fill btn-success btn-wd' name='next' value='Next' style="display: none"/>
	                                <input type='button' class='btn btn-fill btn-success btn-wd' name='Book' value='Book' style="display: none" id="final_step" onclick="saveJobDetails({{REQUEST_STEP_4}})"/>
	                                <input type='button' class='btn btn-fill btn-success btn-wd' name='next' value='Next' style="display: none" id="job_details" onclick="saveJobDetails({{REQUEST_STEP_4}})"/>
	                                <!-- <input type='button' class='btn btn-finish btn-fill btn-success btn-wd' name='finish' value='Finish' /> -->
	                            </div>

	                            <div class="pull-left">
	                                <input type='button' class='btn btn-previous btn-fill btn-default btn-wd' name='previous' value='Previous' />
	                            </div>
	                            <div class="clearfix"></div>
	                        </div>
	                    </form>
	                </div>
	            </div> <!-- wizard container -->
	        </div>
        </div><!-- end row -->
    
    </div> 

    <!--  big container -->

</div>

@endsection

@section('before-scripts')

<script src="{{asset('common/assets/js/jquery.bootstrap.js')}}" type="text/javascript"></script>

<!--  Plugin for the Wizard -->
<script src="{{asset('common/assets/js/material-bootstrap-wizard.js')}}"></script>

<!--  More information about jquery.validate here: http://jqueryvalidation.org/	 -->
<script src="{{asset('common/assets/js/jquery.validate.min.js')}}"></script>
<script src="{{asset('common/js/moment-with-locales.js')}}"></script>
<script src="{{asset('common/js/bootstrap-datetimepicker.min.js')}}"></script>

@endsection

@section('after-scripts')

<script type="text/javascript">
/**
 * Header defined variables
 * @var id 				Logged in user id
 * @var token			Logged in user token
 * @var step3   		Third step of the job (value - 3)
 * @var request_now 	Type of Request (value - 1)
 * @var directProvider	Request type for Provider (value - 3)
 */
var id = "{{Auth::user()->id}}";
var token = "{{Auth::user()->token}}";
var step3 = "{{REQUEST_STEP_3}}";
var request_now = "{{REQUEST_NOW}}";
var directProvider = "{{REQUEST_TYPE_DIRECT}}"; 
var stepPosition = "{{$request->step}}";
var providerId = "{{$request->request_type}}";
var category_id_val = "{{$request->category_id}}";
var sub_category_id_val = "{{$request->sub_category_id}}";

// Set session item for steps
localStorage.setItem('step_position', stepPosition);

var now = new Date();

// alert("{{Setting::get('request_date_time')}}");
now.setHours(now.getHours() + parseInt("{{Setting::get('request_date_time')}}"));

//DATE TIME PICKER
$(document).ready(function(){
	$("#request_date").datetimepicker({
		format : 'dd-mm-yyyy hh:ii',
		startDate:now,
	}).on('dp.change', function(e){ 
	    var requestDate = $("#request_date").val();
	    if (requestDate != '' && requestDate != undefined) {
	    	$("#request_date").parent().addClass("is-focused");
	    	$("#request_date").parent().removeClass("is-empty");
	    } else {
	    	$("#request_date").parent().removeClass("is-focused");	
	    	$("#request_date").parent().addClass("is-empty");
	    }
	})
});
</script>

<script type="text/javascript">
	// provider map view
	$('.pro-map-view').hide();
	$('.map-view').click( function(){
	    $('.pro-view-sec').hide();
	    $('.pro-map-view').fadeIn(300);
	    $('.map-view').addClass('active');
	    $('.list-view').removeClass('active');
	});

	// provider list view
	$('.list-view').click( function(){
	    $('.pro-map-view').hide();
	    $('.pro-view-sec').fadeIn(300);
	    $('.list-view').addClass('active');
	    $('.map-view').removeClass('active');
	});

		var before_url = "{{url('/')}}";
</script>

<script>
	$('.pro-view-sec').on('show.bs.collapse', function () {
    $(this).addClass('active');
	    });

    $('.pro-view-sec').on('hide.bs.collapse', function () {
         $(this).removeClass('active');
	});
</script>

<script type="text/javascript" src="{{asset('common/js/edit_jobs.js')}}"></script>

<script type="text/javascript" src="{{asset('common/assets/js/bootstrap-dialog.min.js')}}"></script>

<script src="https://maps.googleapis.com/maps/api/js?key={{ envfile('GOOGLE_API_KEY') }}&libraries=places&callback=initMap" async defer></script>

@endsection