resources/views/cart.blade.php

<x-app-layout>
    <x-slot name="header">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="heading-2 mb-2">Shopping Cart</h1>
                <p class="text-muted">Review your items and proceed to checkout</p>
            </div>
            <div class="text-right">
                @if (!empty($cart))
                    <div class="text-white">
                        <div class="text-2xl font-bold">{{ count($cart) }} {{ count($cart) === 1 ? 'Item' : 'Items' }}</div>
                        <div class="text-muted">in your cart</div>
                    </div>
                @endif
            </div>
        </div>
    </x-slot>

    <div class="py-12">
        <div class="container-custom">
            @if (session('success'))
                <div class="card mb-6 bg-green-900/30 border-green-500/30">
                    <div class="flex items-center">
                        <i class="fas fa-check-circle text-green-400 mr-3 text-xl"></i>
                        <span class="text-green-300 font-medium">{{ session('success') }}</span>
                    </div>
                </div>
            @endif

            @if (empty($cart))
                <div class="text-center py-20">
                    <div class="card max-w-md mx-auto text-center">
                        <div class="w-24 h-24 bg-gradient-to-r from-gray-600 to-gray-800 rounded-full flex items-center justify-center mx-auto mb-8 opacity-50">
                            <i class="fas fa-shopping-cart text-4xl text-white"></i>
                        </div>
                        <h2 class="heading-2 mb-4">Your Cart is Empty</h2>
                        <p class="text-muted mb-8">Looks like you haven't added any items to your cart yet. Start shopping to fill it up!</p>
                        <a href="{{ route('categories') }}" class="btn-primary">
                            <i class="fas fa-store mr-2"></i>Continue Shopping
                        </a>
                    </div>
                </div>
            @else
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                    <!-- Cart Items Section -->
                    <div class="lg:col-span-2 space-y-6">
                        <div class="card">
                            <h2 class="heading-3 mb-6">
                                <i class="fas fa-list mr-3 text-blue-400"></i>Cart Items
                            </h2>
                            
                            @php $total = 0; @endphp
                            @foreach ($cart as $item)
                                @php $subtotal = $item['price'] * $item['quantity']; $total += $subtotal; @endphp
                                
                                <div class="flex items-center p-6 bg-black/20 rounded-xl border border-white/10 mb-4 hover:bg-black/30 transition-all duration-300">
                                    <div class="flex-shrink-0">
                                        <img src="{{ $item['image'] }}" alt="{{ $item['name'] }}" 
                                             class="w-24 h-24 object-cover rounded-xl"
                                             style="width: 96px; height: 96px; max-width: 96px; max-height: 96px; object-fit: cover; display: block;">
                                    </div>
                                    
                                    <div class="flex-1 ml-6">
                                        <h3 class="text-xl font-semibold text-white mb-3">
                                            {{ $item['name'] }}
                                        </h3>
                                        
                                        @if(isset($item['game']) && $item['game'])
                                            @php
                                                // Get custom game styling if it exists
                                                $customGame = \App\Models\CustomGame::where('name', $item['game'])->first();
                                                
                                                if ($customGame) {
                                                    // Extract color from gradient for custom games
                                                    $gradientParts = explode(' ', $customGame->color_gradient);
                                                    $primaryColor = str_replace(['from-', '-500'], '', $gradientParts[0] ?? 'purple');
                                                    
                                                    // Map to badge classes
                                                    $badgeClasses = [
                                                        'red' => 'bg-red-500/20 text-red-300 border-red-500/30',
                                                        'pink' => 'bg-pink-500/20 text-pink-300 border-pink-500/30',
                                                        'rose' => 'bg-rose-500/20 text-rose-300 border-rose-500/30',
                                                        'purple' => 'bg-purple-500/20 text-purple-300 border-purple-500/30',
                                                        'blue' => 'bg-blue-500/20 text-blue-300 border-blue-500/30',
                                                        'green' => 'bg-green-500/20 text-green-300 border-green-500/30',
                                                        'orange' => 'bg-orange-500/20 text-orange-300 border-orange-500/30',
                                                        'yellow' => 'bg-yellow-500/20 text-yellow-300 border-yellow-500/30',
                                                        'teal' => 'bg-teal-500/20 text-teal-300 border-teal-500/30',
                                                        'cyan' => 'bg-cyan-500/20 text-cyan-300 border-cyan-500/30',
                                                        'indigo' => 'bg-indigo-500/20 text-indigo-300 border-indigo-500/30',
                                                        'violet' => 'bg-violet-500/20 text-violet-300 border-violet-500/30',
                                                        'emerald' => 'bg-emerald-500/20 text-emerald-300 border-emerald-500/30'
                                                    ];
                                                    
                                                    $badgeClass = $badgeClasses[$primaryColor] ?? 'bg-purple-500/20 text-purple-300 border-purple-500/30';
                                                    $gameIcon = $customGame->icon;
                                                } else {
                                                    // Default styling for main games
                                                    $gameIcons = [
                                                        'Genshin' => 'fas fa-star',
                                                        'Starrail' => 'fas fa-rocket', 
                                                        'WutheringWave' => 'fas fa-wave-square',
                                                        'ZenlessZoneZero' => 'fas fa-city',
                                                        'Arknights' => 'fas fa-chess-knight',
                                                        'AzurLane' => 'fas fa-ship'
                                                    ];
                                                    
                                                    $gameColors = [
                                                        'Genshin' => 'bg-yellow-500/20 text-yellow-300 border-yellow-500/30',
                                                        'Starrail' => 'bg-purple-500/20 text-purple-300 border-purple-500/30',
                                                        'WutheringWave' => 'bg-cyan-500/20 text-cyan-300 border-cyan-500/30',
                                                        'ZenlessZoneZero' => 'bg-red-500/20 text-red-300 border-red-500/30',
                                                        'Arknights' => 'bg-indigo-500/20 text-indigo-300 border-indigo-500/30',
                                                        'AzurLane' => 'bg-blue-500/20 text-blue-300 border-blue-500/30'
                                                    ];
                                                    
                                                    $badgeClass = $gameColors[$item['game']] ?? 'bg-gray-500/20 text-gray-300 border-gray-500/30';
                                                    $gameIcon = $gameIcons[$item['game']] ?? 'fas fa-gamepad';
                                                }
                                            @endphp
                                            
                                            <div class="mb-3">
                                                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium border {{ $badgeClass }}">
                                                    <i class="{{ $gameIcon }} mr-2"></i>{{ $item['game'] }}
                                                </span>
                                            </div>
                                        @endif
                                        
                                        <div class="flex items-center space-x-6 text-sm text-muted">
                                            <span>
                                                <i class="fas fa-box mr-2"></i>Quantity: {{ $item['quantity'] }}
                                            </span>
                                            <span>
                                                <i class="fas fa-tag mr-2"></i>Unit Price: ฿{{ number_format($item['price'], 2) }}
                                            </span>
                                        </div>
                                    </div>
                                    
                                    <div class="text-right">
                                        <div class="text-2xl font-bold gradient-text mb-4">
                                            ฿{{ number_format($subtotal, 2) }}
                                        </div>
                                        <form action="{{ route('cart.remove', $item['id']) }}" method="POST" class="inline">
                                            @csrf
                                            <button type="submit" class="btn-danger text-sm" 
                                                    onclick="return confirm('Are you sure you want to remove this item?')">
                                                <i class="fas fa-trash mr-2"></i>Remove
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <!-- Order Summary & Checkout Section -->
                    <div class="space-y-6">
                        <!-- Order Summary -->
                        <div class="card">
                            <h3 class="heading-3 mb-6">
                                <i class="fas fa-calculator mr-3 text-purple-400"></i>Order Summary
                            </h3>
                            
                            <div class="space-y-4">
                                <div class="flex justify-between">
                                    <span class="text-muted">Subtotal ({{ count($cart) }} items)</span>
                                    <span class="font-semibold text-white">฿{{ number_format($total, 2) }}</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-muted">Shipping</span>
                                    <span class="font-semibold text-green-400">Free</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-muted">Tax</span>
                                    <span class="font-semibold text-white">฿0.00</span>
                                </div>
                                <div class="border-t border-white/20 pt-4">
                                    <div class="flex justify-between items-center">
                                        <span class="text-xl font-semibold text-white">Total</span>
                                        <span class="text-3xl font-bold gradient-text">฿{{ number_format($total, 2) }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Checkout Form -->
                        <div class="card">
                            <h3 class="heading-3 mb-6">
                                <i class="fas fa-credit-card mr-3 text-green-400"></i>Checkout Information
                            </h3>
                            
                            <form action="{{ route('checkout.submit') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
                                @csrf
                                
                                <div>
                                    <label class="block text-sm font-medium text-white mb-3">
                                        <i class="fas fa-user mr-2"></i>Full Name
                                    </label>
                                    <input type="text" name="customer_name" required 
                                           class="input-field" placeholder="Enter your full name">
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-white mb-3">
                                        <i class="fas fa-phone mr-2"></i>Phone Number
                                    </label>
                                    <input type="text" name="phone" required 
                                           class="input-field" placeholder="Enter your phone number">
                                </div>
                                
                                <div>
                                    <label for="payment_slip" class="block text-sm font-medium text-white mb-3">
                                        <i class="fas fa-receipt mr-2"></i>Payment Slip
                                    </label>
                                    <div id="upload-area" class="border-2 border-dashed border-white/20 rounded-xl p-8 text-center hover:border-purple-400/50 transition-colors">
                                        <div id="upload-content">
                                            <i class="fas fa-cloud-upload-alt text-4xl text-white/40 mb-4"></i>
                                            <div class="text-white/80 mb-2">
                                                <label for="payment_slip" class="cursor-pointer text-purple-400 hover:text-purple-300 font-medium">
                                                    Upload payment slip
                                                </label>
                                                <span class="text-white/60"> or drag and drop</span>
                                            </div>
                                            <p class="text-xs text-white/50">PNG, JPG, GIF up to 10MB</p>
                                        </div>
                                        <div id="image-preview" class="hidden">
                                            <img id="preview-img" src="" alt="Payment slip preview" 
                                                 class="max-w-full max-h-48 mx-auto rounded-lg mb-4"
                                                 style="max-width: 300px; max-height: 200px; object-fit: contain;">
                                            <div class="text-white/80 mb-2">
                                                <span id="file-name" class="text-green-400 font-medium"></span>
                                            </div>
                                            <button type="button" id="remove-image" class="text-red-400 hover:text-red-300 text-sm">
                                                <i class="fas fa-times mr-1"></i>Remove
                                            </button>
                                        </div>
                                        <input id="payment_slip" name="payment_slip" type="file" accept="image/*" required class="hidden">
                                    </div>
                                </div>

                                <button type="submit" class="btn-success w-full text-lg py-4">
                                    <i class="fas fa-check-circle mr-2"></i>Complete Order (฿{{ number_format($total, 2) }})
                                </button>
                            </form>
                        </div>

                        <!-- Continue Shopping -->
                        <div class="text-center">
                            <a href="{{ route('categories') }}" class="btn-secondary">
                                <i class="fas fa-arrow-left mr-2"></i>Continue Shopping
                            </a>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const fileInput = document.getElementById('payment_slip');
            const uploadArea = document.getElementById('upload-area');
            const uploadContent = document.getElementById('upload-content');
            const imagePreview = document.getElementById('image-preview');
            const previewImg = document.getElementById('preview-img');
            const fileName = document.getElementById('file-name');
            const removeBtn = document.getElementById('remove-image');

            // Handle file input change
            fileInput.addEventListener('change', function(e) {
                const file = e.target.files[0];
                if (file) {
                    handleFile(file);
                }
            });

            // Handle drag and drop
            uploadArea.addEventListener('dragover', function(e) {
                e.preventDefault();
                uploadArea.classList.add('border-purple-400');
            });

            uploadArea.addEventListener('dragleave', function(e) {
                e.preventDefault();
                uploadArea.classList.remove('border-purple-400');
            });

            uploadArea.addEventListener('drop', function(e) {
                e.preventDefault();
                uploadArea.classList.remove('border-purple-400');
                
                const files = e.dataTransfer.files;
                if (files.length > 0) {
                    const file = files[0];
                    if (file.type.startsWith('image/')) {
                        fileInput.files = files;
                        handleFile(file);
                    }
                }
            });

            // Handle remove image
            removeBtn.addEventListener('click', function() {
                fileInput.value = '';
                uploadContent.classList.remove('hidden');
                imagePreview.classList.add('hidden');
                previewImg.src = '';
                fileName.textContent = '';
            });

            function handleFile(file) {
                // Validate file size (10MB)
                if (file.size > 10 * 1024 * 1024) {
                    alert('File size must be less than 10MB');
                    return;
                }

                // Validate file type
                if (!file.type.startsWith('image/')) {
                    alert('Please select an image file');
                    return;
                }

                // Create preview
                const reader = new FileReader();
                reader.onload = function(e) {
                    previewImg.src = e.target.result;
                    fileName.textContent = file.name;
                    uploadContent.classList.add('hidden');
                    imagePreview.classList.remove('hidden');
                };
                reader.readAsDataURL(file);
            }
        });
    </script>
</x-app-layout>