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

{% set body_class = 'page-with-hero' %}

{% block title %}{{ member.companyName }} - {{ member.city ? member.city.name : '' }} | Antiquités en France{% endblock %}

{% block meta_description %}{{ seo_meta.description }}{% endblock %}
{% block meta_keywords %}{{ seo_meta.keywords|join(', ') }}{% endblock %}

{% block structured_data %}
<script type="application/ld+json">
{{ structured_data|json_encode|raw }}
</script>
{% endblock %}

{% block hero %}
<!-- Hero avec banner/branding en fond -->
<div class="member-hero-banner">
    {% if member.banner %}
        <div class="hero-banner-image" style="background-image: url('{{ asset('uploads/members/banners/' ~ member.banner) }}');"></div>
    {% else %}
        <div class="hero-banner-placeholder"></div>
    {% endif %}
    <div class="hero-banner-overlay"></div>
    
    <div class="member-hero-content">
        <div class="container">
            <div class="row align-items-end">
                <!-- Logo et informations principales -->
                <div class="col-lg-6">
                    <div class="member-brand-card">
                        <div class="brand-logo">
                            {% if member.logo %}
                                <img src="{{ asset('uploads/members/logos/' ~ member.logo) }}"
                                     alt="Logo {{ member.companyName }}"
                                     class="member-logo">
                            {% else %}
                                <div class="member-logo-placeholder">
                                    <i class="fas fa-store"></i>
                                </div>
                            {% endif %}
                        </div>
                        
                        <div class="brand-info">
                            <h1 class="member-title">{{ member.companyName }}</h1>
                            <p class="member-subtitle">
                                <i class="fas fa-map-marker-alt me-2"></i>
                                Antiquaire à {{ member.city ? member.city.name : '' }}
                                {% if member.departement %} ({{ member.departement.name }}){% endif %}
                            </p>
                            
                            {% if member.address %}
                                <p class="member-address">
                                    {{ member.address }}<br>
                                    {{ member.zipCode }} {{ member.city ? member.city.name : '' }}
                                </p>
                            {% endif %}
                            
                            {% if member.specialties|length > 0 %}
                                <div class="member-specialties">
                                    {% for specialty in member.specialties %}
                                        <span class="specialty-badge">{{ specialty.name }}</span>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
                
                <!-- Boutons de contact élégants -->
                <div class="col-lg-6">
                    <div class="member-contact-actions">
                        <div class="contact-buttons-grid">
                            {% if member.address %}
                                <!-- Bouton Localisation avec modale -->
                                <button type="button" 
                                        class="contact-action-btn" 
                                        data-bs-toggle="modal" 
                                        data-bs-target="#mapModal"
                                        title="Voir la localisation">
                                    <div class="btn-icon">
                                        <i class="fas fa-map-marked-alt"></i>
                                    </div>
                                    <div class="btn-label">Localiser</div>
                                </button>
                            {% endif %}
                            
                            {% if member.phone %}
                                <!-- Bouton Téléphone avec modale -->
                                <button type="button" 
                                        class="contact-action-btn" 
                                        data-bs-toggle="modal" 
                                        data-bs-target="#phoneModal"
                                        title="Afficher le numéro">
                                    <div class="btn-icon">
                                        <i class="fas fa-phone"></i>
                                    </div>
                                    <div class="btn-label">Téléphone</div>
                                </button>
                            {% endif %}
                            
                            {% if member.email %}
                                <!-- Bouton Contact avec modale -->
                                <button type="button" 
                                        class="contact-action-btn" 
                                        data-bs-toggle="modal" 
                                        data-bs-target="#contactModal"
                                        title="Envoyer un message">
                                    <div class="btn-icon">
                                        <i class="fas fa-envelope"></i>
                                    </div>
                                    <div class="btn-label">Contact</div>
                                </button>
                            {% endif %}
                            
                            {% if member.website %}
                                <!-- Bouton Site Web (lien direct) -->
                                <a href="{{ member.website }}" 
                                   target="_blank" 
                                   rel="noopener" 
                                   class="contact-action-btn" 
                                   title="Visiter le site web">
                                    <div class="btn-icon">
                                        <i class="fas fa-globe"></i>
                                    </div>
                                    <div class="btn-label">Site web</div>
                                </a>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block body %}
