@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 du Carrousel</h1>
            <p class="text-muted small mb-0">Gérez les visuels de la page d'accueil</p>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('admin.hero-slides.trashed') }}" class="btn btn-outline-danger rounded-pill px-4 shadow-sm">
                <i class="fa fa-trash-can me-2"></i>Corbeille
            </a>
            <a href="{{ route('admin.hero-slides.create') }}" class="btn btn-primary-ci rounded-pill px-4 shadow-sm">
                <i class="fa fa-plus me-2"></i>Nouveau Slide
            </a>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success border-0 shadow-sm rounded-4 mb-4 alert-dismissible fade show">
            <i class="fa fa-check-circle me-2"></i> {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></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">
                <thead class="bg-light">
                    <tr>
                        <th class="ps-4" style="width: 80px;">Ordre</th>
                        <th style="width: 150px;">Aperçu</th>
                        <th>Détails</th>
                        <th style="width: 120px;">Statut</th>
                        <th class="text-end pe-4">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($heroSlides as $slide)
                    <tr>
                        <td class="ps-4"><span class="badge bg-light text-dark border">#{{ $slide->ordre }}</span></td>
                        <td>
                            @if($slide->image)
                                {{-- Utilisation de Storage::url pour pointer vers /storage/ --}}
                                <img src="{{ Storage::url($slide->image) }}" 
                                     class="rounded shadow-sm border" 
                                     style="width: 120px; height: 65px; object-fit: cover;"
                                     onerror="this.src='https://placehold.co/120x65?text=Erreur+Image'">
                            @else
                                <div class="rounded bg-light border text-center" style="width: 120px; height: 65px; line-height: 65px;">
                                    <i class="fa fa-image text-muted"></i>
                                </div>
                            @endif
                        </td>
                        <td>
                            <div class="fw-bold">{{ $slide->titre }}</div>
                            <small class="text-muted">{{ Str::limit($slide->description, 50) }}</small>
                        </td>
                        <td>
                            @if($slide->actif)
                                <span class="badge rounded-pill bg-success px-3">Visible</span>
                            @else
                                <span class="badge rounded-pill bg-secondary px-3">Masqué</span>
                            @endif
                        </td>
                        <td class="text-end pe-4">
                            <div class="d-flex justify-content-end gap-2">
                                <a href="{{ route('admin.hero-slides.edit', $slide) }}" class="btn btn-sm btn-outline-primary rounded-circle" style="width:32px; height:32px;"><i class="fa fa-pen"></i></a>
                                <form action="{{ route('admin.hero-slides.destroy', $slide) }}" method="POST">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-outline-danger rounded-circle" style="width:32px; height:32px;" onclick="return confirm('Supprimer ?')"><i class="fa fa-trash"></i></button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="5" class="text-center py-5 text-muted">Aucun slide trouvé.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<style>
    .btn-primary-ci { background-color: #009A44; color: white; }
    .btn-primary-ci:hover { background-color: #007d37; color: white; }
</style>
@endsection