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

@if($display_all)
<div class="box-header">
    <a href="/work_orders/create"><button class="btn btnAdd pull-right">
        <i style="margin-right:5px;" class="fa fa-plus"></i>New Work Order
    </button></a>
</div>
@endif

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

    <!-- /.box-header -->
    <div class="box-body table-responsive ">
        <table id="table-work_orders" 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">Code</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Type</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Created by</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Creation date</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Assigned to</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Accepted by</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Status</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Actions</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

<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/dropzone/dropzone.js') }}"></script>
<script src="{{ asset('js/create_filters_for_dataTables.js') }}"></script>
<script src="{{ asset('js/work_orders.js') }}"></script>
<script type="text/javascript">

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

            $('#table-work_orders thead tr:first-child > th').css('background-color', "rgb(236 243 249)");
            $("#table-work_orders").dataTable().fnDestroy();
            _table = $('#table-work_orders').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                "order" : [],
                "language": {
                    url: 'https://cdn.datatables.net/plug-ins/1.10.19/i18n/Spanish.json'
                },
                ajax: {
                    url: 'work_orders/get_work_orders',
                },
                columns: [
                    {
                        data: 'code',
                        name: 'code',
                        "width": "30%",
                        render: function(data, type, row) {
                            if(row.work_order_status_id === 3) {
                                return `<a class="aButton" type="button" onCLick=displayModalWODetails(${row.id})>${data}</a>`;
                            }
                            else {
                                return data;
                            }
                        }
                    },
                    { data: 'order_type.name', name: 'order_type.name' , "width": "30%"},
                    {
                        data: 'created_by',
                        name: 'created_by',
                        render: function(data) {
                            if (data) {
                                return data.first_name + " " + data.last_name;
                            }
                            return "";
                            
                        }
                    },
                    {
                        data: 'created_at',
                        name: 'created_at',
                        render: function (data) {
                            return new Date(data).toLocaleString();
                        }
                    },
                    {
                        data: 'assigned_to',
                        name: 'assigned_to',
                        render: function(data) {
                            if (data) {
                                return data.first_name + " " + data.last_name;
                            }
                            else {
                                return '';
                            }
                        }
                    },
                    {
                        data: 'accepted_by',
                        name: 'accepted_by',
                        render: function(data) {
                            if (data) {
                                return data.first_name + " " + data.last_name;
                            }
                            else {
                                return '';
                            }
                        }
                    },
                    {
                        data: 'status.name',
                        name: 'status.name',
                        render: function (data, type, row) {
                            let note = '';
                            if(row.order_type.name === 'Cycle count') {
                                note = `<a type="button" onClick="displayModalNote(${row.id}, '', '${row.order_type.name}')"><i class="fa fa-note-sticky iconMini"></i></a>`;
                            }
                            else {
                                let content = '';
                                if(row.note_id) {
                                    content = row.note.content;
                                }
                                note = getTooltipNote(row.status.id, content);
                            }

                            let name = row.status.name.charAt(0).toUpperCase() + row.status.name.slice(1);
                            return `<span class="badge ${row.status.css_class}">${name}</span>${note}`;
                        }
                    },

                    { data: 'id',  name: 'id', "width": "5%",
                        render(data, type, row){
                            let actions = `<a href="/work_orders/edit/${data}" type="button"><i class="fa-solid fa-pen-to-square" style="font-size:20px;"></i></a>`;
                            if(row.status.id == 1) {
                                return `<a type="button" class="btn btn-default" style="width:80px" onClick="executeOrder(${data}, ${row.status.id}, '${row.order_type.name}')">Accept</a>  ${actions}`;
                            }
                            else {
                                return actions;
                            }
                        }
                    },
                ],
                initComplete: addFiltersForDataTable
            });
        });
    });
</script>
@include('work_order/modal_cycle_count_notes')
@include('work_order/modal_work_order_details')
<style type="text/css">
    .sTooltip { position: relative;}
    .sTooltip i {cursor: pointer;}
    .sTooltip b { display: none; position: absolute; background-color: #fff; border: solid 1px #444; border-radius: 10px; padding: 10px; width: 250px; bottom: 100%; right: 0; font-size: 13px; font-weight: normal; z-index: 4; box-shadow: 2px 2px 2px #999; }
    .sTooltip i:hover ~ b { display: block;}

    .aButton { cursor:pointer; }
</style>

@endsection