@extends ('layouts.app')
@section ('content')

    <div class="modal modal-result fade" id="modal-measurements" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <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" id="myModalLabel">Modify Measurements</h4>
                </div>
                <div class="modal-footer text-center">

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

    <div class="panel">

        <div style="display: none;" id="hidden-content">
            <h2>Hello</h2>
            <p>You are awesome.</p>
        </div>

        <div style="display: none;" id="hidden-finishproduct">
            <h2>Setup Product</h2>
            <form class="form-inline" id="edittemp">
                <div class="row">
                    <div class="form-group mx-sm-3 mb-2">
                        <label for="temptitle">Ttitle</label>
                        <input type="text" class="form-control" id="temptitle" placeholder="Product Title">
                        <input type="hidden" id="type_id" value="" />
                    </div>
                </div>
            </form>
        </div>

        <div class="panel-heading m-b-15">
            <ul class="nav nav-tabs">
                @foreach($restaurants as $restaurant)
                    <li {{ ($restaurant->id == $restaurant_id) ? 'class=active' : ''}}><a href="{{ route('merchants.manageproducts', [$restaurant->id]) }}">{{ $restaurant->name }}</a></li>
                @endforeach
            </ul>
        </div>

        <div class="row">
            <div class="col-md-12 padding-30">
                <h2>Merchant Products</h2>
                <table id="example" class="display" style="width:100%">
                    <thead>
                    <tr>
                        <th>id</th>
                        <th>Restaurant</th>
                        <th>Area</th>
                        <th>Shelve</th>
                        <th>Product</th>
                        <th>CurStock</th>
                        <th>Barcode</th>
                        <th>Mass</th>
                        <th>POSLink</th>
                        <th>POSLocation</th>
                        <th>Price</th>
                        <th>Actions</th>
                    </tr>
                    </thead>

                    <tfoot>
                    <tr>
                        <th>id</th>
                        <th>Restaurant</th>
                        <th>Area</th>
                        <th>Shelve</th>
                        <th>Product</th>
                        <th>CurStock</th>
                        <th>Barcode</th>
                        <th>Mass</th>
                        <th>POSLink</th>
                        <th>POSLocation</th>
                        <th>Price</th>
                        <th>Actions</th>
                    </tr>
                    </tfoot>
                </table>
            </div>
            @if (count($tproducts) > 0)
                <div class="col-md-12 padding-30">
                    <h2>Added Incomplete Products</h2>
                    @foreach( $tproducts as $prod)
                        <div class="row padding-5">
                            <div class="col-md-2">
                                {{ $prod->title }}
                            </div>
                            <div class="col-md-2">
                                {{ $prod->barcode }}
                            </div>
                            <div class="col-md-1">
                                <a href="{{ $prod->picture }}" data-fancybox="gallery" data-caption="{{ $prod->title }}" class="btn btn-tabletpos btn-cons m-r-0"><i class="fa fa-edit m-r-10"></i>View</a>
                            </div>
                            <div class="col-md-1">
                                <a href="/tempproduct/edit/{{ $prod->id }}" class="btn btn-tabletpos btn-cons m-r-0"><i class="fa fa-edit m-r-10"></i>Complete</a>
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>
    </div>
@stop

