@extends('layouts.main')

@section('title')
    {{ __('Permission Groups') }}
@endsection

@push('css')
    <link href="{{ asset('') }}assets/plugins/custom/datatables/datatables.bundle.css" rel="stylesheet" type="text/css" />
@endpush

@section('isi')
    <div class="d-flex flex-column flex-column-fluid">
        <!--begin::Toolbar-->
        <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">
                            {{ __('Permission Groups List') }}</h1>
                        <span class="text-gray-500 fs-7 fw-semibold">Kelola permission group</span>
                    </div>
                    <button type="button" class="btn btn-sm btn-primary" onclick="addPermissionGroup()">
                        <i class="bi bi-plus-lg me-1"></i> Tambah Permission Group
                    </button>
                </div>
            </div>
        </div>
        <!--end::Toolbar-->

        <!--begin::Content-->
        <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="permissionGroupSearch"
                                    class="form-control form-control-solid w-250px ps-13"
                                    placeholder="Cari permission group..." />
                            </div>
                        </div>
                    </div>
                    <div class="card-body pt-2">
                        <table id="table-permission-group" class="table align-middle table-row-dashed fs-6 gy-5 w-100">
                            <thead>
                                <tr class="text-start text-gray-500 fw-bold fs-7 text-uppercase gs-0">
                                    <th class="w-50px">No</th>
                                    <th>Nama Permission Group</th>
                                    <th class="w-150px text-center">Jumlah Permission</th>
                                    <th class="text-end">Aksi</th>
                                </tr>
                            </thead>
                            <tbody class="text-gray-600 fw-semibold"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!--end::Content-->
    </div>
@endsection

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

                    <div class="modal-header">
                        <h2 class="fw-bold" id="permission_group_modal_title">Tambah Permission Group</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">
                            <label class="required fs-6 fw-semibold mb-2">Nama Permission Group</label>
                            <input type="text" class="form-control form-control-solid" name="name"
                                id="permission_group_name" placeholder="Contoh: Master Data" 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-group">
                            <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-vendor')
    <script src="{{ asset('') }}assets/plugins/custom/datatables/datatables.bundle.js"></script>
@endpush

@push('js-page')
<script>
let permissionGroupTable;

$(document).ready(function() {
    permissionGroupTable = $('#table-permission-group').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{{ route('permission-groups.index') }}',
        columns: [
            { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false, className: 'text-center' },
            { data: 'name', name: 'name' },
            { data: 'permissions_count', name: 'permissions_count', orderable: false, searchable: false, className: 'text-center' },
            { data: 'aksi', name: 'aksi', orderable: false, searchable: false, className: 'text-end' },
        ],
        order: [[1, 'asc']],
        dom: "<'table-responsive'tr><'d-flex flex-stack flex-wrap pt-5'<'fs-6 fw-semibold text-gray-700'i><'d-flex'p>>",
        language: {
            emptyTable: 'Belum ada permission group.',
            zeroRecords: 'Data tidak ditemukan.',
            processing: 'Memuat data...',
        },
    });

    $('#permissionGroupSearch').on('keyup', function() {
        permissionGroupTable.search(this.value).draw();
    });

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

        const $button = $('#btn-save-permission-group');
        $button.attr('data-kt-indicator', 'on').prop('disabled', true);

        $.ajax({
            type: 'POST',
            url: '{{ route('permission-groups.store-or-update') }}',
            data: $(this).serialize(),
            success: function(response) {
                hidePermissionGroupModal();
                permissionGroupTable.ajax.reload(null, false);
                Swal.fire({
                    icon: 'success',
                    title: 'Sukses',
                    text: response.message || 'Data berhasil disimpan.',
                    timer: 1500,
                    showConfirmButton: false
                });
            },
            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 addPermissionGroup() {
    $('#form-permission-group')[0].reset();
    $('#permission_group_id').val('');
    $('#permission_group_modal_title').text('Tambah Permission Group');
    $('#btn-save-permission-group .indicator-label').text('Simpan');
    showPermissionGroupModal();
}

function editPermissionGroup(id) {
    $.ajax({
        url: '{{ url('developer/permission-groups') }}/' + id + '/edit',
        type: 'GET',
        dataType: 'json',
        success: function(response) {
            $('#form-permission-group')[0].reset();
            $('#permission_group_id').val(response.id);
            $('#permission_group_name').val(response.name);
            $('#permission_group_modal_title').text('Edit Permission Group');
            $('#btn-save-permission-group .indicator-label').text('Update');
            showPermissionGroupModal();
        },
        error: function() {
            Swal.fire({ icon: 'error', title: 'Oops...', text: 'Data permission group tidak ditemukan.' });
        }
    });
}

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

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

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

function hidePermissionGroupModal() {
    const el = document.getElementById('modal-permission-group');
    if (window.bootstrap && bootstrap.Modal) {
        bootstrap.Modal.getOrCreateInstance(el).hide();
    } else {
        $('#modal-permission-group').modal('hide');
    }
}
</script>
@endpush