@extends('layouts.main')

@section('judul')
<h1 class="page-heading d-flex flex-column justify-content-center text-dark fw-bold fs-3 m-0">Home</h1>
@endsection

@push('css')
@endpush


@section('breadchums')
<ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0">
    <!--begin::Item-->
    <li class="breadcrumb-item text-muted">
        <a href="../../demo38/dist/index.html" class="text-muted text-hover-primary">Home</a>
    </li>
    <!--end::Item-->
    <!--begin::Item-->
    {{-- <li class="breadcrumb-item">
        <span class="bullet bg-gray-400 w-5px h-2px"></span>
    </li> --}}
    <!--end::Item-->
    <!--begin::Item-->
    {{-- <li class="breadcrumb-item text-muted">Dashboards</li> --}}
    <!--end::Item-->
</ul>
@endsection

@section('isi')
<div class="swal" data-swal="{{ session('success') }}"></div>
<div class="app-main flex-column flex-row-fluid" id="kt_app_main">
    <div class="card card-flush h-lg-100" id="kt_contacts_main">
        <!--begin::Card header-->
        <div class="card-header pt-7" id="kt_chat_contacts_header">
            <!--begin::Card title-->
            <div class="card-title">
                <i class="ki-outline ki-badge fs-1 me-2"></i>
                <h2>Permission</h2>
            </div>
            <!--end::Card title-->
        </div>
        <!--end::Card header-->
        <!--begin::Card body-->
        <div class="card-body pt-5">
            <!--begin::Form-->
            <form id="kt_ecommerce_settings_general_form" class="form" action="{{ route('roles.givePermissionToRole', $roles->id) }}" method="POST">
                @method('PUT')
                @csrf
                <div class="fv-row mb-7">
                    <!--begin::Label-->
                    <label class="fs-6 fw-semibold form-label mt-3">
                        <span class="required">Role Name</span>
                        <span class="ms-1" data-bs-toggle="tooltip" title="Enter the contact's name.">
                            <i class="ki-outline ki-information fs-7"></i>
                        </span>
                    </label>
                    <!--end::Label-->
                    <!--begin::Input-->
                    <input type="text" class="form-control form-control-solid" name="name" value="{{ $roles->name }}" />
                    <!--end::Input-->
                </div>
                
                <div class="fv-row">
                    <!--begin::Label-->
                    <label class="fs-5 fw-bold form-label mb-2">Role Permissions</label>
                    <!--end::Label-->
                    <!--begin::Table wrapper-->
                    <div class="table-responsive">
                        <!--begin::Table-->
                        <table class="table align-middle table-row-dashed fs-6 gy-5">
                            <!--begin::Table body-->
                            <tbody class="text-gray-600 fw-semibold">
                                <!--end::Table row-->
                                @foreach ($permissionsGroups as $item)
                                    <!--begin::Table row-->
                                    <tr>
                                        <!--begin::Label-->
                                        <td class="text-gray-800">{{ $item->name }}</td>
                                        <!--end::Label-->
                                        <!--begin::Options-->
                                        <td>
                                            <!--begin::Wrapper-->
                                            <div class="d-flex">
                                                <!--begin::Checkbox-->
                                                @foreach ($item->permissions as $permission)
                                                    <label
                                                        class="form-check form-check-sm form-check-custom form-check-light me-5 me-lg-20">
                                                        <input class="form-check-input" type="checkbox"
                                                            value="{{ $permission->name }}" name="permission[]"
                                                            {{ in_array($permission->id, $rolePermissions) ? 'checked' : '' }} />
                                                        <span
                                                            class="form-check-label">{{ Str::headline(substr($permission->name, 0, strpos($permission->name, ' '))) }}</span>
                                                    </label>
                                                @endforeach
                                                <!--end::Checkbox-->
                                            </div>
                                            <!--end::Wrapper-->
                                        </td>
                                        <!--end::Options-->
                                    </tr>
                                    <!--end::Table row-->
                                @endforeach
                            </tbody>
                            <!--end::Table body-->
                        </table>
                        <!--end::Table-->
                    </div>
                    <!--end::Table wrapper-->
                </div>


                <div class="separator mb-6"></div>
                <!--end::Separator-->
                <!--begin::Action buttons-->
                <div class="d-flex justify-content-end">
                    <!--begin::Button-->
                    <button type="reset" data-kt-contacts-type="cancel" class="btn btn-light me-3">Cancel</button>
                    <!--end::Button-->
                    <!--begin::Button-->
                    <button type="submit" data-kt-contacts-type="submit" class="btn btn-primary">
                        <span class="indicator-label">Save</span>
                        <span class="indicator-progress">Please wait...
                        <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                    </button>
                    <!--end::Button-->
                </div>
                <!--end::Action buttons-->
            </form>
            <!--end::Form-->
        </div>
        <!--end::Card body-->
    </div>
</div>
       
@endsection

@push('js-vendor')
@endpush

@push('js-page')
<script type="text/javascript">
    const swal = $('.swal').data('swal');
    if (swal) {
        Swal.fire({
            title: 'Success',
            icon: "success",
            text: swal,
            buttonsStyling: false,
            showConfirmButton: false,
            timer: 1500,
        })
    }
    
    toastr.options = {
        "closeButton": true,
        "debug": false,
        "newestOnTop": false,
        "progressBar": false,
        "positionClass": "toastr-top-right",
        "preventDuplicates": false,
        "onclick": null,
        "showDuration": "300",
        "hideDuration": "1000",
        "timeOut": "5000",
        "extendedTimeOut": "1000",
        "showEasing": "swing",
        "hideEasing": "linear",
        "showMethod": "fadeIn",
        "hideMethod": "fadeOut"
    };
</script>
@endpush