<div class="container py-5">
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="{{ path('app_home') }}">
                    <i class="fas fa-home me-1"></i>Accueil
                </a>
            </li>
            <li class="breadcrumb-item">
                <a href="{{ path('directory_index') }}">Antiquaires</a>
            </li>
            <li class="breadcrumb-item active">{{ member.companyName }}</li>
        </ol>
    </nav>
    
    <!-- Description -->
    {% if member.description %}
        <div class="member-description mb-5">
            <h2>À propos</h2>
            <div class="description-content">
                {{ member.description|nl2br }}
            </div>
        </div>
    {% endif %}
    
    <!-- Section Galerie pleine largeur -->
    <div class="member-gallery-section">
        <h2>
            La Galerie ({{ pagination.totalItems|default(0) }} objets)
        </h2>
        
        <div class="gallery-wrapper">
            <div class="gallery-container" id="galleryContainer">
                {% include 'member/_gallery_items.html.twig' with {'galleryItems': galleryItems} %}
            </div>
            
            {% if pagination.totalPages > 1 %}
                <div class="pagination-wrapper">
                    <div class="pagination-modern" id="galleryPagination">
                        <!-- Pagination générée par JavaScript -->
                    </div>
                    
                    <div class="gallery-loading" id="galleryLoading">
                        <div class="gallery-loading-content">
                            <div class="loading-spinner"></div>
                            <p>Chargement...</p>
                        </div>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>

</div>

<!-- Gallery Pagination -->
{{ importmap('gallery-pagination') }}

<script>
// Données de pagination initiales pour JavaScript
window.galleryPaginationData = {
    currentPage: {{ pagination.page }},
    totalPages: {{ pagination.totalPages }},
    totalItems: {{ pagination.totalItems }},
    hasNext: {{ pagination.page < pagination.totalPages ? 'true' : 'false' }},
    hasPrev: {{ pagination.page > 1 ? 'true' : 'false' }}
};
</script>


<style>
/* Styles simplifiés pour les boutons de contact */
.member-contact-actions {
    padding: 15px;
}

.contact-buttons-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    justify-items: center;
}

.contact-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 110px;
    height: 90px;
    background: #fff;
    border: 2px solid #dee2e6;
    border-radius: 15px;
    text-decoration: none;
    color: #2c3e50;
    transition: all 0.3s ease;
    cursor: pointer;
}

.contact-action-btn:hover {
    background: #f8f9fa;
    border-color: #3498db;
    color: #3498db;
    text-decoration: none;
    transform: translateY(-2px);
}

.contact-action-btn .btn-icon {
    margin-bottom: 8px;
}

.contact-action-btn .btn-icon i {
    font-size: 24px;
}

.contact-action-btn .btn-label {
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
}

/* Styles pour les modales - utilise les z-index globaux définis dans app.css */

