@extends('layouts.app', ['activePage' => 'listOrder', 'titlePage' => __('Add Order')])


@section('content')
<style>
    #map {
    
    position: relative;
    height: 500px;
    overflow: hidden!important;  
        margin-block-start: 0;
}
#map .gm-style {
    position: absolute;
    width: 100%;
    height: 104%!important;   
    left: 0;
    top: 0;
}
</style>
<div class="content">


 

    <div class="container-fluid">
    <div class="card">
        <div class="card-header card-header-text card-header-warning text-right">
        <div class="card-text ">
              <h4 class="card-title">Add New Order</h4>
              <button class="btn btn-round btn-danger"  data-toggle="modal" data-target="#loginModal">
     New Client

</button>
            </div>
            
            </div>
            <div class="card-body">  
                
            <div class="col-md-12">
                <form method="post" action="{{ route('order.addNewOrder') }}" autocomplete="off"  enctype="multipart/form-data">
                    @csrf
                    <div class="pl-lg-4">

                    <div class="form-group">
                            <label for="exampleFormControlSelect1">Select User</label>
                            <select class="form-control select2" id="user" name="user_id" onChange="getResult0();" required>
                                <option value="">Select</option>

                                @foreach ($users as $key=>$b)
                                <option value="{{$b->id}}">{{$b->name}}</option>
                                @endforeach
                            </select>
                        </div>
                        

                        
                               <div class="form-group">
                            <label for="exampleFormControlSelect1">Select Address</label>
                            <select class="form-control select2" id="address1" name="address_id"  onchange="checkIF1();" required>
                                <option value="">Select</option>
                            </select>
                        </div>
               
                    
                                     <div class="form-group">
                            <label for="exampleFormControlSelect1">Select Product</label>
                            <select class="form-control select2" id="productS" name="product_id"   onchange="checkIF();" required>
                                <option value="">Select</option>

                                @foreach ($listPro as $key=>$b)
                                <option value="{{$b->product_id}}" data-id="{{$b->product_id}}" data-price="{{$b->product_price}}" data-quantity="{{$b->product_quantity}}">{{$b->product_name}}  ({{$b->product_quantity}} item)</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
    <!-- Value product Dropdown -->
   <label for="exampleFormControlSelect1">Color</label>
     <select class="form-control select2" id='sel_emp' onchange="checkIfValue();"  name='sel_emp'>
       <option value='0'>-- Select Color --</option>
    </select>

	</div>

                        <div class="row ">
                            <div class="col">
                                <h3>Quantity:</h3>
                                  <input type="number" id="quantity" name="quantity" value="1" min="1"  >

                            </div>
                        <div class="col-md-12 clearfix">
                        <button type="button"   id="btntbl"  class="btn btn-info mt-4" onclick="prodSelect();" >{{ __('Add Selected Product') }}</button>
                        </div>
                        </div>
                        

<div class="row">
  <div class="col-md-12 col-sm-12">
      <div class="card card-stats">
          
          <div class="row">
          <div class="col-md-4">
          
          <div class="card-header card-header-warning card-header-icon">
            <div class="card-icon">
                <i class="material-icons">shopping_cart</i>
            </div>
            <p class="card-category">Total:</p>
            <h3 class="card-title" id="totalRes"> 0 </h3>
            <!--<h3  class="card-title"><small>$</small></h3>-->
            
          </div>
          </div>
                    <div class="col-md-4">

          
          <div class="card-header card-header-success card-header-icon">
            <div class="card-icon">
                <i class="material-icons">shopping_cart</i>
            </div>
            <p class="card-category">Shipping Fees:</p>
            <h3 class="card-title" id="totalRes12"> 0 </h3>
            <!--<h3  class="card-title"><small>$</small></h3>-->
          </div>
          
          </div>   
          
          <div class="col-md-4">

          
          <div class="card-header card-header-danger card-header-icon">
            <div class="card-icon">
                <i class="material-icons">shopping_cart</i>
            </div>
            <p class="card-category">Total:</p>
            <h3 class="card-title" id="totalRes123"> 0 </h3>
            <!--<h3  class="card-title"><small>$</small></h3>-->
          </div>
          
          </div>
          </div>
          <!--<div class="card-footer">-->
          <!--    <div class="stats">-->
          <!--        <i class="material-icons text-danger">warning</i>-->
          <!--        <a href="#pablo">Get More Space...</a>-->
          <!--    </div>-->
          <!--</div>-->
      </div>
  </div>
  
  <div class="col-md-12 col-sm-12">
        
   <div class="alert  alert-dismissible fade" role="alert">


     <button type="button" class="close"  onclick="hideF();" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>

        <p id="alert1"></p>

          </div>
            <table class="table  table-flush datatable" id="testTable">
    <thead>
        <tr>
            <th >Product ID</th>
            <th >Product Name</th>
            <th class="sum sorting">Quantity</th>
            <th >Price in $</th>
            <th >Total in $</th>
            <th >Action</th>

        </tr>
    </thead>
    
    <tbody>
        
    </tbody>
