<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pembayaran - Order #<?php echo e($order->order_number ?? $order->id); ?> | BERKAH.TRF</title>
    
    
    <script type="text/javascript" src="https://app.sandbox.midtrans.com/snap/snap.js" data-client-key="<?php echo e(env('MIDTRANS_CLIENT_KEY')); ?>"></script>
    
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    
    <style> 
        body { 
            font-family: 'Plus Jakarta Sans', sans-serif; 
            background-color: #F8FAFC; /* Latar belakang abu-abu sangat muda yang elegan */
        }
        
        /* Efek kaca untuk ikon dompet */
        .glass-panel {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        /* Animasi mengkilap pada tombol bayar */
        @keyframes shimmer { 
            0% { transform: translateX(-100%) skewX(-15deg); }
            100% { transform: translateX(200%) skewX(-15deg); }
        }
        .animate-shimmer {
            animation: shimmer 3s infinite;
        }
    </style>
    <?php if (isset($component)) { $__componentOriginal95a0f28579ba3dc881cdd6af09f638a4 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal95a0f28579ba3dc881cdd6af09f638a4 = $attributes; } ?>
<?php $component = Illuminate\View\AnonymousComponent::resolve(['view' => 'components.pwa','data' => []] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('pwa'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes([]); ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal95a0f28579ba3dc881cdd6af09f638a4)): ?>
<?php $attributes = $__attributesOriginal95a0f28579ba3dc881cdd6af09f638a4; ?>
<?php unset($__attributesOriginal95a0f28579ba3dc881cdd6af09f638a4); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal95a0f28579ba3dc881cdd6af09f638a4)): ?>
<?php $component = $__componentOriginal95a0f28579ba3dc881cdd6af09f638a4; ?>
<?php unset($__componentOriginal95a0f28579ba3dc881cdd6af09f638a4); ?>
<?php endif; ?>
</head>
<body class="min-h-screen flex flex-col items-center justify-center p-4">
    <?php if (isset($component)) { $__componentOriginal84bc13f46ede078ae58666238de3da00 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal84bc13f46ede078ae58666238de3da00 = $attributes; } ?>
