<x-app-layout>
    <head>
        {{-- Load Font Gaming --}}
        <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
        
        <style>
            .font-gaming { font-family: 'Orbitron', sans-serif; }
            .font-sans { font-family: 'Inter', sans-serif; }
            
            /* Background Grid Pattern */
            .bg-grid-pattern {
                background-image: linear-gradient(to right, #ffffff05 1px, transparent 1px),
                                  linear-gradient(to bottom, #ffffff05 1px, transparent 1px);
                background-size: 30px 30px;
            }

            /* Custom Scrollbar for Table */
            .custom-scroll::-webkit-scrollbar { height: 6px; }
            .custom-scroll::-webkit-scrollbar-track { background: #1e1e1e; }
            .custom-scroll::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
            .custom-scroll::-webkit-scrollbar-thumb:hover { background: #ff7300; }

            /* Animasi Glow halus untuk tombol checkout */
            @keyframes btn-glow {
                0%, 100% { box-shadow: 0 0 20px rgba(255, 115, 0, 0.4); }
                50% { box-shadow: 0 0 40px rgba(255, 115, 0, 0.7); }
            }
            .btn-checkout-glow {
                animation: btn-glow 2s infinite;
            }
        </style>
    </head>

    <div class="min-h-screen bg-[#0a0a0a] text-white font-sans py-12 relative overflow-hidden pb-32">
        {{-- Background Decoration --}}
        <div class="absolute inset-0 bg-grid-pattern pointer-events-none"></div>
        <div class="absolute top-0 right-0 w-[500px] h-[500px] bg-[#ff7300]/5 rounded-full blur-[120px] pointer-events-none"></div>

        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">

            {{-- HEADER HALAMAN --}}
            <div class="mb-10 flex items-center gap-5 border-b border-gray-800/50 pb-8">
                <div class="p-4 bg-gradient-to-br from-[#1e1e1e] to-[#2a2a2a] rounded-2xl border border-gray-700/50 shadow-[0_0_25px_rgba(255,115,0,0.2)] relative group overflow-hidden">
                    <div class="absolute inset-0 bg-[#ff7300]/20 blur-xl group-hover:opacity-100 opacity-0 transition duration-500"></div>
                    <svg class="w-10 h-10 text-[#ff7300] relative z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
                    </svg>
                </div>
                <div>
                    <h1 class="text-4xl font-black font-gaming text-white tracking-wide">YOUR CART</h1>
                    <p class="text-gray-400 mt-2 text-base">Review item pilihanmu sebelum melakukan pembayaran.</p>
                </div>
            </div>

            {{-- NOTIFIKASI --}}
            @if (session('success'))
                <div class="mb-8 bg-green-500/10 border border-green-500/30 text-green-400 px-6 py-4 rounded-2xl shadow-lg flex items-center gap-4 backdrop-blur-md">
                    <div class="p-2 bg-green-500/20 rounded-full">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                    </div>
                    <span class="font-medium text-lg">{{ session('success') }}</span>
                </div>
            @endif

            @if (session('error'))
                <div class="mb-8 bg-red-500/10 border border-red-500/30 text-red-400 px-6 py-4 rounded-2xl shadow-lg flex items-center gap-4 backdrop-blur-md">
                     <div class="p-2 bg-red-500/20 rounded-full">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                    </div>
                    <span class="font-medium text-lg">{{ session('error') }}</span>
                </div>
            @endif

            {{-- KONTEN UTAMA --}}
            @if ($carts->isEmpty())
                {{-- TAMPILAN KOSONG (EMPTY STATE) --}}
                <div class="bg-[#121212] rounded-3xl border border-gray-800/50 p-20 text-center shadow-2xl relative overflow-hidden group">
                    <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-[#ff7300]/10 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition duration-700"></div>
                    
                    <div class="relative z-10 flex flex-col items-center">
                        <div class="mb-8 p-8 bg-[#1e1e1e] rounded-full border-2 border-gray-700/50 shadow-[inset_0_0_20px_rgba(0,0,0,0.5)] group-hover:border-[#ff7300]/50 group-hover:scale-105 transition duration-500">
                            <svg class="w-20 h-20 text-gray-600 group-hover:text-[#ff7300] transition duration-500 drop-shadow-lg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path>
                            </svg>
                        </div>
                        <h3 class="text-3xl font-bold font-gaming text-white mb-4 tracking-wider">INVENTORY KOSONG</h3>
                        <p class="text-gray-400 mb-10 max-w-md mx-auto text-lg leading-relaxed">Belum ada gear yang ditambahkan. Jelajahi katalog untuk menemukan senjata andalanmu.</p>
                        
                        <a href="{{ route('dashboard') }}" class="px-10 py-4 bg-gradient-to-r from-[#ff7300] to-orange-600 hover:from-orange-600 hover:to-[#ff7300] text-white font-bold rounded-full transition-all shadow-[0_0_30px_rgba(255,115,0,0.4)] hover:shadow-[0_0_50px_rgba(255,115,0,0.6)] hover:-translate-y-1 flex items-center gap-3 text-lg">
                            <span>Mulai Belanja</span>
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                        </a>
                    </div>
                </div>
            @else
                <div class="flex flex-col lg:flex-row gap-10">

                    {{-- 1. DAFTAR ITEM (KIRI) --}}
                    <div class="lg:w-2/3">
                        <div class="bg-[#121212] rounded-3xl border border-gray-800/50 overflow-hidden shadow-2xl backdrop-blur-sm">
                            <div class="overflow-x-auto custom-scroll">
                                <table class="w-full text-left align-middle">
                                    <thead class="bg-[#1a1a1a]/80 border-b border-gray-800/50">
                                        <tr>
                                            <th class="py-6 px-8 text-xs font-bold text-gray-400 uppercase tracking-widest">Produk</th>
                                            <th class="py-6 px-8 text-xs font-bold text-gray-400 uppercase tracking-widest text-center">Qty</th>
                                            <th class="py-6 px-8 text-xs font-bold text-gray-400 uppercase tracking-widest text-right">Total</th>
                                            <th class="py-6 px-8 text-center"></th>
                                        </tr>
                                    </thead>
                                    <tbody class="divide-y divide-gray-800/50">
                                        @foreach ($carts as $item)
                                            <tr class="hover:bg-white/[0.02] transition duration-300 group align-middle">
                                                {{-- Info Produk (PERBAIKAN GAMBAR DISINI) --}}
                                                <td class="py-6 px-8">
                                                    <div class="flex items-center gap-6">
                                                        {{-- Container gambar diperbesar dan padding dikurangi agar gambar lebih jelas --}}
                                                        <div class="h-24 w-24 flex-shrink-0 bg-[#181818] rounded-2xl flex items-center justify-center overflow-hidden border-2 border-gray-700/50 group-hover:border-[#ff7300]/70 transition duration-300 shadow-inner">
                                                            @if($item->product->image)
                                                                {{-- Padding dikurangi jadi p-1 --}}
                                                                <img src="{{ url('gambar/' . $item->product->image) }}" alt="{{ $item->product->name }}" class="h-full w-full object-contain p-1 drop-shadow-lg transform group-hover:scale-105 transition duration-500">
                                                            @else
                                                                <svg class="w-10 h-10 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                                                            @endif
                                                        </div>
                                                        <div>
                                                            <p class="font-bold text-xl text-white group-hover:text-[#ff7300] transition duration-300 mb-1">{{ $item->product->name }}</p>
                                                            <p class="text-sm text-gray-500 font-mono tracking-tight">Rp {{ number_format($item->product->price) }} / unit</p>
                                                        </div>
                                                    </div>
                                                </td>

                                                {{-- Jumlah --}}
                                                <td class="py-6 px-8 text-center">
                                                    <span class="inline-flex items-center justify-center w-12 h-10 bg-[#1e1e1e] border border-gray-700 rounded-xl font-bold text-white text-base shadow-sm">
                                                        {{ $item->qty }}
                                                    </span>
                                                </td>

                                                {{-- Total Harga Item --}}
                                                <td class="py-6 px-8 text-right font-bold font-gaming text-[#ff7300] text-xl tabular-nums">
                                                    Rp {{ number_format($item->product->price * $item->qty) }}
                                                </td>

                                                {{-- Tombol Hapus --}}
                                                <td class="py-6 px-8 text-center">
                                                    <form action="{{ route('cart.destroy', $item->id) }}" method="POST">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="p-3 text-gray-500 bg-gray-800/50 hover:text-red-400 hover:bg-red-500/20 rounded-xl transition duration-200 shadow-sm hover:shadow-red-500/10 group/delete" title="Hapus Item">
                                                            <svg class="w-6 h-6 group-hover/delete:scale-110 transition" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                                                        </button>
                                                    </form>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="mt-8">
                            <a href="{{ route('dashboard') }}" class="inline-flex items-center gap-3 text-gray-400 hover:text-[#ff7300] font-bold transition group text-base py-3 px-6 rounded-full border border-transparent hover:border-[#ff7300]/30 hover:bg-[#ff7300]/5">
                                <span class="group-hover:-translate-x-1 transition duration-200 text-xl">&larr;</span> 
                                Lanjut Belanja
                            </a>
                        </div>
                    </div>

                    {{-- 2. RINGKASAN PEMBAYARAN (KANAN) --}}
                    <div class="lg:w-1/3">
                        <div class="bg-[#121212] rounded-3xl p-8 border border-gray-800/50 shadow-[0_0_40px_rgba(0,0,0,0.3)] sticky top-10 relative overflow-hidden backdrop-blur-md">
                            {{-- Efek Glow di Card --}}
                            <div class="absolute top-0 right-0 w-40 h-40 bg-[#ff7300]/10 rounded-full blur-[60px] pointer-events-none"></div>

                            <h3 class="text-2xl font-bold font-gaming text-white mb-8 pb-6 border-b border-gray-800/50 flex items-center gap-3">
                                <span class="p-2 bg-[#ff7300]/10 rounded-lg">
                                    <svg class="w-6 h-6 text-[#ff7300]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                                </span>
                                Ringkasan Order
                            </h3>

                            <div class="space-y-5 mb-10">
                                <div class="flex justify-between text-gray-400 text-base">
                                    <span>Subtotal</span>
                                    <span class="font-medium text-white tabular-nums">Rp {{ number_format($total) }}</span>
                                </div>
                                <div class="flex justify-between text-gray-400 text-base">
                                    <span>Pajak (PPN)</span>
                                    <span class="font-medium text-green-400 bg-green-400/10 px-3 py-1 rounded-full text-xs">Termasuk</span>
                                </div>
                                <div class="flex justify-between text-gray-400 text-base">
                                    <span>Biaya Admin</span>
                                    <span class="font-medium text-white tabular-nums">Rp 0</span>
                                </div>
                            </div>

                            <div class="flex justify-between items-end mb-10 pt-8 border-t border-gray-800/50 border-dashed">
                                <span class="text-lg font-bold text-gray-200">Total Tagihan</span>
                                <span class="text-3xl font-black font-gaming text-[#ff7300] drop-shadow-[0_0_15px_rgba(255,115,0,0.4)] tabular-nums">
                                    Rp {{ number_format($total) }}
                                </span>
                            </div>

                            <form action="{{ route('checkout') }}" method="POST">
                                @csrf
                                {{-- TOMBOL CHECKOUT 3D GAMING (PERBAIKAN DISINI) --}}
                                <button type="submit" class="w-full group relative flex items-center justify-center px-6 py-5 bg-gradient-to-r from-[#ff7300] to-orange-700 text-white font-black text-lg rounded-2xl overflow-hidden transition-all duration-200 shadow-[0_8px_0_rgb(166,62,0),0_15px_20px_rgba(0,0,0,0.4)] hover:shadow-[0_6px_0_rgb(166,62,0),0_10px_15px_rgba(0,0,0,0.3)] hover:translate-y-[2px] active:translate-y-[8px] active:shadow-[0_0px_0_rgb(166,62,0)] border-t border-orange-400/50 btn-checkout-glow tracking-widest">
                                    
                                    {{-- Efek Kilatan Cahaya --}}
                                    <span class="absolute w-64 h-64 mt-12 group-hover:-rotate-45 group-hover:-mt-24 transition-all duration-1000 ease-out -translate-x-10 bg-white opacity-20 rotate-45"></span>
                                    
                                    <span class="relative flex items-center gap-3 z-10 drop-shadow-sm">
                                        CHECKOUT SEKARANG
                                        <svg class="w-6 h-6 animate-pulse filter drop-shadow" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M13 7l5 5m0 0l-5 5m5-5H6"></path></svg>
                                    </span>
                                </button>
                            </form>

                            <p class="text-xs text-center text-gray-500 mt-8 flex justify-center items-center gap-2 opacity-60">
                                <svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
                                Transaksi Aman dengan SSL 256-bit
                            </p>
                        </div>
                    </div>

                </div>
            @endif

        </div>
    </div>
</x-app-layout>