@extends('layouts.app')

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

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

@section('content')

Create a new system user and assign their role and account access.

{{-- Page Actions --}}
<div class="mb-5 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-end">

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

</div>


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


    <div class="card overflow-hidden">

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

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

            <p class="mt-1 text-xs text-muted">
                Enter the user's account information, role, and login credentials.
            </p>

        </div>


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

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

                {{-- Name --}}
                <div>

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

                    <input
                        type="text"
                        id="name"
                        name="name"
                        value="{{ old('name') }}"
                        placeholder="Enter full name"
                        autocomplete="name"
                        class="form-input w-full @error('name') border-danger @enderror"
                        required
                        autofocus
                    >

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

                </div>


                {{-- Email --}}
                <div>

                    <label
                        for="email"
                        class="mb-1.5 block text-sm font-medium text-text"
                    >
                        Email Address
                        <span class="text-danger">*</span>
                    </label>

                    <input
                        type="email"
                        id="email"
                        name="email"
                        value="{{ old('email') }}"
                        placeholder="e.g. user@school.com"
                        autocomplete="email"
                        class="form-input w-full @error('email') border-danger @enderror"
                        required
                    >

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

                </div>


                {{-- Role --}}
                <div>

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

                    <select
                        id="role"
                        name="role"
                        class="form-select w-full @error('role') border-danger @enderror"
                        required
                    >

                        <option value="">
                            Select Role
                        </option>

                        @foreach ($roles as $role)

                            <option
                                value="{{ $role->name }}"
                                @selected(old('role') === $role->name)
                            >
                                {{ $role->name }}
                            </option>

                        @endforeach

                    </select>

                    <p class="mt-1.5 text-xs text-muted">
                        The selected role determines the permissions available to this user.
                    </p>

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

                </div>


                {{-- Status --}}
                <div>

                    <label
                        for="is_active"
                        class="mb-1.5 block text-sm font-medium text-text"
                    >
                        Account Status
                        <span class="text-danger">*</span>
                    </label>

                    <select
                        id="is_active"
                        name="is_active"
                        class="form-select w-full @error('is_active') border-danger @enderror"
                        required
                    >

                        <option
                            value="1"
                            @selected(old('is_active', '1') === '1')
                        >
                            Active
                        </option>

                        <option
                            value="0"
                            @selected(old('is_active') === '0')
                        >
                            Inactive
                        </option>

                    </select>

                    <p class="mt-1.5 text-xs text-muted">
                        Inactive users should not be allowed to access the system.
                    </p>

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

                </div>


                {{-- Password --}}
                <div>

                    <label
                        for="password"
                        class="mb-1.5 block text-sm font-medium text-text"
                    >
                        Password
                        <span class="text-danger">*</span>
                    </label>

                    <div class="relative">

                        <input
                            type="password"
                            id="password"
                            name="password"
                            placeholder="Enter password"
                            autocomplete="new-password"
                            class="form-input w-full pr-11 @error('password') border-danger @enderror"
                            required
                        >

                        <button
                            type="button"
                            class="password-toggle absolute inset-y-0 right-0 flex w-11 items-center justify-center text-muted transition hover:text-text"
                            data-target="password"
                            aria-label="Show password"
                        >
                            <i class="fa-regular fa-eye"></i>
                        </button>

                    </div>

                    <p class="mt-1.5 text-xs text-muted">
                        Use at least 8 characters with uppercase, lowercase, and numbers.
                    </p>

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

                </div>


                {{-- Confirm Password --}}
                <div>

                    <label
                        for="password_confirmation"
                        class="mb-1.5 block text-sm font-medium text-text"
                    >
                        Confirm Password
                        <span class="text-danger">*</span>
                    </label>

                    <div class="relative">

                        <input
                            type="password"
                            id="password_confirmation"
                            name="password_confirmation"
                            placeholder="Re-enter password"
                            autocomplete="new-password"
                            class="form-input w-full pr-11"
                            required
                        >

                        <button
                            type="button"
                            class="password-toggle absolute inset-y-0 right-0 flex w-11 items-center justify-center text-muted transition hover:text-text"
                            data-target="password_confirmation"
                            aria-label="Show password confirmation"
                        >
                            <i class="fa-regular fa-eye"></i>
                        </button>

                    </div>

                </div>

            </div>


            {{-- Access Information --}}
            <div class="mt-6 rounded-xl border border-sky-200 bg-sky-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-100 text-sky-600">
                        <i class="fa-solid fa-shield-halved"></i>
                    </div>

                    <div>

                        <h3 class="text-sm font-semibold text-sky-800">
                            Role-Based Access
                        </h3>

                        <p class="mt-1 text-xs leading-5 text-sky-700">
                            Access permissions are managed through roles. Assign the
                            appropriate role to this account instead of assigning
                            permissions individually to the user.
                        </p>

                    </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('users.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 User
                </span>
            </button>

        </div>

    </div>

</form>


{{-- Password Visibility --}}
<script>
    document.addEventListener('DOMContentLoaded', function () {

        const toggles = document.querySelectorAll(
            '.password-toggle'
        );

        toggles.forEach(function (toggle) {

            toggle.addEventListener('click', function () {

                const targetId =
                    this.dataset.target;

                const input =
                    document.getElementById(targetId);

                const icon =
                    this.querySelector('i');

                if (!input) {
                    return;
                }

                const isPassword =
                    input.type === 'password';

                input.type =
                    isPassword
                        ? 'text'
                        : 'password';

                icon.classList.toggle(
                    'fa-eye',
                    !isPassword
                );

                icon.classList.toggle(
                    'fa-eye-slash',
                    isPassword
                );

                this.setAttribute(
                    'aria-label',
                    isPassword
                        ? 'Hide password'
                        : 'Show password'
                );

            });

        });

    });
</script>

@endsection