@extends('layouts.app')

@section('content')
	<div class="page-wrapper">
    <div class="row page-titles">

        <div class="col-md-5 align-self-center">
            <h3 class="text-themecolor">{{trans('lang.sos')}}</h3>
        </div>
        <div class="col-md-7 align-self-center">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{url('/dashboard')}}">{{trans('lang.dashboard')}}</a></li>

                                    <li class="breadcrumb-item"><a href= "{!! route('sos') !!}" >{{trans('lang.sos')}}</a></li>
                
                <li class="breadcrumb-item">{{trans('lang.edit_sos')}}</li>
            </ol>
        </div>
    </div>

        <!-- <div class="card-body">
      	   <div id="data-table_processing" class="dataTables_processing panel panel-default" style="display: none;">{{trans('lang.processing')}}</div> 
        
        <div class="order_detail" id="order_detail" >
          <div class="order_detail-top"> 
          <div class="container-fluid"> -->


          <div class="container-fluid">

<div class="row">

  <div class="col-12">

    <div class="card">

      <div class="card-body p-0 pb-5">

        <div class="user-detail" role="tabpanel">

          <div class="row">
            <div class="col-12">
									<div class="box">
										<div class="box-header bb-2 border-primary">
											<h3 class="box-title">{{trans('lang.map_view')}}</h3>
										</div>
										<div class="box-body">
											<div id="map" style="height:300px">
											</div>
										</div>
									</div>
              <div class="box">
              <div class="box-header bb-2 border-primary">
                <h3 class="box-title">{{trans('lang.general_details')}}</h3>
              </div>
              <div class="box-body">
						      <table class="table table-hover">
						            <thead>
						            <tr>
						            <th>{{trans('lang.date_created')}}</th>
												<th>{{trans('lang.status')}}</th>
						            <th>Customer:</th>
                        <th></th>
						            </tr>
						            </thead>
						            <tbody>
						            <tr>
						            <td id="createdAt"></td>
												<td> <select id= "order_status" class="form-control">
                          <option value="Initiated" id="initiated">{{ trans('lang.initiated')}}</option>
                          <option value="Processing" id="processing">{{ trans('lang.processing')}}</option>
                          <option value="Completed" id="completed">{{ trans('lang.completed')}}</option>

                      </select></td>
						            <td><select id="coupon_discount_type" class="form-control">
                    <option vale="percent">Completed</option>
                    <option value="fixed">Cancelled</option>
                    <option value="fixed">Cancelled</option>
                    <option value="fixed">Cancelled</option>
                    <option value="fixed">Cancelled</option>
                    <option value="fixed">Cancelled</option>
                  </select></td>
                  <td><button type="button" class="btn btn-primary save_order_btn" ><i class="fa fa-save"></i> {{trans('lang.update')}}</button></td>
						      </tr>
						      </tbody>
                </table>
						  </div>
                </div>
              <div class="box">
              <div class="box-header bb-2 border-primary">
              <h3 class="box-title">{{ trans('lang.billing_details')}}</h3>
              </div>
              <div class="box-body">
						      <table class="table table-hover">
						            <thead>
						            <tr>
						            <th>{{trans('lang.email_address')}}</th>
												<th>{{trans('lang.phone')}}</th>
						            </tr>
						            </thead>
						            <tbody>
						            <tr>
						            <td id="billing_email"></td>
												<td id="billing_phone"> </td>
						           
						      </tr>
						      </tbody>
                </table>
						  </div> </div>
              <div class="box">
              <div class="box-header bb-2 border-primary">
              <h3 class="box-title">{{ trans('lang.ride_detail')}}</h3>
              </div>
              <div class="box-body">
						      <table class="table table-hover">
						            <thead>
						            <tr>
						            <th>{{trans('lang.order_user_id')}}</th>
												<th>{{trans('lang.driver_plural')}}</th>
                        <th>{{trans('lang.address')}}</th>
												<th>{{trans('lang.status')}}</th>
						            </tr>
						            </thead>
						            <tbody>
						            <tr>
						            <td id="client"></td>
												<td id="driver"> </td>
                        <td id="address"></td>
												<td id="status"> </td>
						           
						      </tr>
						      </tbody>
                </table>
						  </div>
              </div>
              <div class="box">
              <div class="box-header bb-2 border-primary">
              <h3 class="box-title">{{ trans('lang.driver_detail')}}</h3>
              </div>
              <div class="box-body">
						      <table class="table table-hover">
						            <thead>
						            <tr>
						            <th>{{trans('lang.image')}}</th>
												<th>{{trans('lang.driver_plural')}}</th>
                        <th>{{trans('lang.email_address')}}</th>
												<th>{{trans('lang.phone')}}</th>
						            </tr>
						            </thead>
						            <tbody>
						            <tr>
						            <td><img src="" class="resturant-img rounded-circle" alt="driver" width="70px" height="70px"></td>
												<td class="vendor-title"> </td>
                        <td id="vendor_email"></td>
												<td id="vendor_phone"> </td>
						           
						      </tr>
						      </tbody>
                </table>
						  </div> </div>
              <div class="box">
              <div class="box-header bb-2 border-primary">
              <h3 class="box-title">{{ trans('lang.car_info')}}</h3>
              </div>
              <div class="box-body">
						      <table class="table table-hover">
						            <thead>
						            <tr>
						            <th>{{trans('lang.image')}}</th>
												<th>{{trans('lang.car_name')}}</th>
                        <th>{{trans('lang.car_number')}}</th>
												<th>{{trans('lang.car_make')}}</th>
						            </tr>
						            </thead>
						            <tbody>
						            <tr>
						            <td> <img src="" class="car-img rounded-circle" alt="car" width="70px" height="70px"></td>
												<td id="driver_carName"> </td>
                        <td id="driver_carNumber"></td>
												<td id="driver_car_make"> </td>
						           
						      </tr>
						      </tbody>
                </table>
                </div> 
						            </div>
						            

				            	</div>
				            	
							</div>
							
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>





     


 @endsection

