@extends('layouts.app')
@section('title', 'My Profile — CareerPath')

@push('styles')
<style>
    .page-header {
        background: linear-gradient(135deg, rgba(108,63,232,.15) 0%, rgba(168,85,247,.08) 100%);
        border-bottom: 1px solid var(--border);
        padding: 40px 5% 32px;
    }
    .page-header h1 {
        font-family: 'Outfit', sans-serif;
        font-size: 1.8rem;
        font-weight: 800;
        background: var(--gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    .page-header p { color: var(--text-muted); font-size: .9rem; margin-top: 4px; }

    .profile-wrap {
        max-width: 800px;
        margin: 40px auto;
        padding: 0 5%;
    }

    .pcard {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 16px;
        padding: 28px;
        margin-bottom: 24px;
    }
    .pcard-title {
        font-weight: 700;
        font-size: 1rem;
        margin-bottom: 22px;
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--text);
    }
    .pcard-title i { color: #A78BFA; }

    /* Avatar */
    .avatar-row {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-bottom: 24px;
        padding-bottom: 24px;
        border-bottom: 1px solid var(--border);
    }
    .avatar {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        background: var(--gradient);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Outfit', sans-serif;
        font-size: 1.8rem;
        font-weight: 800;
        color: white;
        flex-shrink: 0;
    }
    .avatar-info h3 { font-weight: 700; font-size: 1.1rem; }
    .avatar-info span {
        font-size: .8rem;
        color: var(--text-muted);
        background: rgba(108,63,232,.15);
        border: 1px solid rgba(108,63,232,.25);
        padding: 3px 10px;
        border-radius: 20px;
        display: inline-block;
        margin-top: 4px;
        text-transform: capitalize;
    }

    /* Form */
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    @media(max-width:600px){ .form-row { grid-template-columns: 1fr; } }

    .form-group { margin-bottom: 18px; }
    .form-label {
        display: block;
        font-size: .78rem;
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: .5px;
        margin-bottom: 7px;
    }
    .form-control {
        width: 100%;
        padding: 11px 14px;
        background: var(--dark-3);
        border: 1px solid var(--border);
        border-radius: 10px;
        color: var(--text);
        font-size: .9rem;
        font-family: inherit;
        outline: none;
        transition: border-color .2s, box-shadow .2s;
    }
    .form-control:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(108,63,232,.15);
    }
    select.form-control option { background: var(--dark-3); }

    .btn-primary {
        background: var(--gradient);
        color: white;
        border: none;
        padding: 12px 28px;
        border-radius: 10px;
        font-weight: 600;
        font-size: .9rem;
        cursor: pointer;
        transition: opacity .2s, transform .2s;
        font-family: inherit;
    }
    .btn-primary:hover { opacity: .9; transform: translateY(-1px); }

    .alert-success {
        background: rgba(0,212,161,.1);
        border: 1px solid rgba(0,212,161,.25);
        color: #00D4A1;
        padding: 12px 16px;
        border-radius: 10px;
        font-size: .88rem;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .alert-error {
        background: rgba(239,68,68,.1);
        border: 1px solid rgba(239,68,68,.25);
        color: #f87171;
        padding: 12px 16px;
        border-radius: 10px;
        font-size: .88rem;
        margin-bottom: 20px;
    }
    .alert-error ul { margin: 6px 0 0 16px; }

    .divider {
        border: none;
        border-top: 1px solid var(--border);
        margin: 22px 0;
    }

    .section-sub {
        font-size: .8rem;
        color: var(--text-muted);
        margin-bottom: 16px;
    }
</style>
@endpush

@section('content')

<div class="page-header">
    <h1>My Profile</h1>
    <p>Manage your account information and password</p>
</div>

<div class="profile-wrap">

    @if(session('success'))
    <div class="alert-success">
        <i class="fas fa-check-circle"></i> {{ session('success') }}
    </div>
    @endif

    @if($errors->any())
    <div class="alert-error">
        <strong><i class="fas fa-exclamation-circle"></i> Please fix the following:</strong>
        <ul>
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    {{-- ── Profile Card ── --}}
    <div class="pcard">
        <div class="avatar-row">
            <div class="avatar">{{ strtoupper(substr($user->name, 0, 1)) }}</div>
            <div class="avatar-info">
                <h3>{{ $user->name }}</h3>
                <span>{{ $user->role }}</span>
            </div>
        </div>

        <div class="pcard-title"><i class="fas fa-user-edit"></i> Personal Information</div>

        <form action="{{ route('profile.update') }}" method="POST">
            @csrf

            <div class="form-row">
                <div class="form-group">
                    <label class="form-label">Full Name</label>
                    <input type="text" name="name" class="form-control"
                           value="{{ old('name', $user->name) }}" required>
                </div>
                <div class="form-group">
                    <label class="form-label">Email Address</label>
                    <input type="email" name="email" class="form-control"
                           value="{{ old('email', $user->email) }}" required>
                </div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label class="form-label">City</label>
                    <input type="text" name="city" class="form-control"
                           value="{{ old('city', $user->city) }}" placeholder="e.g. Lahore">
                </div>
                <div class="form-group">
                    <label class="form-label">Education Level</label>
                    <select name="education_level" class="form-control">
                        @foreach(['matric' => 'Matric', 'fsc' => 'FSc / Inter', 'graduate' => 'Graduate', 'postgraduate' => 'Postgraduate', 'phd' => 'PhD'] as $val => $label)
                            <option value="{{ $val }}" {{ old('education_level', $user->education_level) === $val ? 'selected' : '' }}>
                                {{ $label }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>

            <hr class="divider">

            <div class="pcard-title" style="margin-bottom:6px"><i class="fas fa-lock"></i> Change Password</div>
            <p class="section-sub">Leave blank to keep your current password.</p>

            <div class="form-row">
                <div class="form-group">
                    <label class="form-label">New Password</label>
                    <input type="password" name="password" class="form-control"
                           placeholder="Min 8 characters">
                </div>
                <div class="form-group">
                    <label class="form-label">Confirm New Password</label>
                    <input type="password" name="password_confirmation" class="form-control"
                           placeholder="Repeat new password">
                </div>
            </div>

            <button type="submit" class="btn-primary">
                <i class="fas fa-save"></i> Save Changes
            </button>
        </form>
    </div>

    {{-- ── Account Info Card ── --}}
    <div class="pcard">
        <div class="pcard-title"><i class="fas fa-info-circle"></i> Account Details</div>
        <div style="display:grid; grid-template-columns:1fr 1fr; gap:14px;">
            <div>
                <div class="form-label">Member Since</div>
                <div style="font-size:.9rem">{{ $user->created_at->format('d M Y') }}</div>
            </div>
            <div>
                <div class="form-label">Account Role</div>
                <div style="font-size:.9rem;text-transform:capitalize">{{ $user->role }}</div>
            </div>
            <div>
                <div class="form-label">Email Verified</div>
                <div style="font-size:.9rem">
                    @if($user->email_verified_at)
                        <span style="color:#00D4A1"><i class="fas fa-check-circle"></i> Verified</span>
                    @else
                        <span style="color:#FF6B35"><i class="fas fa-times-circle"></i> Not verified</span>
                    @endif
                </div>
            </div>
            <div>
                <div class="form-label">Last Updated</div>
                <div style="font-size:.9rem">{{ $user->updated_at->format('d M Y') }}</div>
            </div>
        </div>
    </div>

</div>
@endsection