<?php $__env->startSection('title', 'Edit Profil'); ?>

<?php $__env->startSection('content'); ?>

<div class="max-w-2xl mx-auto px-4 py-8">

    
    <div class="mb-8">
        <div class="text-xs font-bold tracking-widest text-slate-400 uppercase mb-2">Akun Saya</div>
        <div class="flex items-center gap-4">
            <a href="<?php echo e(route('profile.index')); ?>" class="w-10 h-10 rounded-full border-2 border-slate-200 bg-white flex items-center justify-center text-slate-600 hover:bg-primary hover:text-white hover:border-primary transition-all shadow-sm" title="Kembali">
                <i class="bi bi-arrow-left"></i>
            </a>
            <h1 class="text-3xl font-extrabold text-primary tracking-tight">Edit Profil</h1>
        </div>
    </div>

    
    <div class="bg-white border border-slate-200 rounded-3xl overflow-hidden shadow-sm mb-6">

        
        <div class="bg-slate-50 border-b border-slate-200 p-8 flex items-center gap-6">
            <div id="avatarCircle" class="w-16 h-16 rounded-full bg-primary text-white flex items-center justify-center text-2xl font-bold shadow-inner flex-shrink-0">
                <?php echo e(strtoupper(substr($user->nama ?? $user->name, 0, 1))); ?>

            </div>
            <div>
                <strong id="avatarName" class="text-xl font-bold text-slate-800 block mb-1"><?php echo e($user->nama ?? $user->name); ?></strong>
                <p class="text-slate-500 text-sm m-0"><?php echo e($user->email); ?></p>
            </div>
        </div>

        
        <form method="POST" action="<?php echo e(route('profile.update')); ?>">
            <?php echo csrf_field(); ?>
            <?php echo method_field('PUT'); ?>

            <div class="p-8 space-y-6">

                
                <div>
                    <label class="flex items-center gap-2 text-xs font-bold tracking-widest text-slate-400 uppercase mb-2" for="nama">
                        <i class="bi bi-person text-sm"></i>
                        Nama Lengkap
                    </label>
                    <input
                        type="text"
                        id="nama"
                        name="nama"
                        class="w-full px-4 py-3 border-2 <?php echo e($errors->has('nama') ? 'border-red-400 bg-red-50 focus:ring-red-200' : 'border-slate-200 bg-white focus:border-primary focus:ring-primary/20'); ?> rounded-xl font-medium text-slate-800 outline-none transition-all focus:ring-4"
                        value="<?php echo e(old('nama', $user->nama ?? $user->name)); ?>"
                        placeholder="Masukkan nama lengkap"
                        autocomplete="name"
                        oninput="updateAvatar(this.value)"
                    >
                    <?php $__errorArgs = ['nama'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                        <div class="flex items-center gap-1.5 mt-2 text-xs font-medium text-red-600">
                            <i class="bi bi-exclamation-circle-fill"></i>
                            <?php echo e($message); ?>

                        </div>
                    <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                </div>

                
                <div>
                    <label class="flex items-center gap-2 text-xs font-bold tracking-widest text-slate-400 uppercase mb-2" for="email">
                        <i class="bi bi-envelope text-sm"></i>
                        Alamat Email
                    </label>
                    <input
                        type="email"
                        id="email"
                        name="email"
                        class="w-full px-4 py-3 border-2 <?php echo e($errors->has('email') ? 'border-red-400 bg-red-50 focus:ring-red-200' : 'border-slate-200 bg-white focus:border-primary focus:ring-primary/20'); ?> rounded-xl font-medium text-slate-800 outline-none transition-all focus:ring-4"
                        value="<?php echo e(old('email', $user->email)); ?>"
                        placeholder="contoh@email.com"
                        autocomplete="email"
                    >
                    <?php $__errorArgs = ['email'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                        <div class="flex items-center gap-1.5 mt-2 text-xs font-medium text-red-600">
                            <i class="bi bi-exclamation-circle-fill"></i>
                            <?php echo e($message); ?>

                        </div>
                    <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                    <div class="mt-2 text-xs text-slate-400">Pastikan email aktif dan bisa diakses.</div>
                </div>

            </div>

            
            <div class="bg-slate-50 border-t border-slate-200 p-6 flex flex-col sm:flex-row gap-4">
                <button type="submit" class="flex-1 inline-flex items-center justify-center gap-2 px-6 py-3.5 bg-primary text-white font-bold rounded-2xl hover:bg-slate-800 hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-200 transition-all text-sm">
                    <i class="bi bi-check-lg"></i>
                    Simpan Perubahan
                </button>
                <a href="<?php echo e(route('profile.index')); ?>" class="sm:flex-none inline-flex items-center justify-center gap-2 px-6 py-3.5 bg-white border-2 border-slate-200 text-slate-700 font-bold rounded-2xl hover:border-slate-300 hover:bg-slate-50 transition-all text-sm">
                    Batal
                </a>
            </div>

        </form>

    </div>

</div>

<script>
// Live preview avatar saat nama diketik
function updateAvatar(val) {
    const circle = document.getElementById('avatarCircle');
    const nameEl = document.getElementById('avatarName');
    const letter = val.trim().charAt(0).toUpperCase();
    if (circle) circle.textContent = letter || '?';
    if (nameEl) nameEl.textContent = val.trim() || '—';
}
</script>

<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.customer', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\laragon\www\Toko-miftah\resources\views/profile/edit.blade.php ENDPATH**/ ?>