@extends('admin.layout')

@section('title', 'Détails de l\'Annonce')

@section('content')
<div class="row">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h1 class="h3 mb-1" style="font-weight: 300;">
                    <i class="bi bi-bullhorn text-primary me-2"></i>
                    Détails de l'Annonce
                </h1>
                <p class="text-muted mb-0" style="font-size: 0.95rem; font-weight: 300;">Informations détaillées de l'annonce</p>
            </div>
            <a href="{{ route('admin.annonces.index') }}" class="btn btn-outline-secondary" style="font-weight: 300;">
                <i class="bi bi-arrow-left me-2"></i>Retour
            </a>
        </div>

        <div class="card border-0 shadow" style="border-radius: 12px;">
            <div class="card-header bg-white pt-4 pb-3">
                <h5 class="mb-0" style="font-weight: 300;">{{ $annonce->title }}</h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label class="form-label mb-2" style="font-weight: 300; font-size: 0.95rem;">Campagne associée</label>
                    <div>
                        @if($annonce->campaign)
                            <span class="badge bg-success" style="font-weight: 300; font-size: 0.85rem;">
                                <i class="bi bi-megaphone me-1"></i>{{ $annonce->campaign->name }}
                            </span>
                        @else
                            <span class="text-muted" style="font-weight: 300;">
                                <i class="bi bi-dash-circle me-1"></i>Annonce générale (non liée à une campagne)
                            </span>
                        @endif
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label mb-2" style="font-weight: 300; font-size: 0.95rem;">Position</label>
                    <div>
                        @if($annonce->position === 'top')
                            <span class="badge bg-info" style="font-weight: 300; font-size: 0.85rem;">
                                <i class="bi bi-arrow-up-circle me-1"></i>Haut
                            </span>
                        @elseif($annonce->position === 'bottom')
                            <span class="badge bg-secondary" style="font-weight: 300; font-size: 0.85rem;">
                                <i class="bi bi-arrow-down-circle me-1"></i>Bas
                            </span>
                        @else
                            <span class="badge bg-primary" style="font-weight: 300; font-size: 0.85rem;">
                                <i class="bi bi-arrows-vertical me-1"></i>Les deux
                            </span>
                        @endif
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label mb-2" style="font-weight: 300; font-size: 0.95rem;">Statut</label>
                    <div>
                        @if($annonce->is_active)
                            <span class="badge bg-success" style="font-weight: 300; font-size: 0.85rem;">
                                <i class="bi bi-check-circle me-1"></i>Active
                            </span>
                        @else
                            <span class="badge bg-secondary" style="font-weight: 300; font-size: 0.85rem;">
                                <i class="bi bi-x-circle me-1"></i>Inactive
                            </span>
                        @endif
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label mb-2" style="font-weight: 300; font-size: 0.95rem;">Contenu</label>
                    <div class="border rounded p-3" style="background: #f8f9fa; font-weight: 300;">
                        {!! nl2br(e($annonce->content)) !!}
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label mb-2" style="font-weight: 300; font-size: 0.95rem;">Créé le</label>
                    <div style="font-weight: 300;">{{ $annonce->created_at->format('d/m/Y à H:i') }}</div>
                </div>

                <div class="mb-3">
                    <label class="form-label mb-2" style="font-weight: 300; font-size: 0.95rem;">Modifié le</label>
                    <div style="font-weight: 300;">{{ $annonce->updated_at->format('d/m/Y à H:i') }}</div>
                </div>

                <div class="d-flex justify-content-end gap-2">
                    <a href="{{ route('admin.annonces.index') }}" class="btn btn-outline-secondary px-4" style="font-weight: 300;">Retour</a>
                    <a href="{{ route('admin.annonces.edit', $annonce->id) }}" class="btn btn-primary px-4" style="font-weight: 300;">
                        <i class="bi bi-pencil me-2"></i>Modifier
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection