<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Detail Pesanan Masuk - Glow Beauty</title>

    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <style>
        * { font-family: 'Poppins', 'Plus Jakarta Sans', sans-serif; }
        body { background: linear-gradient(135deg, #fdf2f8 0%, #fff1f3 100%); }

        .navbar { background:#fff; border-bottom:1px solid #fbcfe8; position:sticky; top:0; z-index:50; }
        .nav-link { padding:5px 12px; border-radius:8px; font-size:13px; font-weight:500; color:#6b7280; display:inline-flex; align-items:center; gap:6px; transition:all .15s; }
        .nav-link:hover { background:#fef2f8; color:#ec489a; }

        .page-header { background:linear-gradient(135deg,#f472b6 0%,#ec489a 100%); border-radius:16px; overflow:hidden; position:relative; margin-bottom:20px; }
        .page-header::before { content:''; position:absolute; top:-50px; right:-50px; width:200px; height:200px; background:rgba(255,255,255,.07); border-radius:50%; }
        .page-header::after  { content:''; position:absolute; bottom:-25px; left:80px; width:130px; height:130px; background:rgba(255,255,255,.05); border-radius:50%; }

        .card { background:#fff; border-radius:14px; border:1px solid #fbcfe8; overflow:hidden; }
        .card-header { padding:14px 20px; border-bottom:1px solid #fef2f8; display:flex; align-items:center; gap:10px; }
        .card-icon { width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
        .card-title { font-size:13.5px; font-weight:700; color:#1f1f1f; }

        .info-row { display:flex; justify-content:space-between; align-items:flex-start; padding:10px 20px; font-size:13px; gap:12px; border-bottom:1px solid #fef2f8; }
        .info-row:last-child { border-bottom:none; }
        .info-label { color:#a0a0a0; font-size:12px; white-space:nowrap; flex-shrink:0; }
        .info-val { font-weight:600; color:#1f1f1f; text-align:right; }

        .sbadge { display:inline-flex; align-items:center; gap:4px; padding:4px 11px; border-radius:20px; font-size:11.5px; font-weight:700; }
        .s-pending   { background:#fef3c7; color:#92400e; }
        .s-dibayar   { background:#dbeafe; color:#1e40af; }
        .s-diproses  { background:#ffedd5; color:#c2410c; }
        .s-dikirim   { background:#ede9fe; color:#6d28d9; }
        .s-selesai   { background:#d1fae5; color:#065f46; }
        .s-dibatalkan{ background:#fee2e2; color:#b91c1c; }

        .tl-wrap { position:relative; padding-left:28px; }
        .tl-wrap::before { content:''; position:absolute; left:10px; top:0; bottom:0; width:2px; background:#fbcfe8; }
        .tl-item { position:relative; padding-bottom:20px; }
        .tl-item:last-child { padding-bottom:0; }
        .tl-dot { position:absolute; left:-23px; top:2px; width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:2px solid #fff; }
        .tl-dot-done  { background:#f472b6; }
        .tl-dot-now   { background:#f472b6; box-shadow:0 0 0 3px rgba(244,114,182,.2); }
        .tl-dot-wait  { background:#e5e7eb; }
        .tl-dot-red   { background:#ef4444; }

        .ptable { width:100%; border-collapse:collapse; }
        .ptable th { background:#fef2f8; padding:10px 14px; text-align:left; font-size:11.5px; font-weight:700; color:#9ca3af; text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid #fbcfe8; }
        .ptable th:not(:first-child) { text-align:right; }
        .ptable td { padding:12px 14px; font-size:13px; border-bottom:1px solid #fef2f8; vertical-align:middle; }
        .ptable td:not(:first-child) { text-align:right; }
        .ptable tbody tr:hover { background:#fef2f8; }
        .ptable tfoot td { background:#fff5f7; padding:12px 14px; font-weight:700; }

        .sidebar { position:sticky; top:24px; }

        .abtn { display:inline-flex; align-items:center; gap:6px; padding:9px 18px; border-radius:10px; font-size:13px; font-weight:700; cursor:pointer; transition:all .15s; border:none; }
        .abtn:hover { transform:translateY(-1px); }
        .abtn-pink { background:linear-gradient(135deg,#f472b6,#ec489a); color:#fff; box-shadow:0 2px 10px rgba(244,114,182,.3); }
        .abtn-gray   { background:#fff; color:#6b7280; border:1.5px solid #fbcfe8; }
        .abtn-gray:hover { border-color:#f9a8d4; }

        .photo-thumb { position:relative; border-radius:10px; overflow:hidden; cursor:pointer; }
        .photo-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .25s; }
        .photo-thumb:hover img { transform:scale(1.05); }
        .photo-overlay { position:absolute; inset:0; background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .2s; }
        .photo-thumb:hover .photo-overlay { opacity:1; }

        .img-modal { display:none; position:fixed; z-index:9999; inset:0; background:rgba(0,0,0,.88); }
        .img-modal-content { display:block; max-width:90%; max-height:90%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border-radius:10px; }
        .close-modal { position:absolute; top:18px; right:22px; color:#fff; width:40px; height:40px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.15); border-radius:50%; cursor:pointer; font-size:18px; transition:.2s; z-index:10000; }
        .close-modal:hover { background:rgba(255,255,255,.25); }
        .zoom-controls { position:absolute; bottom:22px; left:50%; transform:translateX(-50%); display:flex; gap:8px; background:rgba(0,0,0,.5); padding:7px 14px; border-radius:50px; z-index:10000; }
        .zoom-btn { background:none; border:none; color:#fff; font-size:16px; cursor:pointer; width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:50%; transition:.2s; }
        .zoom-btn:hover { background:rgba(255,255,255,.2); }
        .zoom-level { color:#fff; font-size:12px; min-width:44px; text-align:center; display:flex; align-items:center; justify-content:center; }

        /* Line clamp fallback */
        .line-clamp-1 {
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        @keyframes fuIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
        .fu  { animation:fuIn .3s ease both; }
        .fu1 { animation-delay:.04s } .fu2 { animation-delay:.08s } .fu3 { animation-delay:.12s }
        .fu4 { animation-delay:.16s } .fu5 { animation-delay:.2s  } .fu6 { animation-delay:.24s }
        
        .border-pink-light { border-color: #fbcfe8; }
    </style>
</head>
<body class="min-h-screen">

    <div class="w-full px-4 sm:px-6 lg:px-8 py-5">

        
        <?php if(session('success')): ?><div class="mb-3 p-3.5 bg-green-50 border-l-4 border-green-500 text-green-700 rounded-xl flex items-center justify-between text-sm fu"><span class="flex items-center gap-2"><i class="fas fa-check-circle"></i><?php echo e(session('success')); ?></span><button onclick="this.parentElement.remove()"><i class="fas fa-times"></i></button></div><?php endif; ?>
        <?php if(session('error')): ?><div class="mb-3 p-3.5 bg-red-50 border-l-4 border-red-500 text-red-700 rounded-xl flex items-center justify-between text-sm fu"><span class="flex items-center gap-2"><i class="fas fa-exclamation-circle"></i><?php echo e(session('error')); ?></span><button onclick="this.parentElement.remove()"><i class="fas fa-times"></i></button></div><?php endif; ?>

        
        <?php
            $kodeTampil = $pesanan->kode_pesanan;
            $statusColor = match($pesanan->status) {
                'pending'=>'bg-yellow-100 text-yellow-700','dibayar'=>'bg-blue-100 text-blue-700',
                'diproses'=>'bg-pink-100 text-pink-700','dikirim'=>'bg-purple-100 text-purple-700',
                'selesai'=>'bg-green-100 text-green-700','dibatalkan'=>'bg-red-100 text-red-700',
                default=>'bg-gray-100 text-gray-700'
            };
            $statusIcon = match($pesanan->status) {
                'pending'=>'fa-clock','dibayar'=>'fa-check-circle','diproses'=>'fa-box-open',
                'dikirim'=>'fa-truck','selesai'=>'fa-check-double','dibatalkan'=>'fa-times-circle',
                default=>'fa-circle'
            };
        ?>
        <div class="page-header fu">
            <div class="relative z-10 px-6 py-5">
                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                    <div class="flex items-center gap-4">
                        <div class="w-12 h-12 bg-white/20 rounded-2xl flex items-center justify-center border border-white/25 flex-shrink-0">
                            <i class="fas fa-clipboard-list text-white text-lg"></i>
                        </div>
                        <div>
                            <div class="flex items-center gap-2.5 flex-wrap">
                                <h1 class="text-white font-bold text-xl">Detail Pesanan Skincare</h1>
                                <span class="sbadge s-<?php echo e($pesanan->status); ?>">
                                    <i class="fas <?php echo e($statusIcon); ?>" style="font-size:9px"></i>
                                    <?php echo e(strtoupper($pesanan->status)); ?>

                                    <?php if($pesanan->status == 'diproses'): ?><span class="opacity-60 font-normal">· Dikemas</span><?php endif; ?>
                                </span>
                            </div>
                            <p class="text-pink-100 text-sm mt-0.5 flex items-center flex-wrap gap-1.5">
                                <i class="fas fa-hashtag text-pink-300"></i>
                                <span class="text-white font-semibold"><?php echo e($kodeTampil); ?></span>
                                <span class="text-pink-300">·</span>
                                <i class="far fa-calendar-alt text-pink-300"></i> <?php echo e($pesanan->created_at->format('d M Y')); ?>

                                <span class="text-pink-300">|</span>
                                <i class="fas fa-clock text-pink-300"></i> <?php echo e($pesanan->created_at->format('H:i')); ?> WIB
                                <span class="text-pink-300">|</span>
                                <i class="fas fa-history text-pink-300"></i> <?php echo e($pesanan->created_at->diffForHumans()); ?>

                            </p>
                        </div>
                    </div>
                    <?php if($pesanan->status === 'dibayar'): ?>
                    <?php $produkSayaCek = $pesanan->detail->filter(fn($d)=>$d->produk&&$d->produk->user_id==auth()->id()); ?>
                    <?php if($produkSayaCek->count() > 0): ?>
                    <a href="<?php echo e(route('pesanan.masuk.pilih-kurir', $pesanan->id)); ?>"
                       class="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-white text-pink-600 font-semibold text-sm hover:bg-pink-50 transition shadow-md flex-shrink-0 self-start sm:self-auto">
                        <i class="fas fa-truck text-xs"></i> Kirim Pesanan
                    </a>
                    <?php endif; ?>
                            
        <?php if(in_array($pesanan->status, ['dibayar', 'diproses', 'dikirim', 'selesai'])): ?>
        <button onclick="cetakResi()"
            class="inline-flex items-center gap-2 px-6 py-3 bg-indigo-500 hover:bg-indigo-600 text-white rounded-xl font-semibold transition-all shadow-md hover:shadow-lg transform hover:scale-105 duration-200">
            <i class="fas fa-print text-sm"></i>
            <span>Cetak Resi</span>
        </button>
        <?php endif; ?>
                    <?php endif; ?>
                </div>
            </div>
        </div>

        
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-5">

            
            <div class="lg:col-span-2 space-y-4">


<?php if($pesanan->status === 'dibatalkan' && $pesanan->catatan): ?>
<?php
    $catatanJson = json_decode($pesanan->catatan, true);
    $catatanTampil = null;
    if (json_last_error() === JSON_ERROR_NONE && is_array($catatanJson)) {
        $catatanTampil = $catatanJson['keterangan'] ?? $catatanJson['keterangan_diskon'] ?? null;
    } else {
        $catatanTampil = $pesanan->catatan;
    }
    $uniqueId = 'alasan_' . $pesanan->id;
    $batasKarakter = 100;
    $isLong = strlen($catatanTampil) > $batasKarakter;
?>
<div class="card fu fu1" style="border-left:3px solid #ef4444">
    <div class="card-header bg-red-50 border-b border-pink-100 pb-3">
        <div class="card-icon bg-red-100"><i class="fas fa-ban text-red-500 text-xs"></i></div>
        <p class="card-title text-red-700">Alasan Pembatalan</p>
    </div>
    <div class="p-5">
        <?php if($catatanTampil): ?>
            <div class="mb-3">
                
                <div id="pendek-<?php echo e($uniqueId); ?>" class="<?php echo e($isLong ? '' : 'hidden'); ?>">
                    <p class="text-gray-700 text-sm italic leading-relaxed"
                       style="overflow:hidden; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;">
                        "<?php echo e($catatanTampil); ?>"
                    </p>
                </div>
                
                <div id="lengkap-<?php echo e($uniqueId); ?>" class="<?php echo e($isLong ? 'hidden' : ''); ?>">
                    <p class="text-gray-700 text-sm italic leading-relaxed" style="word-break:break-word;">
                        "<?php echo e($catatanTampil); ?>"
                    </p>
                </div>
                <?php if($isLong): ?>
                <button onclick="toggleAlasanBatal('<?php echo e($uniqueId); ?>', this)"
                        class="mt-2 text-xs font-semibold text-pink-500 hover:text-pink-600 flex items-center gap-1 transition-colors">
                    <i id="icon-<?php echo e($uniqueId); ?>" class="fas fa-chevron-down text-[10px]"></i>
                    <span id="btn-<?php echo e($uniqueId); ?>">Baca selengkapnya</span>
                </button>
                <?php endif; ?>
            </div>
        <?php else: ?>
            <p class="text-gray-400 text-sm italic">Tidak ada catatan tambahan.</p>
        <?php endif; ?>
        
        <div class="flex items-center gap-3 mt-2.5 flex-wrap pt-2 border-t border-pink-100">
            <span class="text-xs text-gray-400 flex items-center gap-1"><i class="fas fa-calendar-alt text-pink-400"></i><?php echo e($pesanan->updated_at->format('d M Y')); ?></span>
            <span class="text-gray-200 text-xs">|</span>
            <span class="text-xs text-gray-400 flex items-center gap-1"><i class="fas fa-clock text-pink-400"></i><?php echo e($pesanan->updated_at->format('H:i')); ?> WIB</span>
            <span class="text-gray-200 text-xs">|</span>
            <span class="text-xs text-gray-400 flex items-center gap-1"><i class="fas fa-history text-pink-400"></i><?php echo e($pesanan->updated_at->diffForHumans()); ?></span>
        </div>
    </div>
</div>

<script>
function toggleAlasanBatal(id, btn) {
    const pendekEl = document.getElementById(`pendek-${id}`);
    const lengkapEl = document.getElementById(`lengkap-${id}`);
    const iconEl = document.getElementById(`icon-${id}`);
    const btnText = document.getElementById(`btn-${id}`);
    
    if (!pendekEl || !lengkapEl || !iconEl || !btnText) return;
    
    const isExpanded = pendekEl.classList.contains('hidden');
    
    if (isExpanded) {
        // Sembunyikan
        pendekEl.classList.remove('hidden');
        lengkapEl.classList.add('hidden');
        iconEl.classList.remove('fa-chevron-up');
        iconEl.classList.add('fa-chevron-down');
        btnText.textContent = 'Baca selengkapnya';
    } else {
        // Tampilkan lengkap
        pendekEl.classList.add('hidden');
        lengkapEl.classList.remove('hidden');
        iconEl.classList.remove('fa-chevron-down');
        iconEl.classList.add('fa-chevron-up');
        btnText.textContent = 'Sembunyikan';
    }
}
</script>
<?php endif; ?>

                
                <div class="card fu fu1">
                    <div class="card-header border-b border-pink-100 pb-3">
                        <div class="card-icon bg-pink-100"><i class="fas fa-history text-pink-500 text-xs"></i></div>
                        <p class="card-title">Timeline Status</p>
                    </div>
                    <div class="p-5">
                        <div class="tl-wrap">

                            
                            <div class="tl-item">
                                <div class="tl-dot tl-dot-done"><i class="fas fa-check text-white" style="font-size:7px"></i></div>
                                <div>
                                    <p class="font-semibold text-gray-800 text-sm">Pesanan Dibuat</p>
                                    <div class="flex items-center gap-2 mt-0.5 flex-wrap">
                                        <span class="text-xs text-gray-400 flex items-center gap-1"><i class="fas fa-calendar-alt text-pink-400"></i><?php echo e($pesanan->created_at->format('d M Y')); ?></span>
                                        <span class="text-gray-200 text-xs">|</span>
                                        <span class="text-xs text-gray-400 flex items-center gap-1"><i class="fas fa-clock text-pink-400"></i><?php echo e($pesanan->created_at->format('H:i')); ?> WIB</span>
                                        <span class="text-gray-200 text-xs">|</span>
                                        <span class="text-xs text-gray-400 flex items-center gap-1"><i class="fas fa-history text-pink-400"></i><?php echo e($pesanan->created_at->diffForHumans()); ?></span>
                                    </div>
                                </div>
                            </div>

                            
                            <?php if($pesanan->pembayaran && $pesanan->pembayaran->tanggal_bayar): ?>
                            <div class="tl-item">
                                <div class="tl-dot tl-dot-done"><i class="fas fa-check text-white" style="font-size:7px"></i></div>
                                <div>
                                    <p class="font-semibold text-gray-800 text-sm">Pembayaran Diverifikasi</p>
                                    <div class="flex items-center gap-2 mt-0.5 flex-wrap">
                                        <span class="text-xs text-gray-400 flex items-center gap-1"><i class="fas fa-calendar-alt text-pink-400"></i><?php echo e($pesanan->pembayaran->tanggal_bayar->format('d M Y')); ?></span>
                                        <span class="text-gray-200 text-xs">|</span>
                                        <span class="text-xs text-gray-400 flex items-center gap-1"><i class="fas fa-clock text-pink-400"></i><?php echo e($pesanan->pembayaran->tanggal_bayar->format('H:i')); ?> WIB</span>
                                        <span class="text-gray-200 text-xs">|</span>
                                        <span class="text-xs text-gray-400 flex items-center gap-1"><i class="fas fa-history text-pink-400"></i><?php echo e($pesanan->pembayaran->tanggal_bayar->diffForHumans()); ?></span>
                                    </div>
                                </div>
                            </div>
                            <?php endif; ?>

                            
                            <?php if(in_array($pesanan->status, ['diproses','dikirim','selesai'])): ?>
                            <div class="tl-item">
                                <div class="tl-dot <?php echo e($pesanan->status=='diproses' ? 'tl-dot-now' : 'tl-dot-done'); ?>">
                                    <i class="fas <?php echo e($pesanan->status=='diproses' ? 'fa-box-open' : 'fa-check'); ?> text-white" style="font-size:7px"></i>
                                </div>
                                <div>
                                    <p class="font-semibold text-gray-800 text-sm">Dikemas & Ditugaskan ke Kurir</p>
                                    <div class="flex items-center gap-2 mt-0.5 flex-wrap">
                                        <span class="text-xs text-gray-400 flex items-center gap-1"><i class="fas fa-calendar-alt text-pink-400"></i><?php echo e($pesanan->updated_at->format('d M Y')); ?></span>
                                        <span class="text-gray-200 text-xs">|</span>
                                        <span class="text-xs text-gray-400 flex items-center gap-1"><i class="fas fa-clock text-pink-400"></i><?php echo e($pesanan->updated_at->format('H:i')); ?> WIB</span>
                                        <span class="text-gray-200 text-xs">|</span>
                                        <span class="text-xs text-gray-400 flex items-center gap-1"><i class="fas fa-history text-pink-400"></i><?php echo e($pesanan->updated_at->diffForHumans()); ?></span>
                                    </div>
                                    <?php if($pesanan->kurir): ?>
                                        <p class="text-xs text-pink-600 mt-1"><i class="fas fa-truck mr-1"></i><?php echo e($pesanan->kurir->name); ?></p>
                                    <?php endif; ?>
                                </div>
                            </div>
                            <?php endif; ?>

                            
                            <?php if(in_array($pesanan->status, ['dikirim','selesai'])): ?>
                            <div class="tl-item">
                                <div class="tl-dot <?php echo e($pesanan->status=='dikirim' ? 'tl-dot-now' : 'tl-dot-done'); ?>">
                                    <i class="fas <?php echo e($pesanan->status=='dikirim' ? 'fa-truck' : 'fa-check'); ?> text-white" style="font-size:7px"></i>
                                </div>
                                <div>
                                    <p class="font-semibold text-gray-800 text-sm">Dalam Perjalanan</p>
                                    <?php if($pesanan->tanggal_pengiriman): ?>
                                    <div class="flex items-center gap-2 mt-0.5 flex-wrap">
                                        <span class="text-xs text-gray-400 flex items-center gap-1"><i class="fas fa-calendar-alt text-pink-400"></i><?php echo e($pesanan->tanggal_pengiriman->format('d M Y')); ?></span>
                                        <span class="text-gray-200 text-xs">|</span>
                                        <span class="text-xs text-gray-400 flex items-center gap-1"><i class="fas fa-clock text-pink-400"></i><?php echo e($pesanan->tanggal_pengiriman->format('H:i')); ?> WIB</span>
                                        <span class="text-gray-200 text-xs">|</span>
                                        <span class="text-xs text-gray-400 flex items-center gap-1"><i class="fas fa-history text-pink-400"></i><?php echo e($pesanan->tanggal_pengiriman->diffForHumans()); ?></span>
                                    </div>
                                    <?php else: ?>
                                        <p class="text-xs text-gray-400 mt-0.5">-</p>
                                    <?php endif; ?>
                                    <?php if($pesanan->no_resi): ?>
                                        <p class="text-xs text-purple-600 mt-1"><i class="fas fa-barcode mr-1"></i>Resi: <?php echo e($pesanan->no_resi); ?></p>
                                    <?php endif; ?>
                                </div>
                            </div>
                            <?php endif; ?>

                            
                            <?php if($pesanan->status == 'selesai'): ?>
                            <div class="tl-item">
                                <div class="tl-dot tl-dot-done"><i class="fas fa-flag-checkered text-white" style="font-size:7px"></i></div>
                                <div>
                                    <p class="font-semibold text-gray-800 text-sm">Diterima Pembeli</p>
                                    <?php if($pesanan->tanggal_selesai): ?>
                                    <div class="flex items-center gap-2 mt-0.5 flex-wrap">
                                        <span class="text-xs text-gray-400 flex items-center gap-1"><i class="fas fa-calendar-alt text-pink-400"></i><?php echo e($pesanan->tanggal_selesai->format('d M Y')); ?></span>
                                        <span class="text-gray-200 text-xs">|</span>
                                        <span class="text-xs text-gray-400 flex items-center gap-1"><i class="fas fa-clock text-pink-400"></i><?php echo e($pesanan->tanggal_selesai->format('H:i')); ?> WIB</span>
                                        <span class="text-gray-200 text-xs">|</span>
                                        <span class="text-xs text-gray-400 flex items-center gap-1"><i class="fas fa-history text-pink-400"></i><?php echo e($pesanan->tanggal_selesai->diffForHumans()); ?></span>
                                    </div>
                                    <?php else: ?>
                                        <p class="text-xs text-gray-400 mt-0.5">-</p>
                                    <?php endif; ?>
                                </div>
                            </div>
                            <?php endif; ?>

                            
                            <?php if($pesanan->status == 'dibatalkan'): ?>
                            <div class="tl-item">
                                <div class="tl-dot tl-dot-red"><i class="fas fa-times text-white" style="font-size:7px"></i></div>
                                <div>
                                    <p class="font-semibold text-red-700 text-sm">Pesanan Dibatalkan</p>
                                    <div class="flex items-center gap-2 mt-0.5 flex-wrap">
                                        <span class="text-xs text-gray-400 flex items-center gap-1"><i class="fas fa-calendar-alt text-pink-400"></i><?php echo e($pesanan->updated_at->format('d M Y')); ?></span>
                                        <span class="text-gray-200 text-xs">|</span>
                                        <span class="text-xs text-gray-400 flex items-center gap-1"><i class="fas fa-clock text-pink-400"></i><?php echo e($pesanan->updated_at->format('H:i')); ?> WIB</span>
                                        <span class="text-gray-200 text-xs">|</span>
                                        <span class="text-xs text-gray-400 flex items-center gap-1"><i class="fas fa-history text-pink-400"></i><?php echo e($pesanan->updated_at->diffForHumans()); ?></span>
                                    </div>
                                </div>
                            </div>
                            <?php endif; ?>

                        </div>
                    </div>
                </div>

                
                <?php
                    $produkSaya = $pesanan->detail->filter(fn($d) => $d->produk && $d->produk->user_id == auth()->id());
                ?>
                <div class="card fu fu2">
                    <div class="card-header border-b border-pink-100 pb-3">
                        <div class="card-icon bg-blue-100"><i class="fas fa-box text-blue-500 text-xs"></i></div>
                        <div><p class="card-title">Detail Produk Skincare</p></div>
                        <span class="ml-auto text-xs text-gray-400"><?php echo e($produkSaya->count()); ?> item</span>
                    </div>
                    <?php if($produkSaya->count() > 0): ?>
                    <div class="overflow-x-auto">
                        <table class="ptable">
                            <thead>
                                <tr>
                                    <th>Produk</th>
                                    <th>Warna</th>
                                    <th>Ukuran</th>
                                    <th>Harga</th>
                                    <th>Qty</th>
                                    <th>Subtotal</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php $__currentLoopData = $produkSaya; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $detail): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <?php
                                    $foto = null; $warnaOrder = $detail->warna ?? null;
                                    if (!empty($detail->produk->foto)) {
                                        $allFotos = explode('|', $detail->produk->foto);
                                        if (str_contains($allFotos[0], ':')) {
                                            foreach ($allFotos as $f) {
                                                $f = trim($f);
                                                if (str_contains($f, ':')) {
                                                    [$lw, $pf] = explode(':', $f, 2);
                                                    if ($warnaOrder && strtolower(trim($lw)) === strtolower(trim($warnaOrder))) { $foto = trim($pf); break; }
                                                }
                                            }
                                            if (!$foto) $foto = str_contains($allFotos[0],':') ? trim(explode(':',$allFotos[0],2)[1]) : trim($allFotos[0]);
                                        } else { $foto = trim($allFotos[0]); }
                                    }
                                ?>
                                <tr>
                                    <td>
                                        <div class="flex items-center gap-3">
                                            <div class="w-12 h-12 rounded-xl border border-pink-100 overflow-hidden flex-shrink-0 bg-gray-50 cursor-pointer photo-thumb"
                                                onclick="openImgModal('<?php echo e($foto ? asset('storage/'.$foto) : ''); ?>')" style="width:48px;height:48px">
                                                <?php if($foto): ?>
                                                <img src="<?php echo e(asset('storage/'.$foto)); ?>" alt="<?php echo e($detail->produk->nama_produk); ?>" onerror="this.parentElement.innerHTML='<div class=\'w-full h-full flex items-center justify-center\'><i class=\'fas fa-image text-gray-300\'></i></div>'">
                                                <?php else: ?>
                                                <div class="w-full h-full flex items-center justify-center"><i class="fas fa-image text-gray-300"></i></div>
                                                <?php endif; ?>
                                                <div class="photo-overlay"><i class="fas fa-search-plus text-white text-sm"></i></div>
                                            </div>
                                            <p class="font-semibold text-gray-800 text-sm"><?php echo e($detail->produk->nama_produk); ?></p>
                                        </div>
                                    </td>
                                    <td>
                                        <?php if($detail->warna): ?>
                                        <span class="inline-flex items-center gap-1 px-2 py-0.5 bg-pink-50 text-pink-700 rounded-lg text-xs font-semibold"><?php echo e($detail->warna); ?></span>
                                        <?php else: ?><span class="text-gray-300">—</span><?php endif; ?>
                                    </td>
                                    <td>
                                        <?php if($detail->ukuran): ?>
                                        <span class="inline-flex items-center gap-1 px-2 py-0.5 bg-blue-50 text-blue-700 rounded-lg text-xs font-semibold"><?php echo e($detail->ukuran); ?></span>
                                        <?php else: ?><span class="text-gray-300">—</span><?php endif; ?>
                                    </td>
                                    <td class="text-gray-600 font-medium">Rp <?php echo e(number_format($detail->harga,0,',','.')); ?></td>
                                    <td>
                                        <span class="inline-flex items-center justify-center w-7 h-7 bg-pink-100 text-pink-700 rounded-lg text-xs font-bold"><?php echo e($detail->qty); ?></span>
                                    </td>
                                    <td class="font-bold text-pink-600">Rp <?php echo e(number_format($detail->subtotal,0,',','.')); ?></td>
                                </tr>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td colspan="5" class="text-right text-sm font-semibold text-gray-600">Total Produk Anda</td>
                                    <td class="text-pink-600">Rp <?php echo e(number_format($produkSaya->sum('subtotal'),0,',','.')); ?></td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                    <?php else: ?>
                    <div class="p-8 text-center"><i class="fas fa-box-open text-gray-200 text-3xl mb-2"></i><p class="text-gray-400 text-sm">Tidak ada produk skincare milik Anda</p></div>
                    <?php endif; ?>
                </div>

                
                <?php if($pesanan->kurirAssignment): ?>
                <?php
                    $assignment = $pesanan->kurirAssignment;
                    $ksBadge = match($assignment->status) { 'ditugaskan'=>'bg-blue-100 text-blue-700','dijemput'=>'bg-amber-100 text-amber-700','diantar'=>'bg-purple-100 text-purple-700','selesai'=>'bg-emerald-100 text-emerald-700',default=>'bg-gray-100 text-gray-700' };
                    $ksIcon  = match($assignment->status) { 'ditugaskan'=>'fa-clipboard-list','dijemput'=>'fa-box','diantar'=>'fa-truck','selesai'=>'fa-check-circle',default=>'fa-circle' };
                ?>
                <div class="card fu fu3">
                    <div class="card-header border-b border-pink-100 pb-3">
                        <div class="card-icon bg-indigo-100"><i class="fas fa-truck text-indigo-500 text-xs"></i></div>
                        <p class="card-title">Informasi Pengiriman Kurir</p>
                        <span class="ml-auto inline-flex items-center gap-1.5 px-3 py-1 <?php echo e($ksBadge); ?> rounded-full text-xs font-bold">
                            <i class="fas <?php echo e($ksIcon); ?>" style="font-size:9px"></i> <?php echo e(strtoupper($assignment->status)); ?>

                        </span>
                    </div>
                    <div class="p-5">
                    <table style="width:100%;border-collapse:collapse;font-size:13px;border:1px solid #fbcfe8;">
                        <tr style="border-bottom:1px solid #fbcfe8;">
                            <td style="padding:12px;font-weight:600;color:#4b5563;width:35%;background:#fef2f8;border-right:1px solid #fbcfe8;">Nama Kurir</td>
                            <td style="padding:12px;color:#1f2937;"><?php echo e($assignment->kurir->name ?? '-'); ?></td>
                        </tr>
                        <tr style="border-bottom:1px solid #fbcfe8;">
                            <td style="padding:12px;font-weight:600;color:#4b5563;background:#fef2f8;border-right:1px solid #fbcfe8;">No. HP</td>
                            <td style="padding:12px;color:#1f2937;"><?php echo e($assignment->kurir->no_hp ?? '-'); ?></td>
                        </tr>
                        <tr style="border-bottom:1px solid #fbcfe8;">
                            <td style="padding:12px;font-weight:600;color:#4b5563;background:#fef2f8;border-right:1px solid #fbcfe8;">Ditugaskan</td>
                            <td style="padding:12px;color:#1f2937;">
                                <div class="flex items-center gap-2 flex-wrap">
                                    <span class="flex items-center gap-1"><i class="fas fa-calendar-alt text-pink-400"></i> <?php echo e($assignment->created_at->format('d M Y')); ?></span>
                                    <span class="text-gray-300">|</span>
                                    <span class="flex items-center gap-1"><i class="fas fa-clock text-pink-400"></i> <?php echo e($assignment->created_at->format('H:i')); ?> WIB</span>
                                    <span class="text-gray-300">|</span>
                                    <span class="flex items-center gap-1 text-gray-400"><i class="fas fa-history text-pink-400"></i> <?php echo e($assignment->created_at->diffForHumans()); ?></span>
                                </div>
                            </td>
                        </tr>
                        <tr style="border-bottom:1px solid #fbcfe8;">
                            <td style="padding:12px;font-weight:600;color:#4b5563;background:#fef2f8;border-right:1px solid #fbcfe8;vertical-align:top;">Catatan Kurir</td>
                            <td style="padding:12px;color:#1f2937;word-wrap:break-word;white-space:normal;max-width:400px;">
                                <?php
                                    $catatanKurir = $assignment->catatan ?? '-';
                                    $uniqueIdCatatan = 'catatan_kurir_' . $assignment->id;
                                    $batasKarakterCatatan = 100;
                                    $isLongCatatan = strlen($catatanKurir) > $batasKarakterCatatan && $catatanKurir !== '-';
                                ?>
                                
                                <?php if($catatanKurir !== '-'): ?>
                                    <div>
                                        <div id="catatan-pendek-<?php echo e($uniqueIdCatatan); ?>" class="<?php echo e($isLongCatatan ? '' : 'hidden'); ?>">
                                            <p style="overflow:hidden; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;">
                                                <?php echo e($catatanKurir); ?>

                                            </p>
                                        </div>
                                        <div id="catatan-lengkap-<?php echo e($uniqueIdCatatan); ?>" class="<?php echo e($isLongCatatan ? 'hidden' : ''); ?>">
                                            <p><?php echo e($catatanKurir); ?></p>
                                        </div>
                                        <?php if($isLongCatatan): ?>
                                        <button onclick="toggleCatatanKurir('<?php echo e($uniqueIdCatatan); ?>', this)"
                                                class="mt-2 text-xs font-semibold text-pink-500 hover:text-pink-600 flex items-center gap-1 transition-colors">
                                            <i id="icon-catatan-<?php echo e($uniqueIdCatatan); ?>" class="fas fa-chevron-down text-[10px]"></i>
                                            <span id="btn-catatan-<?php echo e($uniqueIdCatatan); ?>">Baca selengkapnya</span>
                                        </button>
                                        <?php endif; ?>
                                    </div>
                                <?php else: ?>
                                    <span class="text-gray-400"><?php echo e($catatanKurir); ?></span>
                                <?php endif; ?>
                            </td>
                        </tr>
                        <tr style="border-bottom:1px solid #fbcfe8;">
                            <td style="padding:12px;font-weight:600;color:#4b5563;background:#fef2f8;border-right:1px solid #fbcfe8;">Tanggal Selesai</td>
                            <td style="padding:12px;color:#1f2937;">
                                <?php if($assignment->tanggal_diterima && $assignment->status == 'selesai'): ?>
                                    <div class="flex items-center gap-2 flex-wrap">
                                        <span class="flex items-center gap-1"><i class="fas fa-calendar-alt text-pink-400"></i> <?php echo e($assignment->tanggal_diterima->format('d M Y')); ?></span>
                                        <span class="text-gray-300">|</span>
                                        <span class="flex items-center gap-1"><i class="fas fa-clock text-pink-400"></i> <?php echo e($assignment->tanggal_diterima->format('H:i')); ?> WIB</span>
                                        <span class="text-gray-300">|</span>
                                        <span class="flex items-center gap-1 text-gray-400"><i class="fas fa-history text-pink-400"></i> <?php echo e($assignment->tanggal_diterima->diffForHumans()); ?></span>
                                    </div>
                                <?php else: ?> -
                                <?php endif; ?>
                            </td>
                        </tr>
                     </table>
                    </div>

                    
                    <?php if($assignment->foto_bukti): ?>
                    <div class="px-5 pb-5 border-t border-pink-100 pt-4">
                        <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3 flex items-center gap-2">
                            <i class="fas fa-camera text-pink-400"></i> Foto Bukti Pengiriman
                        </p>
                        <div class="flex gap-4 items-start">
                            <div class="photo-thumb w-36 h-36 border border-pink-200 rounded-xl flex-shrink-0"
                                onclick="openImgModal('<?php echo e(asset('storage/'.$assignment->foto_bukti)); ?>')">
                                <img src="<?php echo e(asset('storage/'.$assignment->foto_bukti)); ?>" alt="Bukti Pengiriman">
                                <div class="photo-overlay rounded-xl"><i class="fas fa-search-plus text-white text-lg"></i></div>
                            </div>
                            <div class="text-xs text-gray-400 space-y-1.5 mt-1">
                                <p class="flex items-center gap-1.5"><i class="fas fa-info-circle text-pink-300"></i> Klik foto untuk memperbesar</p>
                                <?php if($assignment->tanggal_diterima && $assignment->status=='selesai'): ?>
                                <p class="flex items-center gap-1.5">
                                    <i class="fas fa-calendar-alt text-pink-300"></i> <?php echo e($assignment->tanggal_diterima->format('d M Y')); ?>

                                    <span class="text-gray-300">|</span>
                                    <i class="fas fa-clock text-pink-300"></i> <?php echo e($assignment->tanggal_diterima->format('H:i')); ?> WIB
                                    <span class="text-gray-300">|</span>
                                    <i class="fas fa-history text-pink-300"></i> <?php echo e($assignment->tanggal_diterima->diffForHumans()); ?>

                                </p>
                                <?php endif; ?>
                                <p class="flex items-center gap-1.5"><i class="fas fa-user text-pink-300"></i> <?php echo e($assignment->kurir->name ?? '-'); ?></p>
                            </div>
                        </div>
                    </div>
                    <?php elseif(in_array($assignment->status,['ditugaskan','dijemput','diantar'])): ?>
                    <div class="mx-5 mb-5 bg-pink-50 border border-pink-200 rounded-xl p-3 flex items-center gap-3">
                        <i class="fas fa-camera text-pink-400"></i>
                        <div><p class="text-xs font-semibold text-pink-700">Belum ada foto bukti</p><p class="text-xs text-pink-600">Kurir akan mengunggah saat pengiriman selesai</p></div>
                    </div>
                    <?php endif; ?>
                </div>
                <?php endif; ?>

                
                <?php
                    $ulasanPesanan = $pesanan->detail
                        ->filter(fn($d)=>$d->produk&&$d->produk->user_id==auth()->id())
                        ->map(fn($d)=>['detail'=>$d,'ulasan'=>\App\Models\Ulasan::where('pesanan_id',$pesanan->id)->where('produk_id',$d->produk_id)->with('user')->first()])
                        ->filter(fn($i)=>$i['ulasan']!==null);
                ?>
                <?php if($ulasanPesanan->count() > 0): ?>
                <div class="card fu fu4">
                    <div class="card-header border-b border-pink-100 pb-3 bg-pink-50">
                        <div class="card-icon bg-pink-100"><i class="fas fa-star text-pink-500 text-xs"></i></div>
                        <p class="card-title">Ulasan Pembeli</p>
                        <span class="ml-auto text-xs text-gray-400"><?php echo e($ulasanPesanan->count()); ?> ulasan</span>
                    </div>
                    <div class="p-5 space-y-3">
                        <?php $__currentLoopData = $ulasanPesanan; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <?php
                            $ul = $item['ulasan'];
                            $dt = $item['detail'];
                            $fotoUlasan = null;
                            if (!empty($dt->produk->foto)) {
                                $allFotos = explode('|', $dt->produk->foto);
                                $warnaOrder = $dt->warna ?? null;
                                if (str_contains($allFotos[0], ':')) {
                                    foreach ($allFotos as $f) {
                                        $f = trim($f);
                                        if (str_contains($f, ':')) {
                                            [$lw, $pf] = explode(':', $f, 2);
                                            if ($warnaOrder && strtolower(trim($lw)) === strtolower(trim($warnaOrder))) {
                                                $fotoUlasan = trim($pf);
                                                break;
                                            }
                                        }
                                    }
                                    if (!$fotoUlasan) {
                                        $fotoUlasan = str_contains($allFotos[0], ':')
                                            ? trim(explode(':', $allFotos[0], 2)[1])
                                            : trim($allFotos[0]);
                                    }
                                } else {
                                    $fotoUlasan = trim($allFotos[0]);
                                }
                            }
                        ?>
                        <div class="bg-pink-50 rounded-xl p-4 border border-pink-100">

                            
                            <div class="flex items-center gap-3 mb-3">
                                <div class="w-12 h-12 rounded-xl border border-pink-200 overflow-hidden flex-shrink-0 bg-white">
                                    <?php if($fotoUlasan): ?>
                                        <img src="<?php echo e(asset('storage/'.$fotoUlasan)); ?>" class="w-full h-full object-cover"
                                            onerror="this.parentElement.innerHTML='<div class=\'w-full h-full flex items-center justify-center\'><i class=\'fas fa-image text-gray-300\'></i></div>'">
                                    <?php else: ?>
                                        <div class="w-full h-full flex items-center justify-center bg-gray-50">
                                            <i class="fas fa-image text-gray-300"></i>
                                        </div>
                                    <?php endif; ?>
                                </div>
                                <div class="flex-1 min-w-0">
                                    <p class="font-semibold text-gray-800 text-sm truncate"><?php echo e($dt->produk->nama_produk); ?></p>
                                    <p class="text-xs text-gray-400 mt-0.5">
                                        <?php if($dt->warna): ?> <?php echo e($dt->warna); ?> <?php endif; ?>
                                        <?php if($dt->warna && $dt->ukuran): ?> · <?php endif; ?>
                                        <?php if($dt->ukuran): ?> <?php echo e($dt->ukuran); ?> <?php endif; ?>
                                        <?php if($dt->qty): ?> · <?php echo e($dt->qty); ?> pcs <?php endif; ?>
                                    </p>
                                </div>
                                <span class="inline-flex items-center gap-1 px-2.5 py-1 bg-green-100 text-green-700 rounded-full text-xs font-semibold flex-shrink-0">
                                    <i class="fas fa-check-circle text-xs"></i> Sudah diulas
                                </span>
                            </div>

                            
                            <div class="flex items-center gap-2 mb-2">
                                <div class="flex gap-0.5">
                                    <?php for($s=1;$s<=5;$s++): ?>
                                    <span class="text-xl <?php echo e($s<=$ul->bintang ? 'text-amber-400' : 'text-gray-200'); ?>">★</span>
                                    <?php endfor; ?>
                                </div>
                                <span class="text-sm font-bold text-gray-700"><?php echo e($ul->bintang); ?>/5</span>
                            </div>

                            
<?php if($ul->komentar): ?>
<?php
    $komentar       = $ul->komentar;
    $batasKarakter  = 60;
    $isLong         = strlen($komentar) > $batasKarakter;
    $komentarId     = 'kom_' . $ul->id . '_' . $pesanan->id;
    $komentarPendek = $isLong ? substr($komentar, 0, $batasKarakter) . '...' : $komentar;
?>
<div>
    
    <p id="pendek-<?php echo e($komentarId); ?>"
       class="text-gray-700 text-sm leading-relaxed <?php echo e($isLong ? '' : 'hidden'); ?>">
        <?php echo e($komentarPendek); ?>

    </p>
    
    <p id="lengkap-<?php echo e($komentarId); ?>"
       class="text-gray-700 text-sm leading-relaxed <?php echo e($isLong ? 'hidden' : ''); ?>"
       style="word-break: break-word; overflow-wrap: break-word;">
        <?php echo e($komentar); ?>

    </p>
    <?php if($isLong): ?>
    <button onclick="toggleKom('<?php echo e($komentarId); ?>')"
            class="mt-1.5 text-xs font-semibold text-pink-500 hover:text-pink-600 flex items-center gap-1 transition">
        <i id="icon-<?php echo e($komentarId); ?>" class="fas fa-chevron-down text-[10px]"></i>
        <span id="btn-<?php echo e($komentarId); ?>">Baca selengkapnya</span>
    </button>
    <?php endif; ?>
</div>
<?php endif; ?>
<script>
function toggleKom(id) {
    const pendekEl  = document.getElementById('pendek-' + id);
    const lengkapEl = document.getElementById('lengkap-' + id);
    const iconEl    = document.getElementById('icon-' + id);
    const btnEl     = document.getElementById('btn-' + id);

    if (!pendekEl || !lengkapEl) {
        console.warn('Element tidak ditemukan untuk id:', id);
        return;
    }

    const isExpanded = pendekEl.classList.contains('hidden');

    if (isExpanded) {
        pendekEl.classList.remove('hidden');
        lengkapEl.classList.add('hidden');
        if (iconEl) {
            iconEl.classList.remove('fa-chevron-up');
            iconEl.classList.add('fa-chevron-down');
        }
        if (btnEl) btnEl.textContent = 'Baca selengkapnya';
    } else {
        pendekEl.classList.add('hidden');
        lengkapEl.classList.remove('hidden');
        if (iconEl) {
            iconEl.classList.remove('fa-chevron-down');
            iconEl.classList.add('fa-chevron-up');
        }
        if (btnEl) btnEl.textContent = 'Sembunyikan';
    }
}
</script>
                            
                            <div class="flex items-center gap-2 mt-2 flex-wrap">
                                <span class="text-xs text-gray-400 flex items-center gap-1"><i class="fas fa-calendar-alt text-pink-400"></i> <?php echo e($ul->created_at->format('d M Y')); ?></span>
                                <span class="text-gray-300">|</span>
                                <span class="text-xs text-gray-400 flex items-center gap-1"><i class="fas fa-clock text-pink-400"></i> <?php echo e($ul->created_at->format('H:i')); ?> WIB</span>
                                <span class="text-gray-300">|</span>
                                <span class="text-xs text-gray-400 flex items-center gap-1"><i class="fas fa-history text-pink-400"></i> <?php echo e($ul->created_at->diffForHumans()); ?></span>
                            </div>
                        </div>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </div>
                </div>
                <?php endif; ?>

            </div>

            
            <div class="lg:col-span-1">
                <div class="sidebar space-y-4">

                    
                    <div class="card fu fu1">
                        <div class="card-header border-b border-pink-100 pb-3">
                            <div class="card-icon bg-pink-100"><i class="fas fa-receipt text-pink-500 text-xs"></i></div>
                            <p class="card-title">Ringkasan Pesanan</p>
                        </div>
                        <?php
                            $subtotalProduk = $pesanan->detail->sum(fn($d)=>$d->harga*$d->qty);
                            $diskon=0; $keteranganDiskon=null; $subtotalSetelahDiskon=$subtotalProduk;
                            if($pesanan->catatan){$cat=json_decode($pesanan->catatan,true);if(is_array($cat)&&isset($cat['diskon'])){$diskon=$cat['diskon'];$keteranganDiskon=$cat['keterangan']??null;$subtotalSetelahDiskon=$cat['subtotal_setelah_diskon']??$subtotalProduk;}}
                            $ongkir=$pesanan->total_harga-$subtotalSetelahDiskon;
                        ?>
                        <div>
                            <div class="info-row"><span class="info-label flex items-center gap-1.5"><i class="fas fa-box text-blue-400 text-[10px]"></i>Subtotal Produk</span><span class="info-val">Rp <?php echo e(number_format($subtotalProduk,0,',','.')); ?></span></div>
                            <?php if($diskon > 0): ?>
                            <div class="info-row" style="background:#f0fdf4"><span class="info-label flex items-center gap-1.5 text-emerald-600"><i class="fas fa-tag text-[10px]"></i>Diskon <?php if($keteranganDiskon): ?><small>(<?php echo e($keteranganDiskon); ?>)</small><?php endif; ?></span><span class="info-val text-emerald-600">- Rp <?php echo e(number_format($diskon,0,',','.')); ?></span></div>
                            <div class="info-row"><span class="info-label flex items-center gap-1.5"><i class="fas fa-calculator text-pink-400 text-[10px]"></i>Setelah Diskon</span><span class="info-val text-pink-600">Rp <?php echo e(number_format($subtotalSetelahDiskon,0,',','.')); ?></span></div>
                            <?php endif; ?>
                            <div class="info-row"><span class="info-label flex items-center gap-1.5"><i class="fas fa-truck text-emerald-400 text-[10px]"></i>Ongkos Kirim</span>
                                <?php if($ongkir<=0): ?><span class="info-val text-emerald-600">Gratis</span><?php else: ?><span class="info-val">Rp <?php echo e(number_format($ongkir,0,',','.')); ?></span><?php endif; ?>
                            </div>
                            <div class="info-row" style="background:#fff5f7">
                                <span class="font-bold text-gray-700 flex items-center gap-1.5 text-sm"><i class="fas fa-money-bill-wave text-pink-500 text-[11px]"></i>Total</span>
                                <span class="font-extrabold text-pink-600 text-lg">Rp <?php echo e(number_format($pesanan->total_harga,0,',','.')); ?></span>
                            </div>
                        </div>
                    </div>


<div class="card fu fu3">
    <div class="card-header border-b border-pink-100 pb-3">
        <div class="card-icon bg-pink-100"><i class="fas fa-map-marker-alt text-pink-500 text-xs"></i></div>
        <p class="card-title">Informasi Pengiriman</p>
    </div>
    <div class="p-5">
        
        <div class="mb-5 pb-4 border-b border-pink-100">
            <div class="flex items-center gap-3 mb-3">
                <div class="w-10 h-10 bg-gradient-to-br from-pink-400 to-pink-500 rounded-full flex items-center justify-center text-white font-bold text-sm flex-shrink-0"><?php echo e(substr($pesanan->user->name,0,1)); ?></div>
                <div>
                    <p class="font-semibold text-gray-800 text-sm"><?php echo e($pesanan->user->name); ?></p>
                    <p class="text-xs text-gray-400"><?php echo e($pesanan->user->email); ?></p>
                </div>
            </div>
        </div>

        
<div>
    <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3 flex items-center gap-2">
        <i class="fas fa-location-dot text-pink-400 text-xs"></i> Detail Alamat
    </p>
    <div class="overflow-x-auto">
    <table class="w-full text-sm border-collapse border border-pink-200 rounded-lg">
        <tbody>
            <tr class="border-b border-pink-200">
                <td class="py-3 px-4 w-1/3 bg-pink-50 border-r border-pink-200 font-semibold text-gray-700 text-xs uppercase tracking-wider">Nama Penerima</td>
                <td class="py-3 px-4 font-medium text-gray-800"><?php echo e($pesanan->alamat->nama_penerima ?? $pesanan->user->name); ?></td>
            </tr>
            <tr class="border-b border-pink-200">
                <td class="py-3 px-4 bg-pink-50 border-r border-pink-200 font-semibold text-gray-700 text-xs uppercase tracking-wider">No. Telepon</td>
                <td class="py-3 px-4 font-medium text-gray-800"><?php echo e($pesanan->alamat->no_hp ?? '-'); ?></td>
            </tr>
            <tr class="border-b border-pink-200">
                <td class="py-3 px-4 bg-pink-50 border-r border-pink-200 font-semibold text-gray-700 text-xs uppercase tracking-wider">Alamat Lengkap</td>
                <td class="py-3 px-4 text-gray-700">
                    <?php
                        $alamatLengkap  = $pesanan->alamat->alamat_lengkap ?? '-';
                        $uniqueIdAlamat = 'alamat_detail2_' . $pesanan->id;
                        $batasKarakter  = 35;
                        $isLongAlamat   = strlen($alamatLengkap) > $batasKarakter && $alamatLengkap !== '-';
                        $alamatPendek   = $isLongAlamat
                                            ? substr($alamatLengkap, 0, $batasKarakter) . '...'
                                            : $alamatLengkap;
                    ?>

                    <?php if($alamatLengkap !== '-'): ?>
                        <div>
                            
                            <p id="alamat-pendek-<?php echo e($uniqueIdAlamat); ?>"
                               class="text-gray-700 <?php echo e($isLongAlamat ? '' : 'hidden'); ?>">
                                <?php echo e($alamatPendek); ?>

                            </p>
                            
                            <p id="alamat-lengkap-<?php echo e($uniqueIdAlamat); ?>"
                               class="text-gray-700 break-words leading-relaxed <?php echo e($isLongAlamat ? 'hidden' : ''); ?>"
                               style="word-break: break-word; overflow-wrap: break-word;">
                                <?php echo e($alamatLengkap); ?>

                            </p>
                            <?php if($isLongAlamat): ?>
                            <button onclick="toggleAlamatDetail2('<?php echo e($uniqueIdAlamat); ?>')"
                                    class="mt-2 text-xs font-semibold text-pink-500 hover:text-pink-600 flex items-center gap-1 transition-colors">
                                <i id="icon-alamat-<?php echo e($uniqueIdAlamat); ?>" class="fas fa-chevron-down text-[10px]"></i>
                                <span id="btn-alamat-<?php echo e($uniqueIdAlamat); ?>">Baca selengkapnya</span>
                            </button>
                            <?php endif; ?>
                        </div>
                    <?php else: ?>
                        <span class="text-gray-400"><?php echo e($alamatLengkap); ?></span>
                    <?php endif; ?>
                </td>
             </tr>
            <?php
                $prov = $pesanan->alamat->province->name ?? '-';
                $kota = $pesanan->alamat->city->name ?? '-';
                $kec  = $pesanan->alamat->district->name ?? '-';
                $desa = $pesanan->alamat->village->name ?? '-';
            ?>
            <tr class="border-b border-pink-200">
                <td class="py-3 px-4 bg-pink-50 border-r border-pink-200 font-semibold text-gray-700 text-xs uppercase tracking-wider">Provinsi</td>
                <td class="py-3 px-4 font-medium text-gray-800 uppercase"><?php echo e($prov); ?></td>
             </tr>
            <tr class="border-b border-pink-200">
                <td class="py-3 px-4 bg-pink-50 border-r border-pink-200 font-semibold text-gray-700 text-xs uppercase tracking-wider">Kota / Kab</td>
                <td class="py-3 px-4 font-medium text-gray-800 uppercase"><?php echo e($kota); ?></td>
             </tr>
            <tr class="border-b border-pink-200">
                <td class="py-3 px-4 bg-pink-50 border-r border-pink-200 font-semibold text-gray-700 text-xs uppercase tracking-wider">Kecamatan</td>
                <td class="py-3 px-4 font-medium text-gray-800 uppercase"><?php echo e($kec); ?></td>
             </tr>
            <tr class="border-b border-pink-200">
                <td class="py-3 px-4 bg-pink-50 border-r border-pink-200 font-semibold text-gray-700 text-xs uppercase tracking-wider">Desa / Kel</td>
                <td class="py-3 px-4 font-medium text-gray-800 uppercase"><?php echo e($desa); ?></td>
             </tr>
            <?php if($pesanan->alamat->kode_pos): ?>
            <tr class="border-b border-pink-200">
                <td class="py-3 px-4 bg-pink-50 border-r border-pink-200 font-semibold text-gray-700 text-xs uppercase tracking-wider">Kode Pos</td>
                <td class="py-3 px-4 font-medium text-gray-800"><?php echo e($pesanan->alamat->kode_pos); ?></td>
             </tr>
            <?php endif; ?>
        </tbody>
     </table>
    </div>
</div>

<script>
function toggleAlamatDetail2(id) {
    const pendekEl = document.getElementById(`alamat-pendek-${id}`);
    const lengkapEl = document.getElementById(`alamat-lengkap-${id}`);
    const iconEl   = document.getElementById(`icon-alamat-${id}`);
    const btnText  = document.getElementById(`btn-alamat-${id}`);

    if (!pendekEl || !lengkapEl) return;

    const isExpanded = pendekEl.classList.contains('hidden');

    if (isExpanded) {
        pendekEl.classList.remove('hidden');
        lengkapEl.classList.add('hidden');
        iconEl?.classList.replace('fa-chevron-up', 'fa-chevron-down');
        if (btnText) btnText.textContent = 'Baca selengkapnya';
    } else {
        pendekEl.classList.add('hidden');
        lengkapEl.classList.remove('hidden');
        iconEl?.classList.replace('fa-chevron-down', 'fa-chevron-up');
        if (btnText) btnText.textContent = 'Sembunyikan';
    }
}
</script>
    </div>
</div>

<script>
function toggleAlamatLengkap(id, btn) {
    const pendekEl = document.getElementById(`alamat-pendek-${id}`);
    const lengkapEl = document.getElementById(`alamat-lengkap-${id}`);
    const iconEl = document.getElementById(`icon-alamat-${id}`);
    const btnText = document.getElementById(`btn-alamat-${id}`);

    if (!pendekEl || !lengkapEl) return;

    const isExpanded = pendekEl.classList.contains('hidden');

    if (isExpanded) {
        pendekEl.classList.remove('hidden');
        lengkapEl.classList.add('hidden');
        if (iconEl) {
            iconEl.classList.remove('fa-chevron-up');
            iconEl.classList.add('fa-chevron-down');
        }
        if (btnText) btnText.textContent = 'Baca selengkapnya';
    } else {
        pendekEl.classList.add('hidden');
        lengkapEl.classList.remove('hidden');
        if (iconEl) {
            iconEl.classList.remove('fa-chevron-down');
            iconEl.classList.add('fa-chevron-up');
        }
        if (btnText) btnText.textContent = 'Sembunyikan';
    }
}
</script>


<?php if($pesanan->pembayaran && $pesanan->status != 'dibatalkan'): ?>
<div class="card fu fu4">
    <div class="card-header border-b border-pink-100 pb-3">
        <div class="card-icon bg-emerald-100"><i class="fas fa-credit-card text-emerald-500 text-xs"></i></div>
        <p class="card-title">Informasi Pembayaran</p>
    </div>
    <div class="p-5 space-y-3">
        <div class="flex items-center gap-3 p-3 bg-emerald-50 rounded-xl border border-emerald-100">
            <div class="w-9 h-9 bg-emerald-200 rounded-full flex items-center justify-center flex-shrink-0">
                <i class="fas fa-check-circle text-emerald-700 text-sm"></i>
            </div>
            <div>
                <p class="text-xs text-emerald-600">Status</p>
                <p class="font-bold text-emerald-700 text-sm">LUNAS</p>
            </div>
        </div>
        <div class="flex justify-between text-xs">
            <span class="text-gray-400">Metode</span>
            <span class="font-semibold text-gray-700 uppercase"><?php echo e($pesanan->pembayaran->metode); ?></span>
        </div>
        <div class="flex justify-between text-xs items-start">
            <span class="text-gray-400">Tanggal Bayar</span>
            <?php if($pesanan->pembayaran->tanggal_bayar): ?>
                <div class="flex items-center gap-2 flex-wrap justify-end">
                    <span class="flex items-center gap-1 text-gray-700 font-semibold"><i class="fas fa-calendar-alt text-pink-400"></i> <?php echo e($pesanan->pembayaran->tanggal_bayar->format('d M Y')); ?></span>
                    <span class="text-gray-300">|</span>
                    <span class="flex items-center gap-1 text-gray-700 font-semibold"><i class="fas fa-clock text-pink-400"></i> <?php echo e($pesanan->pembayaran->tanggal_bayar->format('H:i')); ?> WIB</span>
                    <span class="text-gray-300">|</span>
                    <span class="flex items-center gap-1 text-gray-400"><i class="fas fa-history text-pink-400"></i> <?php echo e($pesanan->pembayaran->tanggal_bayar->diffForHumans()); ?></span>
                </div>
            <?php else: ?>
                <span class="font-semibold text-gray-700">-</span>
            <?php endif; ?>
        </div>
        <?php if($pesanan->pembayaran->bukti && $pesanan->pembayaran->metode != 'cod'): ?>
        <div>
            <p class="text-xs text-gray-400 mb-1.5">Bukti Transfer</p>
            <div class="photo-thumb rounded-xl overflow-hidden border border-pink-200 cursor-pointer"
                onclick="openImgModal('<?php echo e(asset('storage/'.$pesanan->pembayaran->bukti)); ?>')">
                <img src="<?php echo e(asset('storage/'.$pesanan->pembayaran->bukti)); ?>" class="w-full h-28 object-cover" alt="Bukti">
                <div class="photo-overlay rounded-xl"><i class="fas fa-search-plus text-white text-xl"></i></div>
            </div>
        </div>
        <?php endif; ?>
    </div>
</div>
<?php endif; ?>

                </div>
            </div>

        </div>

        
<div class="flex items-center justify-center mt-6 pt-5 border-t border-pink-100">
    <div class="flex gap-4 flex-wrap justify-center">
        <a href="<?php echo e(route('pesanan.masuk.index')); ?>"
        class="inline-flex items-center gap-2 px-6 py-3 bg-gray-500 hover:bg-gray-600 text-white rounded-xl font-semibold transition-all shadow-md hover:shadow-lg transform hover:scale-105 duration-200">
            <i class="fas fa-arrow-left text-sm"></i>
            <span>Kembali Ke Pesanan Masuk</span>
        </a>
        

    </div>
</div>
    </div>

    
<div id="resiModal" class="fixed inset-0 z-[80] hidden">
    <div class="absolute inset-0 bg-black/70 backdrop-blur-sm" onclick="closeResiModal()"></div>
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-2xl shadow-2xl w-full max-w-sm mx-4 overflow-hidden">
        <div class="bg-gradient-to-r from-pink-400 via-pink-500 to-pink-600 px-6 py-5 flex items-center justify-between rounded-2xl shadow-lg relative overflow-hidden">
            <!-- Background Ikon Dekoratif -->
            <div class="absolute top-0 right-0 w-40 h-40 opacity-10">
                <i class="fas fa-print text-7xl absolute -top-5 -right-5"></i>
                <i class="fas fa-truck text-6xl absolute bottom-0 right-10"></i>
                <i class="fas fa-receipt text-5xl absolute top-10 right-20"></i>
                <i class="fas fa-qrcode text-4xl absolute bottom-10 right-24"></i>
                <i class="fas fa-spa text-5xl absolute top-5 left-5"></i>
            </div>
            
            <div class="relative flex items-center gap-4">
                <div class="w-12 h-12 bg-gradient-to-br from-white/30 to-white/10 backdrop-blur-sm rounded-xl flex items-center justify-center shadow-lg relative">
                    <i class="fas fa-print text-white text-xl drop-shadow-sm"></i>
                    <div class="absolute -top-1 -right-1 w-5 h-5 bg-green-500 rounded-full flex items-center justify-center shadow-md">
                        <i class="fas fa-check text-white text-[10px]"></i>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-white font-bold text-base flex items-center gap-2">
                        <i class="fas fa-file-alt text-pink-200 text-sm"></i>
                        Cetak Resi
                        <span class="bg-white/20 text-[10px] px-2 py-0.5 rounded-full font-normal flex items-center gap-1">
                            <i class="fas fa-print text-[8px]"></i>
                            PDF
                        </span>
                    </h3>
                    <div class="flex items-center gap-2 mt-1">
                        <div class="flex items-center gap-1.5 bg-white/20 px-2 py-0.5 rounded-lg">
                            <i class="fas fa-barcode text-pink-200 text-[10px]"></i>
                            <p class="text-pink-100 text-xs font-mono font-semibold tracking-wider">
                                <?php echo e($pesanan->kode_pesanan); ?>

                            </p>
                        </div>
                        <div class="flex items-center gap-1">
                            <i class="fas fa-circle text-[6px] text-green-300 animate-pulse"></i>
                            <span class="text-pink-200 text-[10px]">siap cetak</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="relative flex items-center gap-2">
                <div class="hidden sm:flex items-center gap-2 mr-2">
                    <div class="w-7 h-7 bg-white/20 rounded-lg flex items-center justify-center cursor-help" title="Format A4">
                        <i class="fas fa-file-pdf text-white text-xs"></i>
                    </div>
                    <div class="w-7 h-7 bg-white/20 rounded-lg flex items-center justify-center cursor-help" title="Ukuran Kertas">
                        <i class="fas fa-ruler-combined text-white text-xs"></i>
                    </div>
                </div>
                
                <button onclick="closeResiModal()" 
                    class="w-8 h-8 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center hover:bg-white/30 hover:scale-110 transition-all duration-200 group">
                    <i class="fas fa-times text-sm group-hover:rotate-90 transition-transform duration-300"></i>
                </button>
            </div>
        </div>
        <div class="p-6 flex justify-center items-center gap-3">
            <button onclick="printResi()" 
                class="inline-flex items-center gap-2 px-6 py-3 bg-pink-500 hover:bg-pink-600 text-white font-semibold rounded-xl transition-all shadow-md hover:shadow-lg">
                <i class="fas fa-print"></i> Print
            </button>
            <a href="<?php echo e(route('pesanan.masuk.cetak-resi', $pesanan->id)); ?>" 
                class="inline-flex items-center gap-2 px-6 py-3 bg-gray-700 hover:bg-gray-800 text-white font-semibold rounded-xl transition-all shadow-md hover:shadow-lg">
                <i class="fas fa-download"></i> Download
            </a>
        </div>
    </div>
    <iframe id="resiIframe" src="<?php echo e(route('pesanan.masuk.cetak-resi', $pesanan->id)); ?>?preview=1" class="hidden"></iframe>
</div>

    
    <div id="imageModal" class="img-modal">
        <span class="close-modal" onclick="closeImgModal()"><i class="fas fa-times"></i></span>
        <div class="zoom-controls">
            <button class="zoom-btn" onclick="zoomOut()"><i class="fas fa-search-minus"></i></button>
            <span class="zoom-level" id="zoomLevel">100%</span>
            <button class="zoom-btn" onclick="zoomIn()"><i class="fas fa-search-plus"></i></button>
            <button class="zoom-btn" onclick="resetZoom()"><i class="fas fa-sync-alt"></i></button>
        </div>
        <img class="img-modal-content" id="modalImage">
    </div>

<script>

    // Fungsi untuk cetak resi (menampilkan modal)
function cetakResi() {
    document.getElementById('resiModal').classList.remove('hidden');
    document.body.style.overflow = 'hidden';
}

// Fungsi untuk menutup modal resi
function closeResiModal() {
    document.getElementById('resiModal').classList.add('hidden');
    document.body.style.overflow = '';
}

// Fungsi untuk print resi dari iframe
function printResi() {
    const iframe = document.getElementById('resiIframe');
    iframe.contentWindow.focus();
    iframe.contentWindow.print();
}

// Pastikan tombol Escape menutup modal resi
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        const resiModal = document.getElementById('resiModal');
        if (resiModal && !resiModal.classList.contains('hidden')) {
            closeResiModal();
        }
    }
});
function toggleKomentarUlasan(id, btn) {
    const pendek  = document.getElementById('pendek-'  + id);
    const lengkap = document.getElementById('lengkap-' + id);
    const icon    = btn.querySelector('i');
    const span    = btn.querySelector('span');
    const isShort = !pendek.classList.contains('hidden');

    if (isShort) {
        pendek.classList.add('hidden');
        lengkap.classList.remove('hidden');
        icon.className  = 'fas fa-chevron-up text-[10px]';
        span.textContent = 'Sembunyikan';
    } else {
        pendek.classList.remove('hidden');
        lengkap.classList.add('hidden');
        icon.className  = 'fas fa-chevron-down text-[10px]';
        span.textContent = 'Baca selengkapnya';
    }
}
    function toggleDropdown(){document.getElementById("dropdownMenu").classList.toggle("hidden");}
    document.addEventListener('click',e=>{const d=document.getElementById("userDropdown"),m=document.getElementById("dropdownMenu");if(d&&!d.contains(e.target)&&m&&!m.classList.contains('hidden'))m.classList.add("hidden");});

    let cz=1,mImg=null,mModal=null;
    function openImgModal(src){
        if(!src||src===''){alert('Foto tidak tersedia');return;}
        mModal=document.getElementById('imageModal');mImg=document.getElementById('modalImage');
        mImg.src=src;mModal.style.display='block';cz=1;updateZoom();document.body.style.overflow='hidden';
    }
    function closeImgModal(){mModal.style.display='none';document.body.style.overflow='';}
    function zoomIn(){cz=Math.min(cz+.25,3);updateZoom();}
    function zoomOut(){cz=Math.max(cz-.25,.5);updateZoom();}
    function resetZoom(){cz=1;updateZoom();}
    function updateZoom(){if(mImg){mImg.style.transform=`translate(-50%,-50%) scale(${cz})`;document.getElementById('zoomLevel').textContent=Math.round(cz*100)+'%';}}

    window.onclick=e=>{if(e.target==mModal)closeImgModal();};
    document.addEventListener('keydown',e=>{if(e.key==='Escape'&&mModal&&mModal.style.display==='block')closeImgModal();});

    setTimeout(()=>{document.querySelectorAll('[role="alert"]').forEach(el=>{el.style.transition='opacity .5s';el.style.opacity='0';setTimeout(()=>el.remove(),500);});},5000);
</script>
</body>
</html><?php /**PATH C:\laragon\www\ecommerce\resources\views/pesanan/pesanan_masuk_detail.blade.php ENDPATH**/ ?>