@extends('layouts.dashboard')
@section('title', 'My Profile')
@section('page-title', 'My Profile')
@section('content')
<div class="row">
    <div class="col-lg-4">
        <div class="content-card text-center">
            <img src="{{ $user->avatarUrl() }}" alt="avatar" class="rounded-circle mb-3" style="width:140px;height:140px;object-fit:cover;border:4px solid var(--accent);">
            <h3 class="mb-1">{{ $user->name }}</h3>
            <div class="text-muted">@{{ $user->username }}</div>
            <span class="user-role-badge role-{{ $user->role }} mt-2 d-inline-block">{{ $user->role }}</span>
            <hr>
            <form method="POST" action="{{ route('profile.avatar') }}" enctype="multipart/form-data">
                @csrf
                <div class="mb-2 text-start">
                    <label class="form-label small">Update Avatar</label>
                    <input type="file" name="avatar" class="form-control form-control-sm" accept="image/*" required>
                </div>
                <button class="btn btn-outline-primary btn-sm w-100">Upload</button>
            </form>
        </div>

        <div class="content-card">
            <div class="content-card-header"><h3>Change Password</h3></div>
            <form method="POST" action="{{ route('profile.password') }}">
                @csrf @method('PUT')
                <div class="mb-2">
                    <label class="form-label">Current Password</label>
                    <input type="password" name="current_password" class="form-control" required>
                </div>
                <div class="mb-2">
                    <label class="form-label">New Password</label>
                    <input type="password" name="password" class="form-control" required>
                </div>
                <div class="mb-3">
                    <label class="form-label">Confirm New</label>
                    <input type="password" name="password_confirmation" class="form-control" required>
                </div>
                <button class="btn btn-primary w-100">Change Password</button>
            </form>
        </div>
    </div>

    <div class="col-lg-8">
        <div class="content-card">
            <div class="content-card-header"><h3>Profile Information</h3></div>
            <form method="POST" action="{{ route('profile.update') }}">
                @csrf @method('PUT')
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">Name</label>
                        <input type="text" name="name" class="form-control" value="{{ old('name', $user->name) }}" required>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Username</label>
                        <input type="text" name="username" class="form-control" value="{{ old('username', $user->username) }}" required>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Email</label>
                        <input type="email" name="email" class="form-control" value="{{ old('email', $user->email) }}" required>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Phone</label>
                        <input type="text" name="phone" class="form-control" value="{{ old('phone', $user->phone) }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Country</label>
                        <input type="text" name="country" class="form-control" value="{{ old('country', $user->country) }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Website</label>
                        <input type="url" name="website" class="form-control" value="{{ old('website', $user->website) }}">
                    </div>
                    <div class="col-12">
                        <label class="form-label">Bio</label>
                        <textarea name="bio" rows="4" class="form-control">{{ old('bio', $user->bio) }}</textarea>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Twitter</label>
                        <input type="text" name="twitter" class="form-control" value="{{ old('twitter', $user->twitter) }}">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Facebook</label>
                        <input type="text" name="facebook" class="form-control" value="{{ old('facebook', $user->facebook) }}">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">LinkedIn</label>
                        <input type="text" name="linkedin" class="form-control" value="{{ old('linkedin', $user->linkedin) }}">
                    </div>
                </div>
                <div class="mt-4 text-end">
                    <button class="btn btn-primary">Save Profile</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection