@extends('layouts.main')

@section('title')
    {{ __('View Permission Group Detail') }}
@endsection

@push('css')
@endpush

@section('isi')
    <div class="d-flex flex-column flex-column-fluid">
        <!--begin::Toolbar-->
        <div id="kt_app_toolbar" class="app-toolbar pt-6 pb-2">
            <!--begin::Toolbar container-->
            <div id="kt_app_toolbar_container" class="app-container container-fluid d-flex align-items-stretch">

                @if (count($errors) > 0)
                    <div class="alert alert-danger">
                        <strong>Whoops!</strong> There were some problems with your input.<br><br>
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                @if ($message = Session::get('success'))
                    <div class="alert alert-success" role="alert">
                        {{ $message }}
                    </div>
                @endif

                <!--begin::Toolbar wrapper-->
                <div class="app-toolbar-wrapper d-flex flex-stack flex-wrap gap-4 w-100">
                    <!--begin::Page title-->
                    <div class="page-title d-flex flex-column justify-content-center gap-1 me-3">
                        <!--begin::Title-->
                        <h1 class="page-heading d-flex flex-column justify-content-center text-dark fw-bold fs-3 m-0">View
                            Permission Group Details</h1>
                        <!--end::Title-->
                    </div>
                    <!--end::Page title-->
                </div>
                <!--end::Toolbar wrapper-->
            </div>
            <!--end::Toolbar container-->
        </div>
        <!--end::Toolbar-->
        <!--begin::Content-->
        <div id="kt_app_content" class="app-content flex-column-fluid">
            <!--begin::Content container-->
            <div id="kt_app_content_container" class="app-container container-fluid">
                <!--begin::Layout-->
                <div class="d-flex flex-column flex-lg-row">
                    <!--begin::Sidebar-->
                    <div class="flex-column flex-lg-row-auto w-100 w-lg-12 w-xl-12 mb-10">
                        <!--begin::Card-->
                        <div class="card card-flush">
                            <!--begin::Card header-->
                            <div class="card-header">
                                <!--begin::Card title-->
                                <div class="card-title">
                                    <h2 class="mb-0">{{ Str::headline($data->name) }}</h2>
                                </div>
                                <!--end::Card title-->
                            </div>
                            <!--end::Card header-->
                            <!--begin::Card body-->
                            <div class="card-body pt-0">
                                <!--begin::Permissions-->
                                <div class="d-flex flex-column text-gray-600">
                                    @forelse ($data->permissions as $items)
                                        <div class="d-flex align-items-center py-2">
                                            <span class="bullet bg-primary me-3"></span>{{ $items->name }}
                                            @can('update developer/permissions')
                                                <a class="btn btn-icon btn-active-light-warning w-30px h-30px"
                                                    href="javascript:void(0);"
                                                    onclick="editPermission({{ $items->id }})"
                                                    style="margin-left: 20px">
                                                    <i class="ki-outline ki-pencil fs-3"></i>
                                                </a>
                                            @endcan

                                            @can('delete developer/permissions')
                                                <button type="button"
                                                    class="btn btn-icon btn-active-light-danger w-30px h-30px"
                                                    onclick="deletePermission({{ $items->id }}, {{ Js::from($items->name) }})">
                                                    <i class="ki-outline ki-trash fs-3"></i>
                                                </button>
                                            @endcan
                                        </div>
                                    @empty
                                        <div class="text-gray-500 fst-italic py-2">Belum ada permission pada group ini.</div>
                                    @endforelse
                                </div>
                                <!--end::Permissions-->
                            </div>
                            <!--end::Card body-->
                            @can('create developer/permissions')
                                <!--begin::Card footer-->
                                <div class="card-footer pt-0">
                                    <button type="button" class="btn btn-light btn-active-primary" data-bs-toggle="modal"
                                        data-bs-target="#kt_modal_update_role">Add Permission</button>
                                </div>
                                <!--end::Card footer-->
                            @endcan
                        </div>
                        <!--end::Card-->

                    </div>
                    <!--end::Sidebar-->
                    <!--begin::Content-->

                    <!--end::Content-->
                </div>
                <!--end::Layout-->
            </div>
            <!--end::Content container-->
        </div>
    </div>
@endsection

