@extends('clay.layouts.master')
@section('title', 'Yetkiler')
@push('page-css')
    <link rel="stylesheet" href="{{ asset('admin/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.css') }}" />
    <link rel="stylesheet" href="{{ asset('admin/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css') }}" />
@endpush
@section('content')
    <div class="row">
        <div class="col-md-12 grid-margin stretch-card">
            <div class="card">
                <h5 class="card-header pb-0 text-md-start text-center">Yöneticiler <a href="{{ route('clay.permissions.permissions.create') }}" class="btn btn-primary float-end">Yetki Ekle</a></h5>

                <div class="card-datatable text-nowrap">
                    <table class="datatables-ajax table">
                        <thead>
                        <tr>
                            <th></th>
                            <th width="100%"></th>
                            <th></th>
                            <th></th>
                            <th></th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('vendor-js')
    <script src="{{ asset('admin/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js') }}"></script> @endpush
@push('page-js')
    <script>
        document.addEventListener('DOMContentLoaded', function (e) {
            const dt_ajax_table = document.querySelector('.datatables-ajax');
            let dt_ajax = new DataTable(dt_ajax_table, {
                processing: true,
                ajax: {
                    url: window.location.href,
                    dataSrc: 'data'
                },
                columns: [
                    { data: 'name', title: 'Yetki' },
                    {
                        data: 'roles',
                        title: 'Roller',
                        render: function(data, type, row) {

                            return data.map(role => role.name).join(', ');
                        }
                    },
                    {
                        data: 'created_at',
                        title: 'Kayıt Tarihi',
                        render: function(data, type, row) {
                            if (!data) return '-';

                            // UTC zamanını değiştirmeden almak için `Z` ekleyerek `Date` nesnesini oluştur
                            let date = new Date(data);

                            return new Intl.DateTimeFormat('tr-TR', {
                                day: '2-digit',
                                month: '2-digit',
                                year: '2-digit',
                                hour: '2-digit',
                                minute: '2-digit',
                                hour12: false,
                                timeZone: 'UTC' // Zaman dilimini UTC olarak ayarla (Saat kaymasını önler)
                            }).format(date).replace(',', '');
                        }

                    },
                    {
                        data: 'updated_at',
                        title: 'Güncelleme Tarihi',
                        render: function(data, type, row) {
                            if (!data) return '-';

                            // UTC zamanını değiştirmeden almak için `Z` ekleyerek `Date` nesnesini oluştur
                            let date = new Date(data);

                            return new Intl.DateTimeFormat('tr-TR', {
                                day: '2-digit',
                                month: '2-digit',
                                year: '2-digit',
                                hour: '2-digit',
                                minute: '2-digit',
                                hour12: false,
                                timeZone: 'UTC' // Zaman dilimini UTC olarak ayarla (Saat kaymasını önler)
                            }).format(date).replace(',', '');
                        }
                    },
                    {
                        // Actions
                        targets: -1,
                        title: 'İşlemler',
                        searchable: false,
                        orderable: false,
                        render: function (data, type, row, meta) {
                            const showUrl = "{{ route('clay.permissions.permissions.show', ['permissionsId' => '__ID__']) }}".replace('__ID__', row.id);

                            return `<a href="${showUrl}" type="button" class="btn btn-sm btn-primary">Görüntüle</a>`;
                        }
                    }

                ],
                layout: {
                    topStart: {
                        rowClass: 'row mx-3 my-0 justify-content-between',
                        features: [
                            {
                                pageLength: {
                                    menu: [7, 10, 25, 50, 100],
                                    text: 'Show_MENU_entries'
                                }
                            }
                        ]
                    },
                    topEnd: {
                        search: {
                            placeholder: ''
                        }
                    },
                    bottomStart: {
                        rowClass: 'row mx-3 justify-content-between',
                        features: ['info']
                    },
                    bottomEnd: {
                        paging: {
                            firstLast: true
                        }
                    }
                },
                language: {
                    paginate: {
                        next: '<i class="icon-base bx bx-chevron-right scaleX-n1-rtl icon-sm"></i>',
                        previous: '<i class="icon-base bx bx-chevron-left scaleX-n1-rtl icon-sm"></i>'
                    }
                }
            });
        });
    </script>
@endpush