@extends('layouts.app')

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

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

@section('content')

Update the user's account information, assigned role, status, or login credentials.

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

    @can('users.view')
        <a
            href="{{ route('users.show', $user) }}"
            class="btn btn-secondary"
        >
            <i class="fa-regular fa-eye"></i>
            View User
        </a>
    @endcan

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

</div>


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


    <div class="card overflow-hidden">

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

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

                <div>

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

                    <p class="mt-1 text-xs text-muted">
                        Update account information, role, status, and login credentials.
                    </p>

                </div>


                @if (auth()->id() === $user->id)

                    <span class="inline-flex w-fit items-center gap-1.5 rounded-full bg-sky-50 px-3 py-1.5 text-xs font-medium text-sky-700">

                        <i class="fa-regular fa-user"></i>

                        Your Account

                    </span>

                @endif

            </div>

        </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', $user->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', $user->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>

                    @php
                        $currentRole = old(
                            'role',
                            $user->roles->first()?->name
                        );
                    @endphp

                    <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($currentRole === $role->name)
                            >
                                {{ $role->name }}
                            </option>

                        @endforeach

                    </select>

                    <p class="mt-1.5 text-xs text-muted">
                        Changing the role will replace the user's current role and permissions.
                    </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
                        @disabled(auth()->id() === $user->id)
                    >

                        <option
                            value="1"
                            @selected(
                                (string) old(
                                    'is_active',
                                    $user->is_active ? '1' : '0'
                                ) === '1'
                            )
                        >
                            Active
                        </option>

                        <option
                            value="0"
                            @selected(
                                (string) old(
                                    'is_active',
                                    $user->is_active ? '1' : '0'
                                ) === '0'
                            )
                        >
                            Inactive
                        </option>

                    </select>


                    {{--
                        Disabled form controls are not submitted.

                        When editing your own account, preserve the
                        current active status explicitly.
                    --}}
                    @if (auth()->id() === $user->id)

                        <input
                            type="hidden"
                            name="is_active"
                            value="{{ $user->is_active ? '1' : '0' }}"
                        >

                        <p class="mt-1.5 text-xs text-muted">
                            You cannot deactivate your own account.
                        </p>

                    @else

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

                    @endif


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

                </div>

            </div>


            {{-- Password Section --}}
            <div class="my-6 border-t border-border"></div>


            <div class="mb-5">

                <h3 class="text-sm font-semibold text-text">
                    Change Password
                </h3>

                <p class="mt-1 text-xs text-muted">
                    Leave both password fields blank to keep the current password.
                </p>

            </div>


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

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

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

                    <div class="relative">

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

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


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

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

                    <div class="relative">

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

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


            {{-- Security 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">
                            This user's system permissions are inherited from the
                            assigned role. To modify what the role can access, update
                            its permissions from Role Management.
                        </p>

                    </div>

                </div>

            </div>


            {{-- Super Admin Warning --}}
            @if ($user->hasRole('Super Admin'))

                <div class="mt-4 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">
                                Super Admin Account
                            </h3>

                            <p class="mt-1 text-xs leading-5 text-amber-700">
                                This account currently has the Super Admin role.
                                The system prevents the final Super Admin account
                                from losing administrative access.
                            </p>

                        </div>

                    </div>

                </div>

            @endif

        </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>
                    Update User
                </span>
            </button>

        </div>

    </div>

</form>


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

        document
            .querySelectorAll('.password-toggle')
            .forEach(function (toggle) {

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

                    const input = document.getElementById(
                        this.dataset.target
                    );

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

                    if (!input) {
                        return;
                    }

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

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

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

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

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

                });

            });

    });
</script>

@endsection