@extends('layouts.app')

@section('title', 'Edit Role')

@section('page-title', 'Edit Role')

@section('content')

Update the role information and manage the permissions assigned to this role.

{{-- Page Actions --}}
<div class="mb-5 flex justify-end">

    <a
        href="{{ route('roles.index') }}"
        class="btn btn-secondary"
    >
        <i class="fa-solid fa-arrow-left"></i>
        Back
    </a>

</div>


{{-- System Role Warning --}}
@if ($isSystemRole)

    <div class="mb-5 rounded-xl border border-amber-200 bg-amber-50 p-4">

        <div class="flex items-start gap-3">

            <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-amber-100 text-amber-600">
                <i class="fa-solid fa-lock"></i>
            </div>

            <div>

                <h3 class="text-sm font-semibold text-amber-800">
                    Protected System Role
                </h3>

                <p class="mt-1 text-xs leading-5 text-amber-700">
                    This is a protected system role. Its name and permissions
                    cannot be modified from Role Management.
                </p>

            </div>

        </div>

    </div>

@endif


<form
    action="{{ route('roles.update', $role) }}"
    method="POST"
    id="role-form"
>
    @csrf
    @method('PUT')

    <div class="space-y-5">

        {{-- Role Information --}}
        <div class="card overflow-hidden">

            {{-- Header --}}
            <div class="border-b border-border px-5 py-4">

                <h2 class="text-base font-semibold text-text">
                    Role Information
                </h2>

                <p class="mt-1 text-xs text-muted">
                    Update the role name used throughout the system.
                </p>

            </div>


            {{-- Form --}}
            <div class="p-5 lg:p-6">

                <div class="grid grid-cols-1 gap-5 md:grid-cols-2">

                    {{-- Role Name --}}
                    <div class="md:col-span-2">

                        <label
                            for="name"
                            class="mb-1.5 block text-sm font-medium text-text"
                        >
                            Role Name
                            <span class="text-danger">*</span>
                        </label>

                        <input
                            type="text"
                            id="name"
                            name="name"
                            value="{{ old('name', $role->name) }}"
                            placeholder="e.g. Accountant, Attendance Manager"
                            autocomplete="off"
                            class="form-input w-full @error('name') border-danger @enderror"
                            required
                            @disabled($isSystemRole)
                        >

                        <p class="mt-1.5 text-xs text-muted">
                            Use a clear and descriptive name that represents
                            the user's responsibilities.
                        </p>

                        @error('name')
                            <p class="mt-1.5 text-xs text-danger">
                                {{ $message }}
                            </p>
                        @enderror

                    </div>

                </div>

            </div>

        </div>


        {{-- Permission Management --}}
        <div class="card overflow-hidden">

            {{-- Header --}}
            <div class="border-b border-border px-5 py-4">

                <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">

                    <div>

                        <h2 class="text-base font-semibold text-text">
                            Role Permissions
                        </h2>

                        <p class="mt-1 text-xs text-muted">
                            Manage the permissions available to users assigned to this role.
                        </p>

                    </div>


                    @unless ($isSystemRole)

                        <div class="flex items-center gap-2">

                            <button
                                type="button"
                                id="select-all-permissions"
                                class="btn btn-secondary"
                            >
                                <i class="fa-regular fa-square-check"></i>
                                Select All
                            </button>

                            <button
                                type="button"
                                id="clear-all-permissions"
                                class="btn btn-secondary"
                            >
                                <i class="fa-regular fa-square"></i>
                                Clear All
                            </button>

                        </div>

                    @endunless

                </div>

            </div>


            {{-- Permissions --}}
            <div class="p-5 lg:p-6">

                @error('permissions')
                    <div class="mb-5 rounded-lg border border-danger/20 bg-danger/5 px-4 py-3 text-sm text-danger">
                        {{ $message }}
                    </div>
                @enderror

                @error('permissions.*')
                    <div class="mb-5 rounded-lg border border-danger/20 bg-danger/5 px-4 py-3 text-sm text-danger">
                        {{ $message }}
                    </div>
                @enderror


                @if (! empty($permissionGroups))

                    <div class="space-y-4">

                        @foreach ($permissionGroups as $groupKey => $group)

                            @php

                                $permissions =
                                    $group['permissions'] ?? [];

                                $currentPermissions =
                                    old(
                                        'permissions',
                                        $selectedPermissions
                                    );

                            @endphp


                            <div
                                class="permission-group overflow-hidden rounded-xl border border-border"
                                data-permission-group="{{ $groupKey }}"
                            >

                                {{-- Group Header --}}
                                <div class="flex flex-col gap-3 border-b border-border bg-background/50 px-4 py-3 sm:flex-row sm:items-center sm:justify-between">

                                    <div>

                                        <h3 class="text-sm font-semibold text-text">
                                            {{ $group['label'] ?? Str::headline($groupKey) }}
                                        </h3>

                                        <p class="mt-0.5 text-xs text-muted">
                                            Manage access permissions for this module.
                                        </p>

                                    </div>


                                    @unless ($isSystemRole)

                                        <label class="inline-flex cursor-pointer items-center gap-2">

                                            <input
                                                type="checkbox"
                                                class="group-select-all h-4 w-4 rounded border-border text-sky-600 focus:ring-sky-500"
                                            >

                                            <span class="text-xs font-medium text-text">
                                                Select All
                                            </span>

                                        </label>

                                    @endunless

                                </div>


                                {{-- Permission Items --}}
                                <div class="grid grid-cols-1 gap-px bg-border sm:grid-cols-2 lg:grid-cols-4">

                                    @foreach ($permissions as $action => $permission)

                                        <label
                                            class="
                                                flex items-start gap-3 bg-card p-4
                                                {{ $isSystemRole
                                                    ? 'cursor-default'
                                                    : 'cursor-pointer transition hover:bg-background/40'
                                                }}
                                            "
                                        >

                                            <input
                                                type="checkbox"
                                                name="permissions[]"
                                                value="{{ $permission }}"
                                                class="permission-checkbox mt-0.5 h-4 w-4 shrink-0 rounded border-border text-sky-600 focus:ring-sky-500"
                                                @checked(
                                                    in_array(
                                                        $permission,
                                                        $currentPermissions,
                                                        true
                                                    )
                                                )
                                                @disabled($isSystemRole)
                                            >

                                            <div class="min-w-0">

                                                <p class="text-sm font-medium text-text">
                                                    {{ Str::headline($action) }}
                                                </p>

                                                <p class="mt-0.5 break-all text-xs text-muted">
                                                    {{ $permission }}
                                                </p>

                                            </div>

                                        </label>

                                    @endforeach

                                </div>

                            </div>

                        @endforeach

                    </div>

                @else

                    {{-- Empty State --}}
                    <div class="py-12 text-center">

                        <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-background text-muted">
                            <i class="fa-solid fa-key text-lg"></i>
                        </div>

                        <h3 class="mt-4 text-sm font-semibold text-text">
                            No permissions available
                        </h3>

                        <p class="mx-auto mt-1 max-w-md text-xs leading-5 text-muted">
                            No permissions are currently available for role assignment.
                        </p>

                    </div>

                @endif

            </div>

        </div>


        {{-- Role Summary --}}
        <div class="card overflow-hidden">

            <div class="border-b border-border px-5 py-4">

                <h2 class="text-base font-semibold text-text">
                    Role Summary
                </h2>

                <p class="mt-1 text-xs text-muted">
                    Basic information about this role.
                </p>

            </div>


            <div class="grid grid-cols-1 gap-px bg-border sm:grid-cols-3">

                {{-- Users --}}
                <div class="bg-card p-5">

                    <p class="text-xs font-medium uppercase tracking-wide text-muted">
                        Assigned Users
                    </p>

                    <p class="mt-2 text-xl font-semibold text-text">
                        {{ $role->users()->count() }}
                    </p>

                </div>


                {{-- Permissions --}}
                <div class="bg-card p-5">

                    <p class="text-xs font-medium uppercase tracking-wide text-muted">
                        Permissions
                    </p>

                    <p class="mt-2 text-xl font-semibold text-text">
                        {{ count($selectedPermissions) }}
                    </p>

                </div>


                {{-- Guard --}}
                <div class="bg-card p-5">

                    <p class="text-xs font-medium uppercase tracking-wide text-muted">
                        Guard
                    </p>

                    <p class="mt-2 text-sm font-semibold text-text">
                        {{ $role->guard_name }}
                    </p>

                </div>

            </div>

        </div>


        {{-- Actions --}}
        <div class="card overflow-hidden">

            <div class="flex flex-col-reverse gap-3 px-5 py-4 sm:flex-row sm:items-center sm:justify-end">

                <a
                    href="{{ route('roles.index') }}"
                    class="btn btn-secondary"
                >
                    Cancel
                </a>


                @unless ($isSystemRole)

                    <button
                        type="submit"
                        class="btn btn-primary"
                        id="submit-button"
                    >
                        <i class="fa-solid fa-floppy-disk"></i>

                        <span>
                            Update Role
                        </span>
                    </button>

                @endunless

            </div>

        </div>

    </div>

