@extends('org.layout.adminPanel')
@section('title', 'Organisation')
@section('section', 'Items')
@section('css')
    {{-- css --}}
    <link rel="stylesheet" href="{{ asset(CSS) }}/datatable.css">
    <link rel="stylesheet" href="{{ asset(CSS) }}/datatable.responsive.css">
@endsection
@section('content')
    {{-- content --}}
    <div class="container-fluid">
        <div class="container">
            <div class="table-wrapper">
                <table id="items" class="display responsive nowrap" style="width:100%">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Name</th>
                            <th>type</th>
                            <th>Status</th>
                            <th>Next review due</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
@endsection
@section('js')
    {{-- js --}}
    <script src="{{ asset(JS) }}/datatable.js"></script>
    <script src="{{ asset(JS) }}/datatable.responsive.js"></script>
    <script>
        $(document).ready(function() {
            $('#items').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                ajax: "{{ route('org.item.fetch.assigned', ['subdomain' => $subdomain, 'review_overdue' => $review_overdue, 'view_list' => $view_list]) }}",
                language: {
                    emptyTable: `<div>
                                        <i class="bi bi-box not-found-icon"></i>
                                        <p>Nothing found</p>
                                    </div>`,
                    processing: `<x-pre-loader :uibLoader="['class'=>'pre-loader']" />`
                },
                columnDefs: [{
                        "width": "0px",
                        "targets": 0
                    },
                    {
                        "width": "0px",
                        "targets": 1
                    },
                ],
                columns: [{
                        data: "DT_RowIndex",
                        name: "id",
                        render: function(data, a, obj) {
                            return `${obj.DT_RowIndex} ${obj.icon}`;
                        }
                    },
                    {
                        data: "name",
                        name: "name",
                        render: function(data) {
                            let columnWrapper = `<div class="columnWrapper">${data}</div>`;
                            return columnWrapper;
                        }
                    },
                    {
                        data: "type",
                        name: "type"
                    },
                    {
                        data: "status",
                        name: "comment",
                        sortable: false,
                        searchable: false
                    },
                    {
                        data: "reminder",
                        name: "reminder.remind_at",
                        render: function(data) {
                            console.log(data);

                            if (data == "OVERDUE")
                                return "<b style='color:var(--danger);'>OVERDUE</b>";
                            else return data;
                        }
                    },
                    {
                        data: "action",
                        name: "action",
                        sortable: false,
                        searchable: false
                    }
                ],
            });
        });
    </script>
@endsection