@extends('layouts.app')

@section('content')
<main class="profile-edit-page">

    <div class="edit-header">
        <a href="{{ route('profile.index') }}" class="back-btn"><i class="fas fa-arrow-left"></i></a>
        <h3>Edit Profil</h3>
    </div>

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

        <div class="form-group">
            <label>Foto Profil</label>
            <div class="photo-upload" onclick="document.getElementById('foto').click()">
                <div id="preview-container">
                    @if($user->profile->foto_profil ?? false)
                        <img src="{{ asset('storage/' . $user->profile->foto_profil) }}" id="preview-img" class="preview-img">
                    @else
                        <i class="fas fa-camera" id="preview-icon" style="font-size:28px; color:#94a3b8;"></i>
                    @endif
                </div>
                <span>Tap untuk ganti foto</span>
            </div>
            <input type="file" id="foto" name="foto_profil" accept="image/*" style="display:none;" onchange="preview(this)">
        </div>

        <div class="form-group">
            <label>Nama Lengkap</label>
            <input type="text" name="name" value="{{ old('name', $user->name) }}" required>
        </div>

        <div class="form-group">
            <label>Nomor HP</label>
            <input type="text" name="phone_number" value="{{ old('phone_number', $user->profile->phone_number ?? '') }}" required>
        </div>

        <div class="form-group">
            <label>Alamat</label>
            <textarea name="address" rows="2">{{ old('address', $user->profile->address ?? '') }}</textarea>
        </div>

        <button type="submit" class="btn-save">
            <i class="fas fa-check-circle"></i> Simpan Perubahan
        </button>
    </form>

</main>

<style>
.profile-edit-page {
    background: #fff;
    min-height: 100vh;
    padding: 20px;
}
.edit-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}
.edit-header h3 { margin:0; font-size:18px; font-weight:700; color:#1e293b; }
.back-btn { font-size:18px; color:#333; }

.form-group {
    margin-bottom: 16px;
}
.form-group label {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 6px;
}
.form-group input, .form-group textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    font-size: 14px;
    background: #f8fafc;
    box-sizing: border-box;
    font-family: inherit;
}
.form-group input:focus, .form-group textarea:focus {
    border-color: #00529c;
    outline: none;
    background: white;
}

.photo-upload {
    border: 2px dashed #e2e8f0;
    border-radius: 14px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}
.photo-upload:hover { border-color: #00529c; background: #f8fafc; }
.photo-upload span { font-size:12px; color:#94a3b8; }
.preview-img { width:64px; height:64px; border-radius:50%; object-fit:cover; }

.btn-save {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #00529c, #0077cc);
    color: white;
    border: none;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

@media (min-width: 480px) {
    .profile-edit-page { max-width: 480px; margin: auto; }
}
</style>

<script>
function preview(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            var container = document.getElementById('preview-container');
            container.innerHTML = '<img src="' + e.target.result + '" class="preview-img">';
        };
        reader.readAsDataURL(input.files[0]);
    }
}
</script>
@endsection