@section('style')
<style type="text/css">
 
</style>
@section('scripts')
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBFeAP7LwqqnpUj4MEPFX0ZxDUlGGeiIoo"></script>
<!-- <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBFeAP7LwqqnpUj4MEPFX0ZxDUlGGeiIoo&callback=initMap"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/printThis/1.15.0/printThis.js"></script>
<script>
var adminCommission=0;
var id_rendom = "6938f2937c9f1";
var id = "";
var driverId='';
var fcmToken='';
var old_order_status='';
var payment_shared=false;
var deliveryChargeVal = 0;
var tip_amount_val = 0;
var tip_amount=0;
var vendorname='';
var database = firebase.firestore();
var ref = database.collection('SOS').where("id","==",id);
var append_procucts_list = '';
var append_procucts_total = '';
var total_price=0;
var currentCurrency = '';
var currencyAtRight = false;
var refCurrency = database.collection('currencies').where('isActive', '==' , true);
var orderPreviousStatus = '';
var orderTakeAwayOption = false;
var manfcmTokenVendor='';
var manname='';
// var map;
// var marker;

refCurrency.get().then( async function(snapshots){  
    var currencyData = snapshots.docs[0].data();
    currentCurrency = currencyData.symbol;
    currencyAtRight = currencyData.symbolAtRight;
}); 



var geoFirestore = new GeoFirestore(database);
var place_image ='';
var ref_place = database.collection('settings').doc("placeHolderImage");
 ref_place.get().then( async function(snapshots){

    var placeHolderImage = snapshots.data();            
    place_image = placeHolderImage.image;   
  //  console.log('place_image'+place_image);
    
});

