@extends('frontend.layouts.master')

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

@section('content')
    <form action="{{ route('client.order.store') }}" method="post">
        @csrf
        <div class="container mx-auto mt-10 px-4">
            @if ($cartItems && count($cartItems) > 0)
                @php $total = 0; @endphp

                <!-- Main Title -->
                <div class="text-center mb-8">
                    <h1 class="text-3xl font-bold text-gray-800">Cấu hình tùy chọn và tiếp tục thanh toán</h1>
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8" data-cart-page x-data="cartForm()" x-init="initializeSkeleton()" x-cloak>
                    <!-- Left Column - Product Configuration -->
                    <div class="space-y-6">
                        @foreach ($cartItems as $index => $item)
                            @php
                                $product = $item['product'];
                                $total += $item['price'];
                                $addons = $item['addon'] ?? [];
                                $osGroups = $item['os_group'] ?? [];
                            @endphp
                            <input type="hidden" name="cart_id" value="{{ $item['id'] }}">
                            <input type="hidden" name="months" value="{{ $item['months'] }}">

                            <!-- Domain Input Section -->
                            @include('frontend.cart.partials.domain-input')

                            <!-- Product Details -->
                            @include('frontend.cart.partials.product-details', [
                                'product' => $product,
                                'item' => $item
                            ])

                            <!-- OS Selection for VPS -->
                            @if ($item['product_type'] == 4 && isset($item['os_group']) && count($item['os_group']) > 0)
                                @include('frontend.cart.partials.os-select', [
                                    'item' => $item,
                                    'index' => $index
                                ])
                            @endif
                        @endforeach
                    </div>

                    <!-- Right Column - Payment Summary -->
                    <div class="space-y-6">

                        <!-- Payment Period & Addons Section -->
                        <livewire:cart.summary-addons :product="$item['product']" :addons="$item['addon'] ?? []" :index="$index"
                            :months="$item['months']" />


                        <!-- Order Button -->
                        <div class="bg-white rounded-lg border border-gray-200 p-6">
                            <flux:button type="submit" variant="primary" color="orange" icon="credit-card"
                                class="w-full text-lg py-4">
                                Đặt hàng
                            </flux:button>
                        </div>
                    </div>
                </div>
            @else
                @include('frontend.cart.partials.empty-cart')
            @endif
        </div>
    </form>
@endsection

@push('viewScripts')
    <script src="{{ asset('js/cart-skeleton.min.js') }}"></script>
    <script>
        function cartForm() {
            return {
                isFormValid: true,
                
                init() {
                    this.validateForm();
                },
                
                initializeSkeleton() {
                    // Add loading class to body
                    document.body.classList.add('skeleton-active');
                    
                    // Show skeleton immediately for all components
                    this.showAllSkeletons();
                    
                    // Hide skeleton after a delay to simulate loading
                    setTimeout(() => {
                        this.hideAllSkeletons();
                        document.body.classList.remove('skeleton-active');
                    }, 1500);
                },
                
                showAllSkeletons() {
                    // Show skeleton for all components
                    const components = document.querySelectorAll('[data-skeleton-id]');
                    components.forEach(component => {
                        if (component._x_dataStack && component._x_dataStack[0]) {
                            const data = component._x_dataStack[0];
                            if (data.loading !== undefined) {
                                data.loading = true;
                            }
                        }
                    });
                    
                    // Also handle nested components without data-skeleton-id
                    this.updateNestedComponents(true);
                },
                
                hideAllSkeletons() {
                    // Hide skeleton for all components
                    const components = document.querySelectorAll('[data-skeleton-id]');
                    components.forEach(component => {
                        if (component._x_dataStack && component._x_dataStack[0]) {
                            const data = component._x_dataStack[0];
                            if (data.loading !== undefined) {
                                data.loading = false;
                            }
                        }
                    });
                    
                    // Also handle nested components without data-skeleton-id
                    this.updateNestedComponents(false);
                },
                
                updateNestedComponents(showSkeleton) {
                    // Update all Alpine components with loading state
                    const allComponents = document.querySelectorAll('[x-data]');
                    allComponents.forEach(component => {
                        if (component._x_dataStack && component._x_dataStack[0]) {
                            const data = component._x_dataStack[0];
                            if (data.loading !== undefined) {
                                data.loading = showSkeleton;
                            }
                        }
                    });
                },
                
                validateForm() {
                    // Validate domain name
                    const domainInput = document.querySelector('input[name="server_name"]');
                    if (domainInput) {
                        const domainValue = domainInput.value;
                        const domainPattern = /^[a-zA-Z0-9.-]+$/;
                        this.isFormValid = domainPattern.test(domainValue);
                    }
                    
                    // Validate OS selection for VPS
                    const osInput = document.querySelector('input[name="os_id"]');
                    if (osInput && !osInput.value) {
                        this.isFormValid = false;
                    }
                }
            };
        }
    </script>
@endpush