@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;
	}
</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">

	            	@include('notification.notify')
	            	
	                <div class="card wizard-card" data-color="green" id="wizardProfile">
	                    <form action="{{route('user.requests.update.save')}}" method="POST" id="create_job">
	                    	<input type="hidden" name="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">
	                        	   <span>{{tr('edit_job')}}</span>
	                        	   <span class="pull-right">
	                        	   	<a href="{{route('user.jobs.index')}}" class="btn btn-success"> {{tr('back')}}</a>
	                        	   </span>
	                        	</h3>
	                    	</div>
						

	                        <div class="tab-content p-30">
	                     
	                            <!-- Job details tab-->
	                            <div class="tab-pane fade active in">
	                                <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" id="name" name="name"  value="{{$request->name}}">
                                        	</div>
	                                    </div>

	                                    @if ($request->job_type == REQUEST_LATER) 
	                                    <div class="col-sm-3">
	                                        <div class="form-group label-floating">
	                                            <label class="control-label">{{tr('price_per_hour')}}</label>
	                                            <input type="number" step="any" class="form-control" id="user_price" name="user_price" min="0" value="{{$request->user_price}}">
	                                        </div>
	                                    </div>
	                                    @endif

	                                    @if ($request->job_type == REQUEST_LATER) 
	                                    <div class="col-sm-3">
	                                    	<div class="form-group label-floating">

		                                    	<label class="control-label">{{tr('request_date')}}</label>
		                                    	<input class="form-control" id="request_date" name="request_date" value="{{user_timezone($request->request_date, Auth::user()->timezone)}}">
	                                    	</div>
	                                    </div>
	                                    @endif

	                                    <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">{{$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" >{{$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}}" readonly="true">
	                                        </div>
	                                    </div>

	                                    <!-- <div class="col-sm-12">
	                                        <div id="map"></div> 
	                                    </div> -->
	                                </div>
	                            </div>
	                            <!-- End of job details tab-->

	            
	                            <!-- End of select provider tab -->
	                        </div>
	                        <div class="wizard-footer row m-0">
	                            <div class="pull-right">
	                                
	                                <input type='submit' class='btn btn-fill btn-success btn-wd' name='submit' value='{{tr("submit")}}'/>
	                                <!-- <input type='button' class='btn btn-finish btn-fill btn-success btn-wd' name='finish' value='Finish' /> -->
	                            </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>


<!--  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 now = new Date();

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');
	});
</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/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