@extends('master')

@section('navbar')
<!--
<li><a href="#ModalOrdersFilter" class="modal-trigger"><i class="bi bi-filter"></i></a></li>

-->

@endsection

@section('navbar-tabs')
<div class="nav-content">
	<ul class="tabs">
		<li class="tab"><a href="#info"><i class="bi bi-clipboard"></i> Detalles</a></li>
		<li class="tab"><a href="#address"><i class="bi bi-geo-alt"></i> Dirección</a></li>
		@if($order->status <= 4)
		<li class="tab"><a href="#actions"><i class="bi bi-mouse"></i> Acciones</a></li>
		@endif
	</ul>
</div>
@endsection


@section('content')

<div id="info">
	<!-- Client -->
	<div class="panel mtop24">
		<ul class="collection">
			<li class="collection-item avatar" style="border-bottom: 0px;">
				@if(!is_null($order->getUser->avatar))
			 		<img src="{{ getFileUrl($order->getUser->avatar, '512') }}" class="circle">
			 	@else
			 		<img src="{{ url('/static/images/default_avatar.png') }}" class="circle">
			 	@endif
			 	<span class="title"> Order - {{ $order->onumber }}</span>
			 	<p><small><i class="bi bi-person"></i> Cliente: {{ $order->getUser->name }}</small></p>
			 	<p><small><i class="bi bi-shop"></i> {{ $order->getShop->name }}</small></p>
			 	<p><small><i class="bi bi-calendar"></i> {{ translateDate($order->request_at) }}</small></p>
			</li>
			<li class="collection-item" style="padding-top: 0px;">
			 	<div class="row">
			 		<div class="col s6" style="padding-left: 0px;">
			 			<a href="tel:{{ $order->getUser->phone }}" class="btn btn-primary w-100">LLamar cliente</a>
			 		</div>
			 		<div class="col s6" style="padding-left: 0px;">
			 			<a href="{{ url('/order/'.$order->id.'/view') }}" class="btn btn-flat w-100 sl">Actualizar</a>
			 		</div>
			 	</div>
			 </li>
		</ul>
	</div>

	<div class="panel mtop16">
		<div class="inside">
			<div class="title">
				<h3>Detalles de la orden</h3>
			</div>

			<div class="body">
				<ul class="mtop16">
				@if($order->getItems->count() > 0)
					@foreach($order->getItems as $item)
					<li style="padding-top: 0px;">
						<div class="picture">
							@if($item->getProduct->file_name)
					 		<img src="{{ config('cms.cdn') }}/platform/shop/{{ $item->shop_id.'/'.$item->getProduct->file_path.'/t_'.$item->getProduct->file_name }}">
					 		@endif
				 		</div>
				 		<div class="info">
				 			<div class="section">
								<span class="title">{!! $item->label !!}</span>
								@include('orders.components.product_options_extras')
							</div>
						</div>
					</li>
					@endforeach
				@endif
				</ul>
			</div>
		</div>
	</div>
	@if(Auth::user()->role == "3" && !is_null($order->delivery_man_id))
	<div class="panel mtop16">
		<ul class="collection">
			<li class="collection-item avatar" style="border-bottom: 0px;">
				@if(!is_null($order->getDeliveryMan->avatar))
					<img src="{{ getFileUrl($order->getDeliveryMan->avatar, '512') }}" class="circle">
					@else
		 			<img src="{{ url('/static/images/default_avatar.png') }}" class="circle">
		 		@endif
		 		<span class="title">Repartidor</span>
		 		<p><small><i class="bi bi-person"></i> Nombre: {{ $order->getDeliveryMan->name }}</small></p>
		 		<p><small><i class="bi bi-shop"></i> Empresa: {{ $order->getDeliveryMan->getShop->name }}</small></p>
		 	</li>
		 	@if($order->getDeliveryMan->phone)
		 	<li class="collection-item" style="padding-top: 0px;">
		 		<div class="row">
		 			<div class="col s12" style="padding: 0px;">
		 				<a href="tel:{{ $order->getDeliveryMan->phone }}" class="btn btn-flat w-100">Llamar</a>
		 			</div>
		 		</div>
		 	</li>
		 	@endif
		</ul>
	</div>
	@endif

    @if($order->user_addr_id)
	<!-- Map -->
	<div class="panel mtop24" style="overflow: hidden;">
		@if($order->status <= 4)
		<a href="out:google.navigation:q={{ $order->getAddr->map }}" class="btn btn-maps w-100">Abrir en Google maps</a>
		@endif
		<div id="map"></div>
	</div>
	@endif
</div>


