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

    @foreach($packages as $p)
    <input type="hidden" name="package_id" value="{{$p->id}}">
    <div class="form-group row">

        <div class="col-xs-6">
            <label for="name_en"> Package Name English</label>
            <input type='text' value="{{$p->name_en}}" 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="{{$p->name_ar}}" 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="{{bcdiv($p->t_price,1,3)}}" 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="{{bcdiv($p->discount,1,3)}}" 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="{{bcdiv($p->discounted_price,1,3)}}" 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 value="{{$p->terms_and_conditions}}" class="form-control" name="terms_and_conditions" id="note_ar" rows="3"></textarea>
    </div>


    <button type="submit" class="btn btn-primary">Update</button>
    @endforeach
</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.
    });

    
    $(document).ready( function () {
        selectNum();
});

    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 = toFixedTrunc(price,3);
        document.getElementById("final_payment").value = toFixedTrunc(price - document.getElementById("discount").value,3);




    }

    function toFixedTrunc(x, n) {
  const v = (typeof x === 'string' ? x : x.toString()).split('.');
  if (n <= 0) return v[0];
  let f = v[1] || '';
  if (f.length > n) return `${v[0]}.${f.substr(0,n)}`;
  while (f.length < n) f += '0';
  return `${v[0]}.${f}`
}

    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);
            }

        }
        //console.log(selected);
        //  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();

        
    }

    function selectNum2() {
        //  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);
            }

        }
        //console.log(selected);
        //  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>