</table>
  </div>


                    </div>
                    
                </form>
                
             
                    
                             
                        <div class="text-center">
                            <a href="{{ route('order.listOrder') }}"  class="btn btn-primary mt-4">{{ __('Back') }}</a>

                            <button type="button" class="btn btn-success mt-4" id="submit1">{{ __('Place Order') }}</button>
                        </div>  
                





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


<div class="modal fade" id="loginModal" tabindex="-1" role="">
    <div class="modal-dialog modal-login modal-lg" role="document">
        <div class="modal-content ">
           
 
                <div class="modal-body ">
                    <form class="form" >
                         <div class="card-body">
                        <div class="form-group">
                            <label class="form-control-label" for="input-name">Full Name </label>
                            
                            <input type="text" name="name" id="name"
                                class="form-control form-control-alternative"
                            required >

                        </div>
                        
                        <div class="form-group" id="phone1">
                            <label class="form-control-label" for="input-name">Mobile Number </label>
                         
                            <input type="text" name="phone" id="phone"
                                class="form-control form-control-alternative"
                                 required>
                        </div>
                        <div class="form-group">
                            <label class="form-control-label" for="input-name">Select City</label>

                            <select class="form-control select2" id="city_id"  name="city_id" required>
                                <option value="">Select City</option>
                                @foreach ($cities as $key=>$b)
                                <option value="{{$b->city_id}}">{{$b->city_name}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-row">
                        <div class="form-group col-md-6" id="address_street1">
                            <label class="form-control-label" for="input-name">Street </label>
                            
                            <input type="text" name="address_street" id="address_street"
                                class="form-control form-control-alternative"
                               required>

                        </div>
                        <div class="form-group col-md-6" id="address_building1">
                            <label class="form-control-label" for="input-name">Building </label>
                            
                            <input type="text" name="address_building" id="address_building"
                                class="form-control form-control-alternative"
                               required>

                        </div>
                        <div class="form-group col-md-6" id="address_floor1">
                            <label class="form-control-label" for="input-name">Floor </label>
                            
                            <input type="text" name="address_floor" id="address_floor"
                                class="form-control form-control-alternative"
                                required>

                        </div>
                        <div class="form-group col-md-6" id="address_apartment_number1">
                            <label class="form-control-label" for="input-name">Aparatment Number </label>
                            
                            <input type="text" name="address_apartment_number" id="address_apartment_number"
                                class="form-control form-control-alternative"
                           >

                        </div> 
                        <div class="form-group col-md-12"  id="address_special_instruction1">
                            <label class="form-control-label" for="input-name">Special Instruction </label>
                            
                            <input type="text" name="address_special_instruction" id="address_special_instruction"
                                class="form-control form-control-alternative"
                           >

                        </div>
                        </div>
                                 <div class="form-group">
                                <label for="user_email" class="form-control-label">Map Location</label>
                            
                                <div id="map" ></div>
                              
                                  </div>
                                  <div class="form-row">
                                      <div class="form-group col-md-3">
                                    <label   class="form-control-label ">Map Coordinates</label>

                                      </div>
                                      <div class="form-group col-md-3">
                                    <input type="text" id="address_latitude" name="address_latitude" class="form-control "  disabled>
                                  
                                  </div>
                                  
                                      <div class="form-group col-md-3">
                                    <input type="text" id="address_longitute" name="address_longitute" class="form-control" disabled >
                                   
                                  </div>
                                </div>
                        <div class="form-group justify-content-center">
                            <div class="msg" >
 
</div>
                                               <button type="button"  class="btn btn-small btn-round btn-success mt-1 addNewUser">{{ __('Save') }}</button>
</div>
          
                    </div>
                     </form>
                        </div>
      </div>
         
 
            </div>
        </div>
  
  
 
@endsection
@push('js')
<script>
		$(function () {
	var markerPosition ={lat:'',lng:''};
    var map;
	var markers = [];
 
// 34.3963141,35.8783348

    var lebanon = {lat:34.3963141, lng: 35.8783348};
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: lebanon,
          zoom: 13
        });
	google.maps.event.addListener(map, 'click', function(event) {
	if(markers.length <1) 
          addMarker(event.latLng, map);
        });
		
	//Edit Map 
	
	var x=document.getElementById("address_latitude").value ;
	var y=document.getElementById("address_longitute").value ;
	
	if(x>0){
	var siteLatLng = new google.maps.LatLng(x, y);
     addMarker(siteLatLng,map);
	 }
	 
     }
 initMap();
    function addMarker(location, map) {


	markerPosition.lat=location.lat();
	    markerPosition.lng=location.lng();
		console.log(markerPosition);
		
	  document.getElementById("address_latitude").value = markerPosition.lat;
	  document.getElementById("address_longitute").value= markerPosition.lng;
      
		//var variableToSend = markerPosition;
        //$.post('offer-add.php', {variable: variableToSend});
        var marker = new google.maps.Marker({
         position: location ,
         map: map
        });
   markers.push(marker);
   marker.addListener("click", function() {
			deleteMarkers(marker);
		
        });
      }
	  
	  
	  
	  
 function deleteMarkers(marker) {
       marker.setMap(null);
 
        markers = [];
	document.getElementById("address_latitude").value = '';
	   document.getElementById("address_longitute").value= '';
      }
      
      
      
      function selectLocation(){
          var lat=document.getElementById("address_latitude").value
          var lng=document.getElementById("address_longitute").value
 
          
      var siteLatLng = new google.maps.LatLng(lat, lng);
       map = new google.maps.Map(document.getElementById('map'), {
          center: lebanon,
          zoom: 10
        });
     addMarker(siteLatLng,map);
         
          
      }
});
 
  $('.addNewUser').click(function (event){
      let data = []
      var obj = {}
      var e = 0
      $('.msg').empty();

           $('.form :input[type=text]').each(function(key){
           
           let req= $(this).attr('required') ;
                  console.log(req)

        let name = $(this).attr('name') ;
        let value = $(this).val();
       let n =  {  name : value }
       
        if(value == '' && name != "address_special_instruction" && name!="address_apartment_number"){
            e++;
            $('.msg').show();
             $('.msg').append("<div class='alert alert-danger alert-dismissible fade show' role='alert'><strong>" + name + " </strong> is Required.<button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'>&times;</span></button></div>")

             }

    obj[$(this).attr('name')] = $(this).val();
        //   data.push(obj)
          
       })

       obj['city_id']= $('#city_id').val()
            if($('#city_id').val() == ''){
                e ++;
                $('.msg').show();
             $('.msg').append("<div class='alert alert-danger alert-dismissible fade show' role='alert'><strong> City </strong> is Required.<button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'>&times;</span></button></div>")
            }
            
            if ( e == 0){
            $('.msg').empty();
                     $.ajax({
        type: "POST",
        url: "addNewOrder",
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                 data:{ data:JSON.stringify({obj})},
        success: function (data) {
            console.log(data)
              if(data.success==0){
                                // $('.msg').attach();
                $('.msg').show();
                var s = ''
                for(i=0; i<data.message.errorInfo.length ; i++){
                    s+=data.message.errorInfo[i]  + " "
                }
             $('.msg').append("<div class='alert alert-danger alert-dismissible fade show' role='alert'><strong> "+s+" </strong><button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'>&times;</span></button></div>")
                                       
            }
            if(data.success==1){
                
                
                
                
                
                  $('.form :input[type=text]').each(function(key){
                  

                      $(this).val('')
                  })
                  	document.getElementById("address_latitude").value = '';
	   document.getElementById("address_longitute").value= '';
                  
                  $('#city_id').val('')
                  $('.msg').hide();
                  
                  $('#loginModal').modal('hide')
                  
 
  
                    message = data.message;

        $(".alert").addClass("alert-success show");

$("#alert1").html(message);



$.ajax({
    url: 'getUsers',
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
    type: "GET",
	
    success: function (data) {

        console.log(data)
        $('#user').find('option').not(':first').remove();

        if(data.length != ''){
        
  for(var i=0; i<data.length; i++){
  var id = data[i].id;
  var name =data[i].name;

  var option = "<option value='"+id+"'>"+name+"</option>"; 

$("#user").append(option); 
  }
        }
else{
            

        }
    },error:  function (data) {
        console.log(data);
    }
});

             
            }
         }
      });
            }




  
    });


    //  $('.datatable').DataTable();

 var tabl = $("#testTable").DataTable();
