@extends('layouts.app')

@section('content')

<style>
    .edit-profile-section {
        background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
        padding: 60px 0;
        min-height: 100vh;
    }

    .edit-card {
        background: #fff;
        border-radius: 22px;
        box-shadow: 0 12px 35px rgba(15, 23, 42, 0.08);
        border: 1px solid #eef2f7;
        padding: 30px;
    }

    .edit-title {
        font-size: 28px;
        font-weight: 800;
        margin-bottom: 10px;
        color: #111827;
    }

    .edit-desc {
        color: #6b7280;
        margin-bottom: 25px;
    }

    .form-group {
        margin-bottom: 20px;
    }

    .form-control {
        border-radius: 12px;
        padding: 12px 14px;
        border: 1px solid #e5e7eb;
        transition: .2s;
    }

    .form-control:focus {
        border-color: #111827;
        box-shadow: none;
    }

    .profile-preview {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        overflow: hidden;
        margin-bottom: 15px;
        border: 4px solid #f3f4f6;
    }

    .profile-preview img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .btn-save {
        background: #111827;
        color: #fff;
        border-radius: 14px;
        padding: 12px 24px;
        font-weight: 700;
        border: none;
        transition: .3s;
    }

    .btn-save:hover {
        background: #000;
    }

    .btn-cancel {
        background: #f3f4f6;
        color: #111827;
        border-radius: 14px;
        padding: 12px 24px;
        font-weight: 700;
        border: none;
    }
</style>

<section class="edit-profile-section">
    <div class="container">

```
    <div class="edit-card">

        <h2 class="edit-title">Edit Profile</h2>
        <p class="edit-desc">Update your name and profile picture.</p>

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

            <!-- Profile Image Preview -->
            <div class="text-center mb-4">
                <div class="profile-preview">
                    @if(auth()->user()->user_image)
                        <img src="{{ asset(auth()->user()->user_image) }}" id="previewImg">
                    @else
                        <img src="https://via.placeholder.com/120" id="previewImg">
                    @endif
                </div>

                <input type="file" name="user_image" class="form-control" onchange="previewImage(event)">
            </div>

            <!-- Name -->
            <div class="form-group">
                <label>Full Name</label>
                <input type="text" name="name" 
                       value="{{ auth()->user()->name }}" 
                       class="form-control" required>
            </div>

            <!-- Buttons -->
            <div class="d-flex gap-2 mt-4">
                <button type="submit" class="btn-save">Update Profile</button>
                <a href="{{ url('/profile') }}" class="btn-cancel">Cancel</a>
            </div>

        </form>

    </div>

</div>
```

</section>

<script>
function previewImage(event) {
    const reader = new FileReader();
    reader.onload = function(){
        document.getElementById('previewImg').src = reader.result;
    }
    reader.readAsDataURL(event.target.files[0]);
}
</script>

@endsection