@extends('layouts.admin')

@section('content')
<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4 pb-3 border-bottom">
        <div>
            <h1 class="h3 fw-bold mb-0">Gestion des Articles</h1>
            <p class="text-muted small mb-0">Publiez et gérez les actualités du Conseil d'État.</p>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('admin.articles.trashed') }}" class="btn btn-outline-danger rounded-pill px-4">
                <i class="fa fa-trash-can me-2"></i>Corbeille
            </a>
            <a href="{{ route('admin.articles.create') }}" class="btn btn-primary-ci rounded-pill px-4">
                <i class="fa fa-plus me-2"></i>Nouvel Article
            </a>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success border-0 shadow-sm rounded-4 mb-4 alert-dismissible fade show" role="alert">
            <i class="fa fa-check-circle me-2"></i>
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0 table-ci">
                <thead>
                    <tr>
                        <th class="ps-4">Image</th>
                        <th>Titre</th>
                        <th>Statut</th>
                        <th>Date de publication</th>
                        <th class="text-end pe-4">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($articles as $article)
                    <tr>
                        <td class="ps-4">
                            @if($article->image_url)
                                <img src="{{ asset('storage/' . $article->image_url) }}" class="rounded shadow-sm" style="width: 60px; height: 40px; object-fit: cover;">
                            @else
                                <div class="rounded bg-light d-flex align-items-center justify-content-center" style="width: 60px; height: 40px;">
                                    <i class="fa fa-image text-muted opacity-50"></i>
                                </div>
                            @endif
                        </td>
                        <td>
                            <div class="fw-bold text-dark">{{ Str::limit($article->titre, 60) }}</div>
                            <small class="text-muted">{{ Str::limit($article->contenu_court, 80) }}</small>
                        </td>
                        <td>
                            @if($article->etat === 'publié')
                                {{-- Affichage si l'article est publié --}}
                                <span class="badge bg-green-soft text-green-ci rounded-pill px-3">
                                    <i class="fa fa-check-circle me-1"></i> En ligne
                                </span>
                            @elseif($article->etat === 'brouillon')
                                {{-- Affichage si c'est un brouillon --}}
                                <span class="badge bg-orange-soft text-orange-ci rounded-pill px-3">
                                    <i class="fa fa-pen-fancy me-1"></i> Brouillon
                                </span>
                            @else
                                {{-- Sécurité : affichage par défaut si la valeur est différente ou vide --}}
                                <span class="badge bg-secondary text-white rounded-pill px-3">
                                    <i class="fa fa-question-circle me-1"></i> {{ ucfirst($article->etat ?? 'Inconnu') }}
                                </span>
                            @endif
                        </td>
                        <td>
                            <div class="small fw-medium">
                                {{ $article->date_publication ? \Carbon\Carbon::parse($article->date_publication)->format('d/m/Y') : 'Non planifiée' }}
                            </div>
                        </td>
                        <td class="text-end pe-4">
                            <div class="btn-group shadow-sm rounded-pill bg-white border p-1">
                                <a href="{{ route('admin.articles.edit', $article->id) }}" class="btn btn-sm btn-light rounded-circle border-0 me-1" title="Modifier">
                                    <i class="fa fa-pen text-dark"></i>
                                </a>
                                <form action="{{ route('admin.articles.destroy', $article->id) }}" method="POST" class="d-inline">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" 
                                            class="btn btn-sm btn-light rounded-circle border-0" 
                                            onclick="return confirm('Envoyer cet article à la corbeille ?')" 
                                            title="Mettre à la corbeille">
                                        <i class="fa fa-trash text-danger"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="5" class="text-center py-5 text-muted">
                            <i class="fa-solid fa-folder-open d-block mb-3 fs-1 opacity-25"></i>
                            Aucun article trouvé dans la base de données.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        @if($articles->hasPages())
        <div class="card-footer bg-white py-3 border-top-0">
            {{ $articles->links() }}
        </div>
        @endif
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        setTimeout(function() {
            const alerts = document.querySelectorAll('.alert');
            alerts.forEach(function(alert) {
                // Utilisation des classes de transition Bootstrap
                const bsAlert = new bootstrap.Alert(alert);
                bsAlert.close();
            });
        }, 5000); // 5000 millisecondes = 5 secondes
    });
</script>
@endsection