@extends('frontend.layouts.master')

@section('content')
    @if (!empty($group))
        <!-- Products Grid -->
        <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 gap-8" x-data>
            @forelse ($products as $index => $item)
                <form action="{{ route('cart.add') }}" method="post">
                    @csrf
                    <input name="product_id" value="{{ $item->id }}" type="hidden" />
                    <input name="type_id" value="{{ $item->type_id }}" type="hidden" />
                    <input name="product_price" value="{{ $item->price_sale ?: $item->price }}" type="hidden" />

                    <div class="group relative bg-white rounded-md hover:shadow-2xl transition-all duration-500 transform overflow-hidden border border-gray-100"
                        x-init="$el.style.opacity = 0;
                        setTimeout(() => { $el.style.opacity = 1 }, {{ (int) $index * 150 }})" style="opacity: 0">

                        <!-- Header with gradient -->
                        <div class="p-2 border-b border-dashed border-gray-200">
                            <h3 class="text-xl text-primary font-bold mb-2 text-center">
                                {{ $item->name }}
                            </h3>
                        </div>

                        @php
                            $basePrice = floatval($item->price_sale ?: $item->price);
                        @endphp

                        <div class="p-6" data-product-id="{{ $item->id }}" data-base-price="{{ $basePrice }}">


                            <!-- Price Display -->
                            <div class="text-center">
                                <div class="inline-flex items-center justify-center gap-2 bg-orange-50 rounded-md w-full mb-3 p-2">
                                    <span class="text-sm font-bold text-primary">
                                        ≈ {{ format_price($item->price_sale ?: $item->price) }}
                                    </span>
                                    <span class="text-primary font-medium">/ tháng</span>
                                </div>
                            </div>
                            <!-- Duration Selector -->
                            
                            <div class="mb-6">
                                <!-- Custom Dropdown -->
                                <div class="custom-dropdown" id="durationDropdown{{ $item->id }}">
                                    <div class="dropdown-selected">
                                        <span class="selected-text">{{ format_price($basePrice * 6) }} / 6 tháng</span>
                                        <i class="dropdown-arrow">▼</i>
                                    </div>
                                    <div class="dropdown-options">
                                        <div class="dropdown-option selected" data-value="6" data-months="6"
                                            data-price="{{ $basePrice * 6 }}">
                                            <div class="flex justify-between items-center">
                                                <span>{{ format_price($basePrice * 6) }} / 6 tháng</span>
                                            </div>
                                        </div>
                                        <div class="dropdown-option" data-value="12" data-months="12"
                                            data-price="{{ $basePrice * 12 }}">
                                            <div class="flex justify-between items-center">
                                                <span>{{ format_price($basePrice * 12) }} / 1 năm</span>
                                                <span class="text-xs text-green-600 bg-green-100 px-2 py-1 rounded">Tiết kiệm 10%</span>
                                            </div>
                                        </div>
                                        <div class="dropdown-option" data-value="24" data-months="24"
                                            data-price="{{ $basePrice * 24 }}">
                                            <div class="flex justify-between items-center">
                                                <span>{{ format_price($basePrice * 24) }} / 2 năm</span>
                                                <span class="text-xs text-green-600 bg-green-100 px-2 py-1 rounded">Tiết kiệm 10%</span>
                                            </div>
                                        </div>
                                        <div class="dropdown-option" data-value="36" data-months="36"
                                            data-price="{{ $basePrice * 36 }}">
                                            <div class="flex justify-between items-center">
                                                <span>{{ format_price($basePrice * 36) }} / 3 năm</span>
                                                <span class="text-xs text-green-600 bg-green-100 px-2 py-1 rounded">Tiết kiệm 10%</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <input type="hidden" name="months" class="hiddenMonths" value="6">
                                {{-- <input type="hidden" name="total_price" class="hiddenTotalPrice"
                                    value="{{ $basePrice }}"> --}}
                            </div>
                            <!-- Specifications -->
                            <div class="space-y-4 mb-6">
                                <h4 class="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
                                    <i class="fas fa-cogs text-orange-500"></i>
                                    Thông số kỹ thuật
                                </h4>

                                <ul class="space-y-3">
                                    <!-- CPU -->
                                    <li
                                        class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg group-hover:bg-orange-50 transition-colors">
                                        <div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center">
                                            <i class="fas fa-microchip text-orange-600"></i>
                                        </div>
                                        <div class="flex-1">
                                            <span class="text-sm text-gray-600">CPU:</span>
                                            <span class="font-bold text-gray-800 ml-2 vm-cpu" data-template-id="{{ $item->template_id }}">{{ $item->cpu }} vCore</span>
                                        </div>
                                    </li>

                                    <!-- RAM -->
                                    <li
                                        class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg group-hover:bg-orange-50 transition-colors">
                                        <div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center">
                                            <i class="fas fa-memory text-orange-600"></i>
                                        </div>
                                        <div class="flex-1">
                                            <span class="text-sm text-gray-600">RAM:</span>
                                            <span class="font-bold text-gray-800 ml-2 vm-ram" data-template-id="{{ $item->template_id }}">{{ $item->ram }} GB</span>
                                        </div>
                                    </li>

                                    <!-- SSD -->
                                    <li
                                        class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg group-hover:bg-orange-50 transition-colors">
                                        <div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center">
                                            <i class="fas fa-hdd text-orange-600"></i>
                                        </div>
                                        <div class="flex-1">
                                            <span class="text-sm text-gray-600">SSD:</span>
                                            <span class="font-bold text-gray-800 ml-2 vm-disk" data-template-id="{{ $item->template_id }}">{{ $item->disk }} GB</span>
                                        </div>
                                    </li>

                                    <!-- OS -->
                                    <li
                                        class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg group-hover:bg-orange-50 transition-colors">
                                        <div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center">
                                            <i class="fab fa-linux text-orange-600 os-icon" data-template-id="{{ $item->template_id }}"></i>
                                        </div>
                                        <div class="flex-1">
                                            <span class="text-sm text-gray-600">Hệ điều hành:</span>
                                            <span class="font-bold text-gray-800 ml-2 guest-os" data-template-id="{{ $item->template_id }}">
                                                @if($item->type_id == 4 && $item->operatingSystems->isNotEmpty())
                                                    {{ $item->operatingSystems->pluck('osGroup.name')->filter()->unique()->implode(', ') }}
                                                @else
                                                    {{ $item->os ?? 'Linux' }}
                                                @endif
                                            </span>
                                        </div>
                                    </li>

                                    <!-- Bandwidth -->
                                    <li
                                        class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg group-hover:bg-orange-50 transition-colors">
                                        <div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center">
                                            <i class="fas fa-tachometer-alt text-orange-600"></i>
                                        </div>
                                        <div class="flex-1">
                                            <span class="text-sm text-gray-600">Băng thông:</span>
                                            <span class="font-bold text-gray-800 ml-2">{{ $item->bandwidth }} MB</span>
                                        </div>
                                    </li>

                                    <!-- GPU -->
                                    <li
                                        class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg group-hover:bg-orange-50 transition-colors">
                                        <div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center">
                                            <i class="fas fa-tv text-orange-600"></i>
                                        </div>
                                        <div class="flex-1">
                                            <span class="text-sm text-gray-600">GPU:</span>
                                            <span class="font-bold text-gray-800 ml-2">{{ $item->gpu }} GB</span>
                                        </div>
                                    </li>
                                </ul>
                            </div>

                            <!-- Action Button -->


                            <flux:button variant="primary" color="orange" type="submit" class="w-full"
                                icon="shopping-bag">
                                Đăng ký ngay</flux:button>

                            <!-- Support Info -->
                            <div class="text-center mt-4">
                                <p class="text-xs text-gray-500">
                                    <i class="fas fa-headset text-orange-500 mr-1"></i>
                                    Hỗ trợ kỹ thuật 24/7 - Bảo hành toàn diện
                                </p>
                            </div>
                        </div>
                    </div>
                </form>
            @empty
                <div class="col-span-full">
                    <div class="text-center py-16">
                        <div class="w-24 h-24 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-6">
                            <i class="fas fa-box-open text-4xl text-orange-500"></i>
                        </div>
                        <h3 class="text-2xl font-bold text-gray-800 mb-2">Không có sản phẩm</h3>
                        <p class="text-gray-600">Danh mục này hiện chưa có sản phẩm nào.</p>
                    </div>
                </div>
                {{ $products->links() }}
            @endforelse
        </div>
    @else
        <div class="min-h-screen flex items-center justify-center">
            <div class="text-center">
                <div class="w-32 h-32 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-6">
                    <i class="fas fa-exclamation-triangle text-5xl text-orange-500"></i>
                </div>
                <h2 class="text-3xl font-bold text-gray-800 mb-4">Không tìm thấy</h2>
                <p class="text-gray-600 text-lg">Danh mục này không tồn tại hoặc đã bị xóa.</p>
                <a href="{{ route('home') }}"
                    class="inline-block mt-6 bg-orange-500 hover:bg-orange-600 text-white font-bold py-3 px-6 rounded-xl transition-colors">
                    Về trang chủ
                </a>
            </div>
        </div>
    @endif
@endsection

@push('viewStyles')
    <link href="{{ asset('lib/tom-select/tom-select.css') }}" rel="stylesheet">
    <link href="{{ asset('css/service/dropdown.css') }}" rel="stylesheet">
@endpush

@push('viewScripts')
    <script src="{{ asset('lib/tom-select/tom-select.complete.min.js') }}" defer></script>
    <script src="{{ asset('js/service/vminfo.js') }}" defer></script>
@endpush