var value1 = 0;
var value = 0;
var pid = 0;
var quantity = document.getElementById("quantity");

var prodID= [];
var quantityN= [];
var prodText= [];  
var formData= [];
var values=[];  

function checkIfValue()
{
	   document.getElementById("quantity").value = 1;
    var qtySelect = parseInt( $("#sel_emp option:selected").attr('data-quantity'));

          if(qtySelect==0)
		  {
			     document.getElementById("quantity").value = 0;
	 quantity.setAttribute('max', 0);
	 quantity.disabled=true;
	 
		  }
else
{
           quantity.setAttribute('max', qtySelect);
	 quantity.disabled=false;
}
}
function checkIF(){

 
		   
		            // product id
        // var id = parseInt( $("#productS option:selected").attr('data-id'));
var id =  document.getElementById("productS").value;

         // Empty the dropdown
        $('#sel_emp').find('option').not(':first').remove();

         // AJAX request 
$.ajax({
    url: 'getValues/'+id,
	
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
    type: "GET",
           success: function(response){

             var len = 0;
			 
			 
             if(response != ''){
               len = response.length;
             }

             if(len > 0){
				 
               // Read data and create <option >
               for(var i=0; i<len; i++){

                 var id = response[i].value_id;
				
                 var name = response[i].value_name;
var quantity = response[i].quantity;
			   var option = "<option  data-quantity='"+quantity+"' data-valuename='"+name+"' value='"+id+"'>"+name+"-" + quantity+" items"+"</option>"; 

                 $("#sel_emp").append(option); 
               }
             }

           }
        });

    
}
function checkIF1(){
    var ship1 = parseInt( $("#address1 option:selected").attr('data-shipping'));
   
 document.getElementById("totalRes12").innerHTML= (ship1.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","))+" $";
 
 document.getElementById("totalRes123").innerHTML= (ship1.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","))+" $";

    
}

 function prodSelect() {
     


     
     var price = parseInt( $("#productS option:selected").attr('data-price'));
    var qtySelect = parseInt( $("#productS option:selected").attr('data-quantity'));

    var e = document.getElementById("productS");
    var prodid = e.options[e.selectedIndex].value;
	var e1=document.getElementById("sel_emp");
	var value_id = e1.options[e1.selectedIndex].value;

    var prodtext = e.options[e.selectedIndex].text + "(" +$("#sel_emp option:selected").attr('data-valuename') +')' ;
var quantity1 = document.getElementById("quantity").value;


    var n = values.includes(value_id);
  
    if (!n&& quantity1 != 0 && quantity1 <= qtySelect ){
        
    prodID.push(prodid);
    quantityN.push(quantity1);
    prodText.push(prodtext);
    values.push(value_id);
console.log(prodtext);

   tabl.row.add(
    [prodid , 
    prodtext,
    quantity1,
    price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") , //id='answer"+value1+"'
   (price*quantity1).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","),
  "<a id="+value+" class='btn btn-danger btn-fab btn-fab-mini btn-round' onclick='deleteRow("+value+","+prodid+","+quantity1+","+value_id+")' role='button'><i class='material-icons'>close</i></a>"
  ]).draw().node().id = value;

  value++;
}

