


<?php $__env->startSection('title', 'Edit Profile - Kei\'s Store'); ?>

<?php $__env->startSection('content'); ?>
<div class="container-fluid px-4 py-4">
    
    <div class="mb-5 text-center" data-aos="fade-down">
        <h2 class="playfair fw-bold mb-1" style="color: #FF6B9D; font-size: 2.5rem;">Edit Keanggotaan</h2>
        <p class="text-muted tracking-wide" style="font-weight: 500;">✦ SESUAIKAN IDENTITAS KECANTIKAN ANDA ✦</p>
    </div>

    
    <?php if(session('success')): ?>
        <div class="alert alert-success border-0 shadow-sm rounded-4 mb-4 animate-slide-down" style="background: #D1FAE5; color: #065F46;" role="alert">
            <div class="d-flex align-items-center">
                <i class="bi bi-check-circle-fill me-2 fs-5"></i>
                <span class="fw-semibold"><?php echo e(session('success')); ?></span>
                <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        </div>
    <?php endif; ?>

    <?php if(session('error') || $errors->any()): ?>
        <div class="alert alert-danger border-0 shadow-sm rounded-4 mb-4 animate-slide-down" style="background: #FEE2E2; color: #991B1B;" role="alert">
            <div class="d-flex align-items-center">
                <i class="bi bi-exclamation-triangle-fill me-2 fs-5"></i>
                <span class="fw-semibold"><?php echo e(session('error') ?? $errors->first()); ?></span>
                <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        </div>
    <?php endif; ?>

    
    <form method="POST" action="<?php echo e(route('profile.update')); ?>" enctype="multipart/form-data" id="formEditProfile">
        <?php echo csrf_field(); ?>
        <?php echo method_field('PUT'); ?>

        <div class="row g-4">
            
            <div class="col-lg-4" data-aos="fade-right">
                <div class="card border-0 shadow-sm rounded-[2.5rem] overflow-hidden sticky-top" style="top: 130px; background: rgba(255, 255, 255, 0.9);">
                    <div class="card-body p-5 text-center">
                        
                        <div class="position-relative d-inline-block mb-4">
                            <div class="rounded-circle p-1" style="background: linear-gradient(135deg, #FF6B9D, #FFD700);">
                                <?php
                                    $user = Auth::user();
                                    $avatarUrl = $user->avatar_url;
                                ?>
                                <img id="preview-avatar" 
                                     src="<?php echo e($avatarUrl); ?>" 
                                     alt="<?php echo e($user->username); ?>" 
                                     class="rounded-circle border border-4 border-white shadow-sm"
                                     style="width: 160px; height: 160px; object-fit: cover; transition: all 0.3s ease;">
                            </div>
                            
                            <label for="avatar" class="position-absolute bottom-0 end-0 bg-white rounded-circle p-3 shadow-lg hover-scale" style="cursor: pointer; border: 2px solid #FFD700;">
                                <i class="bi bi-camera-fill fs-5" style="color: #FF6B9D;"></i>
                            </label>
                            <input type="file" id="avatar" name="avatar" class="d-none" accept="image/*" onchange="previewImage(this)">
                        </div>
                        
                        <p class="text-muted small mb-4">
                            <i class="bi bi-stars" style="color: #FF6B9D;"></i> Klik ikon kamera untuk memilih foto profil baru
                        </p>

                        <div class="p-4 rounded-4 bg-light mb-4">
                            <div class="d-flex align-items-center justify-content-between mb-2">
                                <span class="text-muted small fw-bold uppercase tracking-wider">Status Akun</span>
                                <span class="badge rounded-pill px-3 py-1" style="background: #FFF0F5; color: #FF6B9D;"><?php echo e(ucfirst($user->role)); ?></span>
                            </div>
                            <div class="d-flex align-items-center justify-content-between">
                                <span class="text-muted small fw-bold uppercase tracking-wider">Keanggotaan</span>
                                <span class="fw-bold" style="color: #2D2D2D;">Diamond Member</span>
                            </div>
                        </div>

                        
                        <div class="row g-2 mb-4">
                            <div class="col-6">
                                <div class="p-3 rounded-4" style="background: #FFF9FA; border: 1px solid #FFE0EB;">
                                    <h4 class="fw-bold mb-0" style="color: #FF6B9D;"><?php echo e($totalOrders ?? 12); ?></h4>
                                    <small class="text-muted uppercase" style="font-size: 0.65rem; letter-spacing: 1px;">Pesanan</small>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="p-3 rounded-4" style="background: #FFF9FA; border: 1px solid #FFE0EB;">
                                    <h4 class="fw-bold mb-0" style="color: #FFD700;"><?php echo e($memberSince ?? date('Y')); ?></h4>
                                    <small class="text-muted uppercase" style="font-size: 0.65rem; letter-spacing: 1px;">Tahun</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            
            <div class="col-lg-8" data-aos="fade-left">
                <div class="card border-0 shadow-sm rounded-[2.5rem]" style="background: rgba(255, 255, 255, 0.95);">
                    <div class="card-body p-5">
                        
                        <div class="mb-5">
                            <h5 class="fw-bold mb-4 pb-2 border-bottom d-inline-block" style="color: #FF6B9D;">
                                <i class="bi bi-person-heart me-2"></i>Informasi Pribadi
                            </h5>
                            <div class="row g-4">
                                <div class="col-md-6">
                                    <label class="form-label small fw-bold text-muted uppercase tracking-wider">Username</label>
                                    <div class="input-group-custom">
                                        <i class="bi bi-at icon"></i>
                                        <input type="text" name="username" class="form-control-luxury <?php $__errorArgs = ['username'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>" value="<?php echo e(old('username', $user->username)); ?>" required>
                                    </div>
                                    <?php $__errorArgs = ['username'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> <div class="small text-danger mt-1"><?php echo e($message); ?></div> <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label small fw-bold text-muted uppercase tracking-wider">Email Address</label>
                                    <div class="input-group-custom">
                                        <i class="bi bi-envelope icon"></i>
                                        <input type="email" name="email" class="form-control-luxury <?php $__errorArgs = ['email'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>" value="<?php echo e(old('email', $user->email)); ?>" required>
                                    </div>
                                    <?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="small text-danger mt-1"><?php echo e($message); ?></div> <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label small fw-bold text-muted uppercase tracking-wider">Nama Lengkap</label>
                                    <div class="input-group-custom">
                                        <i class="bi bi-person-badge icon"></i>
                                        <input type="text" name="fullname" class="form-control-luxury" value="<?php echo e(old('fullname', $user->fullname)); ?>" placeholder="Nama resmi Anda">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label small fw-bold text-muted uppercase tracking-wider">Nomor Telepon</label>
                                    <div class="input-group-custom">
                                        <i class="bi bi-telephone-plus icon"></i>
                                        <input type="tel" name="phone" class="form-control-luxury" value="<?php echo e(old('phone', $user->phone)); ?>" placeholder="08xxxxxxxxxx">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label small fw-bold text-muted uppercase tracking-wider">Tanggal Lahir</label>
                                    <div class="input-group-custom">
                                        <i class="bi bi-calendar-heart icon"></i>
                                        <input type="date" name="birth_date" class="form-control-luxury" value="<?php echo e(old('birth_date', $user->birth_date)); ?>">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label small fw-bold text-muted uppercase tracking-wider">Jenis Kelamin</label>
                                    <div class="input-group-custom">
                                        <i class="bi bi-gender-ambiguous icon"></i>
                                        <select name="gender" class="form-control-luxury">
                                            <option value="">Pilih Gender</option>
                                            <option value="L" <?php echo e(old('gender', $user->gender) == 'L' ? 'selected' : ''); ?>>Laki-laki</option>
                                            <option value="P" <?php echo e(old('gender', $user->gender) == 'P' ? 'selected' : ''); ?>>Perempuan</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <label class="form-label small fw-bold text-muted uppercase tracking-wider">Bio & Kutipan Favorit</label>
                                    <textarea name="bio" rows="3" class="form-control-luxury" style="padding-left: 1.5rem;" placeholder="Ceritakan sedikit tentang filosofi kecantikan Anda..."><?php echo e(old('bio', $user->bio)); ?></textarea>
                                </div>
                            </div>
                        </div>

                        
                        <div class="mb-5">
                            <h5 class="fw-bold mb-4 pb-2 border-bottom d-inline-block" style="color: #FF6B9D;">
                                <i class="bi bi-geo-alt-fill me-2"></i>Detail Lokasi Pengiriman
                            </h5>
                            <div class="row g-4">
                                <div class="col-md-6">
                                    <label class="form-label small fw-bold text-muted uppercase tracking-wider">Provinsi</label>
                                    <select name="province_code" id="province" class="form-control-luxury select-luxury">
                                        <option value="">Pilih Provinsi</option>
                                        <?php $__currentLoopData = $provinces; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $province): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                            <option value="<?php echo e($province->code); ?>" <?php echo e(old('province_code', $user->province_code) == $province->code ? 'selected' : ''); ?>>
                                                <?php echo e($province->name); ?>

                                            </option>
                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label small fw-bold text-muted uppercase tracking-wider">Kota/Kabupaten</label>
                                    <select name="city_code" id="city" class="form-control-luxury select-luxury" disabled>
                                        <option value="">Pilih Kota/Kabupaten</option>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label small fw-bold text-muted uppercase tracking-wider">Kecamatan</label>
                                    <select name="district_code" id="district" class="form-control-luxury select-luxury" disabled>
                                        <option value="">Pilih Kecamatan</option>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label small fw-bold text-muted uppercase tracking-wider">Kelurahan/Desa</label>
                                    <select name="village_code" id="village" class="form-control-luxury select-luxury" disabled>
                                        <option value="">Pilih Kelurahan/Desa</option>
                                    </select>
                                </div>
                                <div class="col-md-8">
                                    <label class="form-label small fw-bold text-muted uppercase tracking-wider">Alamat Lengkap (Jalan, No. Rumah)</label>
                                    <textarea name="address" rows="2" class="form-control-luxury" style="padding-left: 1.5rem;" placeholder="Nama jalan, RT/RW, nomor rumah, dsb..."><?php echo e(old('address', $user->address)); ?></textarea>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label small fw-bold text-muted uppercase tracking-wider">Kode Pos</label>
                                    <input type="text" name="postal_code" class="form-control-luxury" value="<?php echo e(old('postal_code', $user->postal_code)); ?>" placeholder="XXXXX">
                                </div>
                            </div>
                        </div>

                        
                        <div class="mb-5">
                            <div class="d-flex align-items-center justify-content-between mb-4 border-bottom pb-2">
                                <h5 class="fw-bold mb-0" style="color: #FF6B9D;">
                                    <i class="bi bi-shield-lock-fill me-2"></i>Keamanan Akun
                                </h5>
                                <button type="button" class="btn btn-sm px-3 rounded-pill" style="background: #FFF0F5; color: #FF6B9D; font-weight: 700;" onclick="togglePasswordSection()">
                                    <i class="bi bi-key-fill me-1"></i> Ubah Password
                                </button>
                            </div>
                            
                            <div id="passwordSection" style="display: none;" class="p-4 rounded-[1.5rem] bg-light">
                                <p class="small text-muted mb-4"><i class="bi bi-info-circle me-1"></i> Kosongkan bagian ini jika Anda tidak ingin mengganti password lama Anda.</p>
                                <div class="row g-4">
                                    <div class="col-md-4">
                                        <label class="form-label small fw-bold text-muted uppercase tracking-wider">Password Lama</label>
                                        <input type="password" name="current_password" class="form-control-luxury no-icon" placeholder="••••••••">
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label small fw-bold text-muted uppercase tracking-wider">Password Baru</label>
                                        <input type="password" name="new_password" class="form-control-luxury no-icon" placeholder="Min. 6 karakter">
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label small fw-bold text-muted uppercase tracking-wider">Konfirmasi</label>
                                        <input type="password" name="new_password_confirmation" class="form-control-luxury no-icon" placeholder="Ulangi password">
                                    </div>
                                </div>
                            </div>
                        </div>

                        
                        <div class="d-flex gap-3 pt-4">
                            <a href="<?php echo e(route('profile.show')); ?>" class="btn py-3 px-5 rounded-pill fw-bold transition-all" style="background: #F3F4F6; color: #4B5563;">
                                <i class="bi bi-arrow-left-circle me-2"></i> Batal
                            </a>
                            <button type="submit" class="btn flex-grow-1 py-3 rounded-pill fw-bold text-white transition-all hover-glow shadow-md" style="background: linear-gradient(135deg, #FF6B9D, #E8558B);" id="btnSubmit">
                                <span class="spinner-border spinner-border-sm me-2 d-none" id="loadingSpinner"></span>
                                <i class="bi bi-check2-circle me-2" id="saveIcon"></i>
                                <span id="btnText">Simpan Perubahan Identitas</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<style>
    .playfair { font-family: 'Playfair Display', serif; }
    .tracking-wide { letter-spacing: 2px; }
    .tracking-wider { letter-spacing: 1px; }
    .rounded-4 { border-radius: 1.25rem !important; }
    
    .hover-scale { transition: transform 0.2s ease; }
    .hover-scale:hover { transform: scale(1.1); }
    
    .hover-glow:hover {
        box-shadow: 0 10px 25px rgba(255, 107, 157, 0.4);
        transform: translateY(-2px);
    }

    .form-control-luxury {
        width: 100%;
        padding: 0.8rem 1rem 0.8rem 3.2rem;
        background: #F9FAFB;
        border: 2px solid #F3F4F6;
        border-radius: 1.25rem;
        color: #1F2937;
        font-weight: 500;
        transition: all 0.3s ease;
    }

    .form-control-luxury.no-icon {
        padding-left: 1.25rem;
    }

    .form-control-luxury:focus {
        background: #FFF;
        border-color: #FF6B9D;
        box-shadow: 0 0 0 4px rgba(255, 107, 157, 0.1);
        outline: none;
    }

    .input-group-custom {
        position: relative;
    }

    .input-group-custom .icon {
        position: absolute;
        left: 1.2rem;
        top: 50%;
        transform: translateY(-50%);
        color: #FF6B9D;
        font-size: 1.1rem;
        z-index: 10;
    }

    .select-luxury {
        padding-left: 1.25rem;
        cursor: pointer;
        appearance: none;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23FF6B9D' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 1.25rem center;
        background-size: 16px 12px;
    }

    .select-luxury:disabled {
        background-color: #F3F4F6;
        opacity: 0.6;
        cursor: not-allowed;
    }

    @keyframes slide-down {
        from { opacity: 0; transform: translateY(-20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .animate-slide-down { animation: slide-down 0.5s ease-out; }

    .sticky-top { transition: top 0.3s ease; }
    @media (max-width: 991px) {
        .sticky-top { position: relative !important; top: 0 !important; }
    }
</style>

<?php $__env->startPush('scripts'); ?>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
    AOS.init({ duration: 1000, once: true });

    function previewImage(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                const img = document.querySelector('#preview-avatar');
                img.src = e.target.result;
                img.style.transform = 'scale(1.05)';
                setTimeout(() => img.style.transform = 'scale(1)', 250);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

    function togglePasswordSection() {
        const section = document.getElementById('passwordSection');
        section.style.display = section.style.display === 'none' ? 'block' : 'none';
        if(section.style.display === 'block') section.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }

    // Wilayah Select Logic
    document.addEventListener('DOMContentLoaded', function() {
        const provinceSelect = document.getElementById('province');
        const citySelect = document.getElementById('city');
        const districtSelect = document.getElementById('district');
        const villageSelect = document.getElementById('village');
        
        // Data parsed correctly from controller
        const allCities = <?php echo json_encode($allCities ?? [], 15, 512) ?>;
        const allDistricts = <?php echo json_encode($allDistricts ?? [], 15, 512) ?>;
        const allVillages = <?php echo json_encode($allVillages ?? [], 15, 512) ?>;
        
        const selectedProvince = '<?php echo e(old('province_code', $user->province_code)); ?>';
        const selectedCity = '<?php echo e(old('city_code', $user->city_code)); ?>';
        const selectedDistrict = '<?php echo e(old('district_code', $user->district_code)); ?>';
        const selectedVillage = '<?php echo e(old('village_code', $user->village_code)); ?>';
        
        function populateSelect(selectElement, data, placeholder, selectedValue = null) {
            if (!selectElement) return;
            selectElement.innerHTML = `<option value="">${placeholder}</option>`;
            
            if (data && Array.isArray(data) && data.length > 0) {
                data.forEach(item => {
                    const option = document.createElement('option');
                    option.value = item.code || item.id;
                    option.textContent = item.name;
                    if (selectedValue && String(option.value) === String(selectedValue)) option.selected = true;
                    selectElement.appendChild(option);
                });
                selectElement.disabled = false;
            } else {
                selectElement.disabled = true;
            }
        }

        // Initial Load
        if (selectedProvince && allCities[selectedProvince]) {
            populateSelect(citySelect, allCities[selectedProvince], 'Pilih Kota/Kabupaten', selectedCity);
            if (selectedCity && allDistricts[selectedCity]) {
                populateSelect(districtSelect, allDistricts[selectedCity], 'Pilih Kecamatan', selectedDistrict);
                if (selectedDistrict && allVillages[selectedDistrict]) {
                    populateSelect(villageSelect, allVillages[selectedDistrict], 'Pilih Kelurahan/Desa', selectedVillage);
                }
            }
        }
        
        // Event Listeners
        provinceSelect.addEventListener('change', function() {
            populateSelect(citySelect, allCities[this.value] || [], 'Pilih Kota/Kabupaten');
            districtSelect.innerHTML = '<option value="">Pilih Kecamatan</option>'; districtSelect.disabled = true;
            villageSelect.innerHTML = '<option value="">Pilih Kelurahan/Desa</option>'; villageSelect.disabled = true;
        });
        
        citySelect.addEventListener('change', function() {
            populateSelect(districtSelect, allDistricts[this.value] || [], 'Pilih Kecamatan');
            villageSelect.innerHTML = '<option value="">Pilih Kelurahan/Desa</option>'; villageSelect.disabled = true;
        });
        
        districtSelect.addEventListener('change', function() {
            populateSelect(villageSelect, allVillages[this.value] || [], 'Pilih Kelurahan/Desa');
        });

        // Form Submit indicator
        document.getElementById('formEditProfile').addEventListener('submit', function() {
            document.getElementById('saveIcon').classList.add('d-none');
            document.getElementById('loadingSpinner').classList.remove('d-none');
            document.getElementById('btnText').textContent = 'Menyimpan Perubahan...';
            document.getElementById('btnSubmit').disabled = true;
        });
    });
</script>
<?php $__env->stopPush(); ?>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\laragon\www\comca\resources\views/profile/edit.blade.php ENDPATH**/ ?>