@extends('modules.head') @section('contenido')

<div class="box-header">
    <button class="btn btnAdd pull-right" onclick="displayAddWorkOrderTypeModal()">
        <i style="margin-right:5px;" class="fa fa-plus"></i>New Work Order Type
    </button>
</div>

<!-- List banners-->
<div class="box">
    <div class="box-header with-border">
        <h3 class="box-title">Work Order Types</h3></br>
    </div>

    <!-- /.box-header -->
    <div class="box-body table-responsive ">
        <table id="table-work_order_types" class="table table-bordered table-hover dataTable" role="grid" aria-describedby="example2_info">
            <thead>
                <tr role="row">
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Name</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Branch(es)</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

@include('work_order_types/modal_create_work_order_type')
@include('work_order_types/modal_edit_work_order_type')

<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<script src="{{ asset('js/bootstrap/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('js/create_filters_for_dataTables.js') }}"></script>
<script src="{{ asset('js/work_order_types.js') }}"></script>

<script type="text/javascript">

    $(document).ready(function () {
        $(function() {
            $('#table-work_order_types thead tr')
            .clone(true)
            .prependTo('#table-work_order_types thead');

            $('#table-work_order_types thead tr:first-child > th').css('background-color', "rgb(236 243 249)");
            $("#table-work_order_types").dataTable().fnDestroy();
            _table = $('#table-work_order_types').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                searching: false,
                paging: false,
                info: false,
                "order" : [],
                "language": {
                    url: 'https://cdn.datatables.net/plug-ins/1.10.19/i18n/Spanish.json'
                },
                ajax: {
                    url: 'work_order_types/list',
                },
                columns: [

                    {
                        data: 'name',
                        name: 'name' ,
                        "width": "30%",
                        render: function(data, type, row) {
                            return `<a class="orderTypeName" onClick="editWorkOrderType(${row.id})" >${data}</a>`;
                        }
                    },
                    {
                        data: 'work_order_type_branch',
                        name: 'work_order_type_branch',
                        render: function(data){
                            let branches = '';
                            if(!jQuery.isEmptyObject( data )) {
                                data.forEach(element => {
                                    branches += element.branch.bo_default_warehouse + ' | ';
                                });
                            }
                            return branches;
                        }
                    },

                ],
            });
        });
    });

</script>
<style type="text/css">
    .orderTypeName{
        cursor: pointer;
    }
</style>

@endsection