else if(quantity1 > qtySelect){
    
    alert("Quantity Exceeded !!");
    
}

 var overall = tabl.column( 4 ).data().sum();
 
 document.getElementById("totalRes").innerHTML= (overall.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","))+" $";
 
          var ship1 = parseInt( $("#address1 option:selected").attr('data-shipping'));
 var opt3=$('#totalRes').text().replace(",","");
     var totalRes1 = parseFloat(opt3);
          var ship3 = ship1 + totalRes1 ;
      document.getElementById("totalRes123").innerHTML= (ship3.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","))+" $";
}

 
 
 function deleteRow(rowId,prodid,quantity1,value_id){
    tabl.row("#"+rowId).remove().draw();

var indexID = prodID.indexOf(prodid.toString());
var indexID1 = quantityN.indexOf(quantity1.toString());
var indexID2 = values.indexOf(value_id.toString());
prodID.splice(indexID, 1);
quantityN.splice(indexID1, 1);
values.splice(indexID2, 1);
 var overall = tabl.column( 4 ).data().sum();
 
 document.getElementById("totalRes").innerHTML= (overall.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","))+" $";
     value--;
 } 
 
 
  
function totalResult(){ // window.onload =
//   var totalRes = parseInt(document.getElementById("totalRes").innerHTML);
 var price1=0;
   for (i=1; i<=value1;i++){
       price1 += parseInt(document.getElementById("answer"+i).innerHTML);
   }
   $('#totalRes').html(price1);
//   var total =   parseInt(totalRes,10) + price;
    // document.getElementById("totalRes").innerHTML = price;

 }

 
