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

{% block title %}Contact - Village de Menotey{% endblock %}

{% block stylesheets %}
{{ parent() }}
<style>
.contact-info-card {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border-radius: 15px;
    padding: 2rem;
    height: 100%;
}

.contact-form {
    background: white;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    padding: 2rem;
}

.opening-hours {
    background: var(--bg-light);
    border-radius: 10px;
    padding: 1.5rem;
}

.map-container {
    height: 300px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.contact-method {
    display: flex;
    align-items: center;
    padding: 1rem;
    margin-bottom: 1rem;
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
    transition: all 0.3s ease;
}

.contact-method:hover {
    background: rgba(255,255,255,0.2);
    transform: translateX(5px);
}

.contact-icon {
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    font-size: 1.2rem;
}

/* Responsive Mobile Fixes pour le contact */
@media (max-width: 768px) {
    /* Contact - centrer le bouton Google Maps */
    .btn-outline-primary {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin: 1rem auto !important;
    }
    
    /* Réduction taille section numéros d'urgence */
    .bg-danger {
        padding: 1.5rem 0 !important;
    }
    
    .bg-danger h3 {
        font-size: 1.1rem !important;
        text-align: center !important;
        margin-bottom: 1rem !important;
    }
    
    .bg-danger .fs-5 {
        font-size: 1rem !important;
    }
    
    .bg-danger .row .col-md-4 {
        text-align: center !important;
        margin-bottom: 0.8rem !important;
        font-size: 0.9rem !important;
    }
    
    .bg-danger .col-lg-4 {
        display: none !important;
    }
}
</style>
{% endblock %}

{% block body %}
<!-- Hero Section -->
<section class="hero">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8 mx-auto text-center">
                <h1>Nous contacter</h1>
                <p class="lead">Votre mairie à votre service</p>
            </div>
        </div>
    </div>
</section>

<!-- Contact Section -->
<section class="section">
    <div class="container">
        <div class="row g-5">
            <!-- Contact Information -->
            <div class="col-lg-5">
                <div class="contact-info-card">
                    <h3 class="mb-4">Informations de contact</h3>
                    
                    <div class="contact-method">
                        <div class="contact-icon">
                            <i class="fas fa-map-marker-alt"></i>
                        </div>
                        <div>
                            <strong>Adresse</strong><br>
                            {{ contact_info.mairie.address }}
                        </div>
                    </div>
                    
                    <div class="contact-method">
                        <div class="contact-icon">
                            <i class="fas fa-phone"></i>
                        </div>
                        <div>
                            <strong>Téléphone</strong><br>
                            {{ contact_info.mairie.phone }}
                        </div>
                    </div>
                    
                    <div class="contact-method">
                        <div class="contact-icon">
                            <i class="fas fa-envelope"></i>
                        </div>
                        <div>
                            <strong>Email</strong><br>
                            {{ contact_info.mairie.email }}
                        </div>
                    </div>
                    
                    <div class="contact-method">
                        <div class="contact-icon">
                            <i class="fas fa-user-tie"></i>
                        </div>
                        <div>
                            <strong>Maire</strong><br>
                            {{ contact_info.mayor.name }}<br>
                            <small>{{ contact_info.mayor.email }}</small>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Contact Form -->
            <div class="col-lg-7">
                <div class="contact-form">
                    <h3 class="mb-4 text-primary">Envoyez-nous un message</h3>
                    
                    <form>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="firstName" class="form-label">Prénom *</label>
                                <input type="text" class="form-control" id="firstName" required>
                            </div>
                            <div class="col-md-6">
                                <label for="lastName" class="form-label">Nom *</label>
                                <input type="text" class="form-control" id="lastName" required>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="email" class="form-label">Email *</label>
                            <input type="email" class="form-control" id="email" required>
                        </div>
                        
                        <div class="mb-3">
                            <label for="phone" class="form-label">Téléphone</label>
                            <input type="tel" class="form-control" id="phone">
                        </div>
                        
                        <div class="mb-3">
                            <label for="subject" class="form-label">Sujet *</label>
                            <select class="form-select" id="subject" required>
                                <option value="">Choisissez un sujet</option>
                                <option value="info">Demande d'information</option>
                                <option value="complaint">Réclamation</option>
                                <option value="suggestion">Suggestion</option>
                                <option value="urbanisme">Urbanisme</option>
                                <option value="etat-civil">État civil</option>
                                <option value="autre">Autre</option>
                            </select>
                        </div>
                        
                        <div class="mb-4">
                            <label for="message" class="form-label">Message *</label>
                            <textarea class="form-control" id="message" rows="5" required placeholder="Décrivez votre demande..."></textarea>
                        </div>
                        
                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary btn-lg">
                                <i class="fas fa-paper-plane"></i> Envoyer le message
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Opening Hours Section -->
<section class="section bg-light">
    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                <div class="opening-hours">
                    <h4 class="mb-4 text-primary">
                        <i class="fas fa-clock me-2"></i>Horaires d'ouverture
                    </h4>
                    
                    <div class="row">
                        {% for day, hours in contact_info.mairie.hours %}
                        <div class="col-12 d-flex justify-content-between align-items-center py-2 border-bottom">
                            <strong>{{ day }}</strong>
                            <span class="text-muted">{{ hours }}</span>
                        </div>
                        {% endfor %}
                    </div>
                    
                    <div class="mt-3 p-3 bg-warning bg-opacity-10 border-start border-warning border-4">
                        <small class="text-muted">
                            <i class="fas fa-info-circle me-1"></i>
                            En cas d'urgence en dehors des heures d'ouverture, contactez le 03 84 XX XX XX
                        </small>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-6">
                <h4 class="mb-4 text-primary">
                    <i class="fas fa-map-marked-alt me-2"></i>Localisation
                </h4>
                
                <div class="map-container mb-3">
                    <!-- Google Maps -->
                    <div id="map" style="height: 400px; border-radius: 10px; overflow: hidden;"></div>
                </div>
                
                <div class="location-info">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="info-item">
                                <i class="fas fa-map-marker-alt text-primary me-2"></i>
                                <strong>Adresse :</strong><br>
                                <span class="text-muted">1 Place de la Mairie<br>39380 Menotey, France</span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-item">
                                <i class="fas fa-compass text-primary me-2"></i>
                                <strong>Coordonnées :</strong><br>
                                <span class="text-muted">47.0833°N, 5.4167°E</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mt-3">
                        <a href="https://www.google.com/maps/place/39380+Menotey" 
                           target="_blank" 
                           class="btn btn-outline-primary btn-sm">
                            <i class="fas fa-external-link-alt me-1"></i>
                            Ouvrir dans Google Maps
                        </a>
                    </div>
                </div>
                
                <div class="row g-2">
                    <div class="col-6">
                        <div class="text-center p-3 bg-white rounded">
                            <i class="fas fa-car text-primary"></i>
                            <small class="d-block">Parking gratuit</small>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="text-center p-3 bg-white rounded">
                            <i class="fas fa-wheelchair text-success"></i>
                            <small class="d-block">Accès PMR</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Services Section -->
<section class="section">
    <div class="container">
        <div class="section-title">
            <h2>Nos services</h2>
            <p>Les démarches et services disponibles en mairie</p>
        </div>
        
        <div class="row g-4">
            <div class="col-md-4">
                <div class="card h-100 border-0 text-center">
                    <div class="card-body">
                        <i class="fas fa-id-card fa-3x text-primary mb-3"></i>
                        <h5>État civil</h5>
                        <p class="text-muted">Actes de naissance, mariage, décès, livret de famille</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card h-100 border-0 text-center">
                    <div class="card-body">
                        <i class="fas fa-home fa-3x text-success mb-3"></i>
                        <h5>Urbanisme</h5>
                        <p class="text-muted">Permis de construire, déclaration de travaux, certificat d'urbanisme</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card h-100 border-0 text-center">
                    <div class="card-body">
                        <i class="fas fa-file-alt fa-3x text-warning mb-3"></i>
                        <h5>Autres démarches</h5>
                        <p class="text-muted">Cartes d'identité, passeports, attestations diverses</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Emergency Section -->
<section class="section bg-danger text-white">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8">
                <h3 class="mb-3">
                    <i class="fas fa-exclamation-triangle me-2"></i>Numéros d'urgence
                </h3>
                <div class="row">
                    <div class="col-md-4">
                        <strong>Police / Gendarmerie</strong><br>
                        <span class="fs-5">17</span>
                    </div>
                    <div class="col-md-4">
                        <strong>Pompiers</strong><br>
                        <span class="fs-5">18</span>
                    </div>
                    <div class="col-md-4">
                        <strong>SAMU</strong><br>
                        <span class="fs-5">15</span>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 text-end">
                <i class="fas fa-ambulance fa-4x opacity-50"></i>
            </div>
        </div>
    </div>
</section>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Form submission
    const contactForm = document.querySelector('form');
    contactForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        // Here you would normally send the form data to your server
        alert('Merci pour votre message ! Nous vous répondrons dans les plus brefs délais.');
        
        // Reset form
        contactForm.reset();
    });
    
    // Initialize Map (OpenStreetMap alternative)
    function initMap() {
        // Si Google Maps n'est pas disponible, utiliser une carte statique
        const mapContainer = document.getElementById("map");
        
        if (typeof google === 'undefined') {
            // Utiliser une carte statique OpenStreetMap
            mapContainer.innerHTML = `
                <iframe 
                    width="100%" 
                    height="400" 
                    frameborder="0" 
                    scrolling="no" 
                    marginheight="0" 
                    marginwidth="0" 
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d21699.89720082157!2d5.4816992332323675!3d47.16789790376594!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x478d52a102535ca7%3A0xacf007ad8c94dd4b!2s39290%20Menotey!5e0!3m2!1sfr!2sfr!4v1759240648227!5m2!1sfr!2sfr"
                    style="border-radius: 10px;">
                </iframe>
                <div style="position: absolute; top: 10px; right: 10px; background: white; padding: 5px 10px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.2);">
                    <small><a href="https://www.openstreetmap.org/?mlat=47.0833&mlon=5.4167#map=15/47.0833/5.4167" target="_blank">Voir sur OpenStreetMap</a></small>
                </div>
            `;
            return;
        }
        
        // Code Google Maps original
        const menotey = { lat: 47.0833, lng: 5.4167 };
        
        const map = new google.maps.Map(mapContainer, {
            zoom: 15,
            center: menotey,
            mapTypeId: 'roadmap',
            styles: [
                {
                    "featureType": "all",
                    "elementType": "geometry.fill",
                    "stylers": [{"weight": "2.00"}]
                },
                {
                    "featureType": "all",
                    "elementType": "geometry.stroke",
                    "stylers": [{"color": "#9c9c9c"}]
                },
                {
                    "featureType": "all",
                    "elementType": "labels.text",
                    "stylers": [{"visibility": "on"}]
                }
            ]
        });
        
        const marker = new google.maps.Marker({
            position: menotey,
            map: map,
            title: 'Mairie de Menotey',
            icon: {
                url: 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(`
                    <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="16" cy="16" r="12" fill="#4CAF50" stroke="white" stroke-width="3"/>
                        <text x="16" y="21" text-anchor="middle" fill="white" font-size="12" font-family="Arial">🏛️</text>
                    </svg>
                `),
                scaledSize: new google.maps.Size(32, 32)
            }
        });
        
        const infoWindow = new google.maps.InfoWindow({
            content: `
                <div style="padding: 10px;">
                    <h6 style="margin: 0 0 10px 0; color: #4CAF50;">Mairie de Menotey</h6>
                    <p style="margin: 0; font-size: 14px;">
                        <strong>Adresse :</strong><br>
                        1 Place de la Mairie<br>
                        39380 Menotey
                    </p>
                    <hr style="margin: 10px 0;">
                    <p style="margin: 0; font-size: 13px;">
                        <strong>📞</strong> 03 84 XX XX XX<br>
                        <strong>✉️</strong> mairie.menotey@orange.fr
                    </p>
                </div>
            `
        });
        
        marker.addListener('click', () => {
            infoWindow.open(map, marker);
        });
        
        infoWindow.open(map, marker);
    }
    
    // Initialiser la carte au chargement de la page
    initMap();
    
    // Contact form functionality could be added here
});
</script>

<!-- Note: Pour activer Google Maps, remplacez YOUR_API_KEY par votre vraie clé API Google Maps -->
<!-- <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script> -->
{% endblock %}