{{-- Livewire component view - uses App\Livewire\Projects\Index --}}
<div>
    <div class="mb-8 flex items-center justify-between">
        <div>
            <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Gestion des projets</h1>
            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Gérez votre portfolio de projets et études de cas
            </p>
        </div>
        <a href="{{ route('dashboard.projects.create') }}"
            class="flex items-center gap-2 rounded-lg bg-gradient-to-r from-[#1e3a8a] to-[#1e3a8a]/90 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-[#1e3a8a]/25 transition-all hover:shadow-xl hover:shadow-[#1e3a8a]/30"
            wire:navigate>
            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
            </svg>
            Ajouter un projet
        </a>
    </div>

    <!-- Message flash -->
    @if (session('message') || session('success'))
        <div
            class="mb-6 flex items-center gap-3 rounded-lg bg-[#059669]/10 p-4 text-[#059669] shadow-sm dark:bg-[#059669]/20">
            <svg class="h-5 w-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <span class="font-medium">{{ session('message') ?? session('success') }}</span>
        </div>
    @endif

    <!-- Filtres -->
    <div class="mb-6 rounded-xl bg-white p-5 shadow-sm dark:bg-zinc-800">
        <div class="flex flex-wrap items-center gap-3">
            <div class="flex-1 min-w-[250px]">
                <div class="relative">
                    <svg class="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-400" fill="none"
                        stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                    </svg>
                    <flux:input type="search" placeholder="Rechercher un projet, client..."
                        wire:model.live.debounce.300ms="search" class="pl-10" />
                </div>
            </div>
            <div class="w-44">
                <flux:select wire:model.live="statusFilter">
                    <option value="">Tous les statuts</option>
                    <option value="published">✓ Publié</option>
                    <option value="draft">○ Brouillon</option>
                    <option value="archived">◼ Archivé</option>
                </flux:select>
            </div>
            <div class="w-52">
                <flux:select wire:model.live="projectTypeFilter">
                    <option value="">Tous les types</option>
                    <option value="Website">Site web</option>
                    <option value="E-commerce">E-commerce</option>
                    <option value="Mobile App">Application mobile</option>
                    <option value="Web Application">Application web</option>
                    <option value="Branding">Branding</option>
                </flux:select>
            </div>
            <div class="w-36">
                <flux:select wire:model.live="perPage">
                    <option value="10">10 par page</option>
                    <option value="25">25 par page</option>
                    <option value="50">50 par page</option>
                    <option value="100">100 par page</option>
                </flux:select>
            </div>
            {{-- <button wire:click="resetFilters"
                class="flex items-center gap-2 rounded-lg bg-gray-100 px-4 py-2.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200 dark:bg-zinc-700 dark:text-gray-200 dark:hover:bg-zinc-600"
                title="Réinitialiser tous les filtres">
                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                </svg>
                <span class="hidden sm:inline">RéinitialiserZZ</span>
            </button> --}}
            <button wire:click="resetFilters"
                class="mt-2 flex items-center gap-2 rounded-md bg-gray-200 px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-300 dark:bg-zinc-700 dark:text-gray-200 dark:hover:bg-zinc-600 sm:mt-0">
                <flux:icon name="x" class="h-4 w-4" />
                Réinitialiser
            </button>
        </div>
    </div>

    <!-- Tableau -->
    <div
        class="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-800">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 dark:divide-zinc-700">
                <thead class="bg-gray-50 dark:bg-zinc-700">
                    <tr>
                        <th scope="col"
                            class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-300">
                            <button wire:click="sortProjects('title')" class="flex items-center gap-1">
                                Projet
                                @if ($sortField === 'title')
                                    <flux:icon name="{{ $sortDirection === 'asc' ? 'chevron-up' : 'chevron-down' }}"
                                        class="h-4 w-4" />
                                @endif
                            </button>
                        </th>
                        <th scope="col"
                            class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-300">
                            Client
                        </th>
                        <th scope="col"
                            class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-300">
                            <button wire:click="sortProjects('project_type')" class="flex items-center gap-1">
                                Type
                                @if ($sortField === 'project_type')
                                    <flux:icon name="{{ $sortDirection === 'asc' ? 'chevron-up' : 'chevron-down' }}"
                                        class="h-4 w-4" />
                                @endif
                            </button>
                        </th>
                        <th scope="col"
                            class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-300">
                            <button wire:click="sortProjects('project_year')" class="flex items-center gap-1">
                                Année
                                @if ($sortField === 'project_year')
                                    <flux:icon name="{{ $sortDirection === 'asc' ? 'chevron-up' : 'chevron-down' }}"
                                        class="h-4 w-4" />
                                @endif
                            </button>
                        </th>
                        <th scope="col"
                            class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-300">
                            <button wire:click="sortProjects('status')" class="flex items-center gap-1">
                                Statut
                                @if ($sortField === 'status')
                                    <flux:icon name="{{ $sortDirection === 'asc' ? 'chevron-up' : 'chevron-down' }}"
                                        class="h-4 w-4" />
                                @endif
                            </button>
                        </th>
                        <th scope="col"
                            class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-300">
                            <button wire:click="sortProjects('views_count')" class="flex items-center gap-1">
                                Vues
                                @if ($sortField === 'views_count')
                                    <flux:icon name="{{ $sortDirection === 'asc' ? 'chevron-up' : 'chevron-down' }}"
                                        class="h-4 w-4" />
                                @endif
                            </button>
                        </th>
                        <th scope="col"
                            class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-300">
                            Vedette
                        </th>
                        <th scope="col"
                            class="px-6 py-3 text-right text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-300">
                            Actions
                        </th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200 bg-white dark:divide-zinc-700 dark:bg-zinc-800">
                    @php
                        $projects = $this->getProjects();
                    @endphp

                    @if (count($projects) > 0)
                        @foreach ($projects as $project)
                            <tr class="transition-colors hover:bg-gray-50 dark:hover:bg-zinc-800/50">
                                <td class="whitespace-nowrap px-6 py-5">
                                    <div class="flex items-center gap-3">
                                        @if ($project->featured_image)
                                            <img src="{{ asset('storage/' . $project->featured_image) }}"
                                                alt="{{ $project->title }}"
                                                class="h-12 w-12 rounded-lg object-cover shadow-sm ring-1 ring-gray-200 dark:ring-zinc-700">
                                        @else
                                            <div
                                                class="flex h-12 w-12 items-center justify-center rounded-lg bg-gradient-to-br from-[#1e3a8a] to-[#1e3a8a]/80 shadow-sm">
                                                <svg class="h-6 w-6 text-white" fill="none" stroke="currentColor"
                                                    viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        stroke-width="2"
                                                        d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                                                </svg>
                                            </div>
                                        @endif
                                        <div class="min-w-0 flex-1">
                                            <div class="flex items-center gap-2">
                                                <div class="font-semibold text-gray-900 dark:text-white">
                                                    {{ $project->title }}
                                                </div>
                                                @if ($project->is_featured)
                                                    <svg class="h-4 w-4 flex-shrink-0 fill-current text-[#fb923c]"
                                                        viewBox="0 0 24 24">
                                                        <path
                                                            d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
                                                    </svg>
                                                @endif
                                            </div>
                                            @if ($project->subtitle)
                                                <div class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">
                                                    {{ Str::limit($project->subtitle, 50) }}
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </td>
                                <td
                                    class="whitespace-nowrap px-6 py-5 text-sm font-medium text-gray-700 dark:text-gray-300">
                                    {{ $project->client_name ?? '—' }}
                                </td>
                                <td class="whitespace-nowrap px-6 py-4 text-sm">
                                    @php
                                        // Couleurs Welely pour les types de projets
                                        $typeColors = [
                                            'Website' =>
                                                'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300',
                                            'E-commerce' =>
                                                'bg-[#1e3a8a]/10 text-[#1e3a8a] dark:bg-[#1e3a8a]/20 dark:text-blue-300',
                                            'Mobile App' =>
                                                'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300',
                                            'Web Application' =>
                                                'bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-300',
                                            'Branding' =>
                                                'bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-300',
                                            'IoT Platform' =>
                                                'bg-teal-100 text-teal-800 dark:bg-teal-900 dark:text-teal-300',
                                        ];
                                        $typeClass =
                                            $typeColors[$project->project_type] ??
                                            'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300';
                                    @endphp
                                    <span
                                        class="inline-flex items-center gap-1 rounded-full {{ $typeClass }} px-2.5 py-0.5 text-xs font-semibold">
                                        {{ $project->project_type ?? '—' }}
                                    </span>
                                </td>
                                <td
                                    class="whitespace-nowrap px-6 py-4 text-sm font-medium text-gray-700 dark:text-gray-300">
                                    {{ $project->project_year ?? '—' }}
                                </td>
                                <td class="whitespace-nowrap px-6 py-4 text-sm">
                                    @if ($project->status === 'published')
                                        <span
                                            class="inline-flex items-center gap-1.5 rounded-full bg-[#059669]/10 px-2.5 py-0.5 text-xs font-semibold text-[#059669] dark:bg-[#059669]/20">
                                            <svg class="h-1.5 w-1.5 fill-current" viewBox="0 0 6 6">
                                                <circle cx="3" cy="3" r="3" />
                                            </svg>
                                            Publié
                                        </span>
                                    @elseif ($project->status === 'draft')
                                        <span
                                            class="inline-flex items-center gap-1.5 rounded-full bg-[#fb923c]/10 px-2.5 py-0.5 text-xs font-semibold text-[#fb923c] dark:bg-[#fb923c]/20">
                                            <svg class="h-1.5 w-1.5 fill-current" viewBox="0 0 6 6">
                                                <circle cx="3" cy="3" r="3" />
                                            </svg>
                                            Brouillon
                                        </span>
                                    @else
                                        <span
                                            class="inline-flex items-center gap-1.5 rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-semibold text-gray-600 dark:bg-gray-700 dark:text-gray-400">
                                            <svg class="h-1.5 w-1.5 fill-current" viewBox="0 0 6 6">
                                                <circle cx="3" cy="3" r="3" />
                                            </svg>
                                            Archivé
                                        </span>
                                    @endif
                                </td>
                                <td class="whitespace-nowrap px-6 py-4 text-sm">
                                    <div class="flex items-center gap-1.5">
                                        <svg class="h-4 w-4 text-gray-400" fill="none" stroke="currentColor"
                                            viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                        </svg>
                                        <span
                                            class="font-medium text-gray-700 dark:text-gray-300">{{ number_format($project->views_count, 0, ',', ' ') }}</span>
                                    </div>
                                </td>
                                <td class="whitespace-nowrap px-6 py-4 text-sm">
                                    <button wire:click="toggleFeatured({{ $project->id }})"
                                        class="transition-all duration-200 {{ $project->is_featured ? 'text-[#fb923c] hover:text-[#fb923c]/80' : 'text-gray-300 hover:text-[#fb923c]/50 dark:text-gray-600 dark:hover:text-[#fb923c]/50' }}"
                                        title="{{ $project->is_featured ? 'Retirer de la vedette' : 'Mettre en vedette' }}">
                                        <svg class="h-6 w-6 {{ $project->is_featured ? 'fill-current' : '' }}"
                                            fill="{{ $project->is_featured ? 'currentColor' : 'none' }}"
                                            stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
                                        </svg>
                                    </button>
                                </td>
                                <td class="whitespace-nowrap px-6 py-4 text-right text-sm">
                                    <div class="flex items-center justify-end gap-2">
                                        <a href="{{ route('dashboard.projects.show', $project) }}"
                                            class="rounded-lg p-2 text-[#1e3a8a] transition-colors hover:bg-[#1e3a8a]/10 dark:text-blue-400 dark:hover:bg-[#1e3a8a]/20"
                                            wire:navigate title="Voir les détails">
                                            <svg class="h-4 w-4" fill="none" stroke="currentColor"
                                                viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                            </svg>
                                        </a>
                                        <a href="{{ route('dashboard.projects.edit', $project) }}"
                                            class="rounded-lg p-2 text-gray-600 transition-colors hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-zinc-700"
                                            wire:navigate title="Modifier">
                                            <svg class="h-4 w-4" fill="none" stroke="currentColor"
                                                viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                                            </svg>
                                        </a>
                                        <button wire:click="deleteProject({{ $project->id }})"
                                            onclick="return confirm('Êtes-vous sûr de vouloir supprimer ce projet ?')"
                                            class="rounded-lg p-2 text-red-600 transition-colors hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20"
                                            title="Supprimer">
                                            <svg class="h-4 w-4" fill="none" stroke="currentColor"
                                                viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                            </svg>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    @else
                        <tr>
                            <td colspan="8" class="px-6 py-4 text-center text-sm text-gray-500 dark:text-gray-400">
                                Aucun projet trouvé.
                            </td>
                        </tr>
                    @endif
                </tbody>
            </table>
        </div>

        <div class="border-t border-gray-200 bg-white px-4 py-3 dark:border-zinc-700 dark:bg-zinc-800 sm:px-6">
            @if (method_exists($projects, 'links'))
                {{ $projects->links() }}
            @endif
        </div>
    </div>
</div>