@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-6">
                <div class="title-section">
                    <p>Ship</p>
                </div>
            </div>
              <div class="col-md-6 text-right">
                <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#packagemodal" style="height:35px;">Add Package</button>
            </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 Unit 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-6" style="display: none;">
                <div class="row justify-content-end">
                    <div class="col-md-6 float-right">
                        <div class="form-group custom-form-group">
                            <label class="form-label" for="customer">Sort by</label>
                            <select class="form-control" name="lsp_shorting" id="lsp_shorting">
                                <option value="cheapest">Cheapest</option>
                                <option value="fastest">Fastest</option>
                                <option value="rating">Rating</option>
                                <option value="recommended">Recommended</option>
                            </select>
                        </div>
                    </div>
                </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">Per Box 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(CM)</th>
                                <th class="text-center" style="font-weight: 500;">Bredth(CM)</th>
                                <th class="text-center" style="font-weight: 500;">Height(CM)</th>
                            </tr>
                        </thead>
                        <tbody class="add-more">
                            <tr>
                                <td>1</td>
                                <td>
                                    <div class="form-group custom-form-group">
                                        <select class="form-control packages package_masters" 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" 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="Box Quantity" id="unitPrice0" value="" onblur="boxQuantityValue(this)"></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>
                        </tbody>
                    </table>
                </div>
            </div>
            <input type="hidden" name="skuId" value="{{$orders['skuId']}}">
            <button type="submit" class="btn btn-danger">Save</button>
            </form>
        </div>
    </div>

      <!-- package modal  -->
            <div class="modal fade" id="packagemodal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title mb-0" id="exampleModalLabel">
                                <div class="title-section">
                                    <p>Add Package Details</p>
                                </div>
                            </h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true"><img src="images/close.png" height="30px" alt=""></span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-md-12">
                                    <form id="packageModelDetails" method="post" autocomplete="off">
                                        @csrf
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group custom-form-group">
                                                    <label class="form-label" for="package-name">Package Name<span class="text-danger">*</span></label>
                                                    <input class="form-control" placeholder="Enter Package Name" type="text" name="new_package_name" value="" id="new_package_name">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group custom-form-group">
                                                    <label class="form-label" for="package-type">Package Type<span class="text-danger">*</span></label>
                                                    <select class="form-control" name="new_package_type" id="new_package_type">
                                                        <option value="box">Box</option>
                                                    </select>
                                                    <p class="mt-2"><a href="#" class="text-dark">*Package master is only applicable to box type packaging</a></p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mt-4">
                                            <div class="col-md-12 mb-3">
                                                <div class="new-border">
                                                    <h6><strong> Package Dimentions </strong><span class="text-danger">*</span> <span>Dimentions Should be in centimeters only</span> </h6>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group custom-form-group mb-1">
                                                    <label class="form-label" for="customer"><span class="text-danger">*</span>Length</label>
                                                    <div class="input-group">
                                                        <input type="text" class="form-control" placeholder="Enter Length" aria-label="Dollar amount (with dot and two decimal places)" name="new_package_length" id="new_package_length">
                                                        <div class="input-group-append">
                                                            <span class="input-group-text">CM</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group custom-form-group mb-1">
                                                    <label class="form-label" for="customer"><span class="text-danger">*</span>Width</label>
                                                    <div class="input-group">
                                                        <input type="text" class="form-control" placeholder="Enter Width" aria-label="Dollar amount (with dot and two decimal places)" name="new_package_width" id="new_package_width">
                                                        <div class="input-group-append">
                                                            <span class="input-group-text">CM</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group custom-form-group mb-1">
                                                    <label class="form-label" for="customer"><span class="text-danger">*</span>Height</label>
                                                    <div class="input-group">
                                                        <input type="text" class="form-control" placeholder="Enter Height" aria-label="Dollar amount (with dot and two decimal places)" name="new_package_height" id="new_package_height">
                                                        <div class="input-group-append">
                                                            <span class="input-group-text">CM</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                    
                                            <div class="text-center mt-4">
                                                <button class="btn btn-danger" id="cancelPackageAddFormButton">Cancel</button>
                                                <button class="btn btn-danger" id="newPackageAddFormButton">Save</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- package modal  -->