@section('modals')
    <!--begin::Modal - Add permission-->
    <div class="modal fade" id="kt_modal_update_role" tabindex="-1" aria-hidden="true">
        <!--begin::Modal dialog-->
        <div class="modal-dialog modal-dialog-centered mw-750px">
            <!--begin::Modal content-->
            <div class="modal-content">
                <!--begin::Modal header-->
                <div class="modal-header">
                    <!--begin::Modal title-->
                    <h2 class="fw-bold">Add Permission</h2>
                    <!--end::Modal title-->
                    <!--begin::Close-->
                    <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>
                    <!--end::Close-->
                </div>
                <!--end::Modal header-->
                <!--begin::Modal body-->
                <div class="modal-body scroll-y mx-5 my-7">
                    <!--begin::Form-->
                    <form id="kt_modal_update_role_form" class="form" action="{{ route('permissions.store') }}"
                        method="POST">
                        @csrf
                        <!--begin::Input group-->
                        <div class="fv-row mb-10">
                            <!--begin::Label-->
                            <label class="fs-5 fw-bold form-label mb-2">
                                <span class="required">Permission name</span>
                            </label>
                            <!--end::Label-->
                            <!--begin::Input-->
                            <input class="form-control form-control-solid" placeholder="Enter a permission name"
                                name="name" value="" required />
                            <input type="hidden" name="permission_group_id" value="{{ $data->id }}" required />
                            <!--end::Input-->
                        </div>
                        <!--end::Input group-->
                        <!--begin::Actions-->
                        <div class="text-center pt-15">
                            <button type="reset" class="btn btn-light me-3" data-bs-dismiss="modal">{{ __('Discard') }}</button>
                            <button type="submit" class="btn btn-primary">
                                <span class="indicator-label">{{ __('Submit') }}</span>
                                <span class="indicator-progress">{{ __('Please wait') }}...
                                    <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                            </button>
                        </div>
                        <!--end::Actions-->
                    </form>
                    <!--end::Form-->
                </div>
                <!--end::Modal body-->
            </div>
            <!--end::Modal content-->
        </div>
        <!--end::Modal dialog-->
    </div>
    <!--end::Modal - Add permission-->

    <!--begin::Modal - Edit permission-->
    <div class="modal fade" id="kt_modal_edit_permission" tabindex="-1" aria-hidden="true">
        <!--begin::Modal dialog-->
        <div class="modal-dialog modal-dialog-centered mw-750px">
            <!--begin::Modal content-->
            <div class="modal-content">
                <!--begin::Modal header-->
                <div class="modal-header">
                    <!--begin::Modal title-->
                    <h2 class="fw-bold">Edit Permission</h2>
                    <!--end::Modal title-->
                    <!--begin::Close-->
                    <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>
                    <!--end::Close-->
                </div>
                <!--end::Modal header-->
                <!--begin::Modal body-->
                <div class="modal-body scroll-y mx-5 my-7">
                    <!--begin::Form-->
                    <form id="kt_modal_edit_permission_form" class="form" method="POST">
                        @csrf
                        @method('PATCH')
                        <input type="hidden" name="id" id="edit_permission_id" />
                        <input type="hidden" name="permission_group_id" id="edit_permission_group_id" value="{{ $data->id }}" required />
                        <!--begin::Input group-->
                        <div class="fv-row mb-10">
                            <!--begin::Label-->
                            <label class="fs-5 fw-bold form-label mb-2">
                                <span class="required">Permission name</span>
                            </label>
                            <!--end::Label-->
                            <!--begin::Input-->
                            <input class="form-control form-control-solid" placeholder="Enter a permission name"
                                name="name" id="edit_permission_name" value="" required />
                            <!--end::Input-->
                        </div>
                        <!--end::Input group-->
                        <!--begin::Actions-->
                        <div class="text-center pt-15">
                            <button type="reset" class="btn btn-light me-3" data-bs-dismiss="modal">{{ __('Discard') }}</button>
                            <button type="submit" class="btn btn-primary">
                                <span class="indicator-label">{{ __('Update') }}</span>
                                <span class="indicator-progress">{{ __('Please wait') }}...
                                    <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                            </button>
                        </div>
                        <!--end::Actions-->
                    </form>
                    <!--end::Form-->
                </div>
                <!--end::Modal body-->
            </div>
            <!--end::Modal content-->
        </div>
        <!--end::Modal dialog-->
    </div>
    <!--end::Modal - Edit permission-->
@endsection

@push('js-vendor')
@endpush

@push('js-page')
<script>
$(document).ready(function() {
    // Add permission
    $('#kt_modal_update_role_form').on('submit', function(e) {
        e.preventDefault();
        submitPermissionForm($(this), $(this).attr('action'), '#kt_modal_update_role');
    });

    // Edit permission
    $('#kt_modal_edit_permission_form').on('submit', function(e) {
        e.preventDefault();
        const id = $('#edit_permission_id').val();
        submitPermissionForm($(this), '{{ url("developer/permissions") }}/' + id, '#kt_modal_edit_permission');
    });
});

function submitPermissionForm($form, url, modalSelector) {
    const $btn = $form.find('button[type="submit"]');
    $btn.attr('data-kt-indicator', 'on').prop('disabled', true);

    $.ajax({
        type: 'POST',
        url: url,
        data: $form.serialize(),
        success: function(response) {
            hideModal(modalSelector);
            Swal.fire({
                icon: 'success',
                title: 'Sukses',
                text: response.message || 'Data berhasil disimpan.',
                timer: 1500,
                showConfirmButton: false
            }).then(function() {
                window.location.reload();
            });
        },
        error: handlePermissionError,
        complete: function() {
            $btn.removeAttr('data-kt-indicator').prop('disabled', false);
        }
    });
}

function editPermission(id) {
    $.ajax({
        url: '{{ url("developer/permissions") }}/' + id + '/edit',
        type: 'GET',
        dataType: 'json',
        success: function(response) {
            if (!response.success) {
                Swal.fire({ icon: 'error', title: 'Oops...', text: 'Data permission tidak ditemukan.' });
                return;
            }
            $('#edit_permission_id').val(response.data.id);
            $('#edit_permission_name').val(response.data.name);
            $('#edit_permission_group_id').val(response.data.permission_group_id);
            showModal('#kt_modal_edit_permission');
        },
        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(function(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
                }).then(function() {
                    window.location.reload();
                });
            },
            error: function(xhr) {
                Swal.fire({
                    icon: 'error',
                    title: 'Oops...',
                    text: xhr.responseJSON?.message || 'Gagal menghapus data.'
                });
            }
        });
    });
}

function handlePermissionError(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 });
}

function showModal(selector) {
    const el = document.querySelector(selector);
    if (window.bootstrap && bootstrap.Modal) {
        bootstrap.Modal.getOrCreateInstance(el).show();
    } else {
        $(selector).modal('show');
    }
}

function hideModal(selector) {
    const el = document.querySelector(selector);
    if (window.bootstrap && bootstrap.Modal) {
        bootstrap.Modal.getOrCreateInstance(el).hide();
    } else {
        $(selector).modal('hide');
    }
}
</script>
@endpush