@extends('layouts.app')

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

@push('styles')
<style>
    .form-card { background:#fff;border:1px solid var(--gray-200);border-radius:14px;overflow:hidden;max-width:640px; }
    .form-card-header { padding:1.1rem 1.5rem;border-bottom:1px solid var(--gray-100); }
    .form-card-header h2 { font-size:.95rem;font-weight:700;color:var(--gray-900);display:flex;align-items:center;gap:.45rem; }
    .form-card-header h2 i { color:var(--green); }
    .form-body { padding:1.5rem; }

    .form-group { margin-bottom:1.1rem; }
    .form-label { display:block;font-size:.8rem;font-weight:700;color:var(--gray-700);margin-bottom:.4rem; }
    .form-label .req { color:#ef4444; }
    .form-control { width:100%;padding:.6rem .85rem;border:1.5px solid var(--gray-200);border-radius:8px;font-size:.875rem;color:var(--gray-800);background:#fff;transition:border-color .15s;font-family:inherit; }
    .form-control:focus { outline:none;border-color:var(--green); }
    .form-control.is-invalid { border-color:#ef4444; }
    .invalid-feedback { font-size:.75rem;color:#ef4444;margin-top:.3rem; }
    .form-hint { font-size:.75rem;color:var(--gray-400);margin-top:.3rem; }
    .form-row { display:grid;grid-template-columns:1fr 1fr;gap:1rem; }

    .pw-wrap { position:relative; }
    .pw-wrap .form-control { padding-right:2.5rem; }
    .pw-toggle { position:absolute;right:.75rem;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--gray-400);font-size:.85rem;padding:.25rem; }
    .pw-toggle:hover { color:var(--gray-700); }

    .pw-hint { font-size:.75rem;color:var(--gray-400);margin-top:.35rem;line-height:1.5; }
    .pw-req { color:#ef4444;font-weight:600; }

    .form-divider { border:none;border-top:1px solid var(--gray-100);margin:1.25rem 0; }
</style>
@endpush

@section('content')

<div class="page-header">
    <div>
        <h1 class="page-title">Add User</h1>
        <p class="page-subtitle">Create a new platform account.</p>
    </div>
    <a href="{{ route('admin.users.index') }}" class="btn-secondary">
        <i class="fas fa-arrow-left"></i> Back
    </a>
</div>

<div class="form-card">
    <div class="form-card-header">
        <h2><i class="fas fa-user-plus"></i> New User</h2>
    </div>
    <div class="form-body">
        <form method="POST" action="{{ route('admin.users.store') }}">
            @csrf

            {{-- Role --}}
            <div class="form-group">
                <label class="form-label">Role <span class="req">*</span></label>
                <select name="role_id" class="form-control {{ $errors->has('role_id') ? 'is-invalid' : '' }}" required>
                    <option value="">— Select Role —</option>
                    @foreach($roles as $role)
                    <option value="{{ $role->id }}" {{ old('role_id') == $role->id ? 'selected' : '' }}>{{ $role->display_name }}</option>
                    @endforeach
                </select>
                @error('role_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
            </div>

            <hr class="form-divider">

            {{-- Name + Email --}}
            <div class="form-row">
                <div class="form-group">
                    <label class="form-label">Full Name <span class="req">*</span></label>
                    <input type="text" name="name" class="form-control {{ $errors->has('name') ? 'is-invalid' : '' }}"
                        value="{{ old('name') }}" required maxlength="100">
                    @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
                <div class="form-group">
                    <label class="form-label">Email Address <span class="req">*</span></label>
                    <input type="email" name="email" class="form-control {{ $errors->has('email') ? 'is-invalid' : '' }}"
                        value="{{ old('email') }}" required maxlength="150">
                    @error('email') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
            </div>

            {{-- Employee ID + Department --}}
            <div class="form-row">
                <div class="form-group">
                    <label class="form-label">Employee ID</label>
                    <input type="text" name="employee_id" class="form-control {{ $errors->has('employee_id') ? 'is-invalid' : '' }}"
                        value="{{ old('employee_id') }}" maxlength="50" placeholder="e.g. CB-1042">
                    @error('employee_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
                <div class="form-group">
                    <label class="form-label">Department</label>
                    <input type="text" name="department" class="form-control {{ $errors->has('department') ? 'is-invalid' : '' }}"
                        value="{{ old('department') }}" maxlength="100" placeholder="e.g. Product">
                    @error('department') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
            </div>

            <hr class="form-divider">

            {{-- Password --}}
            <div class="form-row">
                <div class="form-group">
                    <label class="form-label">Password <span class="req">*</span></label>
                    <div class="pw-wrap">
                        <input type="password" name="password" id="pw1" class="form-control {{ $errors->has('password') ? 'is-invalid' : '' }}" required minlength="8">
                        <button type="button" class="pw-toggle" onclick="togglePw('pw1',this)"><i class="fas fa-eye"></i></button>
                    </div>
                    @error('password') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    <div class="pw-hint">Min 8 chars. Must include <span class="pw-req">uppercase</span>, <span class="pw-req">lowercase</span>, and a <span class="pw-req">number</span>.</div>
                </div>
                <div class="form-group">
                    <label class="form-label">Confirm Password <span class="req">*</span></label>
                    <div class="pw-wrap">
                        <input type="password" name="password_confirmation" id="pw2" class="form-control" required minlength="8">
                        <button type="button" class="pw-toggle" onclick="togglePw('pw2',this)"><i class="fas fa-eye"></i></button>
                    </div>
                </div>
            </div>

            <div style="display:flex;gap:.75rem;margin-top:1.5rem;">
                <button type="submit" class="btn-primary" style="padding:.65rem 1.5rem;">
                    <i class="fas fa-user-plus"></i> Create User
                </button>
                <a href="{{ route('admin.users.index') }}" class="btn-secondary" style="padding:.65rem 1.5rem;">Cancel</a>
            </div>
        </form>
    </div>
</div>

@endsection

@push('scripts')
<script>
function togglePw(id, btn) {
    const input = document.getElementById(id);
    const showing = input.type === 'text';
    input.type = showing ? 'password' : 'text';
    btn.innerHTML = showing ? '<i class="fas fa-eye"></i>' : '<i class="fas fa-eye-slash"></i>';
}
</script>
@endpush