100 lines
5.3 KiB
PHP
100 lines
5.3 KiB
PHP
<div class="bg-white rounded-lg border border-gray-200 p-6" x-cloak x-data="{ selectedOs: null, showOsDetails: false, loading: true }" data-skeleton-id="os-selection">
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-4">{{ __('Hệ điều hành') }}</h3>
|
|
|
|
<!-- Skeleton Loading -->
|
|
<template x-if="loading">
|
|
<div class="space-y-6 animate-pulse">
|
|
<!-- OS Group Skeleton -->
|
|
<div class="space-y-4">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<div class="w-6 h-6 bg-gray-200 rounded"></div>
|
|
<div class="h-4 bg-gray-200 rounded w-24"></div>
|
|
</div>
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
|
|
<div class="h-20 bg-gray-200 rounded-xl"></div>
|
|
<div class="h-20 bg-gray-200 rounded-xl"></div>
|
|
<div class="h-20 bg-gray-200 rounded-xl"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Second OS Group Skeleton -->
|
|
<div class="space-y-4">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<div class="w-6 h-6 bg-gray-200 rounded"></div>
|
|
<div class="h-4 bg-gray-200 rounded w-20"></div>
|
|
</div>
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
|
|
<div class="h-20 bg-gray-200 rounded-xl"></div>
|
|
<div class="h-20 bg-gray-200 rounded-xl"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Actual Content -->
|
|
<template x-if="!loading">
|
|
<div class="space-y-4">
|
|
@foreach ($item['os_group'] as $group)
|
|
<div>
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<img src="{{ $group->thumbnail }}" alt="{{ $group->name }}" class="w-6 h-6 rounded" />
|
|
<span class="font-medium text-gray-700">{{ $group->name }}</span>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
|
|
@foreach ($group->os as $os)
|
|
<div class="relative">
|
|
<button type="button"
|
|
@click="selectedOs = {{ $os->id }}; $dispatch('os-changed', {{ $os->id }}); showOsDetails = true"
|
|
:class="{
|
|
'border-orange-500 ring-2 ring-orange-400 bg-orange-50 text-orange-700': selectedOs ===
|
|
{{ $os->id }},
|
|
'border-gray-200 bg-white text-gray-700 hover:bg-gray-50': selectedOs !==
|
|
{{ $os->id }}
|
|
}"
|
|
class="border rounded-xl p-3 text-sm font-medium transition-all text-left flex items-center gap-3 w-full relative">
|
|
|
|
<img src="{{ $os->thumbnail ?? $group->thumbnail }}" alt="{{ $os->version }}"
|
|
class="w-8 h-8 rounded object-cover" />
|
|
|
|
<div>
|
|
<div class="font-semibold">{{ $group->name }}</div>
|
|
<div class="text-xs text-gray-500">{{ __('Version') }}:
|
|
{{ $os->version }}</div>
|
|
</div>
|
|
|
|
<div x-show="selectedOs === {{ $os->id }}"
|
|
class="absolute top-1 right-1 bg-orange-500 text-white rounded-full p-0.5">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2"
|
|
viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</template>
|
|
|
|
<!-- OS Details Panel -->
|
|
<div x-show="showOsDetails && selectedOs" x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0 transform scale-95" x-transition:enter-end="opacity-100 transform scale-100"
|
|
x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 transform scale-100"
|
|
x-transition:leave-end="opacity-0 transform scale-95"
|
|
class="mt-4 p-4 bg-orange-50 rounded-lg border border-orange-200">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<h5 class="font-semibold text-orange-800">{{ __('Thông tin hệ điều hành') }}</h5>
|
|
<flux:button size="sm" variant="subtle" icon="x-mark" @click="showOsDetails = false" type="button" />
|
|
</div>
|
|
<p class="text-sm text-orange-700">
|
|
{{ __('Bạn đã chọn hệ điều hành. Hệ điều hành sẽ được cài đặt tự động khi máy chủ được tạo.') }}
|
|
</p>
|
|
</div>
|
|
|
|
<input type="hidden" name="os_id" x-bind:value="selectedOs"
|
|
wire:model.defer="selectedOsList.{{ $index }}">
|
|
</div>
|