@extends('layouts.app')
@section('title', 'My Profile')
@section('page-title', 'My Profile')

@section('content')
<div class="row justify-content-center">
<div class="col-xl-8 col-lg-10">

<div class="row g-4">
    {{-- Profile Card --}}
    <div class="col-lg-4">
        <div class="lp-card text-center" style="padding:30px 20px;">
            <img src="{{ $user->avatar_url }}" style="width:80px;height:80px;border-radius:50%;object-fit:cover;margin-bottom:14px;" alt="">
            <h6 style="font-weight:700; font-size:16px; margin-bottom:4px;">{{ $user->name }}</h6>
            <div style="color:var(--lp-muted); font-size:13px; margin-bottom:8px;">{{ $user->email }}</div>
            <span class="lp-badge bg-{{ $user->role_badge_color }} bg-opacity-15 text-{{ $user->role_badge_color }}">
                {{ $user->role_label }}
            </span>
            <hr style="margin:16px 0;">
            <div style="font-size:12.5px; color:var(--lp-muted);">
                <div class="d-flex justify-content-between mb-1">
                    <span>Member since</span>
                    <strong>{{ $user->created_at->format('M Y') }}</strong>
                </div>
                <div class="d-flex justify-content-between">
                    <span>Last login</span>
                    <strong>{{ $user->last_login_at?->diffForHumans() ?? 'N/A' }}</strong>
                </div>
            </div>
        </div>
    </div>

    {{-- Edit Profile --}}
    <div class="col-lg-8">
        <div class="lp-card mb-4">
            <div class="lp-card-header"><span><i class="bi bi-person me-2 text-primary"></i>Edit Profile</span></div>
            <div class="lp-card-body">
                <form method="POST" action="{{ route('profile.update') }}" enctype="multipart/form-data">
                    @csrf @method('PUT')
                    <div class="row g-3">
                        <div class="col-12">
                            <label class="form-label">Full Name</label>
                            <input type="text" name="name" value="{{ old('name', $user->name) }}" class="form-control" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Email Address</label>
                            <input type="email" value="{{ $user->email }}" class="form-control" readonly
                                   style="background:var(--lp-bg); cursor:not-allowed;">
                            <div style="font-size:11px; color:var(--lp-muted); margin-top:3px;">Contact admin to change email.</div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Phone</label>
                            <input type="tel" name="phone" value="{{ old('phone', $user->phone) }}" class="form-control" placeholder="+1 000 000 0000">
                        </div>
                        <div class="col-12">
                            <label class="form-label">Profile Photo</label>
                            <input type="file" name="avatar" class="form-control" accept="image/*">
                            <div style="font-size:11px; color:var(--lp-muted); margin-top:3px;">Max 2MB. JPG, PNG, GIF accepted.</div>
                        </div>
                    </div>
                    <div class="mt-3">
                        <button type="submit" class="btn-primary-lp">
                            <i class="bi bi-check-lg"></i> Save Profile
                        </button>
                    </div>
                </form>
            </div>
        </div>

        {{-- Change Password --}}
        <div class="lp-card">
            <div class="lp-card-header"><span><i class="bi bi-shield-lock me-2 text-primary"></i>Change Password</span></div>
            <div class="lp-card-body">
                <form method="POST" action="{{ route('profile.password') }}">
                    @csrf @method('PUT')
                    <div class="row g-3">
                        <div class="col-12">
                            <label class="form-label">Current Password</label>
                            <input type="password" name="current_password"
                                   class="form-control @error('current_password') is-invalid @enderror"
                                   placeholder="••••••••" required>
                            @error('current_password')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">New Password</label>
                            <input type="password" name="password"
                                   class="form-control @error('password') is-invalid @enderror"
                                   placeholder="Min. 8 characters" required>
                            @error('password')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Confirm New Password</label>
                            <input type="password" name="password_confirmation" class="form-control" placeholder="Repeat" required>
                        </div>
                    </div>
                    <div class="mt-3">
                        <button type="submit" class="btn btn-outline-primary" style="border-radius:9px; font-size:13.5px;">
                            <i class="bi bi-shield-lock me-1"></i> Update Password
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</div>
</div>
@endsection