@extends('layout.master')
@section('content')
<section class="content pb-5">
    <div class="container-fluid">
        <meta name="csrf-token" content="{!! csrf_token() !!}">
        <div class="row pt-4">
            <div class="col-md-12">
                <div class="title-section">
                    <p>Ship</p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3">
                <div class="form-group custom-form-group">
                    <label class="form-label" for="customer">Order Id</label>
                    <p class="customer-txt">{{$orders["order_details"]['order_id']}}</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group custom-form-group">
                    <label class="form-label" for="customer">Number of Boxes</label>
                    <input class="form-control sku-form-control AllowNumeric" name="number_of_boxes" placeholder="" type="text" value="" id="number_of_boxes" onblur="numberOfBoxes(this)">
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group custom-form-group">
                    <label class="form-label mb-2" for="customer">Same As Product Pack</label> <br>
                    <input class="filled-in filled-check" name="same_as_product" type="checkbox" id="same_as_product">
                    <label for="same_as_product" class="order-label"></label>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3">
                <div class="form-group custom-form-group sku-group-label">
                    <label class="form-label" for="customer">{{$orders['sku_name']}}-{{$orders['sku_code']}}</label>
                    <p class="customer-txt">{{$orders['sku_quantity']}}</p>
                </div>
            </div>
            <div class="col-md-3" style="display: none;">
                <div class="form-group custom-form-group sku-group-label">
                    <label class="form-label" for="customer">SKU 2</label>
                    <p class="customer-txt">100</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group custom-form-group sku-group-label">
                    <label class="form-label" for="customer">Total</label>
                    <p class="customer-txt">{{$orders['sku_quantity']}}</p>
                </div>
            </div>
            <div class="col-md-12">
                <form id="save_buyer_details" method="post" autocomplete="off">
                    @csrf
                <div class="table-responsive">
                    <table class="table table-striped sku-table">
                        <thead>
                            <tr>
                                <th rowspan="2" scope="col">S.No</th>
                                <th rowspan="2" scope="col">Packages</th>
                                <th rowspan="2" scope="col">Box Dead Weight</th>
                                <th colspan="3" class="text-center" scope="col">Box Dimension</th>
                                <th rowspan="2" scope="col">Unit</th>
                                <th rowspan="2" scope="col">Box Qty</th>
                                <th rowspan="2" scope="col">Action</th>
                            </tr>
                            <tr>
                                <th class="text-center" style="font-weight: 500;">Length</th>
                                <th class="text-center" style="font-weight: 500;">Bredth</th>
                                <th class="text-center" style="font-weight: 500;">Height</th>
                            </tr>
                        </thead>
                        <tbody class="add-more">
                            <tr>
                                <td>1</td>
                                <td>
                                    <div class="form-group custom-form-group">
                                        <select class="form-control packages" name="packages[]"  id="packages0" onblur="skusPackageSelection(this,0)">
                                            <option value="">Select</option>
                                        @foreach($orders['packageDetails'] as $key => $value)
                                            <option value="{{$value['id']}}">{{$value['name']}}</option>
                                        @endforeach
                                        </select>
                                    </div>
                                </td>
                                <td><input name="dead_weight[]" class="dead_weight form-control AllowNumeric" placeholder="Weight" id="weight0" value='{{$orders["product_weight"]}}'></td>
                                <td><input name="length[]" class="length form-control AllowNumeric" placeholder="Length" id="length0" value="{{$orders['package_length']}}"></td>
                                <td><input name="width[]" class="width form-control AllowNumeric" placeholder="Width" id="width0" value="{{$orders['package_width']}}"></td>
                                <td><input name="height[]" class="height form-control AllowNumeric" placeholder="Height" id="height0" value="{{$orders['package_height']}}"></td>
                                <td><input name="quantity[]" class="quantity form-control AllowNumeric" placeholder="Quantity" value="{{$orders['sku_quantity']}}" id="quantity0" onblur="skuQuantity(this)"></td>
                                <td><input name="unit_price[]" class="unit_price form-control AllowNumeric" placeholder="Unit Price" id="unitPrice0" value=""></td>
                                <td><button type="button" class="btn btn-danger add_field_button" id="addBoxButton0"><img src="{{asset('images/add-icon.svg')}}" alt=""></button></td>
                            </tr>
                            <!-- <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                              <td></td>
                            </tr> -->
                           <!--  <tr >
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr> -->
                        </tbody>
                    </table>
                </div>
            </div>
            <input type="hidden" name="skuId" value="{{$orders['skuId']}}">
            <button type="submit" class="btn btn-danger">Save</button>
            </form>
        </div>
    </div>
