<x-app-layout>
    <div class="app-main flex-column flex-row-fluid">
        <div class="d-flex flex-column flex-column-fluid">
            <div class="app-toolbar py-3 py-lg-6">
                <div class="app-container container-xxl d-flex flex-stack">
                    <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                        <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">Edit Role</h1>
                        {{ Breadcrumbs::render('role-management.edit', $role) }}
                    </div>
                    <div class="d-flex align-items-center ml-auto gap-2 gap-lg-3">
                        @if ($url = Session::get('backUrl'))
                            <x-add-back-button onclick="window.location='{{ $url }}'" >
                                <i class="ki-duotone ki-left fs-3"></i>
                                {{ __('Back') }}
                            </x-add-back-button>
                        @endif
                    </div>
                </div>
            </div>
            <div class="app-content flex-column-fluid">
                <div class="app-container  container-xxl ">
                    <div class="d-flex flex-column flex-lg-row">
                        <div class="flex-column flex-lg-row-auto w-100 w-lg-500px w-xl-6500px mb-10">
                            <div class="p-12 sm:p-8 bg-white shadow sm:rounded-lg">
                                <section>
                                    <header class="flex justify-between items-center mb-5">
                                        <h2 class="text-2xl font-medium text-gray-900">
                                            {{ __('Edit Role') }}
                                            <p class="mt-1 mb-6 text-base text-gray-600">
                                                {{ __("Edit Role Name and Permissions.") }}
                                            </p>
                                        </h2>
                                    </header>
                                    <form class="form" method="POST" action="{{ route('admin.roles.update', $role->id)}}">
                                        @csrf
                                        @method('PUT')
                                        <div class="fv-row mb-10">
                                            <x-input-label for="name" :value="__('Role name')" />
                                            <input class="form-control form-control-solid" id="name" name="name" value="{{ old('name', $role->name) }}" required/>
                                            <x-input-error :messages="$errors->get('name')" class="mt-3" />
                                        </div>
                                        <header>
                                            <h2 class="text-lg font-medium text-gray-900">
                                                {{ __('Permission') }}
                                            </h2>
                                            <p class="mt-1 text-sm text-gray-600">
                                                {{ __("Assign permissions to role") }}
                                            </p>
                                        </header>
                                        <div class="fv-row mb-10 max-w-7xl">
                                            <div class="table-responsive">
                                                <table class="table align-middle table-row-dashed fs-6 gy-5">
                                                    <tr>
                                                        <th></th>
                                                        <th>View</th>
                                                        <th>Add</th>
                                                        <th>Edit</th>
                                                        <th>Delete</th>
                                                    </tr>
                                                    <tbody class="text-gray-600 fw-semibold">
                                                        @php
                                                            $permissionsChunks = array_chunk($permissions, 4);
                                                            $permissionNames = ['User Administrator' ,'Invoice', 'Daily Distribution', 'Role Administrator'];
                                                        @endphp
                                                        @foreach($permissionsChunks as $index => $permissionsChunk)
                                                        <tr>
                                                            <td>{{ $permissionNames[$index] }}</td>
                                                            @foreach($permissionsChunk as $permission)
                                                            <td>
                                                                @csrf
                                                                <div class="d-flex">
                                                                    <label class="form-check form-check-sm form-check-custom form-check-solid me-5 me-lg-10">
                                                                        <input class="form-check-input" type="checkbox"
                                                                        name="permissions[]"
                                                                        value="{{ $permission }}"
                                                                            {{ in_array($permission, old('permissions', $role->permissions->pluck('id')->toArray())) ? 'checked' : '' }}>
                                                                        {{-- <span>{{$permission->name}}</span> --}}
                                                                    </label>
                                                                </div>
                                                            </td>
                                                            @endforeach
                                                        </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                            @if ($errors->has('permissions'))
                                                <div class="alert alert-danger">
                                                    {{ $errors->first('permissions') }}
                                                </div>
                                            @endif
                                        </div>
                                        <div class="pt-10">
                                            <x-primary-button class="btn btn-primary" data-kt-roles-modal-action="submit">
                                                {{ __('Save')}}
                                            </x-primary-button>
                                        </div>
                                    </form>

                                </section>
                            </div>
                        </div>
                        <div class="flex-lg-row-fluid ms-lg-10">
                            <div class="p-8 pb-4 sm:p-8 bg-white shadow sm:rounded-lg">
                                <section>
                                    <header class="flex justify-between items-center mb-5">
                                        <h2 class="text-xl font-medium text-gray-900">
                                            {{ __('Assigned User') }}
                                            <span class="text-gray-600 fs-6 ms-1">({{ $role->users->count() }})</span>
                                        </h2>
                                    </header>
                                    <!--begin table-->
                                    @livewire('role-edit-view-table', ['role_name' => $role->name])
                                    <!--end table-->
                                </section>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
