{% extends 'base.html.twig' %}

{% block title %}{{ fair.title }} - Salon d'Antiquités{% endblock %}

{% block meta_description %}{{ fair.description|slice(0, 150) }}{% if fair.description|length > 150 %}...{% endif %}{% endblock %}

{% block body %}
<div class="container-fluid">
    <!-- Breadcrumb -->
    <div class="row mb-4">
        <div class="col-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ path('app_home') }}">Accueil</a></li>
                    <li class="breadcrumb-item"><a href="{{ path('app_fair_index') }}">Salons & Foires</a></li>
                    <li class="breadcrumb-item active">{{ fair.title }}</li>
                </ol>
            </nav>
        </div>
    </div>

    <div class="row">
        <!-- Contenu principal -->
        <div class="col-lg-8">
            <!-- En-tête de la foire -->
            <div class="card mb-4">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start mb-3">
                        <h1 class="h2 mb-0">{{ fair.title }}</h1>
                        {% if fair.featured %}
                            <span class="badge bg-warning text-dark">
                                <i class="fas fa-star me-1"></i>En vedette
                            </span>
                        {% endif %}
                    </div>
                    
                    {% if fair.description %}
                        <p class="lead">{{ fair.description }}</p>
                    {% endif %}

                    <!-- Informations essentielles -->
                    <div class="row">
                        <div class="col-md-6">
                            <h5><i class="fas fa-calendar text-primary me-2"></i>Dates</h5>
                            <p class="mb-3">
                                <strong>Du {{ fair.startDate|date('d/m/Y') }}</strong>
                                {% if fair.startDate != fair.endDate %}
                                    <strong>au {{ fair.endDate|date('d/m/Y') }}</strong>
                                {% endif %}
                                <br>
                                {% if fair.isUpcoming %}
                                    <span class="badge bg-info">À venir</span>
                                {% elseif fair.isOngoing %}
                                    <span class="badge bg-success">En cours</span>
                                {% else %}
                                    <span class="badge bg-secondary">Terminé</span>
                                {% endif %}
                            </p>
                        </div>
                        <div class="col-md-6">
                            <h5><i class="fas fa-map-marker-alt text-primary me-2"></i>Lieu</h5>
                            <p class="mb-3">
                                {{ fair.address }}<br>
                                {{ fair.city }}{% if fair.postalCode %} {{ fair.postalCode }}{% endif %}<br>
                                {{ fair.country.name }}
                            </p>
                        </div>
                    </div>

                    {% if fair.organizer %}
                        <div class="row">
                            <div class="col-md-6">
                                <h5><i class="fas fa-user text-primary me-2"></i>Organisateur</h5>
                                <p class="mb-3">{{ fair.organizer.name }}</p>
                            </div>
                            {% if fair.entryPrice %}
                                <div class="col-md-6">
                                    <h5><i class="fas fa-euro-sign text-primary me-2"></i>Tarif d'entrée</h5>
                                    <p class="mb-3">{{ fair.formattedEntryPrice }}</p>
                                </div>
                            {% endif %}
                        </div>
                    {% endif %}

                    {% if fair.openingHours %}
                        <div class="row">
                            <div class="col-12">
                                <h5><i class="fas fa-clock text-primary me-2"></i>Horaires</h5>
                                <p class="mb-3">{{ fair.openingHours|nl2br }}</p>
                            </div>
                        </div>
                    {% endif %}

                    {% if fair.specialInfo %}
                        <div class="row">
                            <div class="col-12">
                                <h5><i class="fas fa-info-circle text-primary me-2"></i>Informations spéciales</h5>
                                <p class="mb-3">{{ fair.specialInfo|nl2br }}</p>
                            </div>
                        </div>
                    {% endif %}

                    {% if fair.websiteUrl %}
                        <div class="row">
                            <div class="col-12">
                                <a href="{{ fair.websiteUrl }}" target="_blank" class="btn btn-outline-primary">
                                    <i class="fas fa-external-link-alt me-2"></i>Site web officiel
                                </a>
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>

            <!-- Carte Google Maps -->
            {% if mapData and googleMapsEnabled %}
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-map text-primary me-2"></i>Localisation</h5>
                    </div>
                    <div class="card-body p-0">
                        <div id="fair-map" class="fair-map"></div>
                    </div>
                </div>
            {% endif %}
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Statistiques -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-chart-bar text-primary me-2"></i>Statistiques</h5>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-6">
                            <h4 class="text-primary mb-0">{{ fair.viewsCount }}</h4>
                            <small class="text-muted">Vues</small>
                        </div>
                        <div class="col-6">
                            <h4 class="text-success mb-0">{{ fair.daysUntilStart }}</h4>
                            <small class="text-muted">
                                {% if fair.daysUntilStart > 0 %}
                                    Jours restants
                                {% elseif fair.daysUntilStart == 0 %}
                                    Aujourd'hui !
                                {% else %}
                                    Terminé
                                {% endif %}
                            </small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Foires similaires -->
            {% if similarFairs is not empty %}
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-calendar-alt text-primary me-2"></i>Foires similaires</h5>
                    </div>
                    <div class="card-body">
                        {% for similarFair in similarFairs %}
                            <div class="d-flex mb-3 {% if not loop.last %}border-bottom pb-3{% endif %}">
                                <div class="flex-shrink-0 me-3">
                                    <i class="fas fa-calendar-alt fa-2x text-muted"></i>
                                </div>
                                <div class="flex-grow-1">
                                    <h6 class="mb-1">
                                        <a href="{{ path('app_fair_show', {slug: similarFair.slug}) }}" class="text-decoration-none">
                                            {{ similarFair.title|slice(0, 40) }}{% if similarFair.title|length > 40 %}...{% endif %}
                                        </a>
                                    </h6>
                                    <small class="text-muted">
                                        <i class="fas fa-map-marker-alt me-1"></i>{{ similarFair.city }}<br>
                                        <i class="fas fa-calendar me-1"></i>{{ similarFair.startDate|date('d/m/Y') }}
                                    </small>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            {% endif %}

            <!-- Actions -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-share text-primary me-2"></i>Partager</h5>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="https://www.facebook.com/sharer/sharer.php?u={{ url('app_fair_show', {slug: fair.slug}) | url_encode }}" 
                           target="_blank" class="btn btn-outline-primary btn-sm">
                            <i class="fab fa-facebook me-2"></i>Facebook
                        </a>
                        <a href="https://twitter.com/intent/tweet?url={{ url('app_fair_show', {slug: fair.slug}) | url_encode }}&text={{ fair.title | url_encode }}" 
                           target="_blank" class="btn btn-outline-info btn-sm">
                            <i class="fab fa-twitter me-2"></i>Twitter
                        </a>
                        <button onclick="copyToClipboard('{{ url('app_fair_show', {slug: fair.slug}) }}')" class="btn btn-outline-secondary btn-sm">
                            <i class="fas fa-link me-2"></i>Copier le lien
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    
    {% if mapData and googleMapsEnabled %}
    <script>
        function initFairMap() {
            const mapData = {{ mapData|json_encode|raw }};
            
            const map = new google.maps.Map(document.getElementById('fair-map'), {
                zoom: 15,
                center: { lat: mapData.lat, lng: mapData.lng }
            });

            const marker = new google.maps.Marker({
                position: { lat: mapData.lat, lng: mapData.lng },
                map: map,
                title: mapData.title
            });

            const infoWindow = new google.maps.InfoWindow({
                content: `
                    <div>
                        <h6>${mapData.title}</h6>
                        <p class="mb-0">${mapData.address}</p>
                    </div>
                `
            });

            marker.addListener('click', () => {
                infoWindow.open(map, marker);
            });
        }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key={{ google_maps_api_key }}&callback=initFairMap"></script>
    {% endif %}

    <script>
        function copyToClipboard(text) {
            navigator.clipboard.writeText(text).then(() => {
                alert('Lien copié dans le presse-papiers !');
            });
        }
    </script>
{% endblock %}