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

    <div class="panel">
        <div class="row">
            <div class="col-md-12 padding-30">

                <form class="form-inline" id="saveunit">
                    <div class="row">
                        <div class="form-group mx-sm-3 mb-2">
                            <label for="newtype">New Unit Type</label>
                            <input type="text" class="form-control" id="newtype" placeholder="New Unit Type">
                            <input type="hidden" id="type_id" value="" />
                        </div>
                    </div>
                    <br />
                    <div class="row">
                        <div class="form-group mx-sm-3 mb-2">
                            <label for="newtype">Unit Stock Label</label>
                            <input type="text" class="form-control" id="stocklabel" placeholder="Unit Stock Label">
                        </div>
                    </div>
                    <br />
                    <div class="row">
                        <div class="form-group mx-sm-3 mb-2">
                            <label class="checkbox-inline"><input type="checkbox" class="inputbox" id="showslider" name="showslider" />Show Slider On App</label>
                        </div>
                    </div>
                    <br />

                    <div class="row">
                        <div class="form-group mx-sm-3 mb-2">
                            <label class="checkbox-inline"><input type="checkbox" class="inputbox" id="showunit" name="showunit" />Show Second Unit Box On App ( bottles / tots )</label>
                        </div>
                    </div>
                    <br />

                </form>

                <br />
                <button type="button" onclick="saveForm();" class="btn btn-tabletpos mb-2">Save</button>
                <button type="button" onclick="resetForm();" class="btn btn-tabletpos mb-2">Reset ( New Entry )</button>
                <hr />
                <br />

                <table id="example" class="display" style="width:100%">
                    <thead>
                    <tr>
                        <th>id</th>
                        <th>Unit Type</th>
                        <th>Slider</th>
                        <th>SecondUnit</th>
                        <th>Created At</th>
                        <th>Modified At</th>
                        <th>Actions</th>
                    </tr>
                    </thead>

                    <tfoot>
                    <tr>
                        <th>id</th>
                        <th>Unit Type</th>
                        <th>Slider</th>
                        <th>SecondUnit</th>
                        <th>Created At</th>
                        <th>Modified At</th>
                        <th>Actions</th>
                    </tr>
                    </tfoot>
                </table>

            </div>
        </div>
    </div>
@stop

@section('javascript')
    <script type="text/javascript">
        var oTable;
        $(document).ready(function() {
            oTable = $('#example').DataTable({
                "ajax": "/units/getunits",
                "columnDefs": [
                    {
                        "targets": [ 0 ],
                        "visible": false,
                        "searchable": false
                    },
                    {
                        "targets": [ 6 ],
                        "render": function ( data, type, row ) {
                            console.log(type);
                            return '<a href="javascript:editRow(' + 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": "showslider" },
                    { "data": "showunit" },
                    { "data": "created_at" },
                    { "data": "updated_at" },
                    { "data": "id" },
                ]
            });

        });

        function search(nameKey, myArray){
            for (var i=0; i < myArray.length; i++) {
                if (myArray[i].name === 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 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