@extends('modules.head') @section('contenido')

<div class="modal-content">
    <div class="modal-header">
        <h3 class="modal-title">Shipping type statuses</h3>
    </div>
    <div class="modal-body row">
        <div class="col-6 col-md-6">
            <label for="selShippingTypes">Shipping types:</label>
            <select class="form-control" name="selShippingTypes" id="selShippingTypes">
                <option value="0" selected disabled>Choose...</option>
                @foreach ($shipping_types as $shipping_type)
                    <option value={{ $shipping_type->id }}>{{ $shipping_type->name }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-6 col-md-6" id="dvStatuses" hidden>
            <table id="tbStatuses" width=100% data-shipping_type_statuses={{$shipping_type_statuses}}>
                <tr>
                    <th>Select</th>
                    <th>Status</th>
                </tr>
                @foreach ($statuses as $status)
                    <tr>
                        <td>
                            <input type="checkbox" class="chkSelectStatus" value={{$status->id}} data-mandatory={{$status->mandatory}}>
                        </td>
                        <td>
                            <label>{{ $status->name }}</label>
                        </td>
                    </tr>
                @endforeach
            </table>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-danger" id="btnSaveShippingTypeStatusRelation">Save</button>
    </div>
</div>
<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<script src="{{ asset('js/bootstrap/js/bootstrap.min.js') }}"></script>
<script type="text/javascript">

    const selected_statuses = [];

    checkboxUpdate(".chkSelectStatus", selected_statuses);

    function checkboxUpdate(elem, collection) {
        $(elem).on("click", function() {
            let value = parseInt($(this).val());
            if($(this).is(':checked')) {
                if(jQuery.inArray(value, collection) === -1) {
                    collection.push(value);
                }
            }
            else {
                if(jQuery.inArray(value, collection) !== -1) {
                    let index = collection.indexOf(value);
                    collection.splice(index, 1);
                }
            }
        });
    }

    $("#btnSaveShippingTypeStatusRelation").on("click", function() {
        if(!validateNoEmpty()) {
            swal('Warning', 'No data has been selected', 'warning');
        }
        else {
            saveShippingTypeStatuses();
        }
    });

    $("#selShippingTypes").on("change", function() {
        if($(this).val()) {
            $("#dvStatuses").show();
            fillData($(this).val());
        }
    });

    function saveShippingTypeStatuses() {
        let shippingType = parseInt($("#selShippingTypes :selected").val());
        swal({
            text: "Are you sure you want to save the changes?",
            icon: "info",
            buttons: ["Cancel", "Ok"],
        }).then((value) => {
            if (value){
                let info = {
                    'shippingType' : shippingType,
                    'statuses' : selected_statuses,
                };
                $.ajax({
                    url: "/saveShippingTypeStatuses",
                    type: "POST",
                    contentType: "application/json",
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"), "Content-Type": "application/json",
                    },
                    data: JSON.stringify(info),
                    success: function(response) {
                        if (response.status) {
                            swal({
                                title: "Success",
                                text: response.message,
                                icon: "success",
                            }).then(() => {
                                location.reload();
                            })
                        } else {
                            swal({
                                title: "Error",
                                text: response.message,
                                icon: "error",
                            });
                        }
                    },
                    error: function(e) {
                        console.log(e);
                    },
                });
            }
        });
    }

    function validateNoEmpty() {
        return $("#selShippingTypes").val() && selected_statuses.length;
    }

    function fillData(shipping_type) {
        $('.chkSelectStatus').prop('checked', false);
        let statuses = filterData(shipping_type);

        for(let i=0; i<statuses.length; i++) {
            selected_statuses.push(statuses[i].order_state_id);
            $('.chkSelectStatus').filter(function(){return this.value==statuses[i].order_state_id}).prop( "checked", true );
        }

        $('.chkSelectStatus').each(function(){
            if( parseInt($(this).attr('data-mandatory')) === 1) {
                $(this).prop("checked", true);
                $(this).prop("disabled", true);
                selected_statuses.push($(this).val())
            }
            // disable On Route while the function is ready.
            if(parseInt($(this).val()) === 10 ) {
                $(this).prop("disabled", true);
            }
        });

    }

    function filterData(shipping_type) {
        let shipping_types_statuses = JSON.parse($("#tbStatuses").attr('data-shipping_type_statuses'));
        let statuses = [];

        for(let i=0; i<shipping_types_statuses.length; i++) {
            if(shipping_types_statuses[i].bo_shipping_type_id == shipping_type) {
                statuses.push(shipping_types_statuses[i]);
            }
        }
        return statuses;
    }

</script>
@endsection