@extends('layouts.main')

@section('title')
    Permissions
@endsection

@push('css')
<style>
    .permission-group-card {
        border: 1px solid #e4e6ef;
        border-radius: 0.75rem;
        overflow: hidden;
        margin-bottom: 1rem;
    }
    .permission-group-header {
        background: #f8f9fc;
        padding: 1rem 1.25rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #e4e6ef;
    }
    .permission-group-header .group-info {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
    .permission-group-header .group-number {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        background: #3e97ff;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 0.85rem;
    }
    .permission-group-header .group-name {
        font-weight: 700;
        color: #181c32;
    }
    .permission-group-header .group-badge {
        background: #e8f0fe;
        color: #3e97ff;
        font-size: 0.75rem;
        font-weight: 600;
        padding: 0.25rem 0.65rem;
        border-radius: 6px;
    }
    .permission-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 1.25rem;
        border-bottom: 1px solid #f1f3f8;
    }
    .permission-item:last-child {
        border-bottom: none;
    }
    .permission-item:hover {
        background: #fafbfc;
    }
    .permission-item .perm-name {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 500;
        color: #3f4254;
    }
    .permission-item .perm-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #a1a5b7;
    }
    .permission-actions {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-shrink: 0;
    }
    .permission-empty-state {
        text-align: center;
        padding: 4rem 2rem;
    }
    .permission-summary-bar {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
    }
    .permission-summary-bar .summary-item {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        border: 1px solid #e4e6ef;
        border-radius: 8px;
        padding: 0.45rem 0.85rem;
        color: #7e8299;
        font-size: 0.8rem;
        font-weight: 600;
    }
    .permission-summary-bar .summary-value {
        color: #181c32;
        font-weight: 700;
    }
</style>
@endpush

