{% 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">
            <!-- Breadcrumb -->
            <nav aria-label="breadcrumb" class="hero-breadcrumb">
                <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>
            
            <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.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>

                <!-- Carte de contact intégrée -->
                <div class="col-lg-6">
                    <div class="member-contact-card">
                        <div class="contact-buttons-single-row">
                        {% if member.address %}
                            <!-- Icône Google Maps -->
                            <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="contact-btn-narrow"
                               title="Voir sur Google Maps">
                                <i class="fas fa-map-marked-alt"></i>
                                <span>Localiser</span>
                            </a>
                            
                            <!-- Icône Street View -->
                            <a href="https://maps.google.com/maps?q={{ member.address|url_encode }},{{ member.zipCode }}+{{ member.city ? member.city.name|url_encode : '' }}&layer=c&cbll=" 
                               target="_blank" 
                               rel="noopener"
                               class="contact-btn-narrow"
                               title="Vue Street View">
                                <i class="fas fa-street-view"></i>
                                <span>Street View</span>
                            </a>
                        {% endif %}

                        {% if member.phone %}
                            <!-- Icône Téléphone révélable -->
                            <button type="button" 
                                    class="contact-btn-narrow phone-reveal" 
                                    data-phone="{{ member.phone }}"
                                    title="Révéler le téléphone">
                                <i class="fas fa-phone"></i>
                                <span class="phone-hidden">Téléphone</span>
                                <span class="phone-shown d-none">{{ member.phone }}</span>
                            </button>
                        {% endif %}

                        <!-- Bouton Message -->
                        <button type="button" class="contact-btn-narrow" 
                                data-bs-toggle="modal" data-bs-target="#contactModal">
                            <i class="fas fa-envelope"></i>
                            <span>Message</span>
                        </button>

                        {% if member.website %}
                            <!-- Bouton Site Web -->
                            <a href="{{ member.website }}" target="_blank" rel="noopener" 
                               class="contact-btn-narrow">
                                <i class="fas fa-globe"></i>
                                <span>Site Web</span>
                            </a>
                        {% endif %}
                        </div>
                                </div>
                            </div>
                    </div>
                        </div>
                </div>
                        </div>
{% endblock %}

{% block body %}
<div class="member-content">
    <div class="container">
        <!-- Section Galerie - 3 colonnes -->
        <section class="member-section" data-aos="fade-up">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h2 class="section-title mb-0">
                        <i class="fas fa-gem me-2"></i>
                        La Galerie ({{ pagination.totalItems|default(0) }} objets)
                    </h2>
                                                {% if member.items|length > 9 %}
                                <a href="{{ path('catalog_index', {dealer: member.id}) }}" 
                                   class="btn btn-outline-primary btn-sm">
                                    <i class="fas fa-eye me-2"></i>Voir tous ({{ member.items|length }})
                                </a>
                            {% endif %}
                    </div>
                
                                <div class="card-body">
                    {% set itemsToShow = galleryItems|length > 0 ? galleryItems : member.items|slice(0, 9) %}
                    {% if itemsToShow|length > 0 %}
                        <div class="gallery-container" id="galleryContainer">
                            <div class="items-grid-4col" id="itemsGrid">
                                {% for item in itemsToShow %}
                                    <div class="item-card" data-aos="fade-up" data-aos-delay="{{ loop.index * 50 }}">
                                        <div class="item-image">
                                            <a href="{{ path('catalog_item_show', {id: item.id}) }}">
                                                {% if item.images|length > 0 %}
                                                    <img src="{{ item.images.first.getThumbWebPath() }}" 
                                                         alt="{{ item.title }}" 
                                                         loading="lazy">
                                                {% else %}
                                                    <div class="item-image-placeholder">
                                                        <i class="fas fa-image"></i>
                                                    </div>
                                                {% endif %}
                                                
                                                {% if item.status and item.status.value == 'reserved' %}
                                                    <div class="item-status status-reserved">RÉSERVÉ</div>
                                                {% elseif item.status and item.status.value == 'sold' %}
                                                    <div class="item-status status-sold">VENDU</div>
                                                {% endif %}
                                            </a>
                                        </div>
                                        
                                        <div class="item-info">
                                            <h3 class="item-title">
                                                <a href="{{ path('catalog_item_show', {id: item.id}) }}">
                                                    {{ item.title }}
                                                </a>
                                            </h3>
                                            {% if item.description %}
                                                <p class="item-description">
                                                    {{ item.description|slice(0, 100) }}{% if item.description|length > 100 %}...{% endif %}
                                                </p>
                                            {% endif %}
                                            {% if item.price and item.price > 0 %}
                                                <div class="item-price">{{ item.price|number_format(0, ',', ' ') }} €</div>
                                            {% else %}
                                                <div class="item-price">Prix sur demande</div>
                                            {% endif %}
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                            
                            <!-- Indicateur de chargement -->
                            <div class="gallery-loading" id="galleryLoading">
                                <div class="loading-spinner"></div>
                                <span>Chargement...</span>
                            </div>
                        </div>

                                <!-- Lien vers la galerie complète -->
                        {% if pagination.totalPages > 1 %}
                            <div class="text-center mt-3">
                                <p class="text-muted">Galerie avec pagination disponible</p>
                                {% if member.slug %}
                                    <a href="{{ path('app_store_show', {slug: member.slug, locale: 'fr'}) }}" class="btn btn-primary">
                                        <i class="fas fa-images me-2"></i>Voir la galerie complète
                                    </a>
                                {% else %}
                                    <span class="btn btn-secondary disabled">
                                        <i class="fas fa-images me-2"></i>Galerie en préparation
                                    </span>
                                {% endif %}
                            </div>
                        {% endif %}
                                {% else %}
                                <div class="text-center py-5">
                                    <i class="fas fa-gem fa-3x text-muted mb-3"></i>
                                    <h3 class="text-muted mb-3">Aucun objet en ligne</h3>
                                    <p class="text-muted">Ce membre n'a pas encore d'objets en ligne.</p>
                                </div>
                        {% endif %}
                            </div>
                        </div>
                </section>

                <!-- Section À propos -->
                <section class="member-section" data-aos="fade-up" data-aos-delay="100">
                    <div class="card">
                        <div class="card-header">
                            <h2 class="section-title mb-0">
                                <i class="fas fa-info-circle me-2"></i>À propos
                        </h2>
                    </div>
                        <div class="card-body">
                            {% if member.aboutStory %}
                                <div class="member-story">
                                    <h4>Notre Histoire</h4>
                                    {{ member.aboutStory|nl2br }}
                                                </div>
                                            {% endif %}
                                    
                            {% if member.description %}
                                <div class="member-description">
                                    {{ member.description|nl2br }}
                                            </div>
                                        {% else %}
                                <p class="text-muted">Ce membre n'a pas encore renseigné de description.</p>
                                            {% endif %}
                                    </div>
                                </div>
                </section>
                
                <!-- Section À propos -->
                {% if member.aboutStory or member.description %}
                    <section class="member-section" data-aos="fade-up" data-aos-delay="100">
                        <div class="card">
                            <div class="card-header">
                                <h2 class="section-title mb-0">
                                    <i class="fas fa-info-circle me-2"></i>À propos de {{ member.companyName }}
                                </h2>
                                    </div>
                            <div class="card-body">
                                {% if member.aboutStory %}
                                    <div class="member-story">
                                        <h4><i class="fas fa-book-open me-2"></i>Notre Histoire</h4>
                                        {{ member.aboutStory|nl2br }}
                        </div>
                                {% endif %}
                                
                                {% if member.description %}
                                    <div class="member-description {% if member.aboutStory %}mt-4{% endif %}">
                                        {{ member.description|nl2br }}
                                    </div>
                                        {% endif %}
                        </div>
                                </div>
                    </section>
                    {% endif %}
                
                <!-- Section Spécialités -->
                {% if member.specialties|length > 0 %}
                    <section class="member-section" data-aos="fade-up" data-aos-delay="200">
                        <div class="card">
                            <div class="card-header">
                                <h2 class="section-title mb-0">
                                    <i class="fas fa-tags me-2"></i>Spécialités
                                </h2>
                            </div>
                            <div class="card-body">
                                <div class="specialties-grid">
                                    {% for specialty in member.specialties %}
                                        <a href="{{ path('directory_index', {specialty: specialty.id}) }}" 
                                           class="specialty-card">
                                            <i class="fas fa-chevron-right me-2"></i>
                                            {{ specialty.name }}
                        </a>
                                    {% endfor %}
            </div>
        </div>
    </div>
    </section>
                {% endif %}
    </div>
</div>

<!-- Modal de contact -->
<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="Fermer"></button>
            </div>
            <div class="modal-body">
                <form id="contactForm" class="contact-form">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="contact_name" class="form-label">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">Email *</label>
                            <input type="email" class="form-control" id="contact_email" name="email" required>
            </div>
        </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="contact_phone" class="form-label">Téléphone</label>
                            <input type="tel" class="form-control" id="contact_phone" name="phone">
    </div>
                        <div class="col-md-6 mb-3">
                            <label for="contact_subject" class="form-label">Sujet *</label>
                            <select class="form-select" id="contact_subject" name="subject" required>
                                <option value="">Choisir un sujet</option>
                                <option value="information">Demande d'information</option>
                                <option value="purchase">Achat d'un objet</option>
                                <option value="expertise">Demande d'expertise</option>
                                <option value="other">Autre</option>
                            </select>
</div>
            </div>
                    <div class="mb-3">
                        <label for="contact_message" class="form-label">Message *</label>
                        <textarea class="form-control" id="contact_message" name="message" rows="5" required></textarea>
                    </div>
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" id="contact_gdpr" name="gdpr" required>
                        <label class="form-check-label" for="contact_gdpr">
                            J'accepte que mes données soient utilisées pour traiter ma demande *
                        </label>
                    </div>
                    <input type="hidden" name="member_id" value="{{ member.id }}">
                </form>
            </div>
            <div class="modal-footer">
                <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
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    
    <style>
        /* Styles pour les boutons de contact en une ligne */
        .contact-buttons-single-row {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            justify-content: center;
            margin-top: 1rem;
        }
        
        .contact-btn-narrow {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 12px 8px;
            text-decoration: none;
            border: 2px solid #e3f2fd;
            border-radius: 12px;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            color: #495057;
            font-size: 0.85rem;
            font-weight: 500;
            transition: all 0.3s ease;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        
        .contact-btn-narrow:hover {
            background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
            color: white;
            border-color: #007bff;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
        }
        
        .contact-btn-narrow i {
            font-size: 1.2rem;
            margin-bottom: 4px;
        }
        
        .contact-btn-narrow span {
            font-size: 0.8rem;
            line-height: 1.2;
            text-align: center;
        }
        
        /* Responsive pour mobile */
        @media (max-width: 768px) {
            .contact-buttons-single-row {
                flex-direction: column;
                gap: 12px;
            }
            
            .contact-btn-narrow {
                flex-direction: row;
                min-height: 50px;
                padding: 12px 16px;
            }
            
            .contact-btn-narrow i {
                margin-bottom: 0;
                margin-right: 8px;
                font-size: 1rem;
            }
            
            .contact-btn-narrow span {
                font-size: 0.9rem;
            }
        }
        
        /* Animation pour le téléphone révélé */
        .phone-reveal .phone-shown {
            animation: fadeIn 0.3s ease-in-out;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: scale(0.8); }
            to { opacity: 1; transform: scale(1); }
        }
    </style>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    
    <!-- AOS Animation -->
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    
    
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Initialize AOS
            AOS.init({
                duration: 800,
                easing: 'ease-out-cubic',
                once: true,
                offset: 100
        });

            // Phone reveal functionality
            document.querySelectorAll('.phone-reveal').forEach(function(btn) {
                btn.addEventListener('click', function() {
                    const hiddenSpan = this.querySelector('.phone-hidden');
                    const shownSpan = this.querySelector('.phone-shown');
                    
                    hiddenSpan.classList.add('d-none');
                    shownSpan.classList.remove('d-none');
                });
            });
            
            // Contact form submission
            const contactForm = document.getElementById('contactForm');
            if (contactForm) {
                contactForm.addEventListener('submit', function(e) {
                    e.preventDefault();
                    
                    const formData = new FormData(this);
                    const submitBtn = this.querySelector('[type="submit"]');
                    const originalText = submitBtn.innerHTML;
                    
                    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Envoi...';
                    submitBtn.disabled = true;
                    
                    // Simulate form submission (replace with actual endpoint)
                    setTimeout(function() {
                        alert('Message envoyé avec succès !');
                        bootstrap.Modal.getInstance(document.getElementById('contactModal')).hide();
                        contactForm.reset();
                        
                        submitBtn.innerHTML = originalText;
                        submitBtn.disabled = false;
                    }, 2000);
                });
            }
            
            console.log('✅ Page membre chargée avec succès');
            console.log('Membre:', '{{ member.companyName }}');
            console.log('Objets en galerie:', {{ galleryItems|length }});

            // Solution IDENTIQUE aux alertes : JavaScript minimal et spécifique pour les modales
            console.log('🔧 Initialisation modales contact annuaire');
            
            // Appliquer la solution propre à la modale contactModal spécifiquement
            const modal = document.getElementById('contactModal');
            if (modal) {
                modal.addEventListener('shown.bs.modal', function(e) {
                    console.log('✅ Modale contactModal 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
                    const firstInput = modalElement.querySelector('input, select, textarea');
                    if (firstInput) {
                        setTimeout(() => firstInput.focus(), 100);
                    }
                });
                
                modal.addEventListener('hidden.bs.modal', function(e) {
                    console.log('✅ Modale contactModal fermée');
                    
                    // Nettoyage simple identique aux alertes
                    setTimeout(() => {
                        document.querySelectorAll('.modal-backdrop:not(.show)').forEach(backdrop => {
                            backdrop.remove();
                        });
                    }, 100);
                });
            }
        });
</script>
{% endblock %}