{{-- resources/views/admin/team/_form.blade.php --}}
<div style="display:grid;grid-template-columns:1fr 320px;gap:1.25rem;">

    {{-- Main --}}
    <div style="display:flex;flex-direction:column;gap:1rem;">

        <div class="admin-card" style="display:flex;flex-direction:column;gap:0.85rem;">
            <h2 style="font-family:'Fraunces',serif;font-size:0.95rem;font-weight:700;padding-bottom:0.75rem;border-bottom:1px solid #f3f4f6;">Personal Information</h2>

            <div style="display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;">
                <div>
                    <label class="form-label">Full Name <span style="color:#dc2626;">*</span></label>
                    <input type="text" name="name" value="{{ old('name', $member?->name) }}"
                           placeholder="e.g. Sunusi Kiru" class="form-field" required>
                </div>
                <div>
                    <label class="form-label">Job Title / Role <span style="color:#dc2626;">*</span></label>
                    <input type="text" name="role" value="{{ old('role', $member?->role) }}"
                           placeholder="e.g. Lead Full-Stack Developer" class="form-field" required>
                </div>
            </div>

            <div>
                <label class="form-label">Work Email <span style="color:#dc2626;">*</span></label>
                <input type="email" name="email"
                       value="{{ old('email', $member?->email ?? $member?->user?->email) }}"
                       placeholder="name@kirudevtechnologies.com" class="form-field" required>
                @if($member)
                <p style="font-size:0.68rem;color:#9ca3af;margin-top:0.2rem;">Changing this updates the workspace login email.</p>
                @endif
            </div>

            <div>
                <label class="form-label">Department <span style="color:#dc2626;">*</span></label>
                <select name="department" class="form-field" required>
                    <option value="" disabled {{ !old('department', $member?->department) ? 'selected' : '' }}>Select…</option>
                    <option value="executive" {{ old('department', $member?->department) === 'executive' ? 'selected' : '' }}>Executive Management</option>
                    <option value="technical"  {{ old('department', $member?->department) === 'technical'  ? 'selected' : '' }}>Technical & Security</option>
                    <option value="marketing"  {{ old('department', $member?->department) === 'marketing'  ? 'selected' : '' }}>Marketing & Growth</option>
                    <option value="support"    {{ old('department', $member?->department) === 'support'    ? 'selected' : '' }}>Customer Care & Support</option>
                </select>
            </div>

            <div>
                <label class="form-label">Bio</label>
                <textarea name="bio" rows="4" class="form-field"
                          placeholder="A short professional biography shown on the public team page…">{{ old('bio', $member?->bio) }}</textarea>
            </div>
        </div>

        <div class="admin-card" style="display:flex;flex-direction:column;gap:0.85rem;">
            <h2 style="font-family:'Fraunces',serif;font-size:0.95rem;font-weight:700;padding-bottom:0.75rem;border-bottom:1px solid #f3f4f6;">Social & Skills</h2>

            <div style="display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;">
                <div>
                    <label class="form-label">LinkedIn URL</label>
                    <input type="url" name="linkedin" value="{{ old('linkedin', $member?->linkedin) }}"
                           placeholder="https://linkedin.com/in/…" class="form-field">
                </div>
                <div>
                    <label class="form-label">GitHub Username</label>
                    <input type="text" name="github" value="{{ old('github', $member?->github) }}"
                           placeholder="username" class="form-field">
                </div>
                <div>
                    <label class="form-label">Twitter / X</label>
                    <input type="text" name="twitter" value="{{ old('twitter', $member?->twitter) }}"
                           placeholder="@handle" class="form-field">
                </div>
                <div>
                    <label class="form-label">Photo URL</label>
                    <input type="text" name="photo" value="{{ old('photo', $member?->photo) }}"
                           placeholder="https://…" class="form-field">
                </div>
            </div>

            <div>
                <label class="form-label">Skills</label>
                <input type="text" name="skills"
                       value="{{ old('skills', is_array($member?->skills) ? implode(', ', $member->skills) : '') }}"
                       placeholder="Laravel, PHP, Vue.js, MySQL" class="form-field">
                <p style="font-size:0.68rem;color:#9ca3af;margin-top:0.2rem;">Comma-separated. Shown on public profile & workspace sidebar.</p>
            </div>
        </div>
    </div>

    {{-- Sidebar --}}
    <div style="display:flex;flex-direction:column;gap:1rem;">

        {{-- Workspace access --}}
        <div class="admin-card" style="display:flex;flex-direction:column;gap:0.85rem;">
            <h2 style="font-family:'Fraunces',serif;font-size:0.95rem;font-weight:700;padding-bottom:0.75rem;border-bottom:1px solid #f3f4f6;">Workspace Access</h2>

            <div>
                <label class="form-label">Permission Level <span style="color:#dc2626;">*</span></label>
                <select name="user_role" class="form-field" required>
                    <option value="member"      {{ old('user_role', $member?->user?->role ?? 'member') === 'member'      ? 'selected' : '' }}>Member — Own workspace only</option>
                    <option value="admin"       {{ old('user_role', $member?->user?->role) === 'admin'       ? 'selected' : '' }}>Admin — CMS + manage team</option>
                    <option value="super_admin" {{ old('user_role', $member?->user?->role) === 'super_admin' ? 'selected' : '' }}>Super Admin — Full access</option>
                </select>
                <p style="font-size:0.68rem;color:#9ca3af;margin-top:0.25rem;">
                    Members: workspace only. Admins: CMS access. Super Admins: all workspaces + full CMS.
                </p>
            </div>

            <div style="display:flex;align-items:center;gap:0.6rem;padding:0.65rem;background:#f8f8fa;border-radius:8px;">
                <input type="hidden" name="is_active" value="0">
                <input type="checkbox" id="is_active" name="is_active" value="1"
                       {{ old('is_active', $member?->is_active ?? true) ? 'checked' : '' }}
                       style="width:1rem;height:1rem;accent-color:#2d3aff;flex-shrink:0;">
                <div>
                    <label for="is_active" style="font-size:0.8rem;font-weight:600;color:#0f0f14;cursor:pointer;display:block;">Active Member</label>
                    <p style="font-size:0.65rem;color:#9ca3af;margin-top:0.1rem;">Inactive members cannot log in to their workspace.</p>
                </div>
            </div>

            <div>
                <label class="form-label">Sort Order</label>
                <input type="number" name="sort_order" min="0"
                       value="{{ old('sort_order', $member?->sort_order ?? 0) }}"
                       class="form-field">
                <p style="font-size:0.68rem;color:#9ca3af;margin-top:0.2rem;">Lower numbers appear first on the public team page.</p>
            </div>
        </div>

        {{-- Save --}}
        <div class="admin-card" style="display:flex;flex-direction:column;gap:0.6rem;">
            <button type="submit" class="btn btn-primary" style="justify-content:center;width:100%;">
                {{ $member ? 'Update Member' : 'Create Member & Account' }}
            </button>
            <a href="{{ route('admin.team.index') }}" class="btn btn-outline" style="justify-content:center;width:100%;">Cancel</a>

            @if(!$member)
            <div style="padding:0.65rem;background:#fef9c3;border:1px solid #fde68a;border-radius:8px;margin-top:0.25rem;">
                <p style="font-size:0.7rem;color:#854d0e;line-height:1.55;">
                    ⚠️ A workspace account will be created automatically. A random temporary password will be displayed — note it down and share it securely with the new team member.
                </p>
            </div>
            @endif
        </div>
    </div>
</div>