@extends('layouts.app')

@section('content')
<style>
    .profile-wrapper {
        max-width: 600px;
        margin: auto;
    }

    .profile-card {
        border: none;
        border-radius: 15px;
        padding: 40px 35px;
        box-shadow: rgba(0, 0, 0, 0.08) 0 4px 15px;
        background: #fff;
    }

    .profile-title {
        font-size: 26px;
        font-weight: 700;
        margin-bottom: 25px;
        text-align: center;
        color: #333;
    }

    label {
        font-weight: 600;
        color: #444;
    }

    .form-control {
        border-radius: 10px;
        padding: 10px 14px;
        font-size: 15px;
    }

    .save-btn {
        background-color: #007bff;
        color: white;
        border: none;
        padding: 12px 25px;
        font-size: 16px;
        font-weight: bold;
        border-radius: 10px;
        transition: 0.3s ease;
        width: 100%;
        margin-top: 20px;
    }

    .save-btn:hover {
        background-color: #0056b3;
        cursor: pointer;
    }
</style>

<div class="container py-5">
    <div class="profile-wrapper">
        <div class="profile-card">
            <h2 class="profile-title">Edit Profile</h2>

            <form method="POST" action="{{ route('profile.update') }}" enctype="multipart/form-data">
            @csrf
            @method('PATCH')

            {{-- Profile Photo --}}
            <div class="mb-3 text-center">
                @if(Auth::user()->profile_photo)
                    <img src="{{ asset('images/' . Auth::user()->profile_photo) }}" alt="Profile Photo" class="rounded-circle" width="120" height="120">
                @else
                    <img src="{{ asset('blank.jpg') }}" alt="Profile Photo" class="rounded-circle" width="120" height="120">
                @endif
                <input type="file" name="profile_photo" class="form-control mt-2">
            </div>


                {{-- Name --}}
                <div class="mb-3">
                    <label for="name" class="form-label">Full Name</label>
                    <input type="text" name="name" id="name"
                        class="form-control" value="{{ old('name', Auth::user()->name) }}" required>
                </div>

                {{-- Email --}}
                <div class="mb-3">
                    <label for="email" class="form-label">Email Address</label>
                    <input type="email" name="email" id="email"
                        class="form-control" value="{{ old('email', Auth::user()->email) }}" required>
                </div>

                <hr>

                {{-- Current Password --}}
                <div class="mb-3">
                    <label for="current_password" class="form-label">Current Password</label>
                    <input type="password" name="current_password" id="current_password" class="form-control" required>
                </div>

                {{-- New Password --}}
                <div class="mb-3">
                    <label for="password" class="form-label">New Password</label>
                    <input type="password" name="password" id="password" class="form-control">
                </div>

                {{-- Confirm Password --}}
                <div class="mb-3">
                    <label for="password_confirmation" class="form-label">Confirm Password</label>
                    <input type="password" name="password_confirmation" id="password_confirmation"
                        class="form-control">
                </div>

                {{-- Save Button --}}
                <button type="submit" class="save-btn">💾 Save Changes</button>
            </form>
        </div>
    </div>
</div>
@endsection