@extends('layouts.app')

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

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

@section('content')

Update the permission name used for system access control.

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

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

</div>


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

    <div class="card overflow-hidden">

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

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

            <p class="mt-1 text-xs text-muted">
                Update the permission name and access identifier.
            </p>

        </div>


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

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

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

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

                    <input
                        type="text"
                        id="name"
                        name="name"
                        value="{{ old('name', $permission->name) }}"
                        placeholder="e.g. students.view"
                        autocomplete="off"
                        class="form-input w-full @error('name') border-danger @enderror"
                        required
                        autofocus
                    >

                    <p class="mt-1.5 text-xs text-muted">
                        Use the
                        <span class="font-medium text-text">
                            module.action
                        </span>
                        format, for example
                        <span class="font-medium text-text">
                            students.view
                        </span>.
                    </p>

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

                </div>

            </div>


            {{-- Permission Details --}}
            <div class="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-3">

                {{-- Guard --}}
                <div class="rounded-xl border border-border bg-background/50 p-4">

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

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

                        <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-sky-50 text-sky-600">
                            <i class="fa-solid fa-shield-halved text-xs"></i>
                        </div>

                        <span class="text-sm font-semibold text-text">
                            {{ $permission->guard_name }}
                        </span>

                    </div>

                </div>


                {{-- Assigned Roles --}}
                <div class="rounded-xl border border-border bg-background/50 p-4">

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

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

                        <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-sky-50 text-sky-600">
                            <i class="fa-solid fa-user-shield text-xs"></i>
                        </div>

                        <span class="text-sm font-semibold text-text">
                            {{ $permission->roles()->count() }}
                        </span>

                        <span class="text-xs text-muted">
                            {{ Str::plural(
                                'role',
                                $permission->roles()->count()
                            ) }}
                        </span>

                    </div>

                </div>


                {{-- Permission ID --}}
                <div class="rounded-xl border border-border bg-background/50 p-4">

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

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

                        <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-sky-50 text-sky-600">
                            <i class="fa-solid fa-key text-xs"></i>
                        </div>

                        <span class="text-sm font-semibold text-text">
                            #{{ $permission->id }}
                        </span>

                    </div>

                </div>

            </div>


            {{-- Warning --}}
            @if ($permission->roles()->exists())

                <div class="mt-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-triangle-exclamation"></i>

                        </div>


                        <div>

                            <h3 class="text-sm font-semibold text-amber-800">
                                Permission is currently in use
                            </h3>

                            <p class="mt-1 text-xs leading-5 text-amber-700">

                                This permission is currently assigned to

                                <span class="font-semibold">
                                    {{ $permission->roles()->count() }}
                                    {{ Str::plural(
                                        'role',
                                        $permission->roles()->count()
                                    ) }}.
                                </span>

                                Renaming it changes the permission identifier
                                used by the authorization system.

                            </p>

                        </div>

                    </div>

                </div>

            @endif


            {{-- Naming Convention --}}
            <div class="mt-5 rounded-xl border border-border bg-background/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-sky-50 text-sky-600">

                        <i class="fa-solid fa-circle-info"></i>

                    </div>


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

                        <h3 class="text-sm font-semibold text-text">
                            Permission Naming Convention
                        </h3>

                        <p class="mt-1 text-xs leading-5 text-muted">

                            Permissions should follow the

                            <span class="font-medium text-text">
                                module.action
                            </span>

                            structure so they remain consistent throughout
                            the application.

                        </p>


                        <div class="mt-3 flex flex-wrap gap-2">

                            <span class="rounded-md border border-border bg-card px-2.5 py-1.5 text-xs font-medium text-text">
                                students.view
                            </span>

                            <span class="rounded-md border border-border bg-card px-2.5 py-1.5 text-xs font-medium text-text">
                                students.create
                            </span>

                            <span class="rounded-md border border-border bg-card px-2.5 py-1.5 text-xs font-medium text-text">
                                students.edit
                            </span>

                            <span class="rounded-md border border-border bg-card px-2.5 py-1.5 text-xs font-medium text-text">
                                students.delete
                            </span>

                        </div>

                    </div>

                </div>

            </div>

        </div>


        {{-- Actions --}}
        <div class="flex flex-col-reverse gap-3 border-t border-border bg-background/50 px-5 py-4 sm:flex-row sm:items-center sm:justify-end">

            <a
                href="{{ route('permissions.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>
                    Update Permission
                </span>
            </button>

        </div>

    </div>

</form>


<script>

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

        const nameInput =
            document.getElementById('name');


        /*
        |--------------------------------------------------------------------------
        | Normalize Permission Name
        |--------------------------------------------------------------------------
        */

        nameInput?.addEventListener('input', function () {

            let value = this.value;

            value = value
                .toLowerCase()
                .replace(/\s+/g, '-')
                .replace(/[^a-z0-9.-]/g, '');

            this.value = value;

        });

    });

</script>

@endsection