@extends('layouts.landing-page')

@section('content')
    <div class="mb-8" id="cartContainer">
        <!-- Header -->
        <div class="flex flex-col md:flex-row md:justify-between md:items-center mb-8 gap-4">
            <h1 class="text-2xl md:text-3xl font-bold text-white flex items-center gap-3">
                <div class="w-10 h-10 bg-red-600 rounded-xl flex items-center justify-center">
                    <i class="ti ti-shopping-cart text-lg"></i>
                </div>
                Keranjang Belanja
                <span class="text-sm bg-gray-800 text-gray-300 px-3 py-1 rounded-full">3 item</span>
            </h1>
            
            <button class="flex items-center gap-2 px-4 py-2.5 bg-gray-600/10 border border-gray-600/20 text-gray-400 rounded-xl hover:bg-gray-600 hover:text-white transition-all duration-200 group">
                <i class="ti ti-trash text-sm group-hover:scale-110 transition-transform"></i>
                Hapus Semua
            </button>
        </div>

        <div class="flex flex-col lg:flex-row gap-8">
            <!-- Cart Items -->
            <div class="flex-1 space-y-6">
                <!-- Seller Card 1 -->
                <div class="bg-gray-900/50 backdrop-blur-sm rounded-2xl p-6 border border-gray-800/50">
                    <div class="flex justify-between items-center mb-6">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl flex items-center justify-center">
                                <i class="ti ti-music text-white text-lg"></i>
                            </div>
                            <div>
                                <h2 class="text-lg font-semibold text-white">John Music</h2>
                                <p class="text-sm text-gray-400">Verified Artist</p>
                            </div>
                        </div>
                        <button class="w-10 h-10 bg-red-600/10 border border-red-600/20 text-red-400 rounded-xl hover:bg-red-600 hover:text-white transition-all duration-200 group">
                            <i class="ti ti-trash text-sm group-hover:scale-110 transition-transform"></i>
                        </button>
                    </div>

                    <!-- Items List -->
                    <div class="space-y-4">
                        <!-- Item 1 -->
                        <div class="bg-gray-800/50 rounded-xl p-4 hover:bg-gray-800 transition-colors duration-200">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center gap-4">
                                    <div class="relative group">
                                        <img src="https://picsum.photos/64" alt="Song Cover" class="w-14 h-14 rounded-lg object-cover" />
                                        <div class="absolute inset-0 bg-black/50 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                                            <i class="ti ti-play text-white text-lg"></i>
                                        </div>
                                    </div>
                                    <div>
                                        <h3 class="font-medium text-white mb-1">Freedom Sound</h3>
                                        <div class="flex items-center gap-2">
                                            <span class="text-xs bg-green-600/20 text-green-400 px-2 py-1 rounded-full border border-green-600/20">
                                                Cover License
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="flex items-center gap-4">
                                    <span class="font-bold text-white text-lg">Rp 50.000</span>
                                    <button class="w-8 h-8 bg-gray-700/50 text-gray-400 rounded-lg hover:bg-red-600 hover:text-white transition-all duration-200">
                                        <i class="ti ti-x text-sm"></i>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- Item 2 -->
                        <div class="bg-gray-800/50 rounded-xl p-4 hover:bg-gray-800 transition-colors duration-200">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center gap-4">
                                    <div class="relative group">
                                        <img src="https://picsum.photos/65" alt="Song Cover" class="w-14 h-14 rounded-lg object-cover" />
                                        <div class="absolute inset-0 bg-black/50 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                                            <i class="ti ti-play text-white text-lg"></i>
                                        </div>
                                    </div>
                                    <div>
                                        <h3 class="font-medium text-white mb-1">Summer Vibe</h3>
                                        <div class="flex items-center gap-2">
                                            <span class="text-xs bg-blue-600/20 text-blue-400 px-2 py-1 rounded-full border border-blue-600/20">
                                                Remake License
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="flex items-center gap-4">
                                    <span class="font-bold text-white text-lg">Rp 100.000</span>
                                    <button class="w-8 h-8 bg-gray-700/50 text-gray-400 rounded-lg hover:bg-red-600 hover:text-white transition-all duration-200">
                                        <i class="ti ti-x text-sm"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Seller Card 2 -->
                <div class="bg-gray-900/50 backdrop-blur-sm rounded-2xl p-6 border border-gray-800/50">
                    <div class="flex justify-between items-center mb-6">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 bg-gradient-to-br from-green-500 to-teal-600 rounded-xl flex items-center justify-center">
                                <i class="ti ti-disc text-white text-lg"></i>
                            </div>
                            <div>
                                <h2 class="text-lg font-semibold text-white">Musik Kita</h2>
                                <p class="text-sm text-gray-400">Premium Producer</p>
                            </div>
                        </div>
                        <button class="w-10 h-10 bg-red-600/10 border border-red-600/20 text-red-400 rounded-xl hover:bg-red-600 hover:text-white transition-all duration-200 group">
                            <i class="ti ti-trash text-sm group-hover:scale-110 transition-transform"></i>
                        </button>
                    </div>

                    <!-- Items List -->
                    <div class="space-y-4">
                        <!-- Item 1 -->
                        <div class="bg-gray-800/50 rounded-xl p-4 hover:bg-gray-800 transition-colors duration-200">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center gap-4">
                                    <div class="relative group">
                                        <img src="https://picsum.photos/66" alt="Song Cover" class="w-14 h-14 rounded-lg object-cover" />
                                        <div class="absolute inset-0 bg-black/50 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                                            <i class="ti ti-play text-white text-lg"></i>
                                        </div>
                                    </div>
                                    <div>
                                        <h3 class="font-medium text-white mb-1">Chill Beat</h3>
                                        <div class="flex items-center gap-2">
                                            <span class="text-xs bg-purple-600/20 text-purple-400 px-2 py-1 rounded-full border border-purple-600/20">
                                                Exclusive License
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="flex items-center gap-4">
                                    <span class="font-bold text-white text-lg">Rp 75.000</span>
                                    <button class="w-8 h-8 bg-gray-700/50 text-gray-400 rounded-lg hover:bg-red-600 hover:text-white transition-all duration-200">
                                        <i class="ti ti-x text-sm"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Cart Summary -->
            <div class="w-full lg:w-96">
                <div class="bg-gray-900/50 backdrop-blur-sm rounded-2xl p-6 border border-gray-800/50 sticky top-8">
                    <h3 class="text-lg font-semibold text-white mb-6 flex items-center gap-2">
                        <i class="ti ti-receipt text-red-400"></i>
                        Ringkasan Pesanan
                    </h3>
                    
                    <div class="space-y-4 mb-6">
                        <div class="flex justify-between items-center text-gray-300">
                            <span>Subtotal (3 item)</span>
                            <span class="font-medium">Rp 225.000</span>
                        </div>
                        <div class="flex justify-between items-center text-gray-300">
                            <span>PPN (12%)</span>
                            <span class="font-medium">Rp 27.000</span>
                        </div>
                        <div class="flex justify-between items-center text-gray-300">
                            <span>Biaya Platform</span>
                            <span class="font-medium">Rp 5.000</span>
                        </div>
                        <div class="border-t border-gray-700 pt-4">
                            <div class="flex justify-between items-center text-white">
                                <span class="text-lg font-semibold">Total Pembayaran</span>
                                <span class="text-xl font-bold text-red-400">Rp 257.000</span>
                            </div>
                        </div>
                    </div>

                    <!-- Promo Code -->
                    {{-- <div class="mb-6">
                        <div class="flex gap-2">
                            <input type="text" placeholder="Kode promo" class="flex-1 bg-gray-800 border border-gray-700 rounded-xl px-4 py-3 text-white placeholder-gray-400 focus:outline-none focus:border-red-500 transition-colors">
                            <button class="px-4 py-3 bg-gray-800 border border-gray-700 text-gray-300 rounded-xl hover:bg-gray-700 transition-colors">
                                <i class="ti ti-check"></i>
                            </button>
                        </div>
                    </div> --}}

                    <!-- Payment Button -->
                    <a href="{{route('payment',['method' => 'cart','idUser' => Auth::id()])}}" 
                       class="block w-full bg-gradient-to-r from-red-600 to-red-700 hover:from-red-700 hover:to-red-800 text-white font-semibold py-4 px-6 rounded-xl text-center transition-all duration-200 transform hover:scale-[1.02] active:scale-[0.98] shadow-lg hover:shadow-red-600/25">
                        <i class="ti ti-credit-card mr-2"></i>
                        Lanjutkan Pembayaran
                    </a>

                    <!-- Security Info -->
                    <div class="mt-4 flex items-center justify-center gap-2 text-xs text-gray-400">
                        <i class="ti ti-shield-check text-green-400"></i>
                        Pembayaran aman dan terenkripsi
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Item remove functionality
            const removeButtons = document.querySelectorAll('button[data-action="remove-item"]');
            removeButtons.forEach(button => {
                button.addEventListener('click', function(e) {
                    e.preventDefault();
                    const itemElement = this.closest('.bg-gray-800\\/50');
                    
                    // Add exit animation
                    itemElement.style.transform = 'translateX(100%)';
                    itemElement.style.opacity = '0';
                    
                    setTimeout(() => {
                        itemElement.remove();
                        updateCartSummary();
                    }, 300);
                });
            });

            // Seller remove functionality
            const removeSellerButtons = document.querySelectorAll('button[data-action="remove-seller"]');
            removeSellerButtons.forEach(button => {
                button.addEventListener('click', function(e) {
                    e.preventDefault();
                    const sellerElement = this.closest('.bg-gray-900\\/50');
                    
                    // Add exit animation
                    sellerElement.style.transform = 'scale(0.95)';
                    sellerElement.style.opacity = '0';
                    
                    setTimeout(() => {
                        sellerElement.remove();
                        updateCartSummary();
                    }, 300);
                });
            });

            // Clear all cart functionality
            const clearAllButton = document.querySelector('button[data-action="clear-all"]');
            if (clearAllButton) {
                clearAllButton.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    if (confirm('Apakah Anda yakin ingin menghapus semua item dari keranjang?')) {
                        const cartItems = document.querySelector('.flex-1');
                        cartItems.style.opacity = '0';
                        
                        setTimeout(() => {
                            cartItems.innerHTML = `
                                <div class="bg-gray-900/50 backdrop-blur-sm rounded-2xl p-12 border border-gray-800/50 text-center">
                                    <i class="ti ti-shopping-cart-off text-4xl text-gray-400 mb-4"></i>
                                    <h3 class="text-xl font-semibold text-white mb-2">Keranjang Kosong</h3>
                                    <p class="text-gray-400 mb-6">Belum ada item di keranjang belanja Anda</p>
                                    <a href="/" class="inline-flex items-center gap-2 px-6 py-3 bg-red-600 text-white rounded-xl hover:bg-red-700 transition-colors">
                                        <i class="ti ti-music"></i>
                                        Jelajahi Musik
                                    </a>
                                </div>
                            `;
                            cartItems.style.opacity = '1';
                        }, 300);
                    }
                });
            }

            // Promo code functionality
            const promoInput = document.querySelector('input[placeholder="Kode promo"]');
            const promoButton = document.querySelector('button[data-action="apply-promo"]');
            
            if (promoButton && promoInput) {
                promoButton.addEventListener('click', function() {
                    const promoCode = promoInput.value.trim();
                    
                    if (promoCode) {
                        // Simulate promo code validation
                        this.innerHTML = '<i class="ti ti-loader animate-spin"></i>';
                        
                        setTimeout(() => {
                            if (promoCode.toLowerCase() === 'discount10') {
                                this.innerHTML = '<i class="ti ti-check text-green-400"></i>';
                                this.classList.add('bg-green-600/20', 'border-green-600/30');
                                showNotification('Kode promo berhasil diterapkan!', 'success');
                            } else {
                                this.innerHTML = '<i class="ti ti-x text-red-400"></i>';
                                this.classList.add('bg-red-600/20', 'border-red-600/30');
                                showNotification('Kode promo tidak valid', 'error');
                            }
                        }, 1000);
                    }
                });
            }

            // Update cart summary function
            function updateCartSummary() {
                const remainingItems = document.querySelectorAll('.bg-gray-800\\/50').length;
                const itemCountElement = document.querySelector('.bg-gray-800.text-gray-300');
                
                if (itemCountElement) {
                    itemCountElement.textContent = `${remainingItems} item`;
                }
                
                // Update prices (this would normally be done server-side)
                // This is just for demo purposes
            }

            // Show notification function
            function showNotification(message, type = 'info') {
                const notification = document.createElement('div');
                notification.className = `fixed top-4 right-4 px-6 py-3 rounded-xl shadow-lg z-50 transform translate-x-full transition-transform duration-300 ${
                    type === 'success' ? 'bg-green-600 text-white' : 
                    type === 'error' ? 'bg-red-600 text-white' : 
                    'bg-gray-800 text-white'
                }`;
                notification.textContent = message;
                
                document.body.appendChild(notification);
                
                setTimeout(() => {
                    notification.style.transform = 'translateX(0)';
                }, 100);
                
                setTimeout(() => {
                    notification.style.transform = 'translateX(full)';
                    setTimeout(() => notification.remove(), 300);
                }, 3000);
            }

            // Add smooth scroll behavior
            document.documentElement.style.scrollBehavior = 'smooth';

            // Initialize AOS animation library if it exists
            if (typeof AOS !== 'undefined') {
                AOS.init({
                    duration: 600,
                    once: true,
                    offset: 100
                });
            }
        });
    </script>
@endsection
@push('script')
    <script>
        document.addEventListener('DOMContentLoaded', function() {

            const elCart = document.getElementById('cartContainer');
            const elMain = document.getElementById('mainContent');

            if (elCart) {
                elMain.classList.add('w-full');
            }


        });
    </script>
@endpush