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

<div class="box-header">
    @if(Auth::user()->rol_id == 1 || Auth::user()->rol_id == 2 || Auth::user()->rol_id == 8)
    <a class="auxiliar" href="{{url('/stock/report')}}">
        <button type="button" class="btn  pull-left btnAux">
            <i class="fa fa-file"></i>@lang('messages.inventory_report')
        </button>
    </a>
    @endif

</div>
<!-- List banners-->
<div class="box">
    <div class="box-header with-border">
        <div class="row">
            <button class="btn btnAux pull-right" data-toggle="modal" data-target="#modal-sync-product">Sync Item</button>
        </div>
        <br>
        <div class="row">
            <button class="btn btnAux pull-right" id="sync_locations"> Sync Locations</button>
        </div>
        <br>
    </div>
    <div class="box-header with-border">
        <div class="row">
            <div class="col-xs-2">
                <h3 class="box-title">{{ Lang::get('messages.screen_stocks_tag1')}}</h3>
            </div>
        </div>
    </div>
    <!-- /.box-header -->
    <div class="box-body table-responsive ">
        @include('eko_table_preferences')
        <table id="table-list" class="table table-bordered table-hover dataTable ekoTable" role="grid" aria-describedby="example2_info">
            <thead>
                <tr role="row">
                    <th id="col_plu">{{ Lang::get('messages.screen_products_tag5')}}</th>
                    <th id="col_avl">{{ Lang::get('messages.screen_products_tag11')}}</th>
                    <th id="col_bin_location">{{ Lang::get('messages.screen_products_tag67')}}</th>
                    <th id="col_min_level">Min Level</th>
                    <th id="col_max_level">Max Level</th>
                    <th id="col_min_order_level">Min Order Level</th>
                    <th id="col_committed">Committed</th>
                    <th id="col_warehouse">Warehouse</th>
                    <th id="col_status">Status</th>
                    <th id="col_actions">Actions</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

@include('products.scraper')
<style type="text/css">
    .swal-custom-min-max-level {
        width: 350px;
        height: auto;
        font-size: 13px
    }
    .rotateTheFaIcon {animation: rotate 2s infinite;}

@media(max-width: 768px) {
table#table-list{ }
table#table-list tr { }
table#table-list tr th { }
table#table-list tr th:nth-child(2),table#table-list tr th:nth-child(8),table#table-list tr th:nth-child(9),table#table-list tr th:nth-child(10),
table#table-list tr td:nth-child(2),table#table-list tr td:nth-child(8),table#table-list tr td:nth-child(9),table#table-list tr td:nth-child(10){ display: none; }
}
</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 src="{{ asset('js/dropzone/dropzone.js') }}"></script>

<!--Columns visibility -->
<script src="{{ asset('js/column_visibility.js') }}"></script>
<!--End Columns visibility -->

