@php
    $isEdit = isset($user);
@endphp

<div class="form-grid">
    <div class="form-group">
        <label class="form-label" for="name">
            Full Name <span class="required">*</span>
        </label>

        <input
            class="form-control"
            id="name"
            type="text"
            name="name"
            value="{{ old('name', $user->name ?? '') }}"
            maxlength="255"
            required
            autofocus
        >
    </div>

    <div class="form-group">
        <label class="form-label" for="email">
            Email Address <span class="required">*</span>
        </label>

        <input
            class="form-control"
            id="email"
            type="email"
            name="email"
            value="{{ old('email', $user->email ?? '') }}"
            maxlength="255"
            required
        >
    </div>

    <div class="form-group">
        <label class="form-label" for="phone">
            Phone Number
        </label>

        <input
            class="form-control"
            id="phone"
            type="text"
            name="phone"
            value="{{ old('phone', $user->phone ?? '') }}"
            maxlength="30"
            placeholder="+880 1XXXXXXXXX"
        >
    </div>

    <div class="form-group">
        <label class="form-label" for="role">
            User Role <span class="required">*</span>
        </label>

        <select class="form-control" id="role" name="role" required>
            <option value="">Select a role</option>

            @foreach ($roles as $roleValue => $roleLabel)
                <option
                    value="{{ $roleValue }}"
                    @selected(old('role', $user->role ?? '') === $roleValue)
                >
                    {{ $roleLabel }}
                </option>
            @endforeach
        </select>

        <div class="form-help">
            The role determines which sections the user can access.
        </div>
    </div>

    <div class="form-group">
        <label class="form-label" for="password">
            Password
            @if (!$isEdit)
                <span class="required">*</span>
            @endif
        </label>

        <input
            class="form-control"
            id="password"
            type="password"
            name="password"
            minlength="8"
            autocomplete="new-password"
            {{ $isEdit ? '' : 'required' }}
        >

        <div class="form-help">
            @if ($isEdit)
                Leave blank to keep the current password.
            @else
                Password must contain at least 8 characters.
            @endif
        </div>
    </div>

    <div class="form-group">
        <label class="form-label" for="password_confirmation">
            Confirm Password
            @if (!$isEdit)
                <span class="required">*</span>
            @endif
        </label>

        <input
            class="form-control"
            id="password_confirmation"
            type="password"
            name="password_confirmation"
            minlength="8"
            autocomplete="new-password"
            {{ $isEdit ? '' : 'required' }}
        >
    </div>

    <div class="form-group full">
        <label class="form-check">
            <input type="hidden" name="status" value="0">

            <input
                type="checkbox"
                name="status"
                value="1"
                @checked((bool) old('status', $user->status ?? true))
            >

            <span>
                <strong>Active Account</strong><br>
                <small class="form-help">
                    Inactive users cannot sign in to the administration panel.
                </small>
            </span>
        </label>
    </div>
</div>

<div class="form-actions">
    <button class="btn btn-primary" type="submit">
        {{ $isEdit ? 'Update User' : 'Create User' }}
    </button>

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

@push('styles')
    <style>
        .required {
            color: #c53030;
        }

        select.form-control {
            cursor: pointer;
        }
    </style>
@endpush