@extends('layouts.backend.index')
@section('title', $label)

@section('content')
    <div class="card">
        <div class="card-body">
            @if (Auth::user()->hasRole('superadmin'))
            <x-section-header action="list" :icon="$icon" :label="$label" />

            @else
            <x-section-header action="list" :icon="$icon" :label="$label" :btn_label="'Open New Ticket'" :create-route="route('support.ticket.create')" />

            @endif

            <div class="table-responsive">
                <table class="table" id="table-ticket">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Date</th>
                            <th>No. Ticket</th>
                            @if (Auth::user()->hasRole('superadmin'))
                            <th>Tipe</th>
                            <th>Name</th>
                            @endif
                            <th>Category</th>
                            <th>Subject</th>
                            <th>Status</th>
                            <th>#</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <link href="{{ asset('vendor/datatables.net/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}" rel="stylesheet">
@endpush

@push('scripts')
    <script src="{{ asset('vendor/datatables.net/datatables.net/js/jquery.dataTables.min.js') }}" type="text/javascript">
    </script>
    <script src="{{ asset('vendor/datatables.net/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}"
        type="text/javascript"></script>

    <script>
        $(document).ready(function() {
            window.LaravelDataTables = window.LaravelDataTables || {}
            window.LaravelDataTables["table-ticket"] = $("#table-ticket").DataTable({
                dom: 'fltpr',
                language: {
                    search: "",
                    searchPlaceholder: "Pencarian...",
                    lengthMenu: "_MENU_ Data"
                },
                ajax: {
                    url: "{{ route('support.ticket.datatable') }}",
                    type: "POST",
                    data: {
                        _token: token
                    }
                },
                processing: true,
                serverSide: true,
                deferRender: true,
                ordering: false,
                aLengthMenu: [
                    [10, 25, 50, 100],
                    [10, 25, 50, 100]
                ],
                drawCallback: function() {
                    $(".set-tooltip").tooltip({
                        container: "body"
                    })
                },
                columns: [{
                        data: null,
                        class: "align-top",
                        orderable: false,
                        searchable: false,
                        render: (data, type, row, meta) =>{
                            if(row.is_seen)
                                return  meta.row + meta.settings._iDisplayStart + 1

                                return '<b>'+(meta.row + meta.settings._iDisplayStart + 1)+'</b>';
                        }
                    },
                    {
                        class: "align-top",
                        render: (data, type, row) => {
                            if(row.is_seen)
                                return row.created_at

                            return '<b>'+row.created_at+'</b>';
                        }

                    },
                    {
                        class: "align-top",
                        render: (data, type, row) => {
                            if(row.is_seen)
                                return row.number

                            return '<b>'+row.number+'</b>';
                        }
                    },
                    @if (Auth::user()->hasRole('superadmin'))
                    {
                        class: "align-top",
                        render: (data, type, row) => {
                            if(row.is_seen)
                                return row.entity

                            return '<b>'+row.entity+'</b>';
                        }
                    },
                    {
                        class: "align-top",
                        render: (data, type, row) => {
                            if(row.is_seen)
                                return row.creator

                            return '<b>'+row.creator+'</b>';
                        }
                    },
                    @endif
                    {
                        class: "align-top",
                        render: (data, type, row) => {
                            if(row.is_seen)
                                return row.category

                            return '<b>'+row.category+'</b>';
                        }
                    },
                    {
                        class: "align-top",
                        render: (data, type, row) => {
                            if(row.is_seen)
                                return row.subject

                            return '<b>'+row.subject+'</b>';
                        }
                    },

                    {
                        data: "status",
                        class: "align-top",
                        render: (data, type, row) => row.status
                    },

                    {
                        class: "align-top text-center",
                        orderable: false,
                        searchable: false,
                        width: "40px",
                        render: (data, type, row) => {
                            let url_show = "{{ route('support.ticket.show', -1) }}"

                            url_show = url_show.replace("-1", row.encrypted_id)


                            let html = `<a href="${url_show}" class="btn btn-primary btn-xs set-tooltip mb-1" title="Lihat">
                            <i class="mdi mdi-magnify"></i></a>`;

                            return html;
                        }
                    }
                ]
            })

            $($.fn.dataTable.tables(true)).css('width', '100%')


        })
    </script>
@endpush