</section>
<style>
    .dissableClick {
        pointer-events: none;
    }
</style>
<script>
    let skuQuantityVal = '{{$orders['sku_quantity']}}';

    var max_fields = $('#number_of_boxes').val() ? $('#number_of_boxes').val() : 1;
    var wrapper = $(".add-more");
    var add_button = $(".add_field_button");

    let x = 0;

    //$('#same_as_product').prop('checked', true);
    $("#same_as_product").click(function(){
        if ($('#same_as_product').is(':checked')) {
            $('#addButton').hide();
            //$('#number_of_boxes').addClass('dissableClick'); 
            $('#packages0').addClass('dissableClick');
            $('#length0').addClass('dissableClick'); 
            $('#width0').addClass('dissableClick');
            $('#height0').addClass('dissableClick');
            $('#weight0').addClass('dissableClick');
            $('#quantity0').addClass('dissableClick');
            $('#addBoxButton0').addClass('dissableClick');
            $('#unitPrice0').addClass('dissableClick');
            $('#unitPrice0').val(skuQuantityVal);

        for (var i = 1; i <= x; i++) { 

            var button_id=i; 
            $('#row' + button_id + '' ).remove();

        }



        
        }else{
            $('#addButton').show(); 
            //$('#number_of_boxes').removeClass('dissableClick');
            $('#packages0').removeClass('dissableClick');
            $('#length0').removeClass('dissableClick'); 
            $('#width0').removeClass('dissableClick');
            $('#height0').removeClass('dissableClick');
            $('#weight0').removeClass('dissableClick');
            $('#quantity0').removeClass('dissableClick'); 
            $('#addBoxButton0').removeClass('dissableClick');
            $('#unitPrice0').removeClass('dissableClick'); 
        }
    });

   

    $(add_button).on('click', function(e) {

        e.preventDefault();

       //if (x < max_fields) {

            x++;

            let html1 = '<tr id="row'+x+'"> <td>'+(x+1)+'</td><td> <div class="form-group custom-form-group"> <select class="form-control packages" name="packages[]" id="packages'+x+'" onblur="skusPackageSelection(this,'+x+')"> <option value="">Select</option> @foreach($orders['packageDetails'] as $key=> $value) <option value="{{$value['id']}}">{{$value['name']}}</option> @endforeach </select> </div></td><td><input name="dead_weight[]" class="dead_weight form-control AllowNumeric" placeholder="Weight" id="weight'+x+'" value=""></td><td><input name="length[]" class="length form-control AllowNumeric" placeholder="Length" id="length'+x+'" value=""></td><td><input name="width[]" class="width form-control AllowNumeric" placeholder="Width" id="width'+x+'" value=""></td><td><input name="height[]" class="height form-control AllowNumeric" placeholder="Height" id="height'+x+'" value=""></td><td><input name="quantity[]" class="quantity form-control AllowNumeric" placeholder="Quantity" value="" id="quantity'+x+'" onblur="skuQuantity(this)"></td><td><input name="unit_price[]" class="unit_price form-control AllowNumeric" placeholder="Unit Price" id="unitPrice'+x+'" value=""></td><td></td></tr>';

            $(wrapper).append(html1);

        $(".AllowNumeric").on("keypress keyup blur", function(event) {
            $(this).val($(this).val().replace(/[^\d].+/, ""));
            if ((event.which < 48 || event.which > 57)) {
                event.preventDefault();
            }
        });


            // let skuList1 = 'skuList' + x + '';
            // let productCategoryList1 = 'product_category' + x + '';

            // $('#' + skuList1).editableSelect();
            // $('#' + productCategoryList1).editableSelect();

            /*let productNameList = 'productNameList'+x+'';
            let skuList = 'skuList'+x+'';*/

            /*jQuery.each(JSON.parse(productMaster), function(key,value){
                $('#'+productNameList).append('<option value="'+value.name+'"></option>');
            })*/

            /*jQuery.each(JSON.parse(skuMaster), function(key,value){
                $('#'+skuList).append('<option value="'+value.code+'"></option>');
            })*/
            //addValidationRules();

        //}
    });

    $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
        e.preventDefault();
        var button_id = $(this).attr("id");
        $('#row' + button_id + '').remove();
        x--;
    })

    $("#save_buyer_details").on('submit', function(e) {
        //console.log('hi');
        e.preventDefault();

        var form = $(this);

        let enteredNoOfQuan = 0;
        let numberOfBox1 = 0;

        $('.unit_price').each((i, e) => {

            if(e.value) {
             numberOfBox1 += parseInt(e.value);   
            }

        });

        $('.quantity').each((i, e) => {

            if(e.value) {
             enteredNoOfQuan += parseInt(e.value);   
            }

        });

        if (enteredNoOfQuan != skuQuantityVal) {

                return swal({
                                title: "Warning",
                                text: 'Box quantity and Sku quantity must be same',
                                type: "warning",
                                closeOnConfirm: true,
                            },
                            function() {

                            });

        } else if(numberOfBox1 != $('#number_of_boxes').val()) {

            return swal({
                title: "Warning",
                text: 'Number of entered box must be equal to total number of box',
                type: "warning",
                closeOnConfirm: true,
            },
            function() {

            });

        }
        else{

            $.ajax({
                method: 'POST',
                url: "{{url('single-orders_package_store')}}",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: form.serialize(),
                success: function(data) {

                    if (data.success == false) {
                        return swal({
                                title: "Warning",
                                text: data.message,
                                type: "warning",
                                closeOnConfirm: true,
                            },
                            function() {

                            });
                    }


                    if (data.success == true) {

                        return swal({
                                title: "Success",
                                text: data.message,
                                type: "success",

                                closeOnConfirm: false,
                                showLoaderOnConfirm: true,
                            },
                            function() {
                                 //let id = btoa(data.data);
                                window.location.href = '{{url("/ship-now/no/")}}/'+btoa(data.data);
                            });

                    }

                },
                error: function(data) {
                    /*alert('123');*/
                    var errors = $.parseJSON(data.responseText);

                    $.each(errors, function(index, value) {

                        if (value.order_id) {

                            swal({
                                title: "Order id must be unique",
                                text: 'Order id must be unique',
                                type: "warning",
                                closeOnConfirm: false,
                                showLoaderOnConfirm: true,
                            });

                        }

                    });

                }
            });

        }
    });

    function skuQuantity(e) {

        let enteredNoOfQuan = 0;

        $('.quantity').each((i, e) => {

            if(e.value) {
             enteredNoOfQuan += parseInt(e.value);   
            }

        });

        if (enteredNoOfQuan > skuQuantityVal) {
            return swal({
                title: "Warning",
                text: 'Number of quantity must be same as sku quatity.',
                type: "warning",
                closeOnConfirm: true,
            },
            function() {
                if (e.getAttribute('id').match(/\d+/) == 0) {
                        $('#'+e.getAttribute('id')).val(skuQuantityVal);
                }else {
                        $('#'+e.getAttribute('id')).val(0);
                }     
            });
        }

      //let enteredQuantity = $('.quantity').val();

      console.log('enteredQuantity',enteredNoOfQuan);
      //skuQuantityVal
        
    }

    function skusPackageSelection(eventValue, eventId) {

    let packageValue = eventValue.value;
    let packageId = eventId;

    if (eventValue.value) {
        jQuery.ajax({
            url: "{{route('get-packages-detail')}}",
            type: "POST",
            data: { _token: "{{csrf_token()}}", id: eventValue.value },
            success: function(data) {
                //let skuWeight= "skusWeight"+packageId+"";
                let skuLength = "length" + packageId + "";
                let skuWidth = "width" + packageId + "";
                let skuHeight = "height" + packageId + "";

                console.log(skuLength, skuWidth, skuHeight);

                $('#' + skuLength).val(data.data.length);
                $('#' + skuWidth).val(data.data.width);
                $('#' + skuHeight).val(data.data.height);
                //$('#'+skuWeight).val(data.data.weight);


            }
        });
    }
}

//Allow only numeric fields

    $(".AllowNumeric").on("keypress keyup blur", function(event) {
        $(this).val($(this).val().replace(/[^\d].+/, ""));
        if ((event.which < 48 || event.which > 57)) {
            event.preventDefault();
        }
    });

    $(".alphabetsonly").keypress(function(e) {
        var key = e.keyCode;
        if (key >= 48 && key <= 57) {
            e.preventDefault();
        }
    });

    function numberOfBoxes(e) {

        console.log(e.value == skuQuantityVal);

            if (e.value != skuQuantityVal) {
                $('#same_as_product').prop('checked', true);
                $('#same_as_product').click();

            } else {
                $('#same_as_product').prop('checked', false);
                $('#same_as_product').click();
            }

    }


</script>
@endsection