@extends('layouts.app')
@section('title_header')
    Permission
@endsection
@section('breadcrumbs')
    <x-breadcrumbs :items="[['label' => 'Dashboard', 'url' => '/'], ['label' => 'Permission', 'url' => '/permission']]" />
@endsection

@push('style')
    <link href="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.css" rel="stylesheet" />
@endpush

@section('content')
    @php
        $btn_create_permission = session("permissions")['create_permission'] ?? null;
        $btn_create = str_contains($btn_create_permission, 'actions');

        $btn_edit_permission = session("permissions")['edit_permission'] ?? null;
        $btn_edit = str_contains($btn_edit_permission, 'actions');
    @endphp
    <section>
        <div class="card card-border bg-white">
            <div class="card-body">
                <div class="my-2 flex items-center justify-end">
                    @if ($btn_create)
                        <button id="btn-create" class="btn btn-info text-white">Create</button>
                    @endif
                </div>

                <div class="overflow-auto">
                    <table id="permission-table" class="w-full text-left">
                        <!-- Tabel akan diisi lewat JavaScript -->
                    </table>
                </div>
            </div>
        </div>
    </section>
@endsection


@push('script')
    <script src="https://cdn.jsdelivr.net/npm/simple-datatables@9.0.3"></script>
    <script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>
    <script>
        $(document).ready(function() {

            $.ajax({
                type: "GET",
                url: "/api/permission",
                dataType: "JSON",
                success: function(res) {
                    const permissions = res.data || [];

                    const headings = ["No", "Name", "Guard Name", "Role Name", "Action"];

                    const data = permissions.map((pm, index) => [
                        index + 1,
                        pm.name,
                        pm.guard_name,
                        (pm.role_has_permission && pm.role_has_permission.length > 0) ?
                        pm.role_has_permission.map(rp => rp.role?.name).join(', ') :
                        '-',
                        `
                        @if ($btn_edit)
                            <button class="btn btn-sm btn-ghost btn-edit" data-id="${pm.id}">
                                <i data-lucide="pencil" class="w-4 h-4"></i> Edit
                            </button>
                        @endif
                        `
                    ]);

                    if (window.permissionTable) {
                        window.permissionTable.destroy();
                    }

                    window.permissionTable = new simpleDatatables.DataTable("#permission-table", {
                        data: {
                            headings: headings,
                            data: data
                        },
                        searchable: true,
                        perPageSelect: [5, 10, 25, 50],
                        perPage: 10
                    });

                    if (typeof window.createLucideIcons === 'function') {
                        window.createLucideIcons();
                    }
                },
                error: function() {
                    toastr.error("Gagal memuat data permission.");
                }
            });

            // Create button
            $("#btn-create").click(function(e) {
                window.location.href = "/permission/create";
            });

            // Edit button (delegated event)
            $(document).on("click", ".btn-edit", function() {
                const id = $(this).data("id");
                window.location.href = `/permission/edit/${id}`;
            });

        });
    </script>
@endpush