<div x-data="{ activeTab: 'setups' }">
    {{-- Cabecera --}}
    <div class="w-full flex items-center mb-8">
        <a href="{{ route('products.index') }}"
            class="flex rounded-lg bg-white border border-gray-200 px-4 py-2 text-gray-700 hover:bg-gray-100 font-bold">
            <img src="{{ asset('vendor/blade-untitledui-icons/arrow-narrow-left.svg') }}" alt="Volver" class="w-6 h-6">
            <span class="ml-2">Volver</span>
        </a>
    </div>

    {{-- Información del producto --}}
    <div
        class="w-full flex flex-wrap items-center justify-between rounded-lg bg-white border border-gray-200 px-8 py-4 mb-6">
        <div class="w-full flex items-center justify-between">
            <div class="flex items-center gap-4">
                {{-- Logo del producto --}}
                <div class="flex items-center justify-center w-16 h-16 rounded-lg bg-white border border-gray-200 p-2">
                    <img src="{{ $product->image_url ?? asset('images/placeholder.png') }}" alt="{{ $product->name }}"
                        class="w-full h-full object-contain">
                </div>
                <div>
                    <h1 class="text-4xl font-bold">{{ $product->name }}</h1>
                </div>
            </div>
        </div>

        <div class="w-full flex flex-wrap items-start mt-6">
            <div class="w-1/2 mt-4 flex flex-wrap">
                {{-- Slug --}}
                <div class="flex items-center gap-2 w-1/2">
                    <div class="w-10 h-10 border rounded flex items-center justify-center">

                    <img src="{{ asset('vendor/blade-untitledui-icons/message-text-square.svg') }}" alt="Slug"
                        class="w-5 h-5">
                    </div>
                    <div class="flex flex-col">
                        <span class="text-sm font-bold">Slug</span>
                        <span class="text-sm ">{{ $product->slug }}</span>
                    </div>
                </div>

                {{-- Tecnología --}}
                <div class="flex items-center gap-2 w-1/2">
                    <div class="w-10 h-10 border rounded flex items-center justify-center">
                    <img src="{{ asset('vendor/blade-untitledui-icons/layout-alt.svg') }}" alt="Tecnología"
                        class="w-5 h-5">
                    </div>
                    <div class="flex flex-col">
                        <span class="text-sm font-bold">Tecnología</span>
                        <span class="text-sm ">{{ $product->tech }}</span>
                    </div>
                </div>

                {{-- Tipo --}}
                <div class="flex items-center gap-2 w-1/2 mt-4">
                    <div class="w-10 h-10 border rounded flex items-center justify-center">
                    <img src="{{ asset('vendor/blade-untitledui-icons/code.svg') }}" alt="Tipo"
                        class="w-5 h-5">
                    </div>
                    <div class="flex flex-col">
                        <span class="text-sm font-bold">Tipo</span>
                        <span class="text-sm ">{{ $product->type }}</span>
                    </div>
                </div>

                {{-- Estado --}}
                <div class="flex items-center gap-2 w-1/2 mt-4">
                    <div class="w-10 h-10 border rounded flex items-center justify-center">
                    <img src="{{ asset('vendor/blade-untitledui-icons/activity-heart.svg') }}" alt="Estado"
                        class="w-5 h-5">
                    </div>
                    <div class="flex flex-col">
                        <span class="text-sm font-bold">Estado</span>
                        @if ($product->actived)
                        <span class="text-sm">Activo</span>
                        @else
                        <span class="text-sm">Inactivo</span>
                        @endif
                    </div>
                </div>
            </div>
            {{-- Metadata --}}
            @if ($product->metadata)
                <div class="w-1/2 mt-4">
                    <span class="text-xs text-gray-500 mb-2 block">Metadata</span>
                    <pre class="bg-gray-100 p-3 rounded text-xs font-mono overflow-x-auto">{{ json_encode($product->metadata, JSON_PRETTY_PRINT) }}</pre>
                </div>
            @endif
        </div>

    </div>

    {{-- Dos columnas: Tokens y Entornos --}}
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
        {{-- Tokens vinculados --}}
        <div class="rounded-lg bg-white border border-gray-200 px-6 py-4">
            <h3 class="font-semibold text-lg mb-4">Tokens vinculados</h3>

            @if ($product->tokens->isEmpty())
                <p class="text-gray-500 text-sm">No hay tokens vinculados.</p>
            @else
                <ul class="space-y-3">
                    @foreach ($product->tokens as $token)
                        @php
                            $status = $token->getStatus();
                            // Ofuscar el token: mantener guiones y guiones bajos, reemplazar el resto con asteriscos
                            $maskedToken = preg_replace('/[^-_]/', '*', $token->token);
                        @endphp
                        <li class="flex items-center py-2 border-b border-gray-200 last:border-0">
                            <div class="flex flex-col">
                                <div class="flex items-center gap-2 mb-1">
                                    <span class="font-mono text-sm font-bold text-gray-700">{{ $maskedToken }}</span>
                                </div>
                                <div class="text-sm text-gray-900 mb-1">{{ $token->client->name }}</div>
                            </div>
                            <div class="flex items-center gap-2 justify-start ml-4">
                                @if ($status === 'activo')
                                    <span
                                        class="inline-flex items-center gap-1 text-green-600 font-semibold bg-green-100 border border-green-200 rounded px-2 py-0.5 text-xs">
                                        <img src="{{ asset('vendor/blade-untitledui-icons/check-circle.svg') }}"
                                            alt="Activo" class="w-3 h-3 svg-fill-green">
                                        <span>Activa</span>
                                    </span>
                                @elseif ($status === 'vencen_pronto')
                                    <span
                                        class="inline-flex items-center gap-1 text-orange-600 font-semibold bg-orange-100 border border-orange-200 rounded px-2 py-0.5 text-xs">
                                        <img src="{{ asset('vendor/blade-untitledui-icons/alert-triangle.svg') }}"
                                            alt="Vence pronto" class="w-3 h-3 svg-fill-orange">
                                        <span>A Vence pronto</span>
                                    </span>
                                @elseif ($status === 'vencida')
                                    <span
                                        class="inline-flex items-center gap-1 text-red-600 font-semibold bg-red-100 border border-red-200 rounded px-2 py-0.5 text-xs">
                                        <img src="{{ asset('vendor/blade-untitledui-icons/alert-circle.svg') }}"
                                            alt="Vencida" class="w-3 h-3 svg-fill-red">
                                        <span>Vencida</span>
                                    </span>
                                @else
                                    <span
                                        class="inline-flex items-center gap-1 text-gray-400 font-semibold bg-gray-100 border border-gray-200 rounded px-2 py-0.5 text-xs">
                                        <img src="{{ asset('vendor/blade-untitledui-icons/x-circle.svg') }}"
                                            alt="Desactivada" class="w-3 h-3 svg-fill-gray">
                                        <span>Desactivada</span>
                                    </span>
                                @endif
                            </div>
                            <div class="flex items-center gap-2 ml-auto">
                                <button x-data="{ copied: false }"
                                    @click="navigator.clipboard.writeText('{{ $token->token }}').then(() => { copied = true; setTimeout(() => copied = false, 2000); })"
                                    class="p-1 hover:bg-gray-100 rounded transition-colors" title="Copiar token">
                                    <img x-show="!copied" src="{{ asset('vendor/blade-untitledui-icons/copy.svg') }}"
                                        alt="Copiar" class="w-5 h-5 svg-fill-gray hover:svg-fill-orange">
                                    <img x-show="copied"
                                        src="{{ asset('vendor/blade-untitledui-icons/check-circle.svg') }}"
                                        alt="Copiado" class="w-5 h-5 svg-fill-green">
                                </button>
                                <a href="{{ route('license_tokens.show', $token) }}"
                                    class="p-1 hover:bg-gray-100 rounded transition-colors" title="Ir a token">
                                    <img src="{{ asset('vendor/blade-untitledui-icons/arrow-narrow-right.svg') }}"
                                        alt="Ir" class="w-5 h-5 svg-fill-gray hover:svg-fill-orange">
                                </a>
                            </div>
                        </li>
                    @endforeach
                </ul>
            @endif
        </div>

        {{-- Entornos donde está instalado --}}
        <div class="rounded-lg bg-white border border-gray-200 px-6 py-4">
            <h3 class="font-semibold text-lg mb-4">Entornos donde está instalado</h3>

            @if ($product->environments->isEmpty())
                <p class="text-gray-500 text-sm">Este producto no está vinculado a ningún entorno.</p>
            @else
                <ul class="space-y-3">
                    @foreach ($product->environments as $environment)
                        <li class="flex items-start gap-3 py-2 border-b border-gray-200 last:border-0">
                            <div
                                class="flex items-center justify-center w-10 h-10 rounded-full border border-gray-200 flex-shrink-0">
                                <img src="{{ $environment->type->image_url ?? asset('images/placeholder.png') }}"
                                    alt="{{ $environment->type->name ?? 'Environment' }}"
                                    class="w-8 h-8 rounded-full object-contain">
                            </div>
                            <div class="flex-1 min-w-0">
                                <div class="font-bold text-sm mb-1">{{ $environment->name }}</div>
                                <div class="flex items-center gap-2 mb-1">
                                    @php
                                        $envStatus = $environment->env ?? 'pro';
                                        $envLabels = [
                                            'pro' => 'Producción',
                                            'pre' => 'PreProducción',
                                            'develop' => 'Desarrollo',
                                            'local' => 'Local',
                                        ];
                                        $envLabel = $envLabels[$envStatus] ?? 'Producción';
                                        $isProduction = $envStatus === 'pro';
                                    @endphp
                                    <span
                                        class="inline-flex items-center gap-1 {{ $isProduction ? 'text-green-600 font-semibold bg-green-100 border border-green-200' : 'text-gray-500 font-semibold bg-gray-100 border border-gray-200' }} rounded px-2 py-0.5 text-xs">
                                        <span>{{ $envLabel }}</span>
                                    </span>
                                </div>
                                <div class="text-xs text-gray-600 mb-1">
                                    {{ $environment->version ?? 'N/A' }} Servidor interno
                                </div>
                                <a href="{{ $environment->domain }}" target="_blank"
                                    class="text-xs text-blue-600 hover:text-blue-800 flex items-center gap-1 mt-1">
                                    <img src="{{ asset('vendor/blade-untitledui-icons/globe.svg') }}" alt="URL"
                                        class="w-3 h-3">
                                    <span class="truncate">{{ $environment->domain }}</span>
                                </a>
                            </div>
                        </li>
                    @endforeach
                </ul>
            @endif
        </div>
    </div>

    {{-- Sistema de pestañas --}}
    <div class="w-full border-b border-gray-200 mb-6">
        <div class="flex items-center justify-start gap-8">
            <button @click="activeTab = 'setups'"
                class="relative pb-2 transition-colors duration-200 {{ $this->setups->isEmpty() ? '' : '' }}"
                :class="activeTab === 'setups' ? 'text-gray-800 font-semibold' :
                    'text-gray-500 font-normal hover:text-gray-700'">
                <span>Setups de configuración</span>
                <div x-show="activeTab === 'setups'" class="absolute bottom-0 left-0 right-0 h-1 bg-orange-600"></div>
            </button>
            <button @click="activeTab = 'scss'" class="relative pb-2 transition-colors duration-200"
                :class="activeTab === 'scss' ? 'text-gray-800 font-semibold' :
                    'text-gray-500 font-normal hover:text-gray-700'">
                <span>Archivos SCSS</span>
                <div x-show="activeTab === 'scss'" class="absolute bottom-0 left-0 right-0 h-1 bg-orange-600"></div>
            </button>
            <button @click="activeTab = 'js'" class="relative pb-2 transition-colors duration-200"
                :class="activeTab === 'js' ? 'text-gray-800 font-semibold' :
                    'text-gray-500 font-normal hover:text-gray-700'">
                <span>Archivos JS</span>
                <div x-show="activeTab === 'js'" class="absolute bottom-0 left-0 right-0 h-1 bg-orange-600"></div>
            </button>
            <button @click="activeTab = 'scss-cdn'" class="relative pb-2 transition-colors duration-200"
                :class="activeTab === 'scss-cdn' ? 'text-gray-800 font-semibold' :
                    'text-gray-500 font-normal hover:text-gray-700'">
                <span>Bundless SCSS CDN</span>
                <div x-show="activeTab === 'scss-cdn'" class="absolute bottom-0 left-0 right-0 h-1 bg-orange-600"></div>
            </button>
            <button @click="activeTab = 'features'" class="relative pb-2 transition-colors duration-200"
                :class="activeTab === 'features' ? 'text-gray-800 font-semibold' :
                    'text-gray-500 font-normal hover:text-gray-700'">
                <span>Features</span>
                <div x-show="activeTab === 'features'" class="absolute bottom-0 left-0 right-0 h-1 bg-orange-600"></div>
            </button>
            <button @click="activeTab = 'recursos'" class="relative pb-2 transition-colors duration-200"
                :class="activeTab === 'recursos' ? 'text-gray-800 font-semibold' :
                    'text-gray-500 font-normal hover:text-gray-700'">
                <span>Recursos</span>
                <div x-show="activeTab === 'recursos'" class="absolute bottom-0 left-0 right-0 h-1 bg-orange-600"></div>
            </button>
            <button @click="activeTab = 'tutoriales'" class="relative pb-2 transition-colors duration-200"
                :class="activeTab === 'tutoriales' ? 'text-gray-800 font-semibold' :
                    'text-gray-500 font-normal hover:text-gray-700'">
                <span>Tutoriales</span>
                <div x-show="activeTab === 'tutoriales'" class="absolute bottom-0 left-0 right-0 h-1 bg-orange-600"></div>
            </button>
        </div>
    </div>

    {{-- Contenido de pestañas --}}
    <div class="w-full">
        {{-- Pestaña: Setups de configuración --}}
        <div x-show="activeTab === 'setups'" x-cloak>
            @if ($this->setups->isEmpty())
                <div
                    class="flex flex-col items-center justify-center py-12 px-4 bg-white border border-gray-200 rounded-lg">
                    <div class="w-24 h-24 mb-4 flex items-center justify-center">
                        <div class="w-16 h-16 bg-gray-100 rounded-lg flex items-center justify-center">
                            <img src="{{ asset('vendor/blade-untitledui-icons/monitor.svg') }}" alt="Monitor"
                                class="w-10 h-10 svg-fill-gray">
                        </div>
                    </div>
                    <p class="text-gray-500 text-sm mb-4">No hay setup configurado para este producto.</p>
                    @can('admin.setups.create')
                    <a href="{{ route('products.setups.create', $product) }}"
                        class="rounded bg-orange-600 px-4 py-2 text-sm text-white hover:bg-red-700 font-semibold">
                        Crear setup
                    </a>
                    @endcan
                </div>
            @else
                <div class="bg-white border border-gray-200 rounded-lg overflow-hidden">
                    <div class="overflow-x-auto">
                        <table class="min-w-full text-sm">
                            <thead class="bg-gray-100 text-xs uppercase text-gray-600">
                                <tr>
                                    <th class="px-3 py-2 text-left">Versión</th>
                                    <th class="px-3 py-2 text-left">Estado</th>
                                    <th class="px-3 py-2 text-left">Creado por</th>
                                    <th class="px-3 py-2 text-left">Fecha</th>
                                    <th class="px-3 py-2 text-right">Acciones</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y">
                                @foreach ($this->setups as $setup)
                                    <tr class="hover:bg-gray-50">
                                        <td class="px-3 py-2 font-mono">{{ $setup->version }}</td>
                                        <td class="px-3 py-2">
                                            @if ($setup->status === 'active')
                                                <span class="text-green-600 font-bold text-xs">Activo</span>
                                            @else
                                                <span class="text-gray-500 text-xs">Deprecado</span>
                                            @endif
                                        </td>
                                        <td class="px-3 py-2">{{ $setup->creator?->name ?? 'N/A' }}</td>
                                        <td class="px-3 py-2">{{ $setup->created_at->format('Y-m-d') }}</td>
                                        <td class="px-3 py-2 text-right">
                                            <a href="{{ route('products.setups.index', $product) }}"
                                                class="text-indigo-600 text-xs hover:text-indigo-800">
                                                Ver todos →
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            @endif
        </div>

        {{-- Pestaña: Archivos SCSS --}}
        <div x-show="activeTab === 'scss'" x-cloak>
            @if ($this->scssVersions->isEmpty())
                <div
                    class="flex flex-col items-center justify-center py-12 px-4 bg-white border border-gray-200 rounded-lg">
                    <p class="text-gray-500 text-sm mb-4">No hay archivos SCSS configurados para este producto.</p>
                    <a href="{{ route('products.scss.index', $product) }}"
                        class="rounded bg-orange-600 px-4 py-2 text-sm text-white hover:bg-orange-700 font-semibold">
                        Gestionar SCSS
                    </a>
                </div>
            @else
                <div class="bg-white border border-gray-200 rounded-lg overflow-hidden">
                    <div class="overflow-x-auto">
                        <table class="min-w-full text-sm">
                            <thead class="bg-gray-100 text-xs uppercase text-gray-600">
                                <tr>
                                    <th class="px-3 py-2 text-left">Versión</th>
                                    <th class="px-3 py-2 text-left">Archivos</th>
                                    <th class="px-3 py-2 text-left">Creado por</th>
                                    <th class="px-3 py-2 text-left">Fecha</th>
                                    <th class="px-3 py-2 text-right">Acciones</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y">
                                @foreach ($this->scssVersions as $scssVersion)
                                    <tr class="hover:bg-gray-50">
                                        <td class="px-3 py-2 font-mono">{{ $scssVersion->version }}</td>
                                        <td class="px-3 py-2">
                                            <span class="px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs">
                                                {{ $scssVersion->files_count }} archivo(s)
                                            </span>
                                        </td>
                                        <td class="px-3 py-2">{{ $scssVersion->creator?->name ?? 'N/A' }}</td>
                                        <td class="px-3 py-2">{{ $scssVersion->created_at->format('Y-m-d') }}</td>
                                        <td class="px-3 py-2 text-right">
                                            <a href="{{ route('products.scss.index', $product) }}"
                                                class="text-indigo-600 text-xs hover:text-indigo-800">
                                                Gestionar SCSS →
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            @endif
        </div>

        {{-- Pestaña: Archivos JS --}}
        <div x-show="activeTab === 'js'" x-cloak>
            @if ($this->jsVersions->isEmpty())
                <div
                    class="flex flex-col items-center justify-center py-12 px-4 bg-white border border-gray-200 rounded-lg">
                    <p class="text-gray-500 text-sm mb-4">No hay archivos JS configurados para este producto.</p>
                    <a href="{{ route('products.js.index', $product) }}"
                        class="rounded bg-orange-600 px-4 py-2 text-sm text-white hover:bg-orange-700 font-semibold">
                        Gestionar JS
                    </a>
                </div>
            @else
                <div class="bg-white border border-gray-200 rounded-lg overflow-hidden">
                    <div class="overflow-x-auto">
                        <table class="min-w-full text-sm">
                            <thead class="bg-gray-100 text-xs uppercase text-gray-600">
                                <tr>
                                    <th class="px-3 py-2 text-left">Versión</th>
                                    <th class="px-3 py-2 text-left">Archivos</th>
                                    <th class="px-3 py-2 text-left">Creado por</th>
                                    <th class="px-3 py-2 text-left">Fecha</th>
                                    <th class="px-3 py-2 text-right">Acciones</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y">
                                @foreach ($this->jsVersions as $jsVersion)
                                    <tr class="hover:bg-gray-50">
                                        <td class="px-3 py-2 font-mono">{{ $jsVersion->version }}</td>
                                        <td class="px-3 py-2">
                                            <span class="px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs">
                                                {{ $jsVersion->files_count }} archivo(s)
                                            </span>
                                        </td>
                                        <td class="px-3 py-2">{{ $jsVersion->creator?->name ?? 'N/A' }}</td>
                                        <td class="px-3 py-2">{{ $jsVersion->created_at->format('Y-m-d') }}</td>
                                        <td class="px-3 py-2 text-right">
                                            <a href="{{ route('products.js.index', $product) }}"
                                                class="text-indigo-600 text-xs hover:text-indigo-800">
                                                Gestionar JS →
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            @endif
        </div>

        {{-- Pestaña: Bundless SCSS CDN --}}
        <div x-show="activeTab === 'scss-cdn'" x-cloak>
            @if ($this->scssCdnBundles->isEmpty())
                <div
                    class="flex flex-col items-center justify-center py-12 px-4 bg-white border border-gray-200 rounded-lg">
                    <p class="text-gray-500 text-sm mb-4">No hay bundles SCSS CDN configurados para este producto.</p>
                    <a href="{{ route('products.scss-cdn.index', $product) }}"
                        class="rounded bg-orange-600 px-4 py-2 text-sm text-white hover:bg-orange-700 font-semibold">
                        Gestionar SCSS CDN
                    </a>
                </div>
            @else
                <div class="bg-white border border-gray-200 rounded-lg overflow-hidden">
                    <div class="overflow-x-auto">
                        <table class="min-w-full text-sm">
                            <thead class="bg-gray-100 text-xs uppercase text-gray-600">
                                <tr>
                                    <th class="px-3 py-2 text-left">Versión</th>
                                    <th class="px-3 py-2 text-left">Archivos</th>
                                    <th class="px-3 py-2 text-left">Creado por</th>
                                    <th class="px-3 py-2 text-left">Fecha</th>
                                    <th class="px-3 py-2 text-right">Acciones</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y">
                                @foreach ($this->scssCdnBundles as $bundle)
                                    <tr class="hover:bg-gray-50">
                                        <td class="px-3 py-2 font-mono">{{ $bundle->version }}</td>
                                        <td class="px-3 py-2">
                                            <span class="px-2 py-1 bg-purple-100 text-purple-800 rounded text-xs">
                                                {{ $bundle->files_count }} archivo(s)
                                            </span>
                                        </td>
                                        <td class="px-3 py-2">{{ $bundle->creator?->name ?? 'N/A' }}</td>
                                        <td class="px-3 py-2">{{ $bundle->created_at->format('Y-m-d') }}</td>
                                        <td class="px-3 py-2 text-right">
                                            <a href="{{ route('products.scss-cdn.index', $product) }}"
                                                class="text-indigo-600 text-xs hover:text-indigo-800">
                                                Gestionar SCSS CDN →
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            @endif
        </div>

        {{-- Pestaña: Features --}}
        <div x-show="activeTab === 'features'" x-cloak>
            @if ($this->featureVersions->isEmpty())
                <div
                    class="flex flex-col items-center justify-center py-12 px-4 bg-white border border-gray-200 rounded-lg">
                    <p class="text-gray-500 text-sm mb-4">No hay versiones de features configuradas para este producto.
                    </p>
                    <a href="{{ route('products.features.version.create', $product) }}"
                        class="rounded bg-orange-600 px-4 py-2 text-sm text-white hover:bg-orange-700 font-semibold">
                        Crear la primera versión
                    </a>
                </div>
            @else
                <div class="bg-white border border-gray-200 rounded-lg overflow-hidden">
                    <div class="overflow-x-auto">
                        <table class="min-w-full text-sm">
                            <thead class="bg-gray-100 text-xs uppercase text-gray-600">
                                <tr>
                                    <th class="px-3 py-2 text-left">Versión</th>
                                    <th class="px-3 py-2 text-left">Features</th>
                                    <th class="px-3 py-2 text-left">Descripción</th>
                                    <th class="px-3 py-2 text-left">Creado por</th>
                                    <th class="px-3 py-2 text-left">Fecha</th>
                                    <th class="px-3 py-2 text-right">Acciones</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y">
                                @foreach ($this->featureVersions as $featureVersion)
                                    <tr class="hover:bg-gray-50">
                                        <td class="px-3 py-2 font-mono">{{ $featureVersion->version }}</td>
                                        <td class="px-3 py-2">
                                            <span class="px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs">
                                                {{ $featureVersion->features_count }} feature(s)
                                            </span>
                                        </td>
                                        <td class="px-3 py-2">
                                            {{ $featureVersion->description ? Str::limit($featureVersion->description, 50) : '—' }}
                                        </td>
                                        <td class="px-3 py-2">{{ $featureVersion->creator?->name ?? 'N/A' }}</td>
                                        <td class="px-3 py-2">{{ $featureVersion->created_at->format('Y-m-d') }}</td>
                                        <td class="px-3 py-2 text-right">
                                            <a href="{{ route('products.features.version.show', [$product, $featureVersion]) }}"
                                                class="text-indigo-600 text-xs hover:text-indigo-800">
                                                Ver versión →
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            @endif
        </div>

        {{-- Pestaña: Recursos --}}
        <div x-show="activeTab === 'recursos'" x-cloak>
            @if ($this->resourceVersions->isEmpty())
                <div
                    class="flex flex-col items-center justify-center py-12 px-4 bg-white border border-gray-200 rounded-lg">
                    <p class="text-gray-500 text-sm mb-4">No hay versiones de recursos configuradas para este producto.
                    </p>
                    <a href="{{ route('products.resources.version.create', $product) }}"
                        class="rounded bg-orange-600 px-4 py-2 text-sm text-white hover:bg-orange-700 font-semibold">
                        Crear la primera versión
                    </a>
                </div>
            @else
                <div class="bg-white border border-gray-200 rounded-lg overflow-hidden">
                    <div class="overflow-x-auto">
                        <table class="min-w-full text-sm">
                            <thead class="bg-gray-100 text-xs uppercase text-gray-600">
                                <tr>
                                    <th class="px-3 py-2 text-left">Versión</th>
                                    <th class="px-3 py-2 text-left">Recursos</th>
                                    <th class="px-3 py-2 text-left">Descripción</th>
                                    <th class="px-3 py-2 text-left">Creado por</th>
                                    <th class="px-3 py-2 text-left">Fecha</th>
                                    <th class="px-3 py-2 text-right">Acciones</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y">
                                @foreach ($this->resourceVersions as $resourceVersion)
                                    <tr class="hover:bg-gray-50">
                                        <td class="px-3 py-2 font-mono">{{ $resourceVersion->version }}</td>
                                        <td class="px-3 py-2">
                                            <span class="px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs">
                                                {{ $resourceVersion->resources_count }} recurso(s)
                                            </span>
                                        </td>
                                        <td class="px-3 py-2">
                                            {{ $resourceVersion->description ? Str::limit($resourceVersion->description, 50) : '—' }}
                                        </td>
                                        <td class="px-3 py-2">{{ $resourceVersion->creator?->name ?? 'N/A' }}</td>
                                        <td class="px-3 py-2">{{ $resourceVersion->created_at->format('Y-m-d') }}</td>
                                        <td class="px-3 py-2 text-right">
                                            <a href="{{ route('products.resources.version.show', [$product, $resourceVersion]) }}"
                                                class="text-indigo-600 text-xs hover:text-indigo-800">
                                                Ver versión →
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            @endif
        </div>

        {{-- Pestaña: Tutoriales --}}
        <div x-show="activeTab === 'tutoriales'" x-cloak>
            @if ($this->tutorialVersions->isEmpty())
                <div
                    class="flex flex-col items-center justify-center py-12 px-4 bg-white border border-gray-200 rounded-lg">
                    <p class="text-gray-500 text-sm mb-4">No hay versiones de tutoriales configuradas para este producto.
                    </p>
                    <a href="{{ route('products.tutorials.version.create', $product) }}"
                        class="rounded bg-orange-600 px-4 py-2 text-sm text-white hover:bg-orange-700 font-semibold">
                        Crear la primera versión
                    </a>
                </div>
            @else
                <div class="bg-white border border-gray-200 rounded-lg overflow-hidden">
                    <div class="overflow-x-auto">
                        <table class="min-w-full text-sm">
                            <thead class="bg-gray-100 text-xs uppercase text-gray-600">
                                <tr>
                                    <th class="px-3 py-2 text-left">Versión</th>
                                    <th class="px-3 py-2 text-left">Tutoriales</th>
                                    <th class="px-3 py-2 text-left">Descripción</th>
                                    <th class="px-3 py-2 text-left">Creado por</th>
                                    <th class="px-3 py-2 text-left">Fecha</th>
                                    <th class="px-3 py-2 text-right">Acciones</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y">
                                @foreach ($this->tutorialVersions as $tutorialVersion)
                                    <tr class="hover:bg-gray-50">
                                        <td class="px-3 py-2 font-mono">{{ $tutorialVersion->version }}</td>
                                        <td class="px-3 py-2">
                                            <span class="px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs">
                                                {{ $tutorialVersion->tutorials_count }} tutorial(es)
                                            </span>
                                        </td>
                                        <td class="px-3 py-2">
                                            {{ $tutorialVersion->description ? Str::limit($tutorialVersion->description, 50) : '—' }}
                                        </td>
                                        <td class="px-3 py-2">{{ $tutorialVersion->creator?->name ?? 'N/A' }}</td>
                                        <td class="px-3 py-2">{{ $tutorialVersion->created_at->format('Y-m-d') }}</td>
                                        <td class="px-3 py-2 text-right">
                                            <a href="{{ route('products.tutorials.version.show', [$product, $tutorialVersion]) }}"
                                                class="text-indigo-600 text-xs hover:text-indigo-800">
                                                Ver versión →
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>