<script type="text/javascript">
    $(document).ready(function() {
        function format(data) {
            var $markup = '<table class="table table-bordered" cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
            data.product_attributes.forEach(attributes => {
                $markup += '<tr><td> SKU: ' + attributes.sku + '</td>' +
                    '<td> Valor: ' + attributes.value + '</td>' +
                    '<td> Cantidades disponibles: ' + attributes.available_units + '</td>' +
                    '<td> Atributo: ' + attributes.attribute.display_name + '</td>' +
                    '<td> Unidades en despacho: ' + attributes.dispatched_units + '</td>' +
                    '<td> Precio adicional : ' + attributes.price_additional + '</td></tr>';
            })
            $markup += '</table>';
            return $markup;
        }

        $(function() {
            $.fn.dataTable.ext.errMode = 'throw';
            $('#table-list thead tr')
                .clone(true)
                .addClass('filters')
                .prependTo('#table-list thead');

            $('#table-list thead tr:first-child > th').css('background-color', "rgb(255, 255, 255)");

            $("#table-list").dataTable().fnDestroy();
            let url = 'stock/list',
                _table = $('#table-list').DataTable({
                    responsive: true,
                    processing: true,
                    serverSide: true,
                    "order": [],
                    "language": {
                        url: 'https://cdn.datatables.net/plug-ins/1.10.19/i18n/Spanish.json'
                    },
                    ajax: url,
                    columns: [
                        {
                            data: 'product.plu',
                            name: 'product.plu',
                            "width": "20%",
                            render(data, type, raw) {
                                if (raw.available_warehouse == 0) {
                                    return `<span>${data}</span>`
                                } else {
                                    return `<a onclick="showInfoBinLocationItem(this, '${data}', '${raw.warehouse.branch.id}')" role="button" class="table-link">${data}</a>`;
                                }
                            }
                        },
                        {
                            data: 'available_units',
                            name: 'available_units'
                        },
                        {
                            data: 'bin_location',
                            name: 'bin_location',
                            render(data, type, row) {
                                if(row.bo_bin_location && row.bo_bin_location.bo_bin_location_type_id === 1){
                                    return `${data} <i class="fa fa-check-circle"></i>`;
                                }
                                return data;
                            }
                        },
                        {
                            data: 'min_level',
                            name: 'min_level'
                        },
                        {
                            data: 'max_level',
                            name: 'max_level'
                        },
                        {
                            data: 'min_order_level',
                            name: 'min_order_level'
                        },
                        {
                            data: 'committed_units',
                            name: 'committed_units'
                        },
                        {
                            data: 'warehouse.code',
                            name: 'warehouse.code'
                        },
                        {
                            data: 'product.active',
                            name: 'product.active',
                            render(data) {
                                if (data) {
                                    return `<span class="label label-success">Active</span>`;
                                }
                                return `<span class="label label-warning">Inactive</span>`;
                            }
                        },
                        {
                            data: 'product.plu',
                            name: 'product.plu',
                            "width": "5%",
                            render(data, type, raw) {
                                return `<div style="text-align:center">
                                      <a type="button" class="btn btn-default sync-inventory" onclick="syncInventoryByPLU(this, '${data}', '${raw.warehouse.branch.id}', '${raw.warehouse.id}')"><i class="fa fa-refresh"></i></a>
                                      <a class="btn btn-default" onclick="editMinMaxLevels(this, '${data}', '${raw.bin_location}', '${raw.warehouse.id}')" style="margin:5px; color: #3c8dbc; border:1px solid #3c8dbc">
                                        <small>Min-Max</small>
                                      </a>
                                      <a class="btn btn-default" onclick="modalEditMinOrderLevel(this, '${raw.product_id}', '${raw.min_order_level}', '${data}','${raw.warehouse.code}')" style="margin:5px; color: #3c8dbc; border:1px solid #3c8dbc">
                                        <small>Min Order Level</small>
                                      </a>
                                </div>`;
                            }
                        },
                    ],
                    initComplete: addFiltersForDataTable
                });

                handleUserColumnsPreferences('table-list', 'stocks', _table); //First argument: table id, Second argument: corresponding name in eko_tables database table, Third argument: datatable instance


            $('#table-list tbody').on('click', 'td.details-control', function() {
                var tr = $(this).closest('tr');
                var row = _table.row(tr);
                if (row.child.isShown()) {
                    // This row is already open - close it
                    row.child.hide();
                    tr.removeClass('shown');
                } else {
                    // Open this row
                    row.child(format(row.data())).show();
                    tr.addClass('shown');
                }
            });

        });

        $('#sync_locations').on('click', function() {
            $('#sync-bin-locations').modal('show');
            $('#sel-sync-branch').val('');
        });

        $('#btn-sync-bin-locations').on('click', function() {
            let branch_id = $('#sel-sync-branch').find(":selected").val();
            if (!branch_id) {
                swal('Alert', 'Choose one branch to execute sync', 'warning');
            }
            else {
                swal({
                    text: "Are you sure you want to perform this action?",
                    icon: "info",
                    buttons: ["Cancel", "Ok"],
                })
                    .then((value) => {
                        if(value) {
                            $('#sync-bin-locations').modal('hide');
                            showLoadingOverlay('Synchronizing bin locations')
                            $.ajax({
                                url: `/stock/syncBinLocationsPerBranch/${branch_id}`,
                                type: "GET",
                                contentType: "application/json",
                                headers: {
                                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                                    "Content-Type": "application/json",
                                },
                                success: (response) => {
                                    if(response.status){
                                        swal({
                                            title: "Success",
                                            text: response.message,
                                            icon: "success",
                                        }).then(() => {
                                            location.reload(true);
                                        })
                                    }
                                    else {
                                        swal('Error', response.message, 'error');
                                    }
                                },
                                error: (error) => {
                                    swal('Error', `An unexpected error has occurred ${error}`, 'error');
                                },
                            });
                        }
                    });
            }
        })

        function showLoadingOverlay(title){
            Swal.fire({
                title: title,
                html: '<div class="i_container" id="i_container" style="font-size:40px; height:50px; margin-top:20px" ><i id="fa-refresh" class="fa fa-refresh text-green rotating"></i></div>',
                showConfirmButton: false
            });
        }
    });