.modal-header {
    background: linear-gradient(135deg, #3498db, #2c3e50);
    color: white;
    border-bottom: none;
}

.modal-header .btn-close {
    filter: invert(1);
    opacity: 0.8;
}

.modal-header .btn-close:hover {
    opacity: 1;
}

/* S'assurer que les modales se ferment correctement */
.modal.fade.show {
    display: block !important;
}

.modal-backdrop.fade.show {
    opacity: 0.5 !important;
}

.phone-display .phone-number {
    font-family: 'Courier New', monospace;
    font-weight: bold;
    color: #2c3e50;
    letter-spacing: 1px;
    font-size: 1.2em;
}

/* Responsive simple : ligne de 4 boutons qui passe sous la carte si nécessaire */

/* Par défaut : 4 boutons en ligne à droite de la carte (> 992px) */
/* Défini ci-dessus avec grid-template-columns: repeat(4, 1fr) */

/* Tablettes (577px à 992px) : boutons sous la carte */
@media (min-width: 577px) and (max-width: 992px) {
    /* Forcer les colonnes à s'empiler sur tablette */
    .row.align-items-end {
        flex-direction: column !important;
        align-items: center !important;
        min-height: auto !important;
    }
    
    .col-lg-6:first-child {
        order: 1 !important;
        margin-bottom: 20px !important;
        width: 100% !important;
        flex: none !important;
    }
    
    .col-lg-6:last-child {
        order: 2 !important;
        width: 100% !important;
        flex: none !important;
    }
    
    /* Header compact pour tablette */
    .member-hero-banner {
        min-height: 100px !important;
        padding: 10px 0 !important;
    }
    
    .member-hero-content {
        padding: 15px 0 !important;
        min-height: 160px !important;
    }
    
    .member-brand-card {
        text-align: center !important;
        margin-bottom: 0 !important;
        padding: 15px !important;
    }
    
    .member-contact-actions {
        padding: 10px !important;
        margin: 0 !important;
        margin-bottom: 20px !important;
    }
    
    /* Boutons tablettes - ligne centrée */
    .contact-buttons-grid {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 15px !important;
        padding: 0 !important;
    }
    
    .contact-action-btn {
        width: 100px !important;
        height: 80px !important;
        flex-shrink: 0 !important;
    }
    
    .contact-action-btn .btn-icon i {
        font-size: 24px !important;
    }
    
    .contact-action-btn .btn-label {
        font-size: 13px !important;
    }
    
    /* Container avec espacement correct */
    .container.py-5 {
        padding-top: 30px !important;
        padding-bottom: 25px !important;
    }
}

/* Mobile : espacement ultra-minimal sur smartphone */
@media (max-width: 576px) {
    /* Header ultra-compact sur smartphone */
    .member-hero-banner {
        min-height: 40px !important;
        padding: 0 !important;
    }
    
    .member-hero-content {
        padding: 5px 0 !important;
        min-height: 60px !important;
    }
    
    .row.align-items-end {
        min-height: 55px !important;
        margin-bottom: 5px !important;
    }
    
    /* Carte de visite ultra-compacte */
    .member-brand-card {
        margin-bottom: 8px !important;
        padding: 4px !important;
        border-radius: 8px !important;
    }
    
    .member-brand-card h1 {
        font-size: 16px !important;
        margin-bottom: 2px !important;
        line-height: 1.1 !important;
    }
    
    .member-brand-card .text-muted {
        font-size: 11px !important;
        margin-bottom: 1px !important;
        line-height: 1.1 !important;
    }
    
    .member-brand-card .badge {
        font-size: 8px !important;
        padding: 1px 4px !important;
        margin: 1px !important;
    }
    
    /* Actions de contact ultra-compactes */
    .member-contact-actions {
        padding: 3px !important;
        margin: 0 !important;
        margin-bottom: 15px !important;
    }
    
    .contact-buttons-grid {
        gap: 3px;
        padding: 2px;
        margin: 0;
    }
    
    /* Boutons micro sur smartphone */
    .contact-action-btn {
        width: 65px;
        height: 50px;
        padding: 1px;
        border-radius: 6px;
        border-width: 1px;
    }
    
    .contact-action-btn .btn-icon {
        margin-bottom: 1px;
    }
    
    .contact-action-btn .btn-icon i {
        font-size: 14px;
    }
    
    .contact-action-btn .btn-label {
        font-size: 8px;
        line-height: 1;
    }
    
    /* Réduire drastiquement tous les espacements généraux */
    .container-fluid {
        padding-left: 2px !important;
        padding-right: 2px !important;
    }
    
    .col-12, .col-md-8, .col-md-4 {
        padding-left: 1px !important;
        padding-right: 1px !important;
    }
    
    /* Compacter la section galerie */
    .member-gallery-section {
        margin-top: 10px !important;
        padding-top: 5px !important;
    }
    
    .member-gallery-section h2 {
        font-size: 18px !important;
        margin-bottom: 10px !important;
    }
    
    /* S'assurer que le container principal a un espacement correct */
    .container.py-5 {
        padding-top: 20px !important;
        padding-bottom: 15px !important;
    }
    
    /* Breadcrumb avec marge inférieure pour respirer */
    nav.mb-4 {
        margin-bottom: 20px !important;
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    console.log('✅ Page membre chargée - JavaScript minimal');
});
</script>

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    
    <!-- Modales de Contact placées dans le bloc javascripts pour respecter la syntaxe Twig -->

<!-- Modale Localisation / Carte -->
{% if member.address %}
<div class="modal fade" id="mapModal" tabindex="-1" aria-labelledby="mapModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="mapModalLabel">
                    <i class="fas fa-map-marked-alt me-2"></i>
                    Localisation de {{ member.companyName }}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row mb-3">
                    <div class="col-12">
                        <h6>Adresse</h6>
                        <p class="mb-0">
                            {{ member.address }}<br>
                            {{ member.zipCode }} {{ member.city ? member.city.name : '' }}
                        </p>
                    </div>
                </div>
                
                {% if hasGpsCoordinates and googleMapsEnabled %}
                    <div class="row">
                        <div class="col-md-8 mb-3">
                            <h6><i class="fas fa-map me-2"></i>Carte</h6>
                            <img src="{{ mapUrls.staticMap }}" 
                                 alt="Carte de localisation" 
                                 class="img-fluid rounded border">
                        </div>
                        {% if mapUrls.streetView %}
                            <div class="col-md-4 mb-3">
                                <h6><i class="fas fa-street-view me-2"></i>Street View</h6>
                                <img src="{{ mapUrls.streetView }}" 
                                     alt="Vue Street View" 
                                     class="img-fluid rounded border">
                            </div>
                        {% endif %}
                    </div>
                {% endif %}
            </div>
            <div class="modal-footer">
                <a href="https://maps.google.com/maps?q={{ member.address|url_encode }},{{ member.zipCode }}+{{ member.city ? member.city.name|url_encode : '' }}"
                   target="_blank"
                   rel="noopener"
                   class="btn btn-primary">
                    <i class="fas fa-external-link-alt me-2"></i>
                    Ouvrir dans Google Maps
                </a>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
            </div>
        </div>
    </div>
</div>
{% endif %}

<!-- Modale Téléphone -->
{% if member.phone %}
<div class="modal fade" id="phoneModal" tabindex="-1" aria-labelledby="phoneModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="phoneModalLabel">
                    <i class="fas fa-phone me-2"></i>
                    Contacter {{ member.companyName }}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center">
                <div class="phone-display mb-4">
                    <i class="fas fa-phone-alt fa-3x text-primary mb-3"></i>
                    <h4 class="phone-number">{{ member.phone }}</h4>
                    <p class="text-muted">Cliquez pour appeler directement</p>
                </div>
            </div>
            <div class="modal-footer justify-content-center">
                <a href="tel:{{ member.phone }}" class="btn btn-primary btn-lg">
                    <i class="fas fa-phone me-2"></i>
                    Appeler maintenant
                </a>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
            </div>
        </div>
    </div>
</div>
{% endif %}

<!-- Modale Contact -->
{% if member.email %}
<div class="modal fade" id="contactModal" tabindex="-1" aria-labelledby="contactModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="contactModalLabel">
                    <i class="fas fa-envelope me-2"></i>
                    Contacter {{ member.companyName }}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form action="{{ path('contact_member', {'id': member.id}) }}" method="POST" id="contactForm">
                    <input type="hidden" name="member_id" value="{{ member.id }}">
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="contact_name" class="form-label">Votre nom *</label>
                            <input type="text" class="form-control" id="contact_name" name="name" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="contact_email" class="form-label">Votre email *</label>
                            <input type="email" class="form-control" id="contact_email" name="email" required>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="contact_subject" class="form-label">Sujet</label>
                        <input type="text" class="form-control" id="contact_subject" name="subject" 
                               placeholder="Demande d'information sur vos antiquités">
                    </div>
                    
                    <div class="mb-3">
                        <label for="contact_message" class="form-label">Votre message *</label>
                        <textarea class="form-control" id="contact_message" name="message" rows="4" 
                                  placeholder="Bonjour, je souhaiterais obtenir des informations sur..." 
                                  required></textarea>
                    </div>
                    
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" id="contact_privacy" name="privacy" required>
                        <label class="form-check-label" for="contact_privacy">
                            J'accepte que mes données soient utilisées pour répondre à ma demande *
                        </label>
                    </div>
                </form>
            </div>
            <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <button type="submit" form="contactForm" class="btn btn-primary">
                    <i class="fas fa-paper-plane me-2"></i>
                    Envoyer le message
                </button>
            </div>
        </div>
    </div>
</div>
{% endif %}

<script>
// Solution IDENTIQUE aux alertes : JavaScript minimal et spécifique pour les modales
document.addEventListener('DOMContentLoaded', function() {
    console.log('🔧 Initialisation modales contact membre');
    
    // Appliquer la solution propre à CHAQUE modale spécifiquement
    const modals = ['contactModal', 'phoneModal', 'mapModal'];
    
    modals.forEach(modalId => {
        const modal = document.getElementById(modalId);
        if (!modal) return;
        
        modal.addEventListener('shown.bs.modal', function(e) {
            console.log(`✅ Modale ${modalId} ouverte`);
            
            // MÊME SOLUTION que les alertes : z-index minimal et spécifique
            const modalElement = e.target;
            modalElement.style.zIndex = '1060';  // Identique aux alertes
            modalElement.style.pointerEvents = 'auto';
            
            // Focus sur le premier champ si c'est un formulaire
            const firstInput = modalElement.querySelector('input, select, textarea');
            if (firstInput) {
                setTimeout(() => firstInput.focus(), 100);
            }
        });
        
        modal.addEventListener('hidden.bs.modal', function(e) {
            console.log(`✅ Modale ${modalId} fermée`);
            
            // Nettoyage simple identique aux alertes
            setTimeout(() => {
                document.querySelectorAll('.modal-backdrop:not(.show)').forEach(backdrop => {
                    backdrop.remove();
                });
            }, 100);
        });
    });
});
</script>

{% endblock %}