@extends('layouts.app')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <div class="flex justify-between items-center mb-8">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Gestion des Checklists</h1>
            <p class="mt-1 text-sm text-gray-500">Gérez les versions et le contenu des checklists hebdomadaires.</p>
        </div>
        <form action="{{ route('admin.checklists.store') }}" method="POST">
            @csrf
            <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-boulanger-orange hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500">
                <i data-lucide="plus" class="-ml-1 mr-2 h-5 w-5"></i>
                Créer une nouvelle version
            </button>
        </form>
    </div>

    @if(session('success'))
        <div class="mb-4 bg-green-50 border-l-4 border-green-400 p-4">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i data-lucide="check-circle" class="h-5 w-5 text-green-400"></i>
                </div>
                <div class="ml-3">
                    <p class="text-sm text-green-700">{{ session('success') }}</p>
                </div>
            </div>
        </div>
    @endif

    <div class="bg-white shadow overflow-hidden sm:rounded-md">
        <ul class="divide-y divide-gray-200">
            @foreach($templates as $template)
            <li>
                <div class="px-4 py-4 sm:px-6 flex items-center justify-between hover:bg-gray-50 transition">
                    <div class="flex items-center gap-4">
                        <div class="flex-shrink-0">
                            <span class="inline-flex items-center justify-center h-10 w-10 rounded-full {{ $template->is_active ? 'bg-green-100 text-green-600' : 'bg-gray-100 text-gray-500' }}">
                                <span class="font-bold text-sm">{{ $template->version }}</span>
                            </span>
                        </div>
                        <div>
                            <h3 class="text-lg font-medium text-boulanger-black">{{ $template->name }}</h3>
                            <div class="flex items-center text-sm text-gray-500">
                                <i data-lucide="calendar" class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"></i>
                                Créé le {{ $template->created_at->format('d/m/Y') }}
                            </div>
                        </div>
                    </div>
                    <div class="flex items-center gap-4">
                        @if($template->is_active)
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                Actif
                            </span>
                        @else
                            <form action="{{ route('admin.checklists.activate', $template->id) }}" method="POST">
                                @csrf
                                @method('PUT')
                                <button type="submit" class="text-sm text-gray-500 hover:text-boulanger-orange underline">
                                    Activer
                                </button>
                            </form>
                            <form action="{{ route('admin.checklists.destroy', $template->id) }}" method="POST" onsubmit="return confirm('Supprimer cette version ?');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="text-gray-400 hover:text-red-600">
                                    <i data-lucide="trash-2" class="h-6 w-6"></i>
                                </button>
                            </form>
                        @endif
                        
                        <a href="{{ route('admin.checklists.edit', $template->id) }}" class="text-gray-400 hover:text-gray-600">
                                <i data-lucide="pencil" class="h-6 w-6"></i>
                        </a>
                    </div>
                </div>
            </li>
            @endforeach
        </ul>
    </div>
</div>
@endsection