@extends('layout.master')
@section('content')
<section class="content pb-5">
    <div class="container-fluid">
        <div class="row pt-4">
            <form class="form-box add-user" autocomplete="off" id="package-form-submit">
                {{ csrf_field() }}
                <div class="col-md-12">
                    <div class="title-section">
                        <p>Packages</p>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group custom-form-group" style="display: none;">
                        <label class="form-label" for="customer">Select Order Id</label>
                        <input class="form-control" placeholder="" type="text" value="">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group custom-form-group" style="display: none;">
                        <label class="form-label" for="customer">Create No. Of Boxes</label>
                        <input class="form-control" placeholder="Enter Number of boxes" type="text" value="" id="numberOfBoxes" onblur="numberOfBoxes()">
                    </div>
                </div>
                <div class="col-md-2">
                    <!--                 <div class="form-group custom-form-group">
                    <label class="form-label" for="customer">Select Box Weight</label>
                    <select class="form-control">
                        <option value="">1</option>
                        <option value="">2</option>
                    </select>
                </div> -->
                </div>
                <div class="col-md-2">
                    <!--  <div class="form-group custom-form-group">
                    <label class="form-label" for="customer">Select SKU's</label>
                    <select class="form-control">
                        <option value="">1</option>
                        <option value="">2</option>
                    </select>
                </div> -->
                </div>
                <div class="col-md-2">
                    <!--  <div class="form-group custom-form-group">
                    <label class="form-label" for="customer">Sku's Quantity</label>
                    <select class="form-control">
                        <option value="">1</option>
                        <option value="">2</option>
                    </select>
                </div> -->
                </div>
                <div class="col-md-12">
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped package-table">
                            <thead valign="top">
                                <tr valign="top">
                                    <th rowspan="2">Sr. No.</th>
                                    <th rowspan="2"> Order No.</th>
                                    <th rowspan="2">SKU's</th>
                                    <th colspan="7" class="text-center"> Boxes</th>
                                    <th rowspan="2">CFT</th>
                                    <th rowspan="2">Action</th>
                                </tr>
                                <tr>
                                    <th> Box</th>
                                    <th>Box Weight</th>
                                    <th>Actual Weight</th>
                                    <th>Box Quantity</th>
                                    <th>length</th>
                                    <th>Width</th>
                                    <th>Height</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php
                                $i = 0;
                                @endphp
                                @foreach($orders as $key => $value)
                                @php
                                $i++;
                                @endphp
                                <tr>
                                    <td>{{$i}}</td>
                                    <td>{{$value['order_id']}}</td>
                                    <td>
                                        @foreach($value['products'] as $key1 => $value1)
                                        <div class="row">
                                            <div class="col-md-12">
                                                <p> sku : {{$value1['sku']}}</p>
                                            </div>
                                            <div class="col-md-12">
                                                <p> Qty : {{ $value1['quantity'] }}</p>
                                            </div>
                                        </div>
                                        @endforeach
                                    </td>
                                    <!-- <div class=""> -->
                                    @php
                                    $appendBoxClasses = 'boxesAppend'.$value['order_id'];
                                    $appendWeight = 'appendWeight'.$value['order_id'];
                                    $appendActualWeight = 'appendActualWeight'.$value['order_id'];
                                    $appendBoxQuantity = 'appendBoxQuantity'.$value['order_id'];
                                    $appendEditButton = 'appendEditButton'.$value['order_id'];
                                    $cftButton = 'cftButton'.$value['order_id'];
                                    $cftOrderIds = 'cftOrder'.$value['order_id'];
                                    $skuIdStatic = 'sku'.$value['order_id'].'0';
                                    $appendWeightStatic = 'appendWeight'.$value['order_id'].'0';
                                    $appendActualWeightStatic = "appendActualWeight"."0";
                                    $appendBoxQuantityStatic = 'appendBoxQuantity'.'0';
                                    $widthStatic = 'width'.$value['order_id'].'-'.'0';
                                    $lengthStatic = 'length'.$value['order_id'].'-'.'0';
                                    $heightStatic = 'height'.$value['order_id'].'-'.'0';
                                    $appendLength = 'appendLength'.$value['order_id'];
                                    $appendWidth = 'appendWidth'.$value['order_id'];
                                    $appendHeight = 'appendHeight'.$value['order_id'];
                                    @endphp
                                    <td>
                                        <div class="row boxesAppend" id="{{$appendBoxClasses}}">
                                            <div class="col-md-4">
                                                <div class="">
                                                    <p>Box</p>
                                                </div>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="">
                                                    <select class="multiple-skus" name="skusDatas[{{$value['order_id']}}][0][]" multiple="multiple" onChange="selectedSkus(this)" id="{{$skuIdStatic}}">
                                                        @foreach($value['products'] as $key2 => $value2)
                                                        <option value="{{$value2['id']}}">{{$value2['sku']}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="appendWeight" id="{{$appendWeight}}">
                                        <select class="form-control select-control" name="boxWeight[{{$value['order_id']}}][0][]" id="{{$appendWeightStatic}}" onChange="weightPackageDefault(this,{{$value['order_id']}},'0')">
                                            <option style="border-bottom:1px solid black;" value="">Package</option>
                                            @foreach($productPackages as $key3 => $value3)
                                            <option value="{{$value3['id']}}">{{$value3['weight']}}</option>
                                            @endforeach
                                        </select>
                                    </td>
                                    <td class="appendActualWeight" id="{{$appendActualWeight}}"><input type="text" class="form-control weight-control dropdown" name="appendActualWeight[{{$value['order_id']}}][0][]" id={{$appendActualWeightStatic}}></td>
                                    <td class="appendBoxQuantity" id="{{$appendBoxQuantity}}"><input type="text" class="form-control weight-control dropdown" name="appendBoxQuantity[{{$value['order_id']}}][0][]" id="{{$appendBoxQuantityStatic}}" onChange="orderSkuQuantity({{$value['order_id']}},{{$key}})"></td>
                                    <td id="{{$appendLength}}"><input type="text" class="form-control weight-control dropdown" name="length[{{$value['order_id']}}][0][]" id={{$lengthStatic}} disabled></td>
                                    <td id="{{$appendWidth}}"><input type="text" class="form-control weight-control dropdown" name="width[{{$value['order_id']}}][0][]" id={{$widthStatic}} disabled></td>
                                    <td id="{{$appendHeight}}"><input type="text" class="form-control weight-control dropdown" name="height[{{$value['order_id']}}][0][]" id={{$heightStatic}} disabled></td>
                                    <td id="{{$cftButton}}"><input type="text" class="form-control" name="cft[{{$value['order_id']}}][0][]" id="{{$cftOrderIds}}" disabled></td>
                                    <td class="appendEditButton" id="{{$appendEditButton}}">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <button type="button" class="btn btn-danger add-btns mr-3"><i class="fa fa-plus" aria-hidden="true" onclick="numberOfBoxes(this,{{$value['order_id']}},{{$key}})"></i></button>
                                            </div>
                                        </div>
                                    </td>
                                    <!-- </div> -->
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="text-right">
                        <button type="submit" class="btn btn-primary">Proceed to Next</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</section>
<style type="text/css">
.package-table td:nth-child(4) {
    width: 18% !important;
}

.package-table td:nth-child(5) {
    width: 12% !important;
}

.package-table tbody tr:nth-child(odd) {
    background: #00AEEF33 !important;
}

.package-table tbody tr:nth-child(even) {
    background: #F5F8FA !important;
}

.add-btns {
    margin-bottom: 10px;
}

.select-control {
    margin-bottom: 11px;
}

.weight-control {
    margin-bottom: 11px;
}

</style>
<script>
let orders = {!!json_encode($orders) !! }


$("#package-form-submit").on('submit', function(e) {
    e.preventDefault();
    var form = $(this);

    $.ajax({
        method: 'POST',
        url: "{{url('package_box_data')}}",
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        data: form.serialize(),
        success: function(data) {
            console.log('data', data.data);
            localStorage.removeItem("mytime");

            localStorage.removeItem('skuData');
            localStorage.removeItem('packagesData');
            localStorage.removeItem('boxWeight');
            localStorage.removeItem('appendActualWeight');
            localStorage.removeItem('appendBoxQuantity');
            localStorage.removeItem('cft');

            localStorage.setItem('skuData', data.skuData);
            localStorage.setItem('boxWeight', data.boxWeight);
            localStorage.setItem('appendActualWeight', data.appendActualWeight);
            localStorage.setItem('appendBoxQuantity', data.appendBoxQuantity);
            localStorage.setItem('cft', data.cft);
            localStorage.setItem('packagesData', JSON.stringify(data.data));
            window.location.href = '{{url("/orders/bulk/shipment-with-lsp")}}';
            return;

        }

    });

});





function selectedSkus(selectedSkusData) {

    /*  selectedSkuId = [];
      $('.multiple-skus').each(function() {
          if(this.selected = true){
            selectedSkuId.push($(this).val());  
          }
          
      });

      const test = selectedSkuId.reduce((item,lastItem) => {
          let response = [...item,...lastItem];
          return response;

      },[])

      console.log('test')
      console.log(test)



      console.log('skuIds',selectedSkuId);*/
}

let i = 1;
let allIdsCount = {}

let deletedIds = [];

function numberOfBoxes(e, orderId, orderKey) {
    allIdsCount[orderId] = allIdsCount[orderId] !== undefined ? allIdsCount[orderId] : 0

    var boxAppendOrder = 'boxesAppend' + orderId;

    var appendWeight = 'appendWeight' + orderId;
    var appendActualWeight = 'appendActualWeight' + orderId;
    var appendBoxQuantity = 'appendBoxQuantity' + orderId;
    var appendEditButton = 'appendEditButton' + orderId;

    var appendLength = 'appendLength' + orderId;
    var appendWidth = 'appendWidth' + orderId;
    var appendHeight = 'appendHeight' + orderId;

    let numberOFBoxes = 1000;

    let checkId = allIdsCount[orderId]

    var skuIdDeleteCheck = "sku" + orderId + checkId + "";
    var appendWeightCheck = 'appendWeight' + orderId + checkId + '';
    var appendActualWeightCheck = 'appendActualWeight' + checkId + '';
    var appendBoxQuantityCheck = 'appendBoxQuantity' + checkId + '';

    let skuValue = $('#' + skuIdDeleteCheck + '').val() ? $('#' + skuIdDeleteCheck + '').val() : [];
    let appendWeightValue = $('#' + appendWeightCheck + '').val();
    let appendActualWeightValue = $('#' + appendActualWeightCheck + '').val();
    let appendBoxQuantityaValue = $('#' + appendBoxQuantityCheck + '').val();

    console.log(checkId)
    console.log(allIdsCount)

    console.log(skuValue, appendWeightValue, appendActualWeightValue, appendBoxQuantityaValue)

    if ((!(skuValue.length > 0)) || (!appendWeightValue) || (!appendActualWeightValue) || (!appendBoxQuantityaValue)) {

        swal({
            icon: 'error',
            title: "Alert",
            text: 'Please fill all mandatory fields.',
            type: "error",

            closeOnConfirm: false,
            showLoaderOnConfirm: true,
        });

        return;
    } else if (i < numberOFBoxes) {
        allIdsCount[orderId]++;
        deletedIds.push(i);

        let html12 = ' <div class="col-md-4 dropdown" id="boxesAppend' + allIdsCount[orderId] + '"> <div class="" id="boxDiv' + allIdsCount[orderId] + '"> <p>Box</p></div></div><div class="col-md-8 dropdown"> <div class="" id="multiple-select' + orderId + allIdsCount[orderId] + '""> <select class="multiple-skus" name="skusDatas[' + orderId + '][' + allIdsCount[orderId] + '][]" multiple="multiple" onChange="selectedSkus(this)" id="sku' + orderId + allIdsCount[orderId] + '"></select> </div></div>';


        let html13 = "<select class='form-control select-control' name='boxWeight[" + orderId + "][" + allIdsCount[orderId] + "][]' id='appendWeight" + orderId + allIdsCount[orderId] + "' onChange='weightPackageDefault(this," + orderId + "," + allIdsCount[orderId] + ")'> </select>";

        let html14 = '<input type="text" class="form-control weight-control dropdown" name="appendActualWeight[' + orderId + '][' + allIdsCount[orderId] + '][]" id="appendActualWeight' + allIdsCount[orderId] + '">';

        let html15 = '<input type="text" class="form-control weight-control dropdown" name="appendBoxQuantity[' + orderId + '][' + allIdsCount[orderId] + '][]" id="appendBoxQuantity' + allIdsCount[orderId] + '" onChange="orderSkuQuantity(' + orderId + ',' + orderKey + ')">';

        let html16 = '<div class="row" id="appendEditButton' + allIdsCount[orderId] + '"><div class="col-md-12" id="deleteButtonIdDiv' + allIdsCount[orderId] + '"><button type="button" class="btn btn-danger add-btns mr-3" onClick="removeFields(this,' + allIdsCount[orderId] + ',' + orderId + ')" id="deleteButtonIds' + allIdsCount[orderId] + '"><i class="fa fa-trash" aria-hidden="true"></i></button></div></div>';

        let html17 = '<input type="text" class="form-control weight-control dropdown" name="length[' + orderId + '][' + allIdsCount[orderId] + '][]" id="length' + orderId + '-' + allIdsCount[orderId] + '" disabled>';

        let html18 = '<input type="text" class="form-control weight-control dropdown" name="width[' + orderId + '][' + allIdsCount[orderId] + '][]" id="width' + orderId + '-' + allIdsCount[orderId] + '" disabled>';

        let html19 = '<input type="text" class="form-control weight-control dropdown" name="height[' + orderId + '][' + allIdsCount[orderId] + '][]" id="height' + orderId + '-' + allIdsCount[orderId] + '" disabled>';

        $('#' + boxAppendOrder + '').append(html12);
        $('#' + appendWeight + '').append(html13);
        $('#' + appendActualWeight + '').append(html14);
        $('#' + appendBoxQuantity + '').append(html15);
        $('#' + appendEditButton + '').append(html16);

        $('#' + appendLength + '').append(html17);
        $('#' + appendWidth + '').append(html18);
        $('#' + appendHeight + '').append(html19);

        if (orderId) {
            jQuery.ajax({
                url: "{{route('get-skus-by-order-id')}}",
                type: "POST",
                data: { _token: "{{csrf_token()}}", order_id: orderId },
                success: function(data) {
                    let appendId = 'sku' + orderId + allIdsCount[orderId] + '';
                    let appendWeightPackages = "appendWeight" + orderId + allIdsCount[orderId] + "";

                    jQuery.each(data.data, function(key, value) {
                        $('#' + appendId).append('<option value="' + value.id + '">' + value.sku + '</option>');
                    });

                    $('#' + appendWeightPackages).append('<option value="">Packages</option>');

                    jQuery.each(data.packages, function(key, value) {
                        $('#' + appendWeightPackages).append('<option value="' + value.id + '">' + value.weight + '</option>');
                    });
                }
            });


        }

        $(".multiple-skus").select2({
            placeholder: "Select a Sku",
            width: 100
        });

        return;

    }

}

function removeFields(value, id, orderId) {
    allIdsCount[orderId]--;

    var boxAppendOrder = 'boxesAppend' + id + '';
    var skuIdDelete = "sku" + orderId + id + "";
    var multipleSelectedSkus = 'multiple-select' + orderId + id + '';
    var boxDiv = 'boxDiv' + i + '';
    var appendWeight = 'appendWeight' + orderId + id + '';
    var appendActualWeight = 'appendActualWeight' + id + '';
    var appendBoxQuantity = 'appendBoxQuantity' + id + '';
    var appendEditButton = 'appendEditButton' + id + '';
    var deleteButtonIdDiv = 'deleteButtonIdDiv' + id + '';
    var deleteButtonIds = 'deleteButtonIds' + id + '';

    $('#' + boxAppendOrder + '').remove();
    $('#' + skuIdDelete + '').remove();
    $('#' + multipleSelectedSkus + '').remove();
    $('#' + boxDiv + '').remove();
    $('#' + appendWeight + '').remove();
    $('#' + appendActualWeight + '').remove();
    $('#' + appendBoxQuantity + '').remove();
    $('#' + appendEditButton + '').remove();
    $('#' + deleteButtonIdDiv + '').remove();
    $('#' + deleteButtonIds + '').remove();
    return;
}

let orderWiseSkuCount = {}

function orderSkuQuantity(orderId, orderKey) {

    /* allIdsCount[orderId] =  allIdsCount[orderId] !== undefined ?   allIdsCount[orderId] : 0


       
      
        const orderQuantitySumObject = {}
         for (let i = 0; i <= allIdsCount[orderId]; i++) {

             let skuIdDeleteCheck = "sku"+orderId+i+"";
       
             let skuValue = $('#'+skuIdDeleteCheck+'').val() ? $('#'+skuIdDeleteCheck+'').val()  : [];

             let appendBoxQuantity = 'appendBoxQuantity'+orderId;



            let appendBoxQuantityCheck = 'appendBoxQuantity'+i+'';
       
             let appendBoxQuantityaValue = parseInt($('#'+appendBoxQuantityCheck+'').val());


            if( appendBoxQuantityaValue){
                for (let j = 0; j < skuValue.length; j++) {
                    orderQuantitySumObject[skuValue[j]] =  orderQuantitySumObject[skuValue[j]] !== undefined ?   orderQuantitySumObject[skuValue[j]] + appendBoxQuantityaValue : appendBoxQuantityaValue

             }
            }
            
         }
         console.log(orderQuantitySumObject)



        for (const quantityKey in orderQuantitySumObject) {
            const product = orders[orderKey].products.find((item)=> item.id == quantityKey)
           if(product.quantity < orderQuantitySumObject[quantityKey]) {
             swal({
                    icon: 'error',
                    title: "Alert",
                    text: 'Entered quantity must be same or less then quantity of sku.',
                    type: "error",

                    closeOnConfirm: true,
                    showLoaderOnConfirm: true,
                });
           }  
        }


        console.log(orders[orderKey]) */








}

$(document).ready(function() {
    $(".multiple-skus").select2({
        placeholder: "Select a Sku",
        width: 100
    });

});


function weightPackageDefault(e, orderId, lengthCount) {

    allIdsCount[orderId] = allIdsCount[orderId] !== undefined ? allIdsCount[orderId] : 0;

    let lenghtOrderId = 'length' + orderId + '-' + allIdsCount[orderId] + '';
    let widthOrderId = 'width' + orderId + '-' + allIdsCount[orderId] + '';
    let heightOrderId = 'height' + orderId + '-' + allIdsCount[orderId] + '';
    let cftOrderIdVal = 'cftOrder' + orderId;
    let cft = 0;

    if (orderId) {
        jQuery.ajax({
            url: "{{route('get-packages-detail')}}",
            type: "POST",
            data: { _token: "{{csrf_token()}}", id: e.value },
            success: function(data) {
                $('#' + lenghtOrderId + '').val(data.data.length);
                $('#' + widthOrderId + '').val(data.data.width);
                $('#' + heightOrderId + '').val(data.data.height);

                cft = (parseInt(data.data.length) * parseInt(data.data.width) * parseInt(data.data.height)) / 4500;
                $('#' + cftOrderIdVal + '').val(cft);
            }
        });


    }

}

</script>
@endsection