@extends('layouts.user')

@section('title', 'Profile Settings | Smart Dermatology')

@push('styles')
    <style>
        .profile-shell { background: linear-gradient(180deg, #ffffff 0%, #fff6f8 100%); }
        .profile-card { border: 0; border-radius: 24px; box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08); }
        .profile-chip { background: #fff0f3; color: var(--brand-pink); border-radius: 999px; padding: 8px 16px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
    </style>
@endpush

@section('content')
    <section class="hero-mini" style="height: 60vh; background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1576091160550-2173dba999ef?auto=format&fit=crop&w=1350&q=80'); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; color: white;">
        <div class="container text-center animate__animated animate__fadeIn">
            <h1 class="display-3 fw-bold">Profile <span style="color: var(--brand-pink);">Settings</span></h1>
            <p class="lead mb-4">Manage your account information and keep your password secure.</p>
        </div>
    </section>

    <section class="py-5 profile-shell">
        <div class="container">
            @if (session('status'))
                <div class="alert alert-success rounded-4 mb-4">{{ session('status') }}</div>
            @endif

            <div class="row g-4">
                <div class="col-lg-4">
                    <div class="card profile-card p-4 h-100">
                        <span class="profile-chip mb-3"><i class="fas fa-user"></i> User Profile</span>
                        <h3 class="fw-bold">{{ auth()->user()->name }}</h3>
                        <p class="text-muted mb-2">{{ auth()->user()->email }}</p>
                        <p class="text-muted mb-0">Use this page to keep your details accurate and your account protected.</p>
                    </div>
                </div>

                <div class="col-lg-8">
                    <div class="card profile-card p-4 mb-4">
                        <h4 class="fw-bold mb-1">Basic Information</h4>
                        <p class="text-muted mb-4">Update your name and email address.</p>

                        <form method="POST" action="{{ route('user.profile.information') }}">
                            @csrf
                            @method('PATCH')
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label fw-semibold">Full Name</label>
                                    <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name', auth()->user()->name) }}" required>
                                    @error('name') <div class="invalid-feedback d-block">{{ $message }}</div> @enderror
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-semibold">Email Address</label>
                                    <input type="email" name="email" class="form-control @error('email') is-invalid @enderror" value="{{ old('email', auth()->user()->email) }}" required>
                                    @error('email') <div class="invalid-feedback d-block">{{ $message }}</div> @enderror
                                </div>
                            </div>
                            <div class="mt-4">
                                <button type="submit" class="btn btn-pink">Save Changes</button>
                            </div>
                        </form>
                    </div>

                    <div class="card profile-card p-4">
                        <h4 class="fw-bold mb-1">Change Password</h4>
                        <p class="text-muted mb-4">Choose a strong password and confirm it carefully.</p>

                        <form method="POST" action="{{ route('user.profile.password') }}">
                            @csrf
                            @method('PATCH')
                            <div class="row g-3">
                                <div class="col-12">
                                    <label class="form-label fw-semibold">Current Password</label>
                                    <input type="password" name="current_password" class="form-control @error('current_password') is-invalid @enderror" required>
                                    @error('current_password') <div class="invalid-feedback d-block">{{ $message }}</div> @enderror
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-semibold">New Password</label>
                                    <input type="password" name="password" class="form-control @error('password') is-invalid @enderror" required>
                                    @error('password') <div class="invalid-feedback d-block">{{ $message }}</div> @enderror
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-semibold">Confirm Password</label>
                                    <input type="password" name="password_confirmation" class="form-control" required>
                                </div>
                            </div>
                            <div class="mt-4">
                                <button type="submit" class="btn btn-pink">Update Password</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection