@extends('layouts.user')

 <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
 <script src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>

 <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
 <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


 <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
 <script src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>


 {{-- Web site Title --}}

 {{-- Content --}}
 @section('content')
 
 <form method="POST" action="{{ route('packages.insert') }}">
     <input type="hidden" name="_token" value="{{ csrf_token() }}" />

     <div class="form-group row">

         <div class="col-xs-6">
             <label for="name_en"> Package Name English</label>
             <input type='text' value="" id="name_en" name="name_en" class="form-control" placeholder="Enter name in english" required />
         </div>
         <div class="col-xs-6">
             <label for="name_en"> Package Name Arabic</label>
             <input type='text' value="" id="name_ar" name="name_ar" class="form-control" placeholder="Enter name in arabic" required />
         </div>
     </div>
     <div class="form-group row">




         <div class="col-xs-12">
             <label for="ex2">Select Services</label>
             <select class="select-2" name="ex2[]" multiple id="ex2" onchange="selectNum()" required>
                              </select>
         </div>
     </div>


     <div class="form-group row">
         <div class="col-xs-12">
             <table id="itemList" class="table table-bordered table-hover">
                 <thead>
                     <tr>
                         <td>#.</td>

                         <td>Name</td>
                         <td>Price</td>
                         <td>Quantity</td>
                         <td>Sub Total</td>
                         <td> </td>
                         <!-- <td>Action</td> -->
                     </tr>
                 </thead>
                 <tbody>
                 </tbody>
             </table>
         </div>
     </div>
     <div class="form-group row">

         <div class="col-xs-4">
             <label for="actual_price">Actual Price</label>
             <input type='number' value="0" id="t_price" name="actual_price" class="form-control" readonly />
         </div>


         <div class="col-xs-4">
             <label for="discount">Dicount (OMR)</label>
             <input type='number' value="0" id="discount" name="discount" oninput="updatePrices()" class="form-control" />
         </div>
         <div class="col-xs-4">
             <label for="discounted_price">Final Payment</label>
             <input type='text' value="0" id="final_payment" name="discounted_price" class="form-control" oninput="setTwoNumberDecimal(this)" readonly />
         </div>
     </div>


















     <div class="form-group">
         <label for="description_ar">
             Description
         </label>
         <textarea class="form-control" name="terms_and_conditions" id="note_ar" rows="3"></textarea>
     </div>


     <button type="submit" class="btn btn-primary">Create</button>
 </form>
 @stop
 <script>
     var t;
     services = JSON.parse('');
     var s_services = [];
     $(document).ready(function() {
         t = $('#itemList').DataTable({
             bFilter: false,
             bInfo: false,
             bPaginate: false,
         });
         //  var t = $('#itemList').DataTable({
         //      bFilter: false,
         //      bInfo: false,
         //      bPaginate: false,
         //  });
         //  $('#itemList').DataTable();
         // This will output the value selected.
     });




     function handleValueChange(j) {
         var data = document.getElementById("qty" + j).value;
         document.getElementById("g_total" + j).value = services[j].price * data;

         updateQtyInTable(j);
         updatePrices();
     }

     function updateQtyInTable(j) {
         var tempArr = [];
         //  alert(document.getElementById("id0").value);
         s_services.forEach((obj, i) => {
             if (obj.id == document.getElementById("id" + j).value) {
                 tempArr.push({
                     ...obj,
                     qty: document.getElementById("qty" + j).value
                 });
             } else {
                 tempArr.push(obj);

             }

         });
         //  alert(JSON.stringify(tempArr))
         s_services = tempArr;

     }

     function updatePrices() {
         //  alert('jkhj');
         //  document.getElementById("g_total" + j).value = services[j].price * data;
         var price = 0;
         //  alert(price); 
         var i = 0;
         for (var option of document.getElementById('ex2').options) {
             if (option.selected) {
                 //  t_price 
                 //  selected.push(option.value);

                 price = price + (document.getElementById("price" + i).value * document.getElementById("qty" + i).value);
                 i = i + 1;
             }

         }
         //  alert(price);

         document.getElementById("t_price").value = price;
         document.getElementById("final_payment").value = price - document.getElementById("discount").value;




     }

     function setTwoNumberDecimal(el) {
         el.value = parseFloat(el.value).toFixed(2);
     };

     function selectNum() {
         //  var strUser = document.getElementById("ex1").value;
         //  alert('sjkhk');


         //  alert(JSON.stringify(services));
         var selected = [];
         for (var option of document.getElementById('ex2').options) {
             if (option.selected) {

                 selected.push(option.value);
             }

         }
         //  alert(selected);
         //  alert((selected));


         //  var rows = "";
         //  //  $(rows).clearQueue();
         //  $.each(selected, function() {
         //      rows += "<tr><td>" + this.Name + "</td><td>" + this.Price + "</td><td>" + this.Quantity + "</td><td>" + this.Total + "</td></tr>";
         //  });
         //  $("itemList").children().remove()
         //  $(rows).appendTo("#itemList tbody");




         //  alert(selected);

         //  alert(JSON.stringify(s_services))
         t.clear();
         var tempArr = [];
         selected.forEach((obj, i) => {
             var isAdded = false;
             s_services.forEach((obj_inner, i_inner) => {

                 //  alert(JSON.stringify(obj_inner));
                 if (obj == obj_inner.id) {
                     services.forEach((obj_inner2, i_inner2) => {

                         //  alert(JSON.stringify(obj_inner));
                         if (obj_inner2.id == obj_inner.id) {

                             isAdded = true;
                             tempArr.push({
                                 ...services[i_inner2],
                                 qty: obj_inner.qty
                             })
                         }
                     });

                 }
             });
             if (!isAdded) {
                 services.forEach((obj_inner, i_inner) => {

                     //  alert(JSON.stringify(obj_inner));
                     if (obj == obj_inner.id) {

                         tempArr.push({
                             ...services[i_inner],
                             qty: 1
                         })
                     }
                 });
             }

             //  t.row.add([i + 1,
             //      services[i].name_en,
             //       '<input class="form-control" type="number" id="price' + i + '"   placeholder="" value="' + services[i].price + '"   required readonly>',
             //      '<input class="form-control" type="number" id="qty' + i + '"   placeholder="" value="1" oninput="handleValueChange(' + i + ')" required>',
             //      '<input class="form-control" type="number" id="g_total' + i + '"   placeholder="" value="' + services[i].price + '"  readonly>',
             //      '<input hidden class="form-control" type="number" id="g_total' + i + '"   placeholder="" value="' + services[i].id + '"  readonly>',
             //        ]).draw(true);
         });
         //  alert(JSON.stringify(tempArr))
         s_services = tempArr;
         t.clear().draw();
         s_services.forEach((obj, i) => {
             t.row.add([i + 1,
                 obj.name_en,

                 '<input class="form-control" type="number" id="price' + i + '"  name="price[]"  placeholder="" value="' + obj.price + '"   required readonly>',
                 '<input class="form-control" type="number" min="0" id="qty' + i + '" name="qty[]"   placeholder="" value="' + obj.qty + '" oninput="handleValueChange(' + i + ')" required>',
                 '<input class="form-control" type="number" name="s_total[]" id="g_total' + i + '"   placeholder="" value="' + obj.price + '"  readonly>',
                 '<input  type="hidden" class="form-control" type="text" id="id' + i + '" name="id[]"   placeholder="" value= "' + obj.id + '"  readonly>',

             ]).draw(true);
         });
         updatePrices();

         id(!selected)
         t.clear().draw();

     }
 </script>