@extends('layouts.app')

@section('title', 'Gestion des équipes')

@section('content')
<div class="space-y-6 max-w-lg">

    <h1 class="text-2xl font-bold text-slate-800 flex items-center gap-2">
        <i data-lucide="shield" class="w-6 h-6 text-teal-600"></i>
        Équipes
    </h1>

    {{-- Ajout --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
        <form method="POST" action="{{ route('admin.equipe.command') }}" class="flex items-center gap-3">
            @csrf
            <input type="hidden" name="command" value="ajouter">
            <input type="text" name="equ_nom" placeholder="Nom de l'équipe" required
                class="flex-1 border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500">
            <button type="submit"
                class="inline-flex items-center gap-2 bg-teal-600 hover:bg-teal-700 text-white text-sm font-semibold px-4 py-2 rounded-lg transition">
                <i data-lucide="plus" class="w-4 h-4"></i>
                Ajouter
            </button>
        </form>
    </div>

    {{-- Liste --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <table class="w-full text-sm">
            <thead class="bg-teal-700 text-white">
                <tr>
                    <th class="px-3 py-2 w-10"></th>
                    <th class="px-4 py-2 text-left font-medium">Nom</th>
                    <th class="px-4 py-2 text-right font-medium">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                @foreach($listeEquipe as $e)
                <tr class="hover:bg-teal-50 transition-colors">
                    <td class="px-3 py-2 text-center">
                        @if($e->equ_logo)
                            <img src="/images/equipes/{{ $e->equ_logo }}" alt="{{ $e->equ_nom }}"
                                class="w-8 h-8 object-contain mx-auto">
                        @else
                            <i data-lucide="shield" class="w-6 h-6 text-gray-300 mx-auto"></i>
                        @endif
                    </td>
                    <td class="px-4 py-2 text-slate-800">
                        @if($idEdit == $e->equ_id)
                        <form method="POST" action="{{ route('admin.equipe.command') }}"
                              enctype="multipart/form-data" class="flex items-center gap-2">
                            @csrf
                            <input type="hidden" name="command" value="modifier">
                            <input type="hidden" name="equ_id" value="{{ $e->equ_id }}">
                            <input type="text" name="equ_nom" value="{{ $e->equ_nom }}" required
                                class="border border-gray-300 rounded-lg px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500">
                            <label class="cursor-pointer flex items-center gap-1 text-xs text-slate-500 border border-gray-300 rounded-lg px-2 py-1 hover:bg-gray-50 transition" title="Changer l'icône">
                                <i data-lucide="image" class="w-3 h-3"></i>
                                <span id="logo-label-{{ $e->equ_id }}">icône</span>
                                <input type="file" name="equ_logo" accept="image/*" class="hidden"
                                    onchange="document.getElementById('logo-label-{{ $e->equ_id }}').textContent = this.files[0]?.name ?? 'icône'">
                            </label>
                            <button type="submit"
                                class="bg-teal-600 hover:bg-teal-700 text-white text-xs font-semibold px-3 py-1 rounded-lg transition">OK</button>
                        </form>
                        @else
                            {{ $e->equ_nom }}
                        @endif
                    </td>
                    <td class="px-4 py-2 text-right">
                        <div class="flex items-center justify-end gap-3">
                            <a href="{{ route('admin.equipe.edit', ['equ_id' => $e->equ_id]) }}"
                                class="text-teal-600 hover:text-teal-800 text-xs font-medium">Modifier</a>
                            <form method="POST" action="{{ route('admin.equipe.command') }}" class="inline">
                                @csrf
                                <input type="hidden" name="command" value="supprimer">
                                <input type="hidden" name="equ_id" value="{{ $e->equ_id }}">
                                <button type="submit" onclick="return confirm('Supprimer {{ $e->equ_nom }} ?')"
                                    class="text-red-500 hover:text-red-700 text-xs font-medium">Suppr.</button>
                            </form>
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection