<?php $__env->startSection('title', 'On Ride'); ?>

<?php $__env->startSection('content'); ?>

<div class="col-md-9">
    <div class="dash-content">
    	<?php echo $__env->make('common.notify', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>
		<div class="row no-margin">
		    <div class="col-md-12">
		        <h4 class="page-title" id="ride_status"></h4>
		    </div>
		</div>
		
		<div class="row no-margin">
		        <div class="col-md-6" id="container" >
		    		<p>Loading...</p>                             
		        </div>

		        <div class="col-md-6">
		            <dl class="dl-horizontal left-right">
		                <dt><?php echo app('translator')->get('user.request_id'); ?></dt>
		                <dd><?php echo e($request->id); ?></dd>
		                <dt><?php echo app('translator')->get('user.time'); ?></dt>
		                <dd><?php echo e(date('d-m-Y H:i A',strtotime($request->assigned_at))); ?></dd>
		            </dl> 
		            <div class="user-request-map">

		                <div class="from-to row no-margin">
		                    <div class="from">
		                        <h5>FROM</h5>
		                        <p><?php echo e($request->s_address); ?></p>
		                    </div>
		                    <div class="to">
		                        <h5>TO</h5>
		                        <p><?php echo e($request->d_address); ?></p>
		                    </div>
		                    <div class="type">
		                    	<h5>TYPE</h5>
		                        <p><?php echo e($request->service_type->name); ?></p>
		                    </div>
		                </div>
		                <?php 
		                    $map_icon = asset('asset/img/marker-start.png');
		                    $static_map = "https://maps.googleapis.com/maps/api/staticmap?autoscale=1&size=600x450&maptype=roadmap&format=png&visual_refresh=true&markers=icon:".$map_icon."%7C".$request->s_latitude.",".$request->s_longitude."&markers=icon:".$map_icon."%7C".$request->d_latitude.",".$request->d_longitude."&path=color:0x191919|weight:8|enc:".$request->route_key."&key=".env('GOOGLE_MAP_KEY'); ?>

		                    <div class="map-image">
		                    	<img src="<?php echo e($static_map); ?>">
		                    </div>                               
		            </div>                          
		        </div>
		</div>
	</div>
</div>

<?php $__env->stopSection(); ?>

<?php $__env->startSection('scripts'); ?>
    <script type="text/javascript" src="<?php echo e(asset('asset/js/rating.js')); ?>"></script>    
	<script type="text/javascript">
		$('.rating').rating();
	</script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>

    <script type="text/jsx">
		var MainComponent = React.createClass({
			getInitialState: function () {
                    return {data: [], currency : "<?php echo e(Setting::get('currency')); ?>"};
                },
			componentDidMount: function(){
				$.ajax({
			      url: "<?php echo e(url('status')); ?>",
			      type: "GET"})
			      .done(function(response){

				        this.setState({
				            data:response.data[0]
				        });

				    }.bind(this));

				    setInterval(this.checkRequest, 5000);
			},
			checkRequest : function(){
				$.ajax({
			      url: "<?php echo e(url('status')); ?>",
			      type: "GET"})
			      .done(function(response){
				        this.setState({
				            data:response.data[0]
				        });

				    }.bind(this));
			},
			render: function(){
				return (
					<div>
						<SwitchState checkState={this.state.data} currency={this.state.currency} />
					</div>
				);
			}
		});

		var SwitchState = React.createClass({

			componentDidMount: function() {
				this.changeLabel;
			},

			changeLabel : function(){
				if(this.props.checkState == undefined){
					window.location.reload();
				}else if(this.props.checkState != ""){

					if(this.props.checkState.status == 'SEARCHING'){
						$("#ride_status").text("<?php echo app('translator')->get('user.ride.finding_driver'); ?>");
					}else if(this.props.checkState.status == 'STARTED'){
						var provider_name = this.props.checkState.provider.first_name;
						$("#ride_status").text(provider_name+" <?php echo app('translator')->get('user.ride.accepted_ride'); ?>");
					}else if(this.props.checkState.status == 'ARRIVED'){
						var provider_name = this.props.checkState.provider.first_name;
						$("#ride_status").text(provider_name+" <?php echo app('translator')->get('user.ride.arrived_ride'); ?>");
					}else if(this.props.checkState.status == 'PICKEDUP'){
						$("#ride_status").text("<?php echo app('translator')->get('user.ride.onride'); ?>");
					}else if(this.props.checkState.status == 'DROPPED'){
						$("#ride_status").text("<?php echo app('translator')->get('user.ride.waiting_payment'); ?>");
					}else if(this.props.checkState.status == 'COMPLETED'){
						var provider_name = this.props.checkState.provider.first_name;
						$("#ride_status").text("<?php echo app('translator')->get('user.ride.rate_and_review'); ?> " +provider_name );
					}
					setTimeout(function(){
						$('.rating').rating();
					},400);

				}else{
					$("#ride_status").text('Text will appear here');
				}
			},
			render: function(){

				if(this.props.checkState != ""){

					this.changeLabel();
					if(this.props.checkState.status == 'SEARCHING'){
						return (
							<div>
								<Searching checkState={this.props.checkState} />
							</div>
						);
					}else if(this.props.checkState.status == 'STARTED'){
						return (
							<div>
								<Accepted checkState={this.props.checkState} />
							</div>
						);
					}else if(this.props.checkState.status == 'ARRIVED'){
						return (
							<div>
								<Arrived checkState={this.props.checkState} />
							</div>
						);
					}else if(this.props.checkState.status == 'PICKEDUP'){
						return (
							<div>
								<Pickedup checkState={this.props.checkState} />
							</div>
						);
					}else if((this.props.checkState.status == 'DROPPED' || this.props.checkState.status == 'COMPLETED') && this.props.checkState.payment_mode == 'CASH' && this.props.checkState.paid == 0){
						return (
							<div>
								<DroppedAndCash checkState={this.props.checkState} currency={this.props.currency} />
							</div>
						);
					}else if((this.props.checkState.status == 'DROPPED' || this.props.checkState.status == 'COMPLETED') && this.props.checkState.payment_mode == 'CARD' && this.props.checkState.paid == 0){
						return (
							<div>
								<DroppedAndCard checkState={this.props.checkState} currency={this.props.currency} />
							</div>
						);
					}else if(this.props.checkState.status == 'COMPLETED'){
						return (
							<div>
								<Review checkState={this.props.checkState} />
							</div>
						);
					}
				}else{
					return ( 
						<p></p>
					 );
				}
			}
		});

		var Searching = React.createClass({
			render: function(){
				return (
					<form action="<?php echo e(url('cancel/ride')); ?>" method="POST">
						<?php echo e(csrf_field()); ?></input>
						<input type="hidden" name="request_id" value={this.props.checkState.id} />
			            <div className="status">
			                <h6><?php echo app('translator')->get('user.status'); ?></h6>
			                <p><?php echo app('translator')->get('user.ride.finding_driver'); ?></p>
			            </div>

		            	<button type="submit" className="full-primary-btn fare-btn"><?php echo app('translator')->get('user.ride.cancel_request'); ?></button> 
		            </form>
				);
			}
		});

		var Accepted = React.createClass({
			render: function(){
				return (
					<form action="<?php echo e(url('cancel/ride')); ?>" method="POST">
						<?php echo e(csrf_field()); ?></input>
					<input type="hidden" name="request_id" value={this.props.checkState.id} />
						<div className="status">
			                <h6><?php echo app('translator')->get('user.status'); ?></h6>
			                <p><?php echo app('translator')->get('user.ride.accepted_ride'); ?></p>
			            </div>
			            <CancelReason/>
		            	<button type="button" className="full-primary-btn" data-toggle="modal" data-target="#cancel-reason"><?php echo app('translator')->get('user.ride.cancel_request'); ?></button>
		            	<br/>
		            		<h5><strong><?php echo app('translator')->get('user.ride.ride_details'); ?></strong></h5>
		            	<div className="driver-details">
			            	<dl className="dl-horizontal left-right">
			            		<dt><?php echo app('translator')->get('user.booking_id'); ?></dt>
				                <dd>{this.props.checkState.booking_id}</dd>
				                <dt><?php echo app('translator')->get('user.driver_name'); ?></dt>
				                <dd>{this.props.checkState.provider.first_name} {this.props.checkState.provider.last_name}</dd>
				                <dt><?php echo app('translator')->get('user.service_number'); ?></dt>
				                <dd>{this.props.checkState.provider_service.service_number}</dd>
				                <dt><?php echo app('translator')->get('user.service_model'); ?></dt>
				                <dd>{this.props.checkState.provider_service.service_model}</dd>
				                <dt><?php echo app('translator')->get('user.driver_rating'); ?></dt>
				                <dd>
				                	<div className="rating-outer">
			                            <input type="hidden" value={this.props.checkState.provider.rating} name="rating" className="rating"/>
			                        </div>
				                </dd>
				                <dt><?php echo app('translator')->get('user.payment_mode'); ?></dt>
				                <dd>{this.props.checkState.payment_mode}</dd>
				            </dl> 
			            </div>

		            </form>
				);
			}
		});

		var CancelReason = React.createClass({
			render: function(){
				return (
					<div id="cancel-reason" className="modal fade" role="dialog">
						<div className="modal-dialog">
							<div className="modal-content">
								<div className="modal-header">
									<button type="button" className="close" data-dismiss="modal">&times;</button>
									<h4 className="modal-title"><?php echo app('translator')->get('user.ride.cancel_request'); ?></h4>
								</div>
								<div className="modal-body">
									<textarea className="form-control" name="cancel_reason" placeholder="<?php echo app('translator')->get('user.ride.cancel_reason'); ?>" row="5"></textarea>
								</div>
								<div className="modal-footer">
									<button type="submit" className="full-primary-btn fare-btn"><?php echo app('translator')->get('user.ride.cancel_request'); ?></button>
								</div>
							</div>
						</div>
					</div>
				);
			}
		});

		var Arrived = React.createClass({
			render: function(){
				return (
					<form action="<?php echo e(url('cancel/ride')); ?>" method="POST">
						<?php echo e(csrf_field()); ?></input>
					<input type="hidden" name="request_id" value={this.props.checkState.id} />
						<div className="status">
			                <h6><?php echo app('translator')->get('user.status'); ?></h6>
			                <p><?php echo app('translator')->get('user.ride.arrived_ride'); ?></p>
			            </div>
			            <CancelReason/>
		            	<button type="button" className="full-primary-btn" data-toggle="modal" data-target="#cancel-reason"><?php echo app('translator')->get('user.ride.cancel_request'); ?></button> 
		            	<br/>
		            		<h5><strong><?php echo app('translator')->get('user.ride.ride_details'); ?></strong></h5>
		            	<div className="driver-details">
			            	<dl className="dl-horizontal left-right">
			            		<dt><?php echo app('translator')->get('user.booking_id'); ?></dt>
				                <dd>{this.props.checkState.booking_id}</dd>
				                <dt><?php echo app('translator')->get('user.driver_name'); ?></dt>
				                <dd>{this.props.checkState.provider.first_name} {this.props.checkState.provider.last_name}</dd>
				                <dt><?php echo app('translator')->get('user.service_number'); ?></dt>
				                <dd>{this.props.checkState.provider_service.service_number}</dd>
				                <dt><?php echo app('translator')->get('user.service_model'); ?></dt>
				                <dd>{this.props.checkState.provider_service.service_model}</dd>
				                <dt><?php echo app('translator')->get('user.driver_rating'); ?></dt>
				                <dd>
				                	<div className="rating-outer">
			                            <input type="hidden" value={this.props.checkState.provider.rating} name="rating" className="rating"/>
			                        </div>
				                </dd>
				                <dt><?php echo app('translator')->get('user.payment_mode'); ?></dt>
				                <dd>{this.props.checkState.payment_mode}</dd>
				            </dl> 
			            </div>
		            </form>
				);
			}
		});

		var Pickedup = React.createClass({
			render: function(){
				return (
				<div>
					<div className="status">
		                <h6><?php echo app('translator')->get('user.status'); ?></h6>
		                <p><?php echo app('translator')->get('user.ride.onride'); ?></p>
		            </div>
		            <br/>
	            		<h5><strong><?php echo app('translator')->get('user.ride.ride_details'); ?></strong></h5>
	            	<div className="driver-details">
		            	<dl className="dl-horizontal left-right">
		            		<dt><?php echo app('translator')->get('user.booking_id'); ?></dt>
				            <dd>{this.props.checkState.booking_id}</dd>
			                <dt><?php echo app('translator')->get('user.driver_name'); ?></dt>
			                <dd>{this.props.checkState.provider.first_name} {this.props.checkState.provider.last_name}</dd>
			                <dt><?php echo app('translator')->get('user.service_number'); ?></dt>
				                <dd>{this.props.checkState.provider_service.service_number}</dd>
				                <dt><?php echo app('translator')->get('user.service_model'); ?></dt>
				                <dd>{this.props.checkState.provider_service.service_model}</dd>
			                <dt><?php echo app('translator')->get('user.driver_rating'); ?></dt>
				                <dd>
				                	<div className="rating-outer">
			                            <input type="hidden" value={this.props.checkState.provider.rating} name="rating" className="rating"/>
			                        </div>
				                </dd>
			                <dt><?php echo app('translator')->get('user.payment_mode'); ?></dt>
			                <dd>{this.props.checkState.payment_mode}</dd>
			            </dl> 
		            </div>
		        </div>
				);
			}
		});

		var DroppedAndCash = React.createClass({

			render: function(){
				return (
				<div>
					<div className="status">
		                <h6><?php echo app('translator')->get('user.status'); ?></h6>
		                <p><?php echo app('translator')->get('user.ride.dropped_ride'); ?></p>
		            </div>
		            <br/>
		            	<h5><strong><?php echo app('translator')->get('user.ride.ride_details'); ?></strong></h5>
		            	<dl className="dl-horizontal left-right">
		            		<dt><?php echo app('translator')->get('user.booking_id'); ?></dt>
				            <dd>{this.props.checkState.booking_id}</dd>
		            		<dt><?php echo app('translator')->get('user.driver_name'); ?></dt>
			                <dd>{this.props.checkState.provider.first_name} {this.props.checkState.provider.last_name}</dd>
			                <dt><?php echo app('translator')->get('user.service_number'); ?></dt>
				                <dd>{this.props.checkState.provider_service.service_number}</dd>
				                <dt><?php echo app('translator')->get('user.service_model'); ?></dt>
				                <dd>{this.props.checkState.provider_service.service_model}</dd>
			                <dt><?php echo app('translator')->get('user.driver_rating'); ?></dt>
			                <dd>
			                	<div className="rating-outer">
		                            <input type="hidden" value={this.props.checkState.provider.rating} name="rating" className="rating"/>
		                        </div>
			                </dd>
		            		<dt><?php echo app('translator')->get('user.payment_mode'); ?></dt>
                        	<dd>{this.props.checkState.payment_mode}</dd>
                        	<dt><?php echo app('translator')->get('user.total_distance'); ?></dt>
                        	<dd>{this.props.checkState.distance} {this.props.checkState.distance_unit}</dd>
                        </dl>
		            	<h5><strong><?php echo app('translator')->get('user.ride.invoice'); ?></strong></h5>
		            	<dl className="dl-horizontal left-right">
                            <dt><?php echo app('translator')->get('user.ride.base_price'); ?></dt>
                            <dd>{this.props.currency}{this.props.checkState.payment.fixed}</dd>
                            <dt><?php echo app('translator')->get('user.ride.distance_price'); ?></dt>
                            <dd>{this.props.currency}{this.props.checkState.payment.distance}</dd>
                            <dt><?php echo app('translator')->get('user.ride.tax_price'); ?></dt>
                            <dd>{this.props.currency}{this.props.checkState.payment.tax}</dd>
                            {this.props.checkState.use_wallet ?
								<span>
								<dt><?php echo app('translator')->get('user.ride.detection_wallet'); ?></dt>
                            	<dd>{this.props.currency}{this.props.checkState.payment.wallet}</dd>  
                            	</span>
                            : ''
                            }
                            {this.props.checkState.payment.discount ?
								<span>
								<dt><?php echo app('translator')->get('user.ride.promotion_applied'); ?></dt>
                            	<dd>{this.props.currency}{this.props.checkState.payment.discount}</dd>  
                            	</span>
                            : ''
                            }
                            <dt><?php echo app('translator')->get('user.ride.total'); ?></dt>
                            <dd>{this.props.currency}{this.props.checkState.payment.total}</dd> 
                            <dt className="big"><?php echo app('translator')->get('user.ride.amount_paid'); ?></dt>
                            <dd className="big">{this.props.currency}{this.props.checkState.payment.total}</dd>
                        </dl>
		        </div>
				);
			}
		});

		var DroppedAndCard = React.createClass({

			render: function(){
				return (
				<div>
					<form method="POST" action="<?php echo e(url('/payment')); ?>">
						<?php echo e(csrf_field()); ?></input>
					<div className="status">
		                <h6><?php echo app('translator')->get('user.status'); ?></h6>
		                <p><?php echo app('translator')->get('user.ride.dropped_ride'); ?></p>
		            </div>
		            	<br/>
		            	<h5><strong><?php echo app('translator')->get('user.ride.ride_details'); ?></strong></h5>
		            	<dl className="dl-horizontal left-right">
		            		<dt><?php echo app('translator')->get('user.booking_id'); ?></dt>
				            <dd>{this.props.checkState.booking_id}</dd>
		            		<dt><?php echo app('translator')->get('user.driver_name'); ?></dt>
			                <dd>{this.props.checkState.provider.first_name} {this.props.checkState.provider.last_name}</dd>
			                <dt><?php echo app('translator')->get('user.service_number'); ?></dt>
				                <dd>{this.props.checkState.provider_service.service_number}</dd>
				                <dt><?php echo app('translator')->get('user.service_model'); ?></dt>
				                <dd>{this.props.checkState.provider_service.service_model}</dd>
			                <dt><?php echo app('translator')->get('user.driver_rating'); ?></dt>
			                <dd>
			                	<div className="rating-outer">
		                            <input type="hidden" value={this.props.checkState.provider.rating} name="rating" className="rating"/>
		                        </div>
			                </dd>
		            		<dt><?php echo app('translator')->get('user.payment_mode'); ?></dt>
                        	<dd>{this.props.checkState.payment_mode}</dd>
                        	<dt><?php echo app('translator')->get('user.ride.km'); ?></dt>
                        	<dd>{this.props.checkState.distance} kms</dd>
                        </dl>
		            	<h5><strong><?php echo app('translator')->get('user.ride.invoice'); ?></strong></h5>
		            	<input type="hidden" name="request_id" value={this.props.checkState.id} />
		            	<dl className="dl-horizontal left-right">
                            <dt><?php echo app('translator')->get('user.ride.base_price'); ?></dt>
                            <dd>{this.props.currency}{this.props.checkState.payment.fixed}</dd>
                            <dt><?php echo app('translator')->get('user.ride.distance_price'); ?></dt>
                            <dd>{this.props.currency}{this.props.checkState.payment.distance}</dd>
                            <dt><?php echo app('translator')->get('user.ride.tax_price'); ?></dt>
                            <dd>{this.props.currency}{this.props.checkState.payment.tax}</dd>
                            <dt><?php echo app('translator')->get('user.ride.total'); ?></dt>
                            {this.props.checkState.use_wallet ?
								<span>
								<dt><?php echo app('translator')->get('user.ride.detection_wallet'); ?></dt>
                            	<dd>{this.props.currency}{this.props.checkState.payment.wallet}</dd>  
                            	</span>
                            : ''
                            }
                            {this.props.checkState.payment.discount ?
								<span>
								<dt><?php echo app('translator')->get('user.ride.promotion_applied'); ?></dt>
                            	<dd>{this.props.currency}{this.props.checkState.payment.discount}</dd>  
                            	</span>
                            : ''
                            }
                            <dd>{this.props.currency}{this.props.checkState.payment.total}</dd> 
                            <dt className="big"><?php echo app('translator')->get('user.ride.amount_paid'); ?></dt>
                            <dd className="big">{this.props.currency}{this.props.checkState.payment.total}</dd>
                        </dl>
                    	<button type="submit" className="full-primary-btn fare-btn">CONTINUE TO PAY</button>   
                    </form>
		        </div>
				);
			}
		});

		var Review = React.createClass({
			render: function(){
				return (
				<form method="POST" action="<?php echo e(url('/rate')); ?>">
				<?php echo e(csrf_field()); ?></input>
                    <div className="rate-review">
                        <label><?php echo app('translator')->get('user.ride.rating'); ?></label>
                        <div className="rating-outer">
                            <input type="hidden" value="1" name="rating" className="rating"/>
                        </div>
						<input type="hidden" name="request_id" value={this.props.checkState.id} />
                        <label><?php echo app('translator')->get('user.ride.comment'); ?></label>
                        <textarea className="form-control" name="comment" placeholder="Write Comment"></textarea>
                    </div>
                    <button type="submit" className="full-primary-btn fare-btn">SUBMIT</button>   
                </form>
				);
			}
		});

		React.render(<MainComponent/>,document.getElementById("container"));
	</script>

<?php $__env->stopSection(); ?>
<?php echo $__env->make('user.layout.base', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>