$(document).ready(function(){
    
    var alovelaceDocumentRef = database.collection('vendor_orders').doc();
    if(alovelaceDocumentRef.id){
        id_rendom=alovelaceDocumentRef.id;
    }
    $(document.body).on('click', '.redirecttopage' ,function(){    
        var url=$(this).attr('data-url');
        window.location.href = url;
    });

    jQuery("#data-table_processing").show();
  
    ref.get().then( async function(snapshots){
    var ride = snapshots.docs[0].data();


  // var address = 
 
    orderPreviousStatus = ride.status;
    if (ride.status) {
        orderPaymentMethod = ride.status;
    }

    // $(".order_id").val(ride.id);
    // $(".client_name").val(ride.author.firstName+' '+ride.author.lastName);
    $("#order_status option[value='"+ride.status+"']").attr("selected","selected");
  
    var price = 0;


    // $(".order_price").val(price);
    // $("#order_status").val(ride.status);
    // $(".order_vendor").val(ride.vendor.title);



   if (ride.orderId) {
     var driver = database.collection('rides').where("id","==",ride.orderId);
     driver.get().then( async function(snapshotsnew){
       var driverdata = snapshotsnew.docs[0].data();


        //map view
       var originAddress = driverdata.author.location.latitude+','+driverdata.author.location.longitude;
       var destinationAddress = ride.latLong.latitude+','+ ride.latLong.longitude;
       drawRoute(originAddress, destinationAddress)
       InitializeMap()

       if (driverdata.createdAt) {
        var date1 = driverdata.createdAt.toDate().toDateString();
        var date = new Date(date1);
        var dd = String(date.getDate()).padStart(2, '0');
        var mm = String(date.getMonth() + 1).padStart(2, '0'); //January is 0!
        var yyyy = date.getFullYear();
        var createdAt_val = yyyy + '-' + mm + '-' + dd;
        var time = driverdata.createdAt.toDate().toLocaleTimeString('en-US');
        //console.log('time'+time);
      $('#createdAt').text(createdAt_val+' '+time);
    }

       $("#billing_name").text(driverdata.author.shippingAddress.name);
    var billingAddressstring = '';

    $("#trackng_number").text(id);
    if(driverdata.author.shippingAddress.hasOwnProperty('line1')){
      $("#billing_line1").text(driverdata.author.shippingAddress.line1);
    }
    if(driverdata.author.shippingAddress.hasOwnProperty('line2')){
      billingAddressstring = billingAddressstring + driverdata.author.shippingAddress.line2; 
    }
    if(driverdata.author.shippingAddress.hasOwnProperty('city')){
      billingAddressstring = billingAddressstring+", "+ driverdata.author.shippingAddress.city; 
    }

    if(driverdata.author.shippingAddress.hasOwnProperty('postalCode')){
      billingAddressstring = billingAddressstring+", "+ driverdata.author.shippingAddress.postalCode; 
    }

    if(driverdata.author.hasOwnProperty('phoneNumber')){ 
      $("#billing_phone").text(driverdata.author.phoneNumber);
    }
    
    $("#billing_line2").text(billingAddressstring);  
  
    if(driverdata.author.shippingAddress.hasOwnProperty('country')){
    
      $("#billing_country").text(driverdata.author.shippingAddress.country); 
    
    }

    if(driverdata.author.shippingAddress.hasOwnProperty('email')){
      $("#billing_email").html('<a href="mailto:'+driverdata.author.shippingAddress.email+'">'+driverdata.author.shippingAddress.email+'</a>'); 
    }
         if (driverdata.id) {
             var route_view =  '{{route("drivers.view",":id")}}';
               route_view = route_view.replace(':id', driverdata.id);

             $('#resturant-view').attr('data-url',route_view);  
         }
         if (driverdata.author.firstName) {
             $('#client').text(driverdata.author.firstName);  
         }
         if (driverdata.driver.firstName) {
             $('#driver').text(driverdata.driver.firstName);  
         }
          if (driverdata.sourceLocationName) {
              $('#address').html(driverdata.sourceLocationName);  
          }
         
         if (driverdata.status) {
             $('#status').text(driverdata.status);  
         }

         console.log(driverdata.driverID)
         
   if (driverdata.driverID) {
     var driver = database.collection('users').where("id","==",driverdata.driverID);
      
     driver.get().then( async function(snapshotsnew){
       var driver_data = snapshotsnew.docs[0].data();
         if (driver_data.id) {
             var route_view =  '{{route("drivers.view",":id")}}';
               route_view = route_view.replace(':id', driver_data.id);

             $('#resturant-view').attr('data-url',route_view);  
         }
         if (driver_data.profilePictureURL) {
             $('.resturant-img').attr('src',driver_data.profilePictureURL);  
         }else{
             $('.resturant-img').attr('src',place_image); 
         }
         if (driver_data.firstName) {
             $('.vendor-title').html(driver_data.firstName+' '+driver_data.lastName);  
         }

          if (driver_data.email) {
              $('#vendor_email').html(driver_data.email);  
          }
         if (driver_data.phoneNumber) {
             $('#vendor_phone').text(driver_data.phoneNumber);  
          }
          if (driver_data.id) {
             var route_view =  '{{route("drivers.view",":id")}}';
               route_view = route_view.replace(':id', driver_data.id);

             $('#resturant-car').attr('data-url',route_view);  
         }

         if (driver_data.carPictureURL) {
             $('.car-img').attr('src',driver_data.carPictureURL);  
         }else{
             $('.car-img').attr('src',place_image); 
         }
         if (driver_data.carName) {
             $('#driver_carName').html(driver_data.carName);  
         }

          if (driver_data.carNumber) {
              $('#driver_carNumber').html(driver_data.carNumber);  
          }
         if (driver_data.carMakes) {
             $('#driver_car_make').text(driver_data.carMakes);  
          }

     });

    }
     });

    }
    ref.get().then( async function(snapshotsride){
    
  
});
 
       jQuery("#data-table_processing").hide();
  })
$(".save_order_btn").click(async function(){


  //var is_disable_delete = "//";
  //  if(is_disable_delete == 1){
  //      alert("Do not alllow to change in demo content !");
  //      return false;
  //  }

  var clientName = $(".client_name").val();
  var orderStatus = $("#order_status").val();
  if(old_order_status!=orderStatus){
        database.collection('SOS').doc(id).update({'status':orderStatus}).then( async function(result) {

            

                await $.ajax({
                 type:'POST',
                 url:"