@extends('layouts.app')

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

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

@section('content')

Create a new role and assign the permissions that users with this role will have.

{{-- 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>


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

    <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">
                    Enter the role name that will be 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') }}"
                            placeholder="e.g. Accountant, Attendance Manager"
                            autocomplete="off"
                            class="form-input w-full @error('name') border-danger @enderror"
                            required
                            autofocus
                        >

                        <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">
                            Select the permissions that users assigned to this role should have.
                        </p>

                    </div>


                    {{-- Global Permission Controls --}}
                    <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>

                </div>

            </div>


            {{-- Permission Groups --}}
            <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'] ?? [];
                            @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>


                                    <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>

                                </div>


                                {{-- Permissions --}}
                                <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 cursor-pointer items-start gap-3 bg-card p-4 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,
                                                        old('permissions', []),
                                                        true
                                                    )
                                                )
                                            >

                                            <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 Permissions --}}
                    <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.
                            Make sure your permissions have been created in the database.
                        </p>

                    </div>

                @endif

            </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>

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

                    <span>
                        Save Role
                    </span>
                </button>

            </div>

        </div>

    </div>

</form>


{{-- Permission Selection --}}
<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;
            });

            updateAllGroupCheckboxes();

        });


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

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

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

            updateAllGroupCheckboxes();

        });


        /*
        |--------------------------------------------------------------------------
        | Group Select All
        |--------------------------------------------------------------------------
        */

        permissionGroups.forEach(function (group) {

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

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


            groupSelectAll?.addEventListener('change', function () {

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

            });


            /*
            |--------------------------------------------------------------------------
            | Individual Permission Changes
            |--------------------------------------------------------------------------
            */

            groupPermissions.forEach(function (checkbox) {

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

            });


            /*
            |--------------------------------------------------------------------------
            | Initial State
            |--------------------------------------------------------------------------
            */

            updateGroupCheckbox(group);

        });


        /*
        |--------------------------------------------------------------------------
        | Update Single Group
        |--------------------------------------------------------------------------
        */

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


            groupSelectAll.checked =
                checkedPermissions.length === groupPermissions.length;

            groupSelectAll.indeterminate =
                checkedPermissions.length > 0
                && checkedPermissions.length < groupPermissions.length;
        }


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

        function updateAllGroupCheckboxes() {

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

        }

    });
</script>

@endsection