@extends('layouts.app')

@section('page_title', 'Profile')
@section('page_subtitle', 'Update your details, image, and password')

@section('content')
    <section class="grid grid-2">
        <div class="card card-pad">
            <div class="section-head">
                <div>
                    <h2>Profile Details</h2>
                    <p>Edit account details and upload an avatar.</p>
                </div>
            </div>

            <form method="POST" action="{{ route('profile.update') }}" enctype="multipart/form-data" class="form-grid">
                @csrf
                @method('PUT')
                <label>
                    <span>Name</span>
                    <input type="text" name="name" value="{{ old('name', auth()->user()->name) }}" required>
                </label>
                <label>
                    <span>Email</span>
                    <input type="email" name="email" value="{{ old('email', auth()->user()->email) }}" required>
                </label>
                <label>
                    <span>Phone</span>
                    <input type="text" name="phone" value="{{ old('phone', auth()->user()->phone) }}">
                </label>

                <label>
                    <span>Profile Image</span>
                    <input type="file" name="profile_image" accept="image/*">
                </label>
                @if (auth()->user()->profile_image)
                    <div>
                        <div class="muted">Current image</div>
                        <img src="{{ asset('storage/' . auth()->user()->profile_image) }}" alt="Profile image" style="max-width:120px;border-radius:16px;">
                    </div>
                @endif
                <button class="btn btn-primary" type="submit">Update Profile</button>
            </form>
        </div>

        <div class="card card-pad">
            <div class="section-head">
                <div>
                    <h2>Change Password</h2>
                    <p>Keep the account secure with a new password.</p>
                </div>
            </div>
            <form method="POST" action="{{ route('password.update') }}" class="form-grid">
                @csrf
                @method('PUT')
                <label>
                    <span>Current Password</span>
                    <input type="password" name="current_password" required>
                </label>
                <label>
                    <span>New Password</span>
                    <input type="password" name="password" required>
                </label>
                <label>
                    <span>Confirm Password</span>
                    <input type="password" name="password_confirmation" required>
                </label>
                <button class="btn btn-primary" type="submit">Update Password</button>
            </form>
        </div>
    </section>

@endsection