<!-- resources/views/projects/index.blade.php -->
<x-layouts.app :title="__('Proyectos')" :showSidebar={{ $showSidebar }}>
    <!-- Barra de búsqueda y creación -->
    <div class="flex flex-col justify-between mb-6 space-y-4 md:flex-row md:space-y-0">
        <div class="flex-1 max-w-md">
            <form action="{{ route('projects.index') }}" method="GET">
                <div class="relative">
                    <input type="search" name="search" value="{{ request('search') }}" 
                            class="w-full pl-10 pr-4 py-2 rounded-lg border focus:outline-none focus:ring-2 focus:ring-blue-500"
                            placeholder="Buscar proyectos...">
                    <x-icons icon="search" class="absolute left-3 top-2.5 w-5 h-5 text-gray-400" />
                </div>
            </form>
        </div>
        
        @can('create', App\Models\Project::class)
        <a href="{{ route('projects.create') }}" 
            class="flex items-center px-4 py-2 text-white bg-blue-600 rounded-lg hover:bg-blue-700">
            <x-icons icon="plus" class="w-5 h-5 mr-2" />
            {{ __('Nuevo') }}
        </a>
        @endcan
    </div>

    <!-- Listado de proyectos -->
    <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
        @forelse($projects as $project)
        <div class="overflow-hidden bg-white rounded-lg shadow border-1 hover:shadow-lg transition duration-300">
            <!-- Imagen del proyecto -->
            @if($project->project_image_path)
                <img src="{{ asset('storage/' . $project->project_image_path) }}" 
                     alt="Imagen del proyecto {{ $project->name }}"
                     class="object-cover w-full h-48 border-b">
            @endif
            
            <div class="p-4">
                <div class="flex items-start justify-between">
                    <div class="flex-1">
                        <h3 class="text-lg font-semibold text-gray-900">
                            <a href="{{ route('projects.show', $project) }}" 
                                class="hover:text-blue-600 hover:underline">
                                {{ $project->name }}
                            </a>
                        </h3>
                            <a href="{{ route('projects.show', $project) }}" 
                                class="hover:text-blue-600 hover:underline">
                                {{ $project->reference }}
                            </a>
                        <p class="mt-2 text-sm text-gray-500">
                            {{ Str::limit(strip_tags($project->description), 200) }}
                        </p>
                    </div>

                    <x-dropdown align="right" width="48">
                        <x-slot name="trigger">
                            <button class="p-1 text-gray-400 hover:text-gray-600">
                                <x-icons icon="dots-vertical class="w-5 h-5" />
                            </button>
                        </x-slot>

                        <x-slot name="content">
                            <x-dropdown-link href="{{ route('projects.show', $project) }}">
                                <x-icons icon="eye" class="w-5 h-5 mr-2" /> Ver Detalles
                            </x-dropdown-link>
                            
                            @can('update', $project)
                            <x-dropdown-link href="{{ route('projects.edit', $project) }}">
                                <x-icons icon="pencil" class="w-5 h-5 mr-2" /> Editar
                            </x-dropdown-link>
                            @endcan
                            
                            @can('delete', $project)
                            <form method="POST" action="{{ route('projects.destroy', $project) }}">
                                @csrf
                                @method('DELETE')
                                <x-dropdown-link href="#" 
                                        onclick="event.preventDefault(); this.closest('form').submit();"
                                        class="text-red-600 hover:bg-red-50">
                                    <x-icons icon="trash" class="w-5 h-5 mr-2" /> Eliminar
                                </x-dropdown-link>
                            </form>
                            @endcan
                        </x-slot>
                    </x-dropdown>
                </div>

                <!-- Metadatos del proyecto -->
                <div class="mt-4">
                    <div class="flex items-center justify-between mt-3 text-sm">
                        <span class="flex items-center text-gray-500">
                            <flux:icon.document  class="w-4 h-4 mr-1 inline" />
                            {{ $project->documents_count }} documentos
                        </span>
                        <flux:badge variant="solid" color="{{ $project->status === 'Activo' ? 'emerald' : 'red'}}">{{ __(Str::ucfirst($project->status)) }}</flux:badge>
                    </div>
                    
                    <div class="mt-2 text-sm text-gray-500">
                        <flux:icon.calendar  class="w-4 h-4 mr-1 inline" />
                        Creado {{ $project->created_at->diffForHumans() }}
                    </div>
                </div>
            </div>
        </div>
        @empty
        <div class="p-6 text-center text-gray-500 col-span-full">
            <x-icons icon="folder-remove" class="w-12 h-12 mx-auto mb-4 text-gray-400" />
            {{ __('No tienes proyectos asignados.') }}
        </div>
        @endforelse
    </div>

    <!-- Paginación -->

    <!-- Sidebar menu -->
    @push('sidebar-menu')
    <flux:navlist variant="outline">    
        <!-- Sección de Proyectos -->
        <flux:navlist.group :heading="__('Projects')">
            <flux:navlist.item 
                icon="folder" 
                :href="route('projects.index')" 
                wire:navigate
            >
                {{ __('List Projects') }}
            </flux:navlist.item>
            
            <flux:navlist.item 
                icon="plus" 
                :href="route('projects.create')" 
                wire:navigate
            >
                {{ __('Create Project') }}
            </flux:navlist.item>
        </flux:navlist.group>
    </flux:navlist>

    @endpush

</x-layouts.app>