</form>


@unless ($isSystemRole)

    <script>

        document.addEventListener('DOMContentLoaded', function () {

            const selectAllButton =
                document.getElementById('select-all-permissions');

            const clearAllButton =
                document.getElementById('clear-all-permissions');

            const permissionCheckboxes =
                document.querySelectorAll('.permission-checkbox');

            const permissionGroups =
                document.querySelectorAll('.permission-group');


            /*
            |--------------------------------------------------------------------------
            | Select All Permissions
            |--------------------------------------------------------------------------
            */

            selectAllButton?.addEventListener('click', function () {

                permissionCheckboxes.forEach(function (checkbox) {
                    checkbox.checked = true;
                });

                updateAllGroups();

            });


            /*
            |--------------------------------------------------------------------------
            | Clear All Permissions
            |--------------------------------------------------------------------------
            */

            clearAllButton?.addEventListener('click', function () {

                permissionCheckboxes.forEach(function (checkbox) {
                    checkbox.checked = false;
                });

                updateAllGroups();

            });


            /*
            |--------------------------------------------------------------------------
            | Permission Groups
            |--------------------------------------------------------------------------
            */

            permissionGroups.forEach(function (group) {

                const groupSelectAll =
                    group.querySelector('.group-select-all');

                const groupPermissions =
                    group.querySelectorAll('.permission-checkbox');


                /*
                 * Group Select All
                 */
                groupSelectAll?.addEventListener('change', function () {

                    groupPermissions.forEach(function (checkbox) {
                        checkbox.checked = groupSelectAll.checked;
                    });

                });


                /*
                 * Individual Permission
                 */
                groupPermissions.forEach(function (checkbox) {

                    checkbox.addEventListener('change', function () {
                        updateGroup(group);
                    });

                });


                /*
                 * Initial checkbox state.
                 */
                updateGroup(group);

            });


            /*
            |--------------------------------------------------------------------------
            | Update Group Checkbox
            |--------------------------------------------------------------------------
            */

            function updateGroup(group) {

                const groupSelectAll =
                    group.querySelector('.group-select-all');

                const groupPermissions =
                    Array.from(
                        group.querySelectorAll('.permission-checkbox')
                    );

                if (
                    ! groupSelectAll
                    || groupPermissions.length === 0
                ) {
                    return;
                }


                const checkedPermissions =
                    groupPermissions.filter(function (checkbox) {
                        return checkbox.checked;
                    });


                /*
                 * Everything selected.
                 */
                groupSelectAll.checked =
                    checkedPermissions.length
                    === groupPermissions.length;


                /*
                 * Some selected.
                 */
                groupSelectAll.indeterminate =
                    checkedPermissions.length > 0
                    && checkedPermissions.length
                        < groupPermissions.length;

            }


            /*
            |--------------------------------------------------------------------------
            | Update All Groups
            |--------------------------------------------------------------------------
            */

            function updateAllGroups() {

                permissionGroups.forEach(function (group) {
                    updateGroup(group);
                });

            }

        });

    </script>

@endunless

@endsection