@extends ('layouts.app')

@section ('content')
<div class="row">
    <div class="col-md-12">
        <div class="panel panel-default padding-30">

            @include('partials.messages')

            <div class="row no-padding">
                <div class="col-md-6 no-padding">
                    @include('restaurants.partials.breadcrumbs')
                </div>
                <div class="col-md-1 no-padding">
                    <strong>B</strong> - Barcode<br>
                    <strong>P</strong> - Poslink<br>
                    <strong>I</strong> - Image<br>
                </div>
                <div class="col-md-5 no-padding">
                    <div class="row no-padding">
                        <div class="col-md-6 no-padding">
                            <div class="input-group col-md-12">
        						<input id="shelf_search" type="text" class="form-control" placeholder="Search">
        						<span class="input-group-btn">
        							<button class="btn btn-tabletpos" type="button">
        								<i class="glyphicon glyphicon-search"></i>
        							</button>
        						</span>
        					</div>
                        </div>
                        <div class="col-md-6 no-padding">
                            <div class="btn btn-tabletpos pull-right m-l-10" id="add-product" data-shelf_id="{{ $hashed_shelf_id }}">
                                <i class="fa fa-plus" aria-hidden="true"></i>
                            </div>
                            <div class="form-group pull-right">
                                <input type="text" name="product_title" id="product_title" class="form-control" placeholder="Product Name">
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="row">

                <div class="col-md-1">
                    <button class="btn btn-tabletpos pull-left" onclick="cloneshelf();"><i class="fa fa-link m-r-10" aria-hidden="true"></i> Clone Shelf</button>
                    <select id="cloneshelf">
                        @foreach($shelves as $sh)
                            <option value="{{ $sh->id }}">{{ $sh->title }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <button class="btn btn-tabletpos pull-left" onclick="window.location = '/reordershelf/';"><i class="fa fa-link m-r-10" aria-hidden="true"></i> Re-Order Products Alphabetical</button>
                </div>
                <div class="col-md-2">
                    <button class="btn btn-tabletpos pull-left" onclick="window.location = '/cleanshelf/';"><i class="fa fa-link m-r-10" aria-hidden="true"></i> Clean Shelf Duplicates</button>
                </div>
                <div class="col-md-2">
                    <button class="btn btn-tabletpos pull-left" onclick="window.location = '/cleanmerchant/';"><i class="fa fa-link m-r-10" aria-hidden="true"></i> Clean Merchant Duplicates</button>
                </div>
                <div class="col-md-2">
                    <button class="btn btn-tabletpos pull-left" onclick="window.location = '/resetproductstostock/';"><i class="fa fa-link m-r-10" aria-hidden="true"></i> Reset Measurements</button>
                </div>
            </div>

            <hr>

            <div class="row">
                <div class="col-md-12 m-t-20 no-padding" id="stockresult">
                    <div class="row no-padding">
                        <div class="col-xs-6 no-padding">
                            Product
                        </div>
                        <div class="col-xs-1 no-padding">
                            <span class="m-r-15"><strong>B</strong></span>
                            <span class="m-r-15"><strong>P</strong></span>
                            <span class=""><strong>I</strong></span>
                        </div>
                        <div class="col-xs-2 text-right">

                            @if (in_array('items.update', $user_rights))

                            Optic Shot

                            @endif

                        </div>
                        <div class="col-xs-3">

                            @if (in_array('items.update', $user_rights))

                            Photo Trigger

                            @endif

                        </div>
                    </div>
                    <ul class="list-group product-sortable-list">
                        @foreach($products as $product)
                            @include('restaurants.partials.product')
                        @endforeach
                    </ul>
                </div>

                <div id="uploadsheet">
                </div>
                <br />
                <p>Required Columns: TITLE , SKU <br />
                Download Template <a href="/assets/example.csv" target="_blank">Here</a></p>
                <div id="uploadresults"></div>

                </div>
            </div>

        </div>
    </div>
</div>

@include('modals._deactivate')
@include('modals._measurements')

    <script type="application/javascript">

        window.onload = function(e){
            tabitJS1.createStockLevla({
                container : "uploadsheet",
                text : "Mass Import File CSV" ,
                url : "mass_import_upload",
                callback: "processUpload"
            });
            toastr.options = {
                "closeButton": false,
                "debug": false,
                "newestOnTop": false,
                "progressBar": false,
                "positionClass": "toast-top-full-width",
                "preventDuplicates": false,
                "onclick": null,
                "showDuration": "300",
                "hideDuration": "1000",
                "timeOut": "10000",
                "extendedTimeOut": "1000",
                "showEasing": "swing",
                "hideEasing": "linear",
                "showMethod": "fadeIn",
                "hideMethod": "fadeOut"
            };
        };

        function processUpload(data){

            var d = JSON.parse(data);
            var opt1 = '<option value="">Type</option>' + d.product_types;
            var opt2 = '<option value="">Category</option>' + d.product_cats;
            var opt3 = '<option value="">Mass Type</option>' + d.mass_types;
            var opt4 = '<option value="">Unit Type</option>' + d.unit_types;

            d.data.forEach(function(currentValue, index, arr){
                //tabitJS1.helpers.hideItem('stockresult');
                var html = '<div class="row" style="margin-bottom:30px; border-bottom:1px solid black;" id="res_' + index + '" >';

                html += '<div class="form-group col-xs-3" style="padding:0; margin:0;" id="">';

                html += '<div class="col-xs-8" style="padding:0; margin:0;">';
                html += '<input style="width:99%!important;" type="text" placeholder="Search DB" id="title_' + index + '" value="' + tabitJS1.helpers.ucwords(currentValue.title) + '" /></input>';
                html += '<select style="width:99%!important; display:none;" id="auto_' + index + '" onchange="itemselected(' + index + ' , this)"></select>';
                html += '</div>';

                html += '<div class="col-xs-4" style="padding:0; margin:0;">';
                html += '<button type="button" onclick="javascript:autocomplete(' + index + ');" data-id="' + index + '" class="btn-small btn-tabletpos pull-right m-b-5">Search DB</button>';
                html += '<br /><button type="button" id="complete_' + index + '" style="display:none;" onclick="javascript:addnewprod(' + index + ');" data-id="' + index + '" class="btn-small btn-tabletpos pull-right">Save&Close</button>';
                html += '</div>';
                html += '</div>';

                html += '<div class="col-xs-1" id="sku_' + index + '">' + currentValue.sku + '</div>';
                html += '<div class="col-xs-1"><select style="width:99%!important;" id="type_' + index + '">' + opt1 + '</select></div>';
                html += '<div class="col-xs-2"><select style="width:99%!important;" id="cat_' + index + '">' + opt2 + '</select></div>';
                html += '<div class="col-xs-2"><select style="width:99%!important;" id="mass_' + index + '">' + opt3 + '</select><br /><input style="width:99%!important;" type="text" placeholder="Mass Volume" id="massvol_' + index + '" /></input></div>';

                html += '<div class="col-xs-2"><select id="unit_' + index + '">' + opt4 + '</select><br /><input style="width:99%!important;" type="text" placeholder="Unit" id="unitvol_' + index + '" /></input></div>';

                html += '<div class="col-xs-1" id="aaaa' + index + '">';
                html += '<button type="button" id="new_' + index + '" style="" onclick="javascript:addnewprod(' + index + ' , true);" data-id="' + index + '" class="btn-small btn-tabletpos pull-right">Add New</button>';
                html += '</div>';

                html += '</div>';

                $("#uploadresults").append(html);
            });
        }

        function autocomplete(ind){
            var key = document.getElementById('title_' + ind).value;
            tabitJS1.stocklevla.autocomplete(key , function(){
                tabitJS1.helpers.clearOptions("auto_" + ind);
                var res = JSON.parse(this.responseText);
                tabitJS1.helpers.addOptionByElementID("auto_" + ind , "NONE" , "None - New");
                for (var i = 0; i < res.length; i++) {
                    tabitJS1.helpers.addOptionByElementID("auto_" + ind , res[i].id , res[i].value);
                }
                if (res.length > 0) {
                    tabitJS1.helpers.showItem("auto_" + ind);
                    tabitJS1.helpers.showItem("complete_" + ind);
                    //alert("No Results");
                } else {
                    toastr.error('No products with that title is found , if you want to try again change the title a bit and search again.', 'No Results');
                }
            });
        }

        function itemselected(ind,elem){
            var prod_id = elem.options[elem.selectedIndex].value;
            if (prod_id > 0) {
                tabitJS1.stocklevla.getProduct(prod_id, function(){
                    var json =  JSON.parse(this.responseText);
                    if (json.code == "200"){
                        //console.log(json.data);
                        tabitJS1.helpers.changeSelectOption('type_' + ind , json.data.product_type_id);
                        tabitJS1.helpers.changeSelectOption('cat_' + ind , json.data.category_type_id);
                        tabitJS1.helpers.changeSelectOption('mass_' + ind , json.data.mass_volume_type_id);
                        tabitJS1.helpers.changeSelectOption('unit_' + ind , json.data.unit_type_id);

                        tabitJS1.helpers.changeInputValue('massvol_' + ind , json.data.mass_volume);
                        tabitJS1.helpers.changeInputValue('unitvol_' + ind , json.data.units);
                    }
                });
            } else {
                tabitJS1.helpers.resetSelectElement('type_' + ind);
                tabitJS1.helpers.resetSelectElement('cat_' + ind);
                tabitJS1.helpers.resetSelectElement('mass_' + ind);
                tabitJS1.helpers.hideItem("auto_" + ind);
            }

        }

        function donedata(data){
            console.log(data);
        }

        function cloneshelf(){
            //cloneshelf
            var from_shelf_id = tabitJS1.helpers.getSelectedValue('cloneshelf');
            var to_shelf_id = '';
            var r = confirm("Clone the products from the selected shelf ?");
            if (r == true) {
                //cloneshelf
                window.location = '/cloneshelf/' + from_shelf_id + '/' + to_shelf_id;
            }
        }

        function addnewprod(ind , newprod = false){

            var elem = document.getElementById('auto_' + ind);
            if (newprod) {
                var prod_id = null;
            } else{
                var prod_id = elem.options[elem.selectedIndex].value;
            }
            var pos_link = document.getElementById('sku_' + ind).innerHTML;

            var unit_vol = document.getElementById('unitvol_' + ind).value;
            var mass_vol = document.getElementById('massvol_' + ind).value;
            var title = document.getElementById('title_' + ind).value;

            var type_id = tabitJS1.helpers.getSelectedValue('type_' + ind);
            var cat_id = tabitJS1.helpers.getSelectedValue('cat_' + ind);
            var mass_id = tabitJS1.helpers.getSelectedValue('mass_' + ind);
            var unit_id = tabitJS1.helpers.getSelectedValue('unit_' + ind);

            var shelf_id = '';
            var area_id = '';

            tabitJS1.stocklevla.addExistingProductToShelve(prod_id , shelf_id , {
                shelve_id: shelf_id,
                area_id: area_id,
                pos_link: pos_link,
                mass_volume_type_id: mass_id,
                unit_type_id: unit_id,
                category_type_id: cat_id,
                type_id: type_id,
                how_many: unit_vol,
                mass_vol: mass_vol,
                title: title
            } , function(){
                var rep = JSON.parse(this.response);
                if (rep.code == 200){
                    toastr.success("Item has been added to shelf");
                    var element = document.getElementById('res_' + ind);
                    element.parentNode.removeChild(element);
                }
            });

        }




    </script>
@stop


//product