</script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="{{ asset('js/masterSAPB1.js') }}"></script>

@endsection

<div class="modal" tabindex="-1" role="dialog" id="modalShowBinLocationItem">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
            </div>
        </div>
    </div>
</div>

<div class="modal" id="modal-sync-product">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">Sync product</h4>
            </div>
            <div class="modal-body">
                <div class="box-info">
                    <div class="form-group row">
                        <div class="col-xs-3">
                            <label>PLU</label>
                        </div>
                        <div class="col-xs-6">
                            <div class="input-group">
                                <input type="text" onclick="autocompleteProduct(this)" id="plu" name="plu" placeholder="Product" class="form-control form-control-sm ui-autocomplete-input product">
                                <span class="input-group-btn">
                                    <button class="btn btn-default trash-item" type="button" id="clearInput" onclick="clearInput(this)" style="border-radius: 0px !important">
                                        <span class="fa fa-remove"></span>
                                    </button>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left"
                        data-dismiss="modal">{{ Lang::get('messages.modal_info_clients_tag9')}}</button>
                <button type="button" class="btn btnBox" onclick="syncInventoryByPLUAllBranches(this)">Submit</button>
            </div>
        </div>
    </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>
    function syncInventoryByPLUAllBranches(el){
        let element = $(el);
        let exitingPLU = $('#plu').attr('data-plu');
        let newPLU = $('#plu').val();
        let plu = null;
        if(exitingPLU !== undefined){
             plu = exitingPLU;
        }else{
            plu = newPLU;
        }
        if(!plu){
            swal('', 'Please enter a valid PLU', 'warning');
            return false;
        }
        element.button('loading');
        $.ajax({
            url: `/stock/syncInventoryByPLUAllBranches/${plu}`,
            type: 'GET',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                'Content-Type': 'application/json'
            },
            success: function(data) {
                $('#plu').val('');
                $('#table-list').DataTable().ajax.reload();
                swal("", 'Item updated successfully.', 'success');
            },
            error: function(data) {
                swal('Error', `Internal server error.`, 'error');
            },
            complete: function() {
                element.button('reset');
                clearInput($('#clearInput'));
            }
        })
    }

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

    function clearInput(el) {
        const textElement = $('#plu');
        textElement.prop('disabled', false);
        textElement.val(null);
        $.each($(textElement).data(), function (i) {
            $(textElement).removeAttr("data-" + i);
        });
    }

    function modalEditMinOrderLevel(el, product_id, min_order_level, plu, warehouse_code) {
        $('#min_order_level').val(min_order_level);
        $('#min_order_level_product_id').val(product_id);
        $('#min_order_level_warehouse_code').val(warehouse_code);
        
        $('#modal_min_order_level').find('.modal-title').text(`Edit min order level 
        for ${warehouse_code} | ${plu}`);
        $('#modal_min_order_level').modal();
    }

    function editMinOrderLevel(el) {
        let element = $(el);
        const data = {
            min_order_level: $('#min_order_level').val(),
            product_id: $('#min_order_level_product_id').val(),
            warehouse_code: $('#min_order_level_warehouse_code').val()
        }
        element.button('loading');
        $.ajax({
            url: `/stock/editMinOrderLevel`,
            type: 'POST',
            data: JSON.stringify(data),
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                'Content-Type': 'application/json'
            },
            success: function(data) {
                $('#table-list').DataTable().ajax.reload();
                swal("", 'Item updated successfully.', 'success').then(() => {
                    $('#modal_min_order_level').modal('toggle');
                });
            },
            error: function(data, status, error) {
                swal('Error', `${error}`, 'error');
            },
            complete: function() {
                element.button('reset');
            }
        })
    }
</script>

<!-- /.MODAL Sync bin locations -->
<div class="modal fade" tabindex="-1" role="dialog" id="sync-bin-locations" data-backdrop="false">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">Sync bin locations</h4>
            </div>
            <div  class="modal-body row">
                <div class="form-group col-md-5">
                    <label for="sel-sync-branch">Branch </label>
                    <select class="form-control" name="sel-sync-branch" id="sel-sync-branch">
                        <option value="" selected disabled>-- To select</option>
                        @foreach($branches as $branch)
                            <option value="{{ $branch->id }}">{{ $branch->bo_default_warehouse }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="btn-sync-bin-locations">Sync
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

@include('stocks.modal_min_order_level')