@extends('modules.head') @section('contenido')
<div class="box">
    <div class="box-header with-border">
        <div class="row">
            <div class="col-xs-4">
                <h3 class="box-title">Create transfer list</h3>
            </div>
        </div>
    </div>
    <div class="box-body form-order">
        <div class="row">
            <div class="form-group col-md-3">
                <label for="from_wh">From:</label>
                <select name="from_wh" id="from_wh" class="form-control">
                    <option value="">-- To select</option>
                    @foreach($branches as $branch)
                        <option value="{{ $branch->bo_default_warehouse }}" data-branch_id="{{$branch->id}}">
                            {{ $branch->bo_default_warehouse }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="form-group col-md-3">
                <label for="to_wh">To:</label>
                <select name="to_wh" id="to_wh" class="form-control">
                    <option value="">-- To select</option>
                    @foreach($branches as $branch)
                        <option value="{{ $branch->bo_default_warehouse }}">
                            {{ $branch->bo_default_warehouse }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="form-group col-md-3">
                <br/><button id="buttonGo" class="btn btn-danger" onclick="getList()">Go</button>
            </div>
        </div>
        <div class="row">
        <div class="hidden col-md-6" id="addRow">
            <table class="table table-bordered table-hover">
                <thead>
                <tr role="row">
                    <th style="width: 150px" class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">PLU</th>
                 </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <div class="input-group">
                                <input type="text" onclick="autocompleteProduct(this)" class="form-control form-control-sm ui-autocomplete-input product" autocomplete="off" id="add_product">
                                <span class="input-group-btn">
                                    <button class="btn btn-default trash-item" type="button" onclick="clearInput(this)" style="border-radius: 0px !important">
                                        <span class="fa fa-remove"></span>
                                    </button>
                                </span>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            <button class="btn btn-danger" onclick="addLine(this)">Add</button>
            <button class="btn btn-clear pull-right" onclick="clearTable(this)">Clear table</button>
            <br/><br/>
        </div>
        </div>
    </div>
    <div class="box-body table-responsive">
        <table id="table-required-levels-list" class="table table-bordered table-hover dataTable" role="grid" aria-describedby="example2_info" style="display:none">
            <thead>
                <tr role="row">
                    <th tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending" id="thSelect">Select</th>
                    <th style="width: 150px" class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">PLU</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Qty needed</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Need</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Inventory warehouse (To) </th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Min required level (To) </th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Inventory warehouse (From)</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Min required level (From)</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Bin to take from</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <div class="form-group">
        <button id="buttonCreate" name="buttonCreate" class="btn btn-danger pull-right" onclick="createTransferList()" style="display:none">Create Transfer List</button>
    </div>
</div>

<style type="text/css">
    table.dataTable tbody tr:nth-child(even) { background-color: #f1f1f1;}
    .hl { background-color: #addcd3 !important;}

    input.chk {
        width: 20px;
        height: 20px;
    }
    .bin-location-selector{
        width: 220px;
    }
</style>

<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<script src="{{ asset('js/bootstrap/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('js/create_filters_for_dataTables.js') }}"></script>

<script type="text/javascript">

    var requiredLevelsTable;

    $(function () {
        // let table = $('#table-required-levels-list').DataTable({});
    })

    $('#thSelect').removeClass("sorting_asc");

    $(window).bind('beforeunload', function(){
        return 'Are you sure you want to leave?';
    });

    function createTransferList() {
        let replenish_transfer_lines = [];
        let c = makeId(8);
        let countCheckedLines = 0;
        let qtyNeededValue = 1;
        $('#table-required-levels-list tr').each(function (i, row) {
            row = $(row);
            let transferCheckedBoxes = row.find('input:checked');
            transferCheckedBoxes.each(function (i, checkbox) {
                let line = {
                    plu: $(this).parents("tr").find(".tdPLU").text(),
                    min_req_level : $(this).parents("tr").find(".tdMinReqLevel").text(),
                    qty_needed : $(this).parents("tr").find(".inputQtyNeeded").val(),
                    bin : row.find(".bin-location-selector").val(),
                    from_wh : $('#from_wh').val(),
                    to_wh : $('#to_wh').val()
                }
                countCheckedLines += 1;
                if( $(this).parents("tr").find(".inputQtyNeeded").val() > 0) {
                    replenish_transfer_lines.push(line);
                }
                else {
                    qtyNeededValue = 0;
                }
            });
        });

        const info = {
            from_wh : $('#from_wh').val(),
            to_wh : $('#to_wh').val(),
            transfer_lines : replenish_transfer_lines
        };
        swal({
            text: "Do you want to create this replenish list?",
            icon: "info",
            buttons: ["Cancel", "Ok"],
        }).then((value) => {
            if(value) {
                if ( countCheckedLines > 0  && qtyNeededValue ) {
                    $.ajax({
                        url: "/create_transfer_list",
                        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(true);
                                })
                            }
                            else {
                                swal({
                                    title: '',
                                    text: response.message,
                                    icon: 'error'
                                })
                            }
                        },
                        error: function (error) {
                            swal('Server error', `${error.message}`, 'error');
                        }
                    });
                }
                else {
                    if (countCheckedLines == 0) {
                        swal({
                            title: '',
                            text: 'No lines have been selected',
                            icon: 'error'
                        });
                    }
                    else {
                        swal({
                            title: '',
                            text: 'Quantity needed must be greater than zero.',
                            icon: 'error'
                        });
                    }
                }
            }
        })

    }

    function makeId(length) {
        let result = '';
        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        const charactersLength = characters.length;
        let counter = 0;
        while (counter < length) {
        result += characters.charAt(Math.floor(Math.random() * charactersLength));
        counter += 1;
        }
        return result;
    }

    function getList() {
        const from_wh = $('#from_wh').val();
        const to_wh = $('#to_wh').val();
        let branches_valid = validateBranchesSelection(from_wh, to_wh);
        if (branches_valid) {
            const info = {from_warehouse: from_wh, to_warehouse: to_wh};
            $.ajax({
                url: "/get-required-levels",
                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 (r) {
                    if (r.status) {
                        displayData(r.response);
                    } else {

                    }
                },
                error: function (error) {
                    swal('Server error', `${error.message}`, 'error');
                }
            });
        }
        else {
            swal({
                title: '',
                text: 'Invalid selection',
                icon: 'error'
            })
        }
    }

    function displayData(response) {
        $('#addRow').removeClass('hidden');
        $('#table-required-levels-list').show();
        $('#buttonCreate').show();
        $('#table-required-levels-list').dataTable().fnClearTable();
        $('#table-required-levels-list').dataTable().fnDestroy();
        requiredLevelsTable = $('#table-required-levels-list').DataTable({
            "aaData":response,
            "columns": [
                {
                    'data' : 'locations',
                    'render' : (data, type, row) => {
                        return `<input type="checkbox" class= "chk" value="" onClick="trHiglight(this)">`;
                    },
                    'bSortable': false
                },
                {
                    'data' : 'plu' ,
                    'render' : (data, type, row) => {
                        return `<span data-weight="${row.weight}">${data}</span>`;
                    }
                },
                {
                    'data' : 'qty_needed',
                    'render' : (data, type, row) => {
                        return `<input type="number" min="1" class="form-control inputQtyNeeded" oninput="calculateWeight()" style="width: 70px" placeholder='${data}' value='${data}' >`;
                    }
                },
                {
                    'data' : 'need',
                    'render' : (data) => {
                        let color = 'green';
                        if(data < 40) {
                            color = 'red';
                        }
                        else if(data < 70) {
                            color = 'orange';
                        }
                        return `<label style="color:${color}">${data}%</label>`;
                    }
                },
                { 'data' : 'destiny_total_inventory' },
                { 'data' : 'min_required_level_to' },
                { 'data' : 'from_total_inventory' },
                {
                    'data' : 'min_required_level_from',
                    'render' : (data) => {
                        if (data) {
                            return data;
                        }
                        else {
                            return "";
                        }
                    }
                },
                {
                    'data' : 'locations',
                    'render' : (data, type, row) => {
                        var options = "";
                        $.each(row.locations, function(key, value) {
                            options += `<option value="${value.bin_location}">${value.bin_location} (${value.available_units})</option>`;
                        });
                        return `<select class="form-control bin-location-selector" style="width: 200px">`
                                    +options+
                                `</select>`

                    },
                },
            ],
            "columnDefs": [
                {
                    className:"tdPLU", "targets": [ 1 ]
                },
                {
                    className:"tdQtyNeeded", "targets": [ 2 ]
                },
                {
                    className:"tdMinReqLevel", "targets": [ 4 ]
                }
            ],
            paging: false,
            "aaSorting": [[ 1, "asc" ]],
        });
    }

    function validateBranchesSelection(from_wh, to_wh) {
        if((from_wh && to_wh) && (from_wh != to_wh)) {
            return true;
        }
        return  false;
    }

    function trHiglight(elem) {
        let row = $(elem).parents("tr");
        if(elem.checked) {
            row.addClass("hl");
            row.find('.fa-trash-o').hide();
        }
        else {
            row.removeClass("hl");
            row.find('.fa-trash-o').show();
        }
        calculateWeight();
    }

    function trHide(elem) {
        let row = $(elem).parents("tr");
        row.hide();
    }

    function autocompleteProduct(el) {
        clearInput(el);
        const branch_id = getFromBranchId();
        $(el).autocomplete({
            source: `/products/autocomplete/${branch_id}`,
            minLength: 3,
            autoFocus: true,
            select: function (event, ui) {
                $(el).val(ui.item.value);
                $(el).prop('disabled', true);
                $(el).attr("data-id", ui.item.id);
                $(el).attr("data-plu", ui.item.plu);
            },
        });
    }

    function getRequiredLevelByPlu(plu){
        const info = {
            plu: plu,
            from_warehouse: $('#from_wh').val(),
            to_warehouse: $('#to_wh').val()
        };
        $.ajax({
            url: "/getRequiredLevelsByPlu",
            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.result) {
                    requiredLevelsTable.rows.add([response.data]).draw()
                }
            },
            error: function (error) {
                swal('Server error', `${error.message}`, 'error');
            }
        });
    }

    function clearInput(el) {
        const td = $(el).parents('td');
        const tr = $(el).parents('tr');
        const textElement = td.find('input');
        textElement.prop('disabled', false);
        textElement.val('');
        textElement.removeAttr('data-id');
        textElement.removeAttr('data-plu');
        tr.find('input').val('');
        tr.find('select').html('');
    }

    function getFromBranchId() {
        const selected_element = $('#from_wh option:selected');
        const branch_id = selected_element.attr('data-branch_id');
        if (branch_id) {
            return branch_id;
        }
        return null;
    }

    function addLine(el){
        let add_product = $('#add_product');
        getRequiredLevelByPlu(add_product.attr('data-plu'));
        clearInput(add_product);
    }

    function clearTable(el){
        $('#table-required-levels-list tbody tr').each(function (i, line) {
            var row = $(line);
            let checkbox = row.find('input.chk');
            if(!checkbox.is(':checked')){
                requiredLevelsTable.row(checkbox.parents('tr')).remove()
            }
            requiredLevelsTable.draw();
        });
    }

    function calculateWeight() {
        let total_weight = 0;
        let container = $('#table-required-levels-list_wrapper').find('div:first').find('div:first');
        $('#table-required-levels-list tbody tr').each(function (i, line) {
            let row = $(line);
            let checkbox = row.find('input.chk');
            if(checkbox.is(':checked')){
                let quantity = row.find('.inputQtyNeeded').val();
                let weight = row.find('.tdPLU').find('span').attr('data-weight');
                total_weight += parseFloat(weight) * parseFloat(quantity);
            }
        });
        let formatted_weight = total_weight.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
        container.text('Total Weight: ' + formatted_weight + ' lbs');
    }

</script>
@endsection