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

    <div class="panel">
        <div class="row">
            <div class="col-md-12 padding-30">
                <table id="example" class="display" style="width:100%">
                    <thead>
                    <tr>
                        <th>id</th>
                        <th>Product Name</th>
                        <th>Type</th>
                        <th>Total Size</th>
                        <th>Barcode</th>
                        <th>Image</th>
                        <th>Actions</th>
                    </tr>
                    </thead>

                    <tfoot>
                    <tr>
                        <th>id</th>
                        <th>Product Name</th>
                        <th>Type</th>
                        <th>Total Size</th>
                        <th>Barcode</th>
                        <th>Image</th>
                        <th>Actions</th>
                    </tr>
                    </tfoot>
                </table>

            </div>
        </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('');

        //console.log(mass_units);
        var oTable;
        $(document).ready(function() {
            oTable = $('#example').DataTable({
                "ajax": "/product/ajaxdata",
                "processing": true,
                "serverSide": true,
                "searchDelay" : 3000,
                "columnDefs": [
                    {
                        "targets": [ 0 ],
                        "visible": false,
                        "searchable": false
                    },
                    {
                        "targets": [ 2 ],
                        "render": function ( data, type, row ) {
                            var t = search(row.product_type_id , product_types);
                            var c = search(row.category_type_id , category_types);
                            if (t && c){
                                return t.title + ' (' + c.title + ')';
                            } else {
                                return data;
                            }
                        }
                    },
                    {
                        "targets": [ 3 ],
                        "render": function ( data, type, row ) {
                            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.units + ' ' + u.title + ')';
                            } else {
                                return row.mass_volume + ' ' + ' (' + row.units + ' ' + ')';
                            }
                        }
                    },
                    {
                        "targets": [ 5 ],
                        "render": function ( data, type, row ) {
                            //console.log(row);
                            if (data){
                                return '<a href="'+ data + '" data-fancybox="gallery" data-caption="' + row.title + '" class="btn btn-tabletpos btn-cons m-r-0"><i class="fa fa-edit m-r-10"></i>View</a>';
                            } else {
                                return 'Needed';
                            }
                        }
                    },
                    {
                        "targets": [ 6 ],
                        "render": function ( data, type, row ) {
                            return '<a href="/product/edit/' + data + '" class="btn btn-tabletpos btn-cons m-r-0"><i class="fa fa-edit m-r-10"></i> Edit</a>';
                        }
                    }
                ],
                "columns": [
                    { "data": "id" },
                    { "data": "title" },
                    { "data": "product_type_id" },
                    { "data": "mass_volume_type_id"},
                    { "data": "bar_code" },
                    { "data": "image_url" },
                    { "data": "id" },
                ]
            });
        });

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

        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 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