@section('javascript')
    <script type="text/javascript">
        var unit_types = JSON.parse('');
        var mass_units = JSON.parse('');
        var product_types = JSON.parse('');
        var category_types = JSON.parse('');
        var restaurant_id = JSON.parse('');

        //console.log(mass_units);
        var oTable;
        $(document).ready(function() {
            $(".various").fancybox({
                maxWidth	: 800,
                maxHeight	: 600,
                fitToView	: false,
                width		: '70%',
                height		: '70%',
                autoSize	: false,
                closeClick	: false,
                openEffect	: 'none',
                closeEffect	: 'none'
            });

            oTable = $('#example').DataTable({
                "ajax": "/merchants/ajaxdata/" + restaurant_id,
                "processing": false,
                "serverSide": false,
                "searchDelay" : 3000,
                "lengthMenu": [ [10, 50, 100, 200, -1], [10, 50, 100, 200, "All"] ],
                "columnDefs": [
                    {
                        "targets": [ 0 ],
                        "visible": false,
                        "searchable": false
                    },
                    {
                        "targets": [ 5 ],
                        "render": function ( data, type, row ) {
                            return row.product_count + ' (' + row.units + ')';
                        }
                    },
                    {
                        "targets": [ 7 ],
                        "render": function ( data, type, row ) {
                            //console.log(row);
                            if (row.mass_volume_type_id) {
                                var m = search(row.mass_volume_type_id , mass_units);
                                var u = search(row.unit_type_id , unit_types);
                                if (m && u) {
                                    return row.mass_volume + ' ' + m.title  + ' (' + row.how_many + ' ' + u.title + ')';
                                } else {
                                    return row.mass_volume + ' ' + ' (' + row.how_many + ' ' + ')';
                                }
                                //return row.mass_volume + ' ' + search(row.mass_volume_type_id, mass_units).title + ' (' + row.how_many + ' ' + search(row.unit_type_id, unit_types).title + ')';
                            } else return data;
                        }
                    },
                    {
                        "targets": [ 11 ],
                        "render": function ( data, type, row ) {
                            return '<a href="/product/edit/' + row.product_id +'">Prod Edit</a> | ' +
                                '<a href="/shelf/' + row.shelf_id + '">Shelf Edit</a> | ' +
                                '<a data-id="' + row.shelf_product_id + '" class="edit-measurements" href="#">Measurements Edit</a> | ' +
                                '<a href="javascript:resetToOne(' + row.shelf_product_id +')">Reset To 1 Unit</a>';
                        }
                    },
                ],
                "columns": [
                    { "data": "id" },
                    { "data": "restaurant_name" },
                    { "data": "area" },
                    { "data": "shelve" },
                    { "data": "product" },
                    { "data": "product" },
                    { "data": "barcode" },
                    { "data": "mass_volume_type_id"},
                    { "data": "poslink" },
                    { "data": "pos_stock_location_link" },
                    { "data": "price" },
                    { "data": "id" },
                ]
            });
        });

        function search(nameKey, myArray){
            for (var i=0; i < myArray.length; i++) {
                if (myArray[i].id === nameKey) {
                    return myArray[i];
                }
            }
        }

        function editRow(val){
            let datas = oTable.data().toArray();
            console.log(datas);
            let obj = datas.find(o => o.id === val);


            $("#saveunit #type_id").val(obj.id);
            $("#saveunit #newtype").val(obj.title);
            $("#saveunit #stocklabel").val(obj.stocklabel);
            $("#saveunit #showslider").prop("checked" , obj.showslider);
            $("#saveunit #showunit").prop("checked" , obj.showunit);

        }

        function edititem(id){
            $.fancybox.open({
                src  : '#hidden-content',
                type : 'inline',
                opts : {
                    afterShow : function( instance, current ) {
                        console.info( 'done!' );
                    }
                }
            });
            return false;
        }

        function resetToOne(id){

            $.ajax({
                type: "GET",
                url: '/resetshelfitem/' + id,
                data: null,
                dataType: 'json',
                success: function (data) {
                    console.log(data);
                },
            });
        }

        function completeproduct(id) {
            $.ajax({
                type: "GET",
                url: '/api/1/findtempproduct/' + id,
                data: null,
                success: function(data){
                    console.log(data);
                    //hidden-finishproduct
                    $('#temptitle').val(data.payload.titled);
                    $.fancybox.open({
                        src  : '#hidden-finishproduct',
                        type : 'ajax',
                        clickOutside  : false,
                        dblclickOutside: false,
                        opts : {
                            clickOutside  : false,
                            dblclickOutside: false,
                            afterShow : function( instance, current ) {
                                console.info( 'done!' );
                                $("#fancybox-wrap").css({'top':'20px', 'bottom':'auto'});
                            },
                            onComplete: function() {
                                $("#fancybox-wrap").css({'top':'20px', 'bottom':'auto'});
                            }
                        }
                    });
                },
                dataType: 'json'
            });
            return false;
        }

        function resetForm(){
            $('#saveunit').get(0).reset();
            $("#saveunit #type_id").val('');
        }

        function reloadTable(){
            oTable.ajax.reload();
        }

        function saveForm(){
            if($("#showslider").prop("checked")){
                var showslider = 1;
            } else {
                var showslider = 0;
            }

            if($("#showunit").prop("checked")){
                var showunit = 1;
            } else {
                var showunit = 0;
            }

            $.ajax({
                type: "POST",
                url: '/units/saveunit',
                data: {
                    "title" : $("#saveunit #newtype").val(),
                    "id" : $("#saveunit #type_id").val(),
                    "showslider" : showslider,
                    "stocklabel" : $("#saveunit #stocklabel").val(),
                    "showunit" : showunit
                },
                success: function(data){
                    resetForm();
                    reloadTable();
                },
                dataType: 'json'
            });
        }

    </script>
@stop