@section('isi')
    <div class="d-flex flex-column flex-column-fluid">
        <div id="kt_app_toolbar" class="app-toolbar py-4 py-lg-8">
            <div id="kt_app_toolbar_container" class="app-container container-fluid d-flex flex-stack flex-wrap">
                <div class="app-toolbar-wrapper d-flex flex-stack flex-wrap gap-4 w-100">
                    <div class="page-title d-flex flex-column justify-content-center gap-1 me-3">
                        <h1 class="page-heading d-flex flex-column justify-content-center text-dark fw-bold fs-3 m-0">
                            Daftar Permission
                        </h1>
                        <span class="text-gray-500 fs-7 fw-semibold">Kelola permission dan permission group</span>
                    </div>
                    <button type="button" class="btn btn-sm btn-primary" onclick="openPermissionModal()">
                        <i class="ki-outline ki-plus fs-5 me-1"></i> Tambah Permission
                    </button>
                </div>
            </div>
        </div>

        <div id="kt_app_content" class="app-content flex-column-fluid">
            <div id="kt_app_content_container" class="app-container container-fluid">
                <div class="card">
                    <div class="card-header border-0 pt-6">
                        <div class="card-title">
                            <div class="d-flex align-items-center position-relative my-1">
                                <i class="ki-outline ki-magnifier fs-3 position-absolute ms-5"></i>
                                <input type="text" id="permissionSearch"
                                    class="form-control form-control-solid w-250px ps-13"
                                    placeholder="Cari permission..." />
                            </div>
                        </div>
                        <div class="card-toolbar">
                            <div class="permission-summary-bar">
                                <div class="summary-item">
                                    Groups <span class="summary-value" id="totalGroups">0</span>
                                </div>
                                <div class="summary-item">
                                    Permissions <span class="summary-value" id="totalPermissions">0</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card-body pt-2">
                        <div id="permissionList">
                            <div class="permission-empty-state text-gray-500">Memuat data permission...</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('modals')
    <div class="modal fade" id="modal-permission" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form id="form-permission" method="POST">
                    @csrf
                    <input type="hidden" name="_method" id="permission_method" value="POST">
                    <input type="hidden" name="id" id="permission_id">

                    <div class="modal-header">
                        <h2 class="fw-bold" id="permission_modal_title">Tambah Permission</h2>
                        <div class="btn btn-icon btn-sm btn-active-icon-primary" data-bs-dismiss="modal">
                            <i class="ki-outline ki-cross fs-1"></i>
                        </div>
                    </div>

                    <div class="modal-body scroll-y mx-lg-5 my-7">
                        <div class="fv-row mb-7">
                            <label class="required fs-6 fw-semibold mb-2">Permission Group</label>
                            <select class="form-select form-select-solid" name="permission_group_id" id="permission_group_id"
                                data-control="select2" data-placeholder="Pilih permission group"
                                data-dropdown-parent="#modal-permission" required>
                                <option value="">Pilih permission group</option>
                                @foreach ($permissionGroups as $group)
                                    <option value="{{ $group->id }}">{{ $group->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="fv-row">
                            <label class="required fs-6 fw-semibold mb-2">Nama Permission</label>
                            <input type="text" class="form-control form-control-solid" name="name" id="permission_name"
                                placeholder="Contoh: read developer/permissions" required />
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-primary" id="btn-save-permission">
                            <span class="indicator-label">Simpan</span>
                            <span class="indicator-progress">Menyimpan...
                                <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                            </span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('js-page')
<script>
$(document).ready(function() {
    loadPermissions();

    $('#permission_group_id').select2({
        dropdownParent: $('#modal-permission'),
        placeholder: 'Pilih permission group',
        width: '100%'
    });

    $('#permissionSearch').on('input', function() {
        const query = $(this).val().toLowerCase().trim();
        const $cards = $('#permissionList .permission-group-card');

        if (!query) {
            $cards.removeClass('d-none');
            $cards.find('.permission-item').removeClass('d-none');
            return;
        }

        $cards.each(function() {
            const $card = $(this);
            const groupName = String($card.data('group-name')).toLowerCase();
            let hasMatch = groupName.includes(query);

            $card.find('.permission-item').each(function() {
                const permName = String($(this).data('perm-name')).toLowerCase();
                const matches = hasMatch || permName.includes(query);
                $(this).toggleClass('d-none', !matches);
                if (permName.includes(query)) {
                    hasMatch = true;
                }
            });

            $card.toggleClass('d-none', !hasMatch);
        });
    });

    $('#form-permission').on('submit', function(e) {
        e.preventDefault();

        const id = $('#permission_id').val();
        const url = id ? '{{ url("developer/permissions") }}/' + id : '{{ route("permissions.store") }}';
        const $button = $('#btn-save-permission');

        $button.attr('data-kt-indicator', 'on').prop('disabled', true);

        $.ajax({
            type: 'POST',
            url: url,
            data: $(this).serialize(),
            success: function(response) {
                closePermissionModal();
                Swal.fire({
                    icon: 'success',
                    title: 'Sukses',
                    text: response.message || 'Data berhasil disimpan.',
                    timer: 1500,
                    showConfirmButton: false
                });
                loadPermissions();
            },
            error: function(xhr) {
                let message = xhr.responseJSON?.message || 'Terjadi kesalahan.';
                if (xhr.responseJSON?.errors) {
                    message = Object.values(xhr.responseJSON.errors).flat().join('\n');
                }
                Swal.fire({
                    icon: 'error',
                    title: 'Oops...',
                    text: message
                });
            },
            complete: function() {
                $button.removeAttr('data-kt-indicator').prop('disabled', false);
            }
        });
    });
});

function loadPermissions() {
    $('#permissionList').html('<div class="permission-empty-state text-gray-500">Memuat data permission...</div>');

    $.ajax({
        url: '{{ route("permissions.index") }}',
        type: 'GET',
        dataType: 'json',
        success: function(response) {
            if (!response.success || !Array.isArray(response.data)) {
                renderEmptyState('Data permission tidak valid.');
                return;
            }

            renderPermissionList(response.data);
        },
        error: function() {
            renderEmptyState('Gagal memuat data permission.');
        }
    });
}

function renderPermissionList(groups) {
    let totalPermissions = 0;
    let html = '';

    if (groups.length === 0) {
        renderEmptyState('Belum ada permission group.');
        $('#totalGroups').text(0);
        $('#totalPermissions').text(0);
        return;
    }

    groups.forEach(function(group, index) {
        const permissions = group.permissions || [];
        totalPermissions += permissions.length;

        let permissionItems = '';
        if (permissions.length === 0) {
            permissionItems = `
                <div class="permission-item" data-perm-name="">
                    <span class="perm-name text-muted fst-italic">
                        <span class="perm-dot" style="background:#e4e6ef;"></span>
                        Belum ada permission
                    </span>
                </div>
            `;
        } else {
            permissions.forEach(function(permission) {
                permissionItems += `
                    <div class="permission-item" data-perm-name="${escapeHtml(permission.name)}">
                        <span class="perm-name">
                            <span class="perm-dot"></span>
                            ${escapeHtml(permission.name)}
                        </span>
                        <span class="permission-actions">
                            <button type="button" class="btn btn-sm btn-warning"
                                title="Edit permission"
                                onclick="editPermission(${permission.id})">
                                <i class="bi bi-pencil-square me-1"></i> Edit
                            </button>
                            <button type="button" class="btn btn-sm btn-danger"
                                onclick="deletePermission(${permission.id}, '${escapeJs(permission.name)}')">
                                <i class="bi bi-trash me-1"></i> Hapus
                            </button>
                        </span>
                    </div>
                `;
            });
        }

        html += `
            <div class="permission-group-card" data-group-name="${escapeHtml(group.permission_group)}">
                <div class="permission-group-header">
                    <div class="group-info">
                        <span class="group-number">${index + 1}</span>
                        <span class="group-name">${escapeHtml(group.permission_group)}</span>
                    </div>
                    <span class="group-badge">${permissions.length} permission</span>
                </div>
                <div>${permissionItems}</div>
            </div>
        `;
    });

    $('#permissionList').html(html);
    $('#totalGroups').text(groups.length);
    $('#totalPermissions').text(totalPermissions);
}

function renderEmptyState(message) {
    $('#permissionList').html(`
        <div class="permission-empty-state">
            <i class="ki-outline ki-shield-cross fs-2tx text-gray-300 d-block mb-4"></i>
            <div class="text-gray-500 fw-semibold">${escapeHtml(message)}</div>
        </div>
    `);
}

function openPermissionModal(permission = null) {
    $('#form-permission')[0].reset();
    $('#permission_id').val('');
    $('#permission_method').val('POST');
    $('#permission_modal_title').text('Tambah Permission');
    $('#btn-save-permission .indicator-label').text('Simpan');
    $('#permission_group_id').val('').trigger('change');

    if (permission) {
        $('#permission_id').val(permission.id);
        $('#permission_method').val('PATCH');
        $('#permission_group_id').val(permission.permission_group_id).trigger('change');
        $('#permission_name').val(permission.name);
        $('#permission_modal_title').text('Edit Permission');
        $('#btn-save-permission .indicator-label').text('Update');
    }

    const modalElement = document.getElementById('modal-permission');
    if (window.bootstrap && bootstrap.Modal) {
        bootstrap.Modal.getOrCreateInstance(modalElement).show();
    } else {
        $('#modal-permission').modal('show');
    }
}

function closePermissionModal() {
    const modalElement = document.getElementById('modal-permission');
    if (window.bootstrap && bootstrap.Modal) {
        bootstrap.Modal.getOrCreateInstance(modalElement).hide();
    } else {
        $('#modal-permission').modal('hide');
    }
}

function editPermission(id) {
    $.ajax({
        url: '{{ url("developer/permissions") }}/' + id + '/edit',
        type: 'GET',
        dataType: 'json',
        success: function(response) {
            if (response.success) {
                openPermissionModal(response.data);
            }
        },
        error: function() {
            Swal.fire({
                icon: 'error',
                title: 'Oops...',
                text: 'Data permission tidak ditemukan.'
            });
        }
    });
}

function deletePermission(id, name) {
    Swal.fire({
        title: 'Hapus Permission?',
        text: `Permission "${name}" akan dihapus.`,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Ya, hapus',
        cancelButtonText: 'Batal',
        confirmButtonColor: '#f8285a'
    }).then((result) => {
        if (!result.isConfirmed) {
            return;
        }

        $.ajax({
            url: '{{ url("developer/permissions") }}/' + id,
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                _method: 'DELETE'
            },
            success: function(response) {
                Swal.fire({
                    icon: 'success',
                    title: 'Sukses',
                    text: response.message || 'Data berhasil dihapus.',
                    timer: 1500,
                    showConfirmButton: false
                });
                loadPermissions();
            },
            error: function(xhr) {
                Swal.fire({
                    icon: 'error',
                    title: 'Oops...',
                    text: xhr.responseJSON?.message || 'Gagal menghapus data.'
                });
            }
        });
    });
}

function escapeHtml(value) {
    return String(value ?? '').replace(/[&<>"']/g, function(match) {
        return {
            '&': '&amp;',
            '<': '&lt;',
            '>': '&gt;',
            '"': '&quot;',
            "'": '&#039;'
        }[match];
    });
}

function escapeJs(value) {
    return String(value ?? '').replace(/\\/g, '\\\\').replace(/'/g, "\\'");
}
</script>
@endpush