@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('transactions.insert') }}">
     <input type="hidden" name="_token" value="{{ csrf_token() }}" />

     <div class="form-group row">

         <div class="col-xs-4">
             <label for="title"> Title</label>
             <input type='text' value="" id="title" name="title" class="form-control" placeholder="Enter title" required />
         </div>
         <div class="col-xs-4">
             <label for="transaction_ref_no"> Ref No:</label>
             <input type='text' value="" id="transaction_ref_no" name="transaction_ref_no" class="form-control" placeholder="Enter Reference number" required />
         </div>
         <div class="col-xs-4">
             <label for="transaction_ref_no"> Ref ID (Optional):</label>
             <input type='text' value="" name="ref_id" class="form-control" placeholder="Enter Reference Id" required />
         </div>
     </div>
     <div class="form-group row">




         <div class="col-xs-12">
             <label for="ex2">Select Expenses</label>
             <select class="select-2" multiple id="ex2" onchange="calucaltions()" 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>Amount</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-6">
             <label for="ex2">Select Account</label>
             <select class="select-2" id="account" name="account" onchange="calculate_ballance()" required>
                 <option value=""> Select</option>
                              </select>
         </div>

         <div class="col-xs-6">
             <label for="amount">Total Amount</label>
             <input type='number' value="0" step="0.1" id="amount" name="amount" oninput="setTwoNumberDecimal(this)" class="form-control" readonly />
         </div>



     </div>
     <input type="hidden" type='number' value="0" step="0.1" id="current" name="current" class="form-control" readonly />
     <input type="hidden" type='number' value="0" step="0.1" id="remaining" name="remaining" class="form-control" readonly />




















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


     <button type="submit" class="btn btn-primary">Create</button>
 </form>
 @stop
 <script>
     var t;
     services = JSON.parse('');
     accounts = 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 calculate_ballance() {

         accounts.forEach((obj, i) => {
             if (obj.id == document.getElementById("account").value) {
                 if (accounts[i].current_ballance < document.getElementById("amount").value) {
                     alert('You dont have enough ballance in this account.')
                     $('#account').val('');
                     $('#account').select2();
                     //  document.getElementById("current").value = 0;
                     //  document.getElementById("remaining").value = 0;
                     return;
                 } else {
                     document.getElementById("current").value = accounts[i].current_ballance;
                     document.getElementById("remaining").value = accounts[i].current_ballance - document.getElementById("amount").value;

                 }
                 return;


             }


         });
     }


     function handleValueChange(j) {
        console.log(services[j].price);
         document.getElementById("amount").value = services[j].price;

         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,
                     price: document.getElementById("price" + 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) * 1;
                 i = i + 1;
             }

         }
         document.getElementById("amount").value = truncate(price, 3);




     }

     function truncate(number, index = 2) {
  	// cutting the number
    return +number.toString().slice(0, (number.toString().indexOf(".")) + (index + 1));
}


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

     function calucaltions() {
         //  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" step="0.1" type="number" id="price' + i + '"  name="price[]"  placeholder="" value="' + obj.amount + '" oninput="handleValueChange(' + i + ')"  required >',
                 //  '<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>