
<x-layouts.app title="{{ 'Configuración del Proyecto - ' . $project->name }}" 
    :showSidebar={{ $showSidebar }}>

    <!-- Header -->
    <div class="flex justify-between items-center mb-6">
        <div>
            <h2 class="text-2xl font-bold text-gray-900">Configuración del Proyecto</h2>
            <p class="text-gray-600">{{  $project->reference }} - {{  $project->name }}</p>
        </div>

        <flux:button
            href="{{ route('projects.show', $project) }}"
            icon:trailing="arrow-uturn-left"
            variant="ghost"
        >
        Volver al Proyecto
        </flux:button>
    </div>

    @if(session('success'))
        <div class="mb-4 p-4 bg-green-100 text-green-700 rounded-lg">
            {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div class="mb-4 p-4 bg-red-100 text-red-700 rounded-lg">
            {{ session('error') }}
        </div>
    @endif

    <!-- Tabs de navegación -->
    <div x-data="{ activeTab: 'coding' }" class="bg-white rounded-lg shadow-md border-1">
        <div class="border-b border-gray-200 mb-6">
            <nav class="-mb-px flex space-x-8">
                <button @click="activeTab = 'coding'" 
                        :class="activeTab === 'coding' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700'" 
                        class="py-4 px-1 border-b-2 font-medium">
                    Codificación de Documentos
                </button>

                <button @click="activeTab = 'statuses'" 
                        :class="activeTab === 'statuses' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700'" 
                        class="py-4 px-1 border-b-2 font-medium">
                    Estados de Documentos
                </button>
            </nav>
        </div>

        <div class="p-6">
            <!-- Sección de Codificación -->
            <div x-show="activeTab === 'coding'">
                <div id="coding" class="mb-12">
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="text-lg font-medium text-gray-900">Codificación de Documentos</h3>
                        <div class="text-sm text-gray-500">
                            Última actualización: {{ $project->codingConfig->updated_at->format('d/m/Y H:i') ?? 'No configurado' }}
                        </div>
                    </div>
                    <livewire:project-name-coder 
                        :project="$project"
                    />
                </div>
            </div>
            
            <!-- Sección de Estados -->
            <div x-show="activeTab === 'statuses'">
                <div id="statuses">
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="text-lg font-medium text-gray-900">Estados de Documentos</h3>
                    </div>
                    
                    <div class="bg-white rounded-lg shadow overflow-hidden">
                        <!-- Lista de estados existentes -->
                        <div id="statuses-list" class="divide-y divide-gray-200">
                            
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</x-layouts.app>