<?php $component = Illuminate\View\AnonymousComponent::resolve(['view' => 'components.loading','data' => []] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('loading'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes([]); ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal84bc13f46ede078ae58666238de3da00)): ?>
<?php $attributes = $__attributesOriginal84bc13f46ede078ae58666238de3da00; ?>
<?php unset($__attributesOriginal84bc13f46ede078ae58666238de3da00); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal84bc13f46ede078ae58666238de3da00)): ?>
<?php $component = $__componentOriginal84bc13f46ede078ae58666238de3da00; ?>
<?php unset($__componentOriginal84bc13f46ede078ae58666238de3da00); ?>
<?php endif; ?>

    <div class="max-w-md w-full relative z-10 my-8">
        
        
        <div class="text-center mb-6">
            <h1 class="text-3xl font-black text-blue-600 tracking-tighter italic flex items-center justify-center gap-2 drop-shadow-sm">
                BERKAH.TRF
            </h1>
        </div>

        
        <div class="bg-white rounded-[2rem] shadow-xl shadow-slate-200/60 overflow-hidden border border-slate-100">
            
            
            <div class="relative bg-gradient-to-br from-blue-600 to-indigo-700 p-8 text-white text-center overflow-hidden">
                
                <div class="absolute -top-12 -right-12 w-32 h-32 bg-white/10 rounded-full blur-2xl pointer-events-none"></div>
                <div class="absolute -bottom-12 -left-12 w-32 h-32 bg-white/10 rounded-full blur-2xl pointer-events-none"></div>
                
                <div class="relative z-10">
                    <div class="inline-flex items-center justify-center w-14 h-14 glass-panel rounded-2xl mb-4 shadow-inner">
                        <i class="fas fa-wallet text-2xl text-white"></i>
                    </div>
                    <h2 class="text-lg font-black uppercase tracking-widest text-blue-50 drop-shadow-md">Menunggu Pembayaran</h2>
                </div>
            </div>

            
            <div class="p-6 md:p-8">
                
                
                <div class="flex justify-between items-center mb-6 pb-6 border-b border-dashed border-slate-200">
                    <div>
                        <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">ID Pesanan</p>
                        <p class="text-slate-900 font-extrabold text-sm">#<?php echo e($order->order_number ?? $order->id); ?></p>
                    </div>
                    <div class="text-right">
                        <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">Metode</p>
                        <p class="text-slate-900 font-extrabold text-sm flex items-center justify-end gap-1">
                            Midtrans <i class="fas fa-check-circle text-blue-500"></i>
                        </p>
                    </div>
                </div>

                
                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if(isset($firstItem)): ?> 
                <div class="flex items-center gap-4 bg-slate-50 p-4 rounded-2xl mb-8 border border-slate-100/80 transition hover:border-blue-100">
                    <div class="w-16 h-16 bg-white rounded-xl overflow-hidden flex-shrink-0 border border-slate-200 shadow-sm">
                        <img src="<?php echo e(asset('storage/' . ($firstItem['image'] ?? ''))); ?>" class="w-full h-full object-cover" onerror="this.src='https://via.placeholder.com/150?text=Produk'">
                    </div>
                    <div class="text-left overflow-hidden flex-grow">
                        <p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest truncate"><?php echo e($firstItem['brand'] ?? 'Thrift Item'); ?></p>
                        <h4 class="font-bold text-slate-900 text-sm leading-tight truncate mt-0.5"><?php echo e($firstItem['name'] ?? 'Product'); ?></h4>
                        
                        
                        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if(isset($order->orderItems) && $order->orderItems->count() > 1): ?>
                            <span class="inline-block mt-1.5 px-2.5 py-0.5 bg-blue-100 text-blue-700 text-[10px] font-extrabold rounded-md border border-blue-200/50">
                                + <?php echo e($order->orderItems->count() - 1); ?> item lainnya
                            </span>
                        <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                    </div>
                </div>
                <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>

                
                <div class="text-center mb-8">
                    <p class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-2">Total Tagihan</p>
                    <h3 class="text-4xl font-black text-slate-900 tracking-tighter flex items-center justify-center gap-1">
                        <span class="text-lg font-bold text-blue-600 self-start mt-1 relative top-1">Rp</span>
                        <?php echo e(number_format($order->total_price ?? 0, 0, ',', '.')); ?>

                    </h3>
                </div>

                
                <button id="pay-button" class="group relative w-full bg-slate-900 text-white font-bold py-4 px-6 rounded-2xl shadow-[0_10px_20px_rgba(0,0,0,0.1)] transition-all duration-300 hover:bg-blue-600 hover:shadow-[0_10px_20px_rgba(37,99,235,0.3)] active:scale-[0.98] flex items-center justify-center gap-3 overflow-hidden">
                    <span class="relative z-10 text-sm uppercase tracking-widest" id="btn-text">Bayar Sekarang</span>
                    <i class="fas fa-arrow-right relative z-10 text-xs transition-transform group-hover:translate-x-1" id="btn-icon"></i>
                    
                    
                    <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent w-[200%] h-full animate-shimmer pointer-events-none"></div>
                </button>

                
                <div class="mt-6 flex justify-center">
                    <div class="flex items-center gap-2 px-3 py-1.5 opacity-80 hover:opacity-100 transition">
                        <i class="fas fa-shield-alt text-blue-500 text-sm"></i>
                        <span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Secure Payment by Midtrans</span>
                    </div>
                </div>
            </div>
        </div>

        
        <div class="text-center mt-6">
            <a href="<?php echo e(route('front.index')); ?>" class="inline-flex items-center gap-2 text-sm font-bold text-slate-400 hover:text-red-500 transition-colors duration-300">
                <i class="fas fa-arrow-left text-xs"></i> Batalkan & Kembali Belanja
            </a>
        </div>
    </div>

    
    <script type="text/javascript">
      var payButton = document.getElementById('pay-button');
      var btnText = document.getElementById('btn-text');
      var btnIcon = document.getElementById('btn-icon');

      payButton.addEventListener('click', function () {
        // Mengubah tampilan tombol saat loading
        this.disabled = true;
        this.classList.replace('bg-slate-900', 'bg-blue-600');
        btnIcon.className = 'fas fa-circle-notch fa-spin relative z-10 text-sm';
        btnText.innerText = 'MEMPROSES...';

        window.snap.pay('<?php echo e($order->snap_token); ?>', {
          onSuccess: function(result){
            window.location.href = "<?php echo e(route('front.payment.success', $order->id)); ?>";
          },
          onPending: function(result){
            alert("Menunggu pembayaran Anda!");
            resetButton();
          },
          onError: function(result){
            alert("Pembayaran gagal! Silakan coba metode lain.");
            resetButton();
          },
          onClose: function(){
            resetButton(); // Reset tombol jika user menutup popup tanpa bayar
          }
        })
      });

      function resetButton() {
        payButton.disabled = false;
        payButton.classList.replace('bg-blue-600', 'bg-slate-900');
        btnIcon.className = 'fas fa-arrow-right relative z-10 text-xs transition-transform group-hover:translate-x-1';
        btnText.innerText = 'BAYAR SEKARANG';
      }
    </script>
</body>
</html><?php /**PATH C:\laragon\www\thrift-store\resources\views/front/payment.blade.php ENDPATH**/ ?>