@extends('layouts.metor.admin')
@section('content')
@section('title','Permissions')

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between gap-2">
                <div class="flex-grow-1">
                    <h4 class="card-title mb-0">Permissions</h4>
                </div>
                <div class="d-flex flex-wrap gap-2 justify-content-start justify-content-md-end w-100 w-md-auto">
                    @can("permissions-create")
                    <a href="{{config('app.url')}}/admin/permissions/add" class='btn btn-primary'>
                        <i class="ri-add-line me-1"></i> Add Permissions
                    </a>
                    @endcan
                </div>
            </div>
            <div class="card-body">
                <div class="js-index-cards d-none"></div>

                <div class="table-responsive js-index-table d-none d-md-block">
                    <table class="table table-hover mb-0 data-table">
                        <thead class="table-light">
                            <tr>
                                <th style='width:5%'>Sr.</th>
                                <th>Page</th>
                                <th>Title</th>
                                <th>Guard Name</th>
                                <th>Name</th>
                                <th class='text-end' style='width:20%'>Action</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script type='text/javascript'>
    var table;
    $(function () {
        table = $('.data-table').DataTable({
            processing: true,
            serverSide: true,
            deferRender: true,
            ajax: '{{ route('permissions.datatable') }}',
            dom: '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>rt<"row"<"col-sm-12 col-md-5"i><"col-sm-12 col-md-7"p>>',
            language: {
                processing: '<div class="spinner-border spinner-border-sm text-primary" role="status"><span class="visually-hidden">Loading...</span></div>'
            },
            'order': [[0, 'DESC']],
            pageLength: {{$getSettings['page_size']}},
            columns: [
                {data: 'id', orderable: false, searchable: false, render: function (data, type, row, meta) {
                    return meta.row + meta.settings._iDisplayStart + 1;
                }},
                {data: 'page', name: 'page'}, 
                {data: 'title', name: 'title'}, 
                {data: 'guard_name', name: 'guard_name'},
                {data: 'name', name: 'name'},
                {data: 'action', name: 'action', orderable: false, searchable: false},
            ],
            drawCallback: function () {
                try {
                    if (typeof suToggleIndexView === 'function') suToggleIndexView();

                    const isMobile = typeof suIsMobileIndexView === 'function'
                        ? suIsMobileIndexView()
                        : !!(window.matchMedia && window.matchMedia('(max-width: 767.98px)').matches);
                    if (!isMobile) return;

                    const cardsEl = document.querySelector('.js-index-cards');
                    if (!cardsEl) return;

                    const data = table && typeof table.rows === 'function'
                        ? table.rows({ page: 'current' }).data().toArray()
                        : [];

                    if (!data.length) {
                        cardsEl.innerHTML = '<div class="text-center text-muted py-4">No records found.</div>';
                        return;
                    }

                    const cards = data.map((row) => {
                        const title = row && (row.title || row.name || row.page) ? String(row.title || row.name || row.page) : 'Permission';
                        const avatarHtml = (typeof suFirstLetterAvatar === 'function') ? suFirstLetterAvatar(title) : '';
                        const details = [
                            row.page ? ('<div class="d-flex justify-content-between align-items-start gap-2"><div class="text-muted small fw-bold flex-shrink-0">Page</div><div class="small text-end text-break min-w-0">' + suEscapeHtml(row.page) + '</div></div>') : '',
                            row.title ? ('<div class="d-flex justify-content-between align-items-start gap-2"><div class="text-muted small fw-bold flex-shrink-0">Title</div><div class="small text-end text-break min-w-0">' + suEscapeHtml(row.title) + '</div></div>') : '',
                            row.guard_name ? ('<div class="d-flex justify-content-between align-items-start gap-2"><div class="text-muted small fw-bold flex-shrink-0">Guard Name</div><div class="small text-end text-break min-w-0">' + suEscapeHtml(row.guard_name) + '</div></div>') : '',
                            row.name ? ('<div class="d-flex justify-content-between align-items-start gap-2"><div class="text-muted small fw-bold flex-shrink-0">Name</div><div class="small text-end text-break min-w-0">' + suEscapeHtml(row.name) + '</div></div>') : '',
                        ].filter(Boolean).join('');

                        return (
                            '<div class="card border rounded-3 mb-0 overflow-hidden">' +
                              '<div class="card-body p-3">' +
                                '<div class="d-flex align-items-center gap-2 min-w-0">' +
                                  (avatarHtml ? avatarHtml : '') +
                                  '<div class="min-w-0 flex-grow-1 overflow-hidden">' +
                                    '<div class="fw-semibold text-break">' + suEscapeHtml(title) + '</div>' +
                                  '</div>' +
                                  (row.action
                                    ? ('<div class="d-flex flex-wrap gap-1 justify-content-end align-items-center flex-shrink-0">' + row.action + '</div>')
                                    : '') +
                                '</div>' +
                                (details
                                    ? ('<div class="mt-2 pt-2 border-top vstack gap-1">' + details + '</div>')
                                    : '') +
                              '</div>' +
                            '</div>'
                        );
                    });

                    cardsEl.innerHTML = '<div class="vstack gap-2">' + cards.join('') + '</div>';
                } catch (e) {}
            }
        });
    });
</script>

@endsection

