{{-- resources/views/workspace/profile/edit.blade.php --}}
@extends('workspace.layouts.workspace')
@section('title', 'My Profile')
@section('page-title', 'My Profile')

@section('ws-content')

<div style="display:grid; grid-template-columns:1fr 1fr; gap:1.25rem;">

    {{-- Profile info --}}
    <div class="ws-card">
        <h3 style="font-family:'Fraunces',serif;font-size:0.95rem;font-weight:700;padding-bottom:0.85rem;border-bottom:1px solid #f3f4f6;margin-bottom:1rem;">Profile Information</h3>
        <form action="{{ route('workspace.profile.update') }}" method="POST">
            @csrf @method('PUT')
            <div style="display:flex;flex-direction:column;gap:0.85rem;">

                {{-- Current photo --}}
                @if($member->photo)
                <div style="display:flex;align-items:center;gap:0.75rem;padding:0.75rem;background:#f8f8fa;border-radius:8px;">
                    <img src="{{ $member->photo }}" alt="{{ $user->name }}" style="width:3.5rem;height:3.5rem;border-radius:10px;object-fit:cover;">
                    <div>
                        <p style="font-size:0.78rem;font-weight:600;color:#0f0f14;">{{ $member->name }}</p>
                        <p style="font-size:0.7rem;color:#9ca3af;">{{ $member->role }}</p>
                    </div>
                </div>
                @endif

                <div>
                    <label class="form-label">Full Name *</label>
                    <input type="text" name="name" value="{{ old('name', $member->name) }}" class="form-field" required>
                </div>
                <div>
                    <label class="form-label">Profile Photo URL</label>
                    <input type="text" name="photo" value="{{ old('photo', $member->photo) }}" placeholder="https://…" class="form-field">
                </div>
                <div>
                    <label class="form-label">Bio</label>
                    <textarea name="bio" rows="4" class="form-field" placeholder="Tell your colleagues about yourself…">{{ old('bio', $member->bio) }}</textarea>
                </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" class="form-field">
                    <p style="font-size:0.68rem;color:#9ca3af;margin-top:0.25rem;">Comma-separated.</p>
                </div>

                <div style="border-top:1px solid #f3f4f6;padding-top:0.85rem;">
                    <p style="font-size:0.72rem;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:0.75rem;">Social Links</p>
                    <div style="display:flex;flex-direction:column;gap:0.6rem;">
                        <input type="url" name="linkedin" value="{{ old('linkedin', $member->linkedin) }}" placeholder="LinkedIn URL" class="form-field">
                        <input type="text" name="github" value="{{ old('github', $member->github) }}" placeholder="GitHub username" class="form-field">
                        <input type="text" name="twitter" value="{{ old('twitter', $member->twitter) }}" placeholder="Twitter @handle" class="form-field">
                    </div>
                </div>

                <button type="submit" class="btn btn-primary" style="justify-content:center;">Save Profile</button>
            </div>
        </form>
    </div>

    {{-- Security --}}
    <div style="display:flex;flex-direction:column;gap:1rem;">
        <div class="ws-card">
            <h3 style="font-family:'Fraunces',serif;font-size:0.95rem;font-weight:700;padding-bottom:0.85rem;border-bottom:1px solid #f3f4f6;margin-bottom:1rem;">Account Details</h3>
            <div style="display:flex;flex-direction:column;gap:0.5rem;">
                <div style="display:flex;justify-content:space-between;padding:0.5rem 0;border-bottom:1px solid #f9fafb;">
                    <span style="font-size:0.75rem;color:#9ca3af;">Email</span>
                    <span style="font-size:0.78rem;font-weight:500;color:#0f0f14;">{{ $user->email }}</span>
                </div>
                <div style="display:flex;justify-content:space-between;padding:0.5rem 0;border-bottom:1px solid #f9fafb;">
                    <span style="font-size:0.75rem;color:#9ca3af;">Department</span>
                    <span style="font-size:0.78rem;font-weight:500;color:#0f0f14;">{{ ucfirst($member->department) }}</span>
                </div>
                <div style="display:flex;justify-content:space-between;padding:0.5rem 0;">
                    <span style="font-size:0.75rem;color:#9ca3af;">Role</span>
                    <span style="font-size:0.78rem;font-weight:500;color:#0f0f14;">{{ $member->role }}</span>
                </div>
            </div>
        </div>

        <div class="ws-card">
            <h3 style="font-family:'Fraunces',serif;font-size:0.95rem;font-weight:700;padding-bottom:0.85rem;border-bottom:1px solid #f3f4f6;margin-bottom:1rem;">Change Password</h3>
            <form action="{{ route('workspace.profile.password') }}" method="POST">
                @csrf @method('PUT')
                <div style="display:flex;flex-direction:column;gap:0.65rem;">
                    <div>
                        <label class="form-label">Current Password *</label>
                        <input type="password" name="current_password" class="form-field" required autocomplete="current-password">
                        @error('current_password')<p style="font-size:0.72rem;color:#dc2626;margin-top:0.25rem;">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="form-label">New Password *</label>
                        <input type="password" name="password" class="form-field" required autocomplete="new-password">
                    </div>
                    <div>
                        <label class="form-label">Confirm New Password *</label>
                        <input type="password" name="password_confirmation" class="form-field" required autocomplete="new-password">
                        @error('password')<p style="font-size:0.72rem;color:#dc2626;margin-top:0.25rem;">{{ $message }}</p>@enderror
                    </div>
                    <button type="submit" class="btn btn-outline" style="justify-content:center;">Update Password</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection