@extends('layouts.app')
@section('title', 'Edit User — ' . $user->name)
@section('header', 'Edit 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; display: flex; justify-content: space-between; align-items: flex-start;">
            <div>
                <h1 style="margin: 0 0 4px 0; font-size: 20px;">Edit User: {{ $user->name }}</h1>
                <p style="color: #8e9ab4; margin: 0; font-size: 13px;">Employee ID: {{ $user->employee_id ?? 'EMP-#'.$user->id }} · {{ $user->email }}</p>
            </div>
            <a href="{{ route('users.show', $user) }}" class="btn btn-secondary btn-sm">
                View Full Profile & Permissions →
            </a>
        </div>

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

            <!-- 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>Full Name *</label>
                        <input type="text" name="name" value="{{ old('name', $user->name) }}" required placeholder="e.g. Rahul Sharma">
                    </div>
                    <div>
                        <label>Official Email Address *</label>
                        <input type="email" name="email" value="{{ old('email', $user->email) }}" required>
                    </div>
                </div>

                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px;">
                    <div>
                        <label>Mobile Number</label>
                        <input type="text" name="mobile" value="{{ old('mobile', $user->mobile) }}" placeholder="e.g. +91 98765 43210">
                    </div>
                    <div>
                        <label>Employee ID</label>
                        <input type="text" name="employee_id" value="{{ old('employee_id', $user->employee_id) }}" placeholder="e.g. EMP-104">
                    </div>
                </div>

                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
                    <div>
                        <label>Date of Joining</label>
                        <input type="date" name="joining_date" value="{{ old('joining_date', optional($user->joining_date)->format('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', $user->department) == $dept ? 'selected' : '' }}>
                                    {{ $dept }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label>Designation / Job Title *</label>
                        <input type="text" name="designation" value="{{ old('designation', $user->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', $user->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', $user->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" required>
                            @foreach($roles as $r)
                                <option value="{{ $r->slug }}" {{ old('role', $user->role) == $r->slug ? 'selected' : '' }}>
                                    {{ $r->name }} {{ $r->is_system ? '🔒' : '' }}
                                </option>
                            @endforeach
                        </select>
                    </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', $user->access_scope) == 'all' ? 'selected' : '' }}>All Records (Company-Wide Access)</option>
                            <option value="own" {{ old('access_scope', $user->access_scope) == 'own' ? 'selected' : '' }}>Own Records Only (Assigned Prospects)</option>
                            <option value="team" {{ old('access_scope', $user->access_scope) == 'team' ? 'selected' : '' }}>Team Records (Direct Reports + Own)</option>
                            <option value="department" {{ old('access_scope', $user->access_scope) == 'department' ? 'selected' : '' }}>Department Records</option>
                            <option value="branch" {{ old('access_scope', $user->access_scope) == 'branch' ? 'selected' : '' }}>Branch Records</option>
                        </select>
                    </div>

                    <div>
                        <label>Reset Password <small style="color: #8e9ab4;">(Leave blank to keep existing password)</small></label>
                        <input type="password" name="password" placeholder="New password (optional)" 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" {{ old('active', $user->active) ? 'checked' : '' }} style="width: auto; margin: 0;">
                        <span style="color: #ffffff; font-weight: 500;">✓ Active Account</span>
                    </label>

                    <label style="display: flex; align-items: center; gap: 8px; cursor: pointer; margin: 0;">
                        <input type="checkbox" name="is_locked" value="1" {{ old('is_locked', $user->is_locked) ? 'checked' : '' }} style="width: auto; margin: 0;">
                        <span style="color: #fca5a5;">🔒 Lock Account (Prevent Login)</span>
                    </label>

                    <label style="display: flex; align-items: center; gap: 8px; cursor: pointer; margin: 0;">
                        <input type="checkbox" name="two_factor_enabled" value="1" {{ old('two_factor_enabled', $user->two_factor_enabled) ? 'checked' : '' }} 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">
                    Save Changes
                </button>
                <a href="{{ route('users') }}" class="btn btn-secondary" style="text-decoration: none;">
                    Cancel
                </a>
            </div>
        </form>
    </div>
</div>
@endsection