</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);
            $('#quantity0').val(skuQuantityVal);
            $('#number_of_boxes').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 package_masters" 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" 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="Box Quantity" id="unitPrice'+x+'" value="" onblur="boxQuantityValue(this)"></td><td><button type="button" class="btn btn-danger mr-3 remove_field" id="delete-'+ x +'" onclick="deleteDynamicRows(this)"><img src="{{asset('assets/images/trash-icon.svg ')}}" height="14px" alt=""></button></td></tr>';

            $(wrapper).append(html1);

            $('#packages'+x).empty();
            var availableOptions = $('#packages0').html();
            $('#packages'+x).append(availableOptions);

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

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


    });

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


    $('#cancelPackageAddFormButton').on("click", function(e) { //user click on remove text
        e.preventDefault();
        $('#packagemodal').modal('hide');
       
    })

    $("#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 must be less then or eqaul to sku unit',
                                type: "warning",
                                closeOnConfirm: true,
                            },
                            function() {

                            });

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

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

            });

        }else if ($('#number_of_boxes').val() > skuQuantityVal) {

              return swal({
                title: "Warning",
                text: 'Number of entered box must be less then sku unit',
                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) {



/*
        let boxTotalQuantityAutoCheck = 0;
        let productSkuQuantity = 0;

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

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

        });

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

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

        });

        if (boxTotalQuantityAutoCheck == productSkuQuantity) {
            if ((skuQuantityVal == productSkuQuantity) && (skuQuantityVal == boxTotalQuantityAutoCheck)) {
                $('#number_of_boxes').val(productSkuQuantity);
                $('#addBoxButton0').addClass('dissableClick');
            }
        }*/


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

    }

    //Package Models.


    $("#packageModelDetails").validate({

        rules: {

            new_package_name: {
                required: true,
                maxlength: 20
            },
            new_package_type: {
                required: true,
                maxlength: 20
            },
            new_package_length: {
                required: true,
                number: true,
            },
            new_package_width: {
                required: true,
                number: true,
            },
            new_package_height: {
                required: true,
                number: true,
            },
        },
        messages: {
            new_package_name: {
                required: 'Please enter package name',
                digits: 'please enter digits only',
                maxlength: 'Invalid package name'
            },
            new_package_type: {
                digits: 'please enter digits only',
                maxlength: 'Invalid package type'
            },
            new_package_length: {
                required: 'Length is required',
                number: 'length must be a number.',
            },
            new_package_width: {
                required: 'width is required',
                number: 'width must be a number.',
            },
            new_package_height: {
                required: 'height is required',
                number: 'height must be a number.',
            },
        }

    });

    $("#newPackageAddFormButton").on('click', function(e) {
        e.preventDefault();
        let allFormFields = [];
        if ($("#packageModelDetails").valid()) {


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

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

                            });
                    }


                    if (data.success == true) {

                        //package_details_master

                        $('.package_masters').empty();

                        jQuery.each(data.data, function(key, value) {

                            $('.package_masters').append('<option value="' + value.id + '">' + value.name + '</option>');
                        });

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

                                closeOnConfirm: true,
                                showLoaderOnConfirm: true,
                            },
                            function() {
                                $('#packagemodal').modal('hide');
                            });

                    }

                }
            });
        } else {
            return;
        }

    });

    //Lsp Shorting

       $("#lsp_shorting").on("change", function(e) {

            let lspValue =  $(this).val();

            $('#custum-loader').removeClass('hidden');

            if(lspValue)
            {
                jQuery.ajax({
                    url : "{{route('lsp-listing-filters')}}",
                    type : "POST",
                    data: {  _token: "{{csrf_token()}}",lsp: lspValue },

                    success:function(data)
                    {
                        $('#custum-loader').addClass('hidden');

                        return;

                    }

                });

                $('#custum-loader').addClass('hidden');

            }

        });

       //Dynamic Row Delete
       function deleteDynamicRows(ids) {

        let id = ids.getAttribute('id');
        let orderId = id.split("-")[1]
        $('#row'+orderId).remove();

         let boxTotalQuantityAutoCheck = 0;
        let productSkuQuantity = 0;

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

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

        });

        let newBoxValueData =  $('#number_of_boxes').val() ? $('#number_of_boxes').val() : 1;

        if(boxTotalQuantityAutoCheck == newBoxValueData){

             $('#addBoxButton0').addClass('dissableClick');

        }else{
             $('#addBoxButton0').removeClass('dissableClick');
        }
    }

   

    function boxQuantityValue(val) {
        let boxTotalQuantityAutoCheck = 0;
        let productSkuQuantity = 0;

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

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

        });

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

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

        });



        if (boxTotalQuantityAutoCheck == productSkuQuantity) {
            if ((skuQuantityVal == productSkuQuantity) && (skuQuantityVal == boxTotalQuantityAutoCheck)) {
                $('#number_of_boxes').val(productSkuQuantity);
                $('#addBoxButton0').addClass('dissableClick');
            }
        }

        let newBoxValueData =  $('#number_of_boxes').val() ? $('#number_of_boxes').val() : 1;

        if(boxTotalQuantityAutoCheck == newBoxValueData){

             $('#addBoxButton0').addClass('dissableClick');

        }else{
             $('#addBoxButton0').removeClass('dissableClick');
        }

    }


</script>
@endsection