function calVal(price,id1){
  //  var answer = document.getElementById("answer");
  //  var z = document.createElement('p');
   var quantity = parseInt(document.getElementById("qty"+id1).innerHTML);
      quantity++;

    var in1 = parseInt(document.getElementById("answer"+id1).innerHTML);
     var total =   parseInt(in1,10) + price;
    document.getElementById("answer"+id1).innerHTML = total;
    document.getElementById("qty"+id1).innerHTML = quantity;

totalResult();

   //  z.innerHTML = total;
 //answer.appendChild(z);
  //  $("#answer").html(z);
}


function calVals(price,id1){
   var quantity = parseInt(document.getElementById("qty"+id1).innerHTML);
     if (quantity == 1){
        
    }
    else{
        quantity--;
    document.getElementById("qty"+id1).innerHTML = quantity;
}
  
   

    var in1 = parseInt(document.getElementById("answer"+id1).innerHTML);
    if(in1 == price){
        
    }
    else{
     var total =   parseInt(in1,10) - price;
    document.getElementById("answer"+id1).innerHTML = total;
    
        
    }
    totalResult();

}





  function getResult0(){

var client_id =   $('#user').val();
console.log(client_id);
if(client_id != ''){

    $.ajax({
    url: 'getAddress',
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
    type: "POST",
    data: '&id='+client_id,
    success: function (data) {

        console.log(data)
        $('#address1').find('option').not(':first').remove();

        if(data.length != ''){
        
  for(var i=0; i<data.length; i++){
  var id = data[i].address_user_id;
  var cityname =data[i].city_name;
  var street =data[i].address_street;
  var building =data[i].address_building;
  var floor =data[i].address_floor;
  var apartment =data[i].address_apartment_number;
  var special =data[i].address_special_instruction;
  var shipping =data[i].city_shipping_price;

  var option = "<option value='"+id+"' data-shipping='"+shipping+"'>"+cityname+' - '+street+' - '+building+' - '+floor+' - '+apartment+' - '+special+"</option>"; 

$("#address1").append(option); 
  }
        }
else{
            

        }
    },error:  function (data) {
        console.log(data);
    }
});

}

}




function hideF(){
    $(".alert").removeClass("show");

    $(".alert").addClass("hide");
$("#alert1").empty();
}




$("#submit1").click(function () {
      var user_id =   $('#user').val();
    var address_user_id =   $('#address1').val();
    var shippingprice =   $("#address1 option:selected").attr('data-shipping');
    
    console.log(shippingprice);
    
    var opt3=$('#totalRes').text().replace(",","");
     var totalRes1 = parseFloat(opt3);
        console.log(totalRes1);

    var entry;
    console.log(value);
  
    for( var i = 0 ; i < value ; i++){
     
        entry = { id:i , product_id:prodID[i] ,value_id:values[i], quantity_number:quantityN[i] };

        formData.push(entry);

    }
        console.log(formData)
    var formData1 = JSON.stringify(formData);
if(formData.length>0)
{
     $.ajax({
    url: 'addNewOrder1',
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
    type: "POST",
    data: '&user_id='+user_id+'&address_user_id='+address_user_id+
	'&order_totalprice='+totalRes1+'&order_shipping='+shippingprice+'&formData='+formData1,
    success: function (data) {
         tabl.clear().draw();
        value = 0;
        formData =[];
        prodID =[];
        quantityN =[];
                $('#user').val('').change();   
        $('#productS').val('').change();   
        $('#address1').find('option').not(':first').remove();

   document.getElementById("totalRes").innerHTML=0;  
   document.getElementById("totalRes12").innerHTML=0;  
   document.getElementById("totalRes123").innerHTML=0;  

        message = data.message;

        $(".alert").addClass("alert-success show");

$("#alert1").html(message);
                  setTimeout(function () {  location.reload(); },1000);

        console.log(data);

    },error:  function (data) {
        console.log(data);
    }
});
    
    
   
        tabl.clear().draw();
        entry = 0;
        value = 0;
        formData =[];
        prodID =[];
        quantityN =[];
   document.getElementById("totalRes").innerHTML=0;
}
else{
            message = "No Products found!";

        $(".alert").addClass("alert-success show");

$("#alert1").html(message);
}
  
});

 
</script>
@endpush