<div id="address">
	<div class="panel mtop16">
		<div class="inside">
			<div class="title">
				<h3>Dirección de entrega</h3>
			</div>

			<div class="body mtop16">
			    @if($order->user_address_id)
				<div class="summary">
					<span>
						<strong>Barrio/colonia o residencial:</strong> {{ $order->getAddr->neighborhood }}
					</span>
					<span>
						<strong>Calle, Avenida, Bloque:</strong> {{ $order->getAddr->street }}
					</span>
					<span>
						<strong>Casa #:</strong> {{ $order->getAddr->home_number }}
					</span>
				</div>
				@endif
				@if($order->user_address_text)
				<div class="summary">
					<span>
						{{ $order->user_address_text }}
					</span>
				</div>
				@endif
			</div>
		</div>
	</div>
</div>

@if($order->status <= 4)
<div id="actions">
	@if(Auth::user()->role == "3")
	<div class="panel mtop16">
		<div class="inside">
			<div class="title">
				<h3>Asignar driver</h3>
			</div>

			<div class="body">
				{!! Form::open(['url' => '/order/'.$order->id.'/assign']) !!}
					<div class="group">
						{{ Form::select('driver_id', $drivers, $order->delivery_man_id, ['class' => 'browser-default']) }}
					</div>

					{{ Form::submit('Guardar', ['class' => 'btn btn-success w-100 mtop16 sl']) }}	
				{!! Form::close() !!}
			</div>
		</div>
	</div>
	@endif

	@if(Auth::user()->role == "2")
	<div class="panel mtop16">
		<div class="inside">

			<div class="body">
				<ul class="collection">
					@if($order->delivery_man_accepted == "0")
					<li class="collection-item" style="padding-top: 0px;">
					 	<div class="row">
					 		<div class="col s12" style="padding: 0px;">
					 			<a href="{{ url('/order/'.$order->id.'/driver/accept') }}" class="btn btn-success w-100 sl">Aceptar orden</a>
					 		</div>
					 	</div>
					</li>
					@endif

					@if($order->delivery_man_accepted == "1" && $order->status == "3")
					<li class="collection-item" style="padding-top: 0px;">
					 	<div class="row">
					 		<div class="col s12" style="padding: 0px;">
					 			<a href="{{ url('/order/'.$order->id.'/status/4/change') }}" class="btn btn-success w-100 sl">
					 				Retirar orden
					 			</a>
					 		</div>
					 	</div>
					</li>
					@endif

					@if($order->delivery_man_accepted == "1" && $order->status == "4")
					<li class="collection-item" style="padding-top: 0px;">
					 	<div class="row">
					 		<div class="col s12" style="padding: 0px;">
					 			<a href="{{ url('/order/'.$order->id.'/status/5/change') }}" class="btn btn-success w-100 sl">
					 				Marcar como entregada
					 			</a>
					 		</div>
					 	</div>
					</li>
					@endif
				</ul>
			</div>
		</div>
	</div>
	@endif
</div>
@endif

@if($order->user_addr_id)
<script>
	document.addEventListener('DOMContentLoaded', function(){
		function initMap(){
			 var pointA = new google.maps.LatLng({{ $order->getShop->geo_gps }}),
	        pointB = new google.maps.LatLng({{ $order->getAddr->map }}),
	        myOptions = {
	            zoom: 2,
	            center: pointA,
	            disableDefaultUI: false
	        },
	        map = new google.maps.Map(document.getElementById('map'), myOptions),
	        // Instantiate a directions service.
	        directionsService = new google.maps.DirectionsService,
	        directionsDisplay = new google.maps.DirectionsRenderer({
	            map: map
	        }),
	        markerA = new google.maps.Marker({
	            position: pointA,
	            title: "Punto Inicio",
	            label: "A",
	            map: map
	        }),
	        markerB = new google.maps.Marker({
	            position: pointB,
	            title: "Punto Final",
	            label: "B",
	            map: map
	        });

	        // get route from A to B
	        calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB);
		}
		
		function calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB) {
		    directionsService.route({
		        origin: pointA,
		        destination: pointB,
		        avoidTolls: true,
		        avoidHighways: false,
		        travelMode: google.maps.TravelMode.DRIVING
		    }, function (response, status) {
		        if (status == google.maps.DirectionsStatus.OK) {
		            directionsDisplay.setDirections(response);
		        } else {
		            window.alert('Directions request failed due to ' + status);
		        }
		    });
		}
		setTimeout(function(){
			initMap();
		}, 200)
		
	});

</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA5_3hdjr5bWlxfeC5Hb_FL5_nuXcChxAc"></script>
@endif
@endsection