@extends ('layouts.app')
@section ('content')
    <div class="panel">
        <div class="row">
            <div class="col-md-12 padding-30">
                <form class="form-inline" id="saveunit">
                    <input type="hidden" id="type_id" value="" />

                    <div class="row m-b-10">
                        <div class="form-group col-md-3">
                            <label for="newtype">New Produt Type</label>
                        </div>
                        <div class="form-group col-md-5">
                            <input type="text" class="form-control" id="newtype" placeholder="New Product Type">
                        </div>
                    </div>

                    <div class="row m-b-10">
                        <div class="form-group col-md-3">
                            <label for="newtype">Unit Measurement Types For Product</label>
                        </div>
                        <div class="col-md-5">
                            @foreach($unitlist as $unit)
                                <label class="checkbox-inline"><input type="checkbox" class="inputbox mtypeproduct" data-id="{{ $unit->id }}" value="{{ $unit->id }}">{{ $unit->title }}</label>
                            @endforeach

                        </div>
                    </div>

                    <div class="row m-b-10">
                        <div class="form-group col-md-3">
                            <label for="newtype">MASS / VOLUME / PACK SIZE label for Product</label>
                        </div>
                        <div class="col-md-5">
                            <input type="text" class="form-control" id="newmass" placeholder="Mass Label">
                        </div>
                    </div>

                    <div class="row m-b-10">
                        <div class="form-group col-md-3">
                            <label for="newtype">General Options</label>
                        </div>
                        <div class="col-md-5">
                            <label class="checkbox-inline"><input type="checkbox" class="inputbox" id="allowoptic" name="allowoptic" />Allow Optic</label>
                        </div>
                    </div>

                    <div class="row m-b-10">
                        <div class="form-group col-md-3">

                        </div>
                        <div class="col-md-5">
                            <label class="checkbox-inline"><input type="checkbox" class="inputbox" id="imageprocessing" name="imageprocessing" />Need Image Processing for Slider</label>
                        </div>
                    </div>

                    <div class="row m-b-10">
                        <div class="form-group col-md-3">

                        </div>
                        <div class="col-md-5">
                            <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>
                        </div>
                    </div>

                </form>

                <hr />
                <br />

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

                    <tfoot>
                    <tr>
                        <th>id</th>
                        <th>Product Type</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": "/types/gettypes",
                "columnDefs": [
                    {
                        "targets": [ 0 ],
                        "visible": false,
                        "searchable": false
                    },
                    {
                        "targets": [ 4 ],
                        "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": "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){
            $(".inputbox").prop('checked' , false);
            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 #newmass").val(obj.mass_type);
            $("#allowoptic").prop("checked" , obj.allowoptic);
            $("#imageprocessing").prop("checked" , obj.imageprocessing);


            obj.unit_types.forEach(function(element) {
                //console.log(element);
                $(".inputbox[data-id="+element.id+"]").prop('checked' , true);
            });
        }

        function resetForm(){
            $('#saveunit').get(0).reset();
            $("#saveunit #type_id").val('');
            $(".inputbox").prop('checked' , false);
        }

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

        function saveForm(){
            let unit_ids = new Array();
            $(".mtypeproduct").each(function(i) {
                if ($(this).prop('checked') === true){
                    unit_ids.push(parseInt($(this).attr("data-id")));
                }
            });
            console.log(unit_ids);

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

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



            $.ajax({
                type: "POST",
                url: '/types/savetype',
                data: {
                    "title" : $("#saveunit #newtype").val(),
                    "id" : $("#saveunit #type_id").val(),
                    "mass_type" : $("#saveunit #newmass").val(),
                    "unitids" : unit_ids,
                    "allowoptic" : allowoptic,
                    "imageprocessing" : imageprocessing
                },
                success: function(data){
                    resetForm();
                    reloadTable();
                },
                dataType: 'json'
            });
        }

    </script>
@stop