@extends('layouts.app')
@section('title', 'Add New User — HIGHRA CRM')
@section('header', 'Add New User')

@section('content')
<div style="max-width: 860px;">
    <div style="font-size: 12px; color: #8e9ab4; margin-bottom: 8px;">
        <a href="{{ route('users') }}" style="color: #6d59ff; text-decoration: none;">← Back to Users Directory</a>
    </div>

    <!-- FLASH NOTIFICATIONS -->
    @if(isset($errors) && $errors->any())
        <div class="err" style="margin-bottom: 16px;">
            <ul style="margin: 0; padding-left: 18px;">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="panel" style="margin-top: 0;">
        <div style="border-bottom: 1px solid #1e2a47; padding-bottom: 14px; margin-bottom: 20px;">
            <h1 style="margin: 0 0 4px 0; font-size: 20px;">Register New System User</h1>
            <p style="color: #8e9ab4; margin: 0; font-size: 13px;">Create an employee profile, assign security roles, and configure organization hierarchy.</p>
        </div>

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

            <!-- SECTION 1: BASIC INFORMATION -->
            <div style="margin-bottom: 24px;">
                <h3 style="color: #818cf8; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 12px 0;">
                    1. Basic & Contact Information
                </h3>
                
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px;">
                    <div>
                        <label>First Name *</label>
                        <input type="text" name="first_name" value="{{ old('first_name') }}" required placeholder="e.g. Rahul">
                    </div>
                    <div>
                        <label>Last Name</label>
                        <input type="text" name="last_last" value="{{ old('last_name') }}" placeholder="e.g. Sharma">
                    </div>
                </div>

                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px;">
                    <div>
                        <label>Official Email Address *</label>
                        <input type="email" name="email" value="{{ old('email') }}" required placeholder="e.g. rahul@highratech.com">
                    </div>
                    <div>
                        <label>Mobile / Phone Number</label>
                        <input type="text" name="mobile" value="{{ old('mobile') }}" placeholder="e.g. +91 98765 43210">
                    </div>
                </div>

                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
                    <div>
                        <label>Employee ID</label>
                        <input type="text" name="employee_id" value="{{ old('employee_id') }}" placeholder="e.g. EMP-104">
                    </div>
                    <div>
                        <label>Date of Joining</label>
                        <input type="date" name="joining_date" value="{{ old('joining_date', date('Y-m-d')) }}">
                    </div>
                </div>
            </div>

            <hr style="border: 0; border-top: 1px solid #1c2742; margin: 20px 0;">

            <!-- SECTION 2: ORGANIZATION HIERARCHY & ROLE -->
            <div style="margin-bottom: 24px;">
                <h3 style="color: #818cf8; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 12px 0;">
                    2. Organization & Department
                </h3>

                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px;">
                    <div>
                        <label>Department *</label>
                        <select name="department" required>
                            @foreach($departments as $dept)
                                <option value="{{ $dept }}" {{ old('department') == $dept ? 'selected' : '' }}>
                                    {{ $dept }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label>Designation / Job Title *</label>
                        <input type="text" name="designation" value="{{ old('designation') }}" required placeholder="e.g. Senior Sales Executive">
                    </div>
                </div>

                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px;">
                    <div>
                        <label>Reporting Manager</label>
                        <select name="reporting_to">
                            <option value="">None (Top Level / Self-Managed)</option>
                            @foreach($managers as $m)
                                <option value="{{ $m->id }}" {{ old('reporting_to') == $m->id ? 'selected' : '' }}>
                                    {{ $m->name }} ({{ ucfirst($m->role) }})
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label>Branch / Office Location</label>
                        <select name="branch_location">
                            @foreach($branches as $b)
                                <option value="{{ $b }}" {{ old('branch_location') == $b ? 'selected' : '' }}>
                                    {{ $b }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <!-- Role Selection -->
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
                    <div>
                        <label>Assigned System Role *</label>
                        <select name="role" id="roleSelect" onchange="toggleCustomRole(this.value)" required>
                            @foreach($roles as $r)
                                <option value="{{ $r->slug }}" {{ old('role', 'sales') == $r->slug ? 'selected' : '' }}>
                                    {{ $r->name }} {{ $r->is_system ? '🔒' : '' }}
                                </option>
                            @endforeach
                            <option value="__custom__">✏️ Other / Create Custom Role...</option>
                        </select>
                    </div>
                    <div id="customRoleGroup" style="display: none;">
                        <label style="color: #818cf8;">Custom Role Title *</label>
                        <input type="text" name="custom_role" id="customRoleInput" placeholder="e.g. Field Specialist, Auditor">
                    </div>
                </div>
            </div>

            <hr style="border: 0; border-top: 1px solid #1c2742; margin: 20px 0;">

            <!-- SECTION 3: ACCESS SCOPE & SECURITY -->
            <div style="margin-bottom: 24px;">
                <h3 style="color: #818cf8; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 12px 0;">
                    3. Security & Access Scopes
                </h3>

                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px;">
                    <div>
                        <label>Data Access Scope *</label>
                        <select name="access_scope" required>
                            <option value="all" {{ old('access_scope') == 'all' ? 'selected' : '' }}>All Records (Company-Wide Access)</option>
                            <option value="own" {{ old('access_scope') == 'own' ? 'selected' : '' }}>Own Records Only (Assigned Prospects)</option>
                            <option value="team" {{ old('access_scope') == 'team' ? 'selected' : '' }}>Team Records (Direct Reports + Own)</option>
                            <option value="department" {{ old('access_scope') == 'department' ? 'selected' : '' }}>Department Records</option>
                            <option value="branch" {{ old('access_scope') == 'branch' ? 'selected' : '' }}>Branch Records</option>
                        </select>
                        <small style="color: #8e9ab4; font-size: 11px;">Governs visibility across Leads, Pipeline, and Customers.</small>
                    </div>

                    <div>
                        <label>Initial Password * (Min 6 characters)</label>
                        <input type="password" name="password" required placeholder="••••••••" minlength="6">
                    </div>
                </div>

                <div style="display: flex; gap: 24px; flex-wrap: wrap; margin-top: 16px; padding: 12px; background: #0b1326; border-radius: 8px; border: 1px solid #1d2b4a;">
                    <label style="display: flex; align-items: center; gap: 8px; cursor: pointer; margin: 0;">
                        <input type="checkbox" name="active" value="1" checked style="width: auto; margin: 0;">
                        <span style="color: #ffffff; font-weight: 500;">✓ Active Account (User can login immediately)</span>
                    </label>

                    <label style="display: flex; align-items: center; gap: 8px; cursor: pointer; margin: 0;">
                        <input type="checkbox" name="two_factor_enabled" value="1" style="width: auto; margin: 0;">
                        <span style="color: #cbd5e1;">🛡️ Enforce Two-Factor Authentication (2FA)</span>
                    </label>
                </div>
            </div>

            <!-- ACTIONS ROW -->
            <div style="display: flex; gap: 10px; margin-top: 24px; padding-top: 18px; border-top: 1px solid #1c2742;">
                <button type="submit" class="btn">
                    Create User Account
                </button>
                <a href="{{ route('users') }}" class="btn btn-secondary" style="text-decoration: none;">
                    Cancel
                </a>
            </div>
        </form>
    </div>
</div>

<script>
function toggleCustomRole(val) {
    const group = document.getElementById('customRoleGroup');
    const input = document.getElementById('customRoleInput');
    if (val === '__custom__') {
        group.style.display = 'block';
        input.required = true;
    } else {
        group.style.display = 'none';
        input.required = false;
    }
}
</script>
@endsection