


<?php $__env->startSection('title', 'Profile - ' . $user->username); ?>

<?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;">Informasi Akun</h2>
        <p class="text-muted tracking-wide" style="font-weight: 500;">✦ KESEMPURNAAN KECANTIKAN ANDA DIMULAI DI SINI ✦</p>
    </div>

    <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-4 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 if($user->avatar): ?>
                                <img src="<?php echo e($user->avatar_url); ?>" 
                                     alt="<?php echo e($user->username); ?>" 
                                     class="rounded-circle border border-4 border-white shadow-sm"
                                     style="width: 160px; height: 160px; object-fit: cover;">
                            <?php else: ?>
                                <div class="rounded-circle border border-4 border-white shadow-sm d-flex align-items-center justify-content-center mx-auto" 
                                     style="width: 160px; height: 160px; background: linear-gradient(135deg, #FF9EBC, #FFF0F5); color: #FF6B9D; font-size: 4rem; font-weight: 700; font-family: 'Playfair Display', serif;">
                                    <?php echo e(strtoupper(substr($user->username, 0, 1))); ?>

                                </div>
                            <?php endif; ?>
                        </div>
                        
                        
                        <?php if($user->is_verified): ?>
                        <div class="position-absolute bottom-0 end-0 bg-white rounded-circle p-2 shadow-sm border border-2 border-white translate-middle-x mb-2 me-2">
                             <i class="bi bi-patch-check-fill fs-5" style="color: #10B981;"></i>
                        </div>
                        <?php endif; ?>
                    </div>

                    <h3 class="fw-bold mb-1" style="color: #2D2D2D;"><?php echo e($user->fullname ?? $user->username); ?></h3>
                    <p class="text-muted mb-3">@ <?php echo e($user->username); ?></p>

                    <div class="d-flex justify-content-center gap-2 mb-4">
                        <span class="px-3 py-1 rounded-pill small fw-bold" style="background: #FFF0F5; color: #FF6B9D; border: 1px solid #FFE0EB;">
                            <?php echo e(ucfirst($user->role)); ?>

                        </span>
                        <span class="px-3 py-1 rounded-pill small fw-bold" style="background: <?php echo e($user->is_verified ? '#D1FAE5' : '#FEF3C7'); ?>; color: <?php echo e($user->is_verified ? '#059669' : '#D97706'); ?>; border: 1px solid rgba(0,0,0,0.05);">
                            <?php echo e($user->is_verified ? 'Terverifikasi' : 'Pending'); ?>

                        </span>
                    </div>

                    <div class="row g-3 mb-4 text-start">
                        <div class="col-6">
                            <div class="p-3 rounded-4 bg-light border-0">
                                <small class="text-muted d-block mb-1">MEMBER SEJAK</small>
                                <span class="fw-bold" style="color: #2D2D2D;"><?php echo e($user->created_at->format('Y')); ?></span>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="p-3 rounded-4 bg-light border-0">
                                <small class="text-muted d-block mb-1">LEVEL AKUN</small>
                                <span class="fw-bold" style="color: #FF6B9D;">DIAMOND</span>
                            </div>
                        </div>
                    </div>

                    <a href="<?php echo e(route('profile.edit')); ?>" class="btn w-100 py-3 rounded-4 fw-bold text-white transition-all hover-glow" style="background: linear-gradient(135deg, #FF6B9D, #E8558B);">
                        <i class="bi bi-pencil-square me-2"></i> Edit Profile
                    </a>
                </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.9);">
                <div class="card-body p-5">
                    
                    <div class="mb-5">
                        <h5 class="fw-bold mb-3 border-bottom pb-2 d-inline-block" style="color: #FF6B9D;">
                            <i class="bi bi-chat-heart me-2"></i>Bio & Motivasi
                        </h5>
                        <p class="text-muted fs-5 fst-italic">
                            <?php echo e($user->bio ?? 'Belum ada kutipan atau bio yang ditambahkan untuk member istimewa ini.'); ?>

                        </p>
                    </div>

                    
                    <div class="mb-5">
                        <h5 class="fw-bold mb-4" style="color: #FF6B9D;">
                            <i class="bi bi-person-lines-fill me-2"></i>Detail Informasi
                        </h5>
                        <div class="table-responsive">
                            <table class="table table-borderless align-middle profile-table">
                                <tbody>
                                    <tr>
                                        <td class="text-muted py-3" style="width: 200px;"><i class="bi bi-person-badge me-2"></i>Nama Lengkap</td>
                                        <td class="fw-bold py-3"><?php echo e($user->fullname ?? '-'); ?></td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted py-3"><i class="bi bi-at me-2"></i>Username</td>
                                        <td class="fw-bold py-3"><?php echo e($user->username); ?></td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted py-3"><i class="bi bi-envelope me-2"></i>Email</td>
                                        <td class="fw-bold py-3"><?php echo e($user->email); ?></td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted py-3"><i class="bi bi-telephone me-2"></i>No. Telepon</td>
                                        <td class="fw-bold py-3"><?php echo e($user->phone ?? '-'); ?></td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted py-3"><i class="bi bi-calendar-event me-2"></i>Lahir</td>
                                        <td class="fw-bold py-3"><?php echo e($user->birth_date ? \Carbon\Carbon::parse($user->birth_date)->translatedFormat('d F Y') : '-'); ?></td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted py-3"><i class="bi bi-gender-ambiguous me-2"></i>Gender</td>
                                        <td class="fw-bold py-3"><?php echo e($user->gender == 'L' ? 'Laki-laki' : ($user->gender == 'P' ? 'Perempuan' : '-')); ?></td>
                                    </tr>
                                    
                                    
                                    <tr>
                                        <td class="text-muted py-3"><i class="bi bi-geo-alt me-2"></i>Alamat Lengkap</td>
                                        <td class="py-3">
                                            <?php if($user->address || $user->village_code): ?>
                                                <div class="p-3 rounded-4 bg-light shadow-sm" style="border-left: 4px solid #FF6B9D;">
                                                    <div class="mb-1 fw-bold text-dark"><?php echo e($user->address); ?></div>
                                                    <div class="text-muted small">
                                                        <?php
                                                            $addressParts = [];
                                                            if($user->village) $addressParts[] = "Kelurahan " . $user->village->name;
                                                            if($user->district) $addressParts[] = "Kecamatan " . $user->district->name;
                                                            if($user->city) $addressParts[] = $user->city->name;
                                                            if($user->province) $addressParts[] = $user->province->name;
                                                        ?>
                                                        <?php echo e(implode(', ', $addressParts)); ?>

                                                    </div>
                                                    <?php if($user->postal_code): ?>
                                                        <div class="mt-1 badge bg-white border text-dark"><?php echo e($user->postal_code); ?></div>
                                                    <?php endif; ?>
                                                </div>
                                            <?php else: ?>
                                                <i class="text-muted opacity-50">Alamat belum lengkap</i>
                                            <?php endif; ?>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>                    
                    <div class="p-4 rounded-4 mb-5" style="background: linear-gradient(135deg, #FFF0F5, #FFE4E1); border: 1px dashed #FF6B9D;">
                        <div class="d-flex align-items-center gap-3">
                            <i class="bi bi-shield-lock-fill fs-2" style="color: #FF6B9D;"></i>
                            <div>
                                <h6 class="fw-bold mb-1" style="color: #FF6B9D;">Privasi & Keamanan</h6>
                                <p class="text-muted small mb-0">Informasi alamat dan nomor telepon Anda hanya akan digunakan untuk keperluan pengiriman pesanan dan verifikasi akun.</p>
                            </div>
                        </div>
                    </div>

                    
                    <?php if(isset($recentProducts) && count($recentProducts) > 0): ?>
                    <div class="gallery-section mt-4" data-aos="fade-up">
                        <div class="d-flex align-items-center justify-content-between mb-4">
                            <h5 class="fw-bold mb-0" style="color: #FF6B9D;">
                                <i class="bi bi-stars me-2"></i>Galeri Koleksi Terbaru
                            </h5>
                            <a href="<?php echo e(route('product.index')); ?>" class="btn btn-sm px-3 rounded-pill" style="border: 1px solid #FF6B9D; color: #FF6B9D; font-weight: 600;">Lihat Semua</a>
                        </div>
                        
                        <div class="row g-4">
                            <?php $__currentLoopData = $recentProducts; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $product): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <div class="col-md-6 col-xl-3">
                                <div class="product-card-premium">
                                    
                                    <div class="product-img-frame">
                                        <?php
                                            $images = $product->images;
                                            $primary = $images->where('is_primary', true)->first() ?: $images->first();
                                        ?>
                                        <div class="main-img-overlay">
                                            <img src="<?php echo e(asset('storage/' . ($primary ? $primary->foto : 'no-image.png'))); ?>" 
                                                 alt="<?php echo e($product->nama_produk); ?>" 
                                                 class="img-fluid main-product-img" 
                                                 id="prod-img-<?php echo e($product->produk_id); ?>">
                                        </div>
                                        
                                        
                                        <?php if($images->count() > 1): ?>
                                        <div class="mini-gallery-thumbnails">
                                            <?php $__currentLoopData = $images; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $img): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                <div class="mini-thumb" onclick="updateProfileGallery('<?php echo e($product->produk_id); ?>', '<?php echo e(asset('storage/' . $img->foto)); ?>', this)">
                                                    <img src="<?php echo e(asset('storage/' . $img->foto)); ?>" alt="thumb">
                                                </div>
                                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                        </div>
                                        <div class="image-count-badge">
                                            <i class="bi bi-images me-1"></i> <?php echo e($images->count()); ?>

                                        </div>
                                        <?php endif; ?>
                                    </div>
                                    
                                    <div class="product-info-minimal p-3">
                                        <h6 class="fw-bold mb-1 text-truncate"><?php echo e($product->nama_produk); ?></h6>
                                        <div class="d-flex justify-content-between align-items-center mt-2">
                                            <span class="text-pink fw-bold">Rp <?php echo e(number_format($product->harga, 0, ',', '.')); ?></span>
                                            <div class="badge-stock"><?php echo e($product->stok); ?> Pcs</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </div>
                    </div>
                    <?php else: ?>
                    <div class="text-center p-5 rounded-[2.5rem] bg-light" style="border: 2px dashed #E5E7EB;">
                        <i class="bi bi-collection fs-1 text-muted opacity-30"></i>
                        <p class="text-muted mt-2">Belum ada koleksi produk yang ditambahkan.</p>
                        <a href="<?php echo e(route('product.create')); ?>" class="btn btn-sm px-4 rounded-pill mt-2" style="background: #FF6B9D; color: white;">Mulai Membuat Produk</a>
                    </div>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .playfair { font-family: 'Playfair Display', serif; }
    .tracking-wide { letter-spacing: 2px; }
    .rounded-4 { border-radius: 1.25rem !important; }
    .rounded-5 { border-radius: 2rem !important; }
    
    .hover-glow:hover {
        box-shadow: 0 10px 25px rgba(255, 107, 157, 0.4);
        transform: translateY(-2px);
    }
    
    .profile-table td {
        border-bottom: 1px solid rgba(0,0,0,0.03);
    }
    
    .sticky-top {
        transition: top 0.3s ease;
    }
    
    /* Product Card Premium in Profile */
    .product-card-premium {
        background: white;
        border-radius: 1.5rem;
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        border: 1px solid rgba(255,107,157,0.05);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        height: 100%;
    }
    
    .product-card-premium:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 25px rgba(255,107,157,0.15);
    }
    
    .product-img-frame {
        position: relative;
        aspect-ratio: 1/1;
        overflow: hidden;
        background: #f8f8f8;
    }
    
    .main-product-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s ease;
    }
    
    .product-card-premium:hover .main-product-img {
        transform: scale(1.1);
    }
    
    .mini-gallery-thumbnails {
        position: absolute;
        bottom: 10px;
        left: 10px;
        right: 10px;
        display: flex;
        gap: 5px;
        z-index: 10;
        opacity: 0;
        transform: translateY(10px);
        transition: all 0.3s ease;
    }
    
    .product-card-premium:hover .mini-gallery-thumbnails {
        opacity: 1;
        transform: translateY(0);
    }
    
    .mini-thumb {
        width: 35px;
        height: 35px;
        border-radius: 6px;
        overflow: hidden;
        border: 2px solid white;
        cursor: pointer;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }
    
    .mini-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .image-count-badge {
        position: absolute;
        top: 10px;
        right: 10px;
        background: rgba(255,107,157,0.9);
        color: white;
        padding: 4px 10px;
        border-radius: 10px;
        font-size: 0.7rem;
        font-weight: 700;
        backdrop-filter: blur(4px);
    }
    
    .badge-stock {
        font-size: 0.7rem;
        color: #9CA3AF;
        border: 1px solid #E5E7EB;
        padding: 2px 8px;
        border-radius: 6px;
    }
    
    @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 updateProfileGallery(productId, imgSrc, element) {
        const mainImg = document.getElementById('prod-img-' + productId);
        if(mainImg) {
            mainImg.src = imgSrc;
        }
        
        // Prevent event propagation if needed
        event.stopPropagation();
    }
</script>
<?php $__env->stopPush(); ?>
<?php $__env->stopSection(); ?>
ion
<?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/show.blade.php ENDPATH**/ ?>