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


@section('content')

    <div class="content">

 

        <div class="container">



        @if($returnOrder != NULL)
<div class="card col-sm-12 ">
              <div class="card-header card-header-info">
                <h4 class="card-title">{{ __('pages.o_number') }} {{ __('pages.order') }} : {{$returnOrder->order_number}} </h4>
                <h4 class="card-title">{{ __('pages.price') }}  {{number_format($returnOrder->order_totalprice)}} IQD </h4>
              </div>
              
              <div class="card-body ">

              <div class="row">
              <h4 class="col-sm-12 col-form-label">{{ __('pages.user') }} : {{$returnOrder->name}}</h4>
              <h4 class="col-sm-12 col-form-label">{{ __('pages.address') }} : {{$returnOrder->city_name}} | {{$returnOrder->address_street}} | {{$returnOrder->address_building}} | {{$returnOrder->address_floor}} | {{$returnOrder->address_apartment_number}}</h4>
              @if($returnOrder->address_special_instruction != NULL)
              <h4 class="col-sm-12 col-form-label">{{ __('pages.address_special_instruction') }}  : {{$returnOrder->address_special_instruction}}</h4>
              @endif
              <h4 class="col-sm-12 col-form-label">{{ __('pages.date') }} : {{ date('d-m-Y', strtotime($returnOrder->order_added_date)) }}</h4>
 
 
           

               

            </div>
            
  </div>
  </div>
            @endif





            <div class="row">
            
                <div class="col">
                    <div class="shadow p-3 mb-5 bg-white rounded">
                    
                        
                        <div class="col-12">
                            
        @if (count($errors) > 0)
        @if($errors->any())
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{$errors->first()}}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
          </div>
        @endif
    @endif
                            @if (session('status'))
                                <div class="alert alert-success alert-dismissible fade show" role="alert">
                                    {{ session('status') }}
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                            @endif
                        </div>



                        <!--<button type="button" class="btn btn-primary btn-sm pull-right print-window"  style="margin-right: 5px;" title="Collapse">-->
                        <!--    Print    <i class="fa fa-print"></i></button>-->

                        <div >
   
                                      <div class="form-group">
                            <label class="form-control-label" for="input-name">{{ __('pages.select') }} {{ __('pages.product') }}</label>

                            <select class="form-control select2" id="productS" name="product_id"   onchange="checkIF();" required>
                                <option value="">{{ __('pages.select') }}</option>
                                @foreach ($returnOrder->products as $key=>$b)
                                <option value="{{$b->product_id}}" @if($b->product_discount !=0 && $b->product_discount !=null) data-price="{{$b->product_discount}}" @else data-price="{{$b->product_price}}" @endif  data-quantity="{{$b->order_detail_quantity}}">{{$b->product_name}} ( {{$b->order_detail_quantity}} item)</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="row ">
                            <div class="col">
                                <h3>  {{ __('pages.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();" >{{ __('pages.add') }}</button>
                               
      
                        </div>
                                 <div class="col-md-12 offset-6">

                <h4>{{ __('pages.total') }} {{ __('pages.price') }}:<span  id="totalRes" ></span> </h4>

                </div>
                        </div>
                        
                                                    <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 align-items-center table-flush" id="testTable">
                                <thead class="thead-light">
                                    <tr>
                                                 <th >#</th>
            <th >{{ __('pages.name') }}</th>
            <th class="sum sorting">{{ __('pages.quantity') }}</th>
            <th >{{ __('pages.price') }}</th>
            <th >{{ __('pages.total') }}</th>
            <th >{{ __('pages.action') }}</th>

                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>


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

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

   
@endsection


@push('js')
    <script>
     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= []; 

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

           quantity.setAttribute('max', qtySelect);

    
}

  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 prodtext = e.options[e.selectedIndex].text;
var quantity1 = document.getElementById("quantity").value;


    var n = prodID.includes(prodid);
    console.log(n);

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

   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+")' role='button'><i class='material-icons'>close</i></a>"
  ]).draw().node().id = value;

  value++;
  
   var overall = tabl.column( 4 ).data().sum();
 var newTotal = {!! $returnOrder->order_totalprice !!} - overall ;
   document.getElementById("totalRes").innerHTML= (newTotal.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","))+" IQD";
 
  
 $('#productS').val('').trigger('change');

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

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

  $("#alert1").html(message);
  
    
}
else if(prodID.length ==0){
         message =  "Select Products!!";

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

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

}


}

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

var indexID = prodID.indexOf(prodid.toString());
var indexID1 = quantityN.indexOf(quantity1.toString());


prodID.splice(indexID, 1);
// console.log(indexID);

quantityN.splice(indexID1, 1);
 var overall = tabl.column( 4 ).data().sum();
  var newTotal = {!! $returnOrder->order_totalprice !!} - overall ;
   document.getElementById("totalRes").innerHTML= (newTotal.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","))+" IQD";

      value--;
 } 
 
 

$("#submit1").click(function () {

    var overall  =  tabl.column( 4 ).data().sum();
        var newTotal = {!! $returnOrder->order_totalprice !!} - overall ;
                var order_id = {!! $returnOrder->order_id !!};

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

        formData.push(entry);

    }
        console.log(formData)
    var formData1 = JSON.stringify(formData);
if(formData.length>0)
{
    console.log(formData1)
    $.ajax({
    url: 'updateOrder',
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
    type: "post",
    data: '&order_id='+order_id+'&order_totalprice='+newTotal+'&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='';  
//   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);
    }
});
}
else{
     message =  "No Products!!";

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

  $("#alert1").html(message);
  
        // alert("No Products!!");

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

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



function pushTo (idnum) {
    console.log(idnum);
    console.log( table.row( idnum ).data() );
} 
 


    </script>
    @endpush