@extends('layouts.frontend')

@section('title', 'Contactez-nous')

@section('content')
<!-- En-tête -->
<section class="hero-section">
    <div class="container text-center">
        <h1 class="display-4 fw-bold mb-4">Contactez-nous</h1>
        <p class="lead mb-4">Prenez contact avec notre équipe pour toute question ou assistance</p>
        <nav aria-label="fil d'ariane">
            <ol class="breadcrumb justify-content-center">
                <li class="breadcrumb-item"><a href="/" class="text-white text-decoration-none">Accueil</a></li>
                <li class="breadcrumb-item active text-white" aria-current="page">Contactez-nous</li>
            </ol>
        </nav>
    </div>
</section>

<!-- Contenu de contact -->
<section class="py-5">
    <div class="container">
        <div class="row">
            @if(session('success'))
                <div class="alert alert-success">
                    {{ session('success') }}
                </div>
            @endif
            <!-- Formulaire de contact -->
            <div class="col-lg-7 mb-5 mb-lg-0">
                <h2 class="contact-page-title">Envoyez-nous un message</h2>
                <form action="{{ route('contact.submit') }}" method="POST" id="contactForm">
                    @csrf
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="name" class="form-label">Votre nom</label>
                            <input type="text" class="form-control" name="name" id="name" placeholder="Entrez votre nom" required>
                        </div>
                        <x-honeypot />
                        <div class="col-md-6 mb-3">
                            <label for="email" class="form-label">Adresse e-mail</label>
                            <input type="email" class="form-control" name="email" id="email" placeholder="Entrez votre e-mail" required>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="subject" class="form-label">Objet</label>
                        <input type="text" class="form-control" name="subject" id="subject" placeholder="Entrez l'objet">
                    </div>
                    <div class="mb-3">
                        <label for="message" class="form-label">Message</label>
                        <textarea class="form-control" id="message" name="message" rows="5" placeholder="Entrez votre message" required></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary px-4 py-2">Envoyer le message</button>
                </form>
            </div>

            <!-- Informations de contact -->
            <div class="col-lg-5">
                <div class="ps-lg-5">
                    <h2 class="contact-page-title">Informations de contact</h2>

                    <div class="contact-info-item">
                        <div class="contact-icon">
                            <i class="fas fa-map-marker-alt"></i>
                        </div>
                        <div>
                            <h5 class="mb-1">Adresse</h5>
                            <p class="mb-0">{{ $settings->address ?? '' }}</p>
                        </div>
                    </div>

                    <div class="contact-info-item">
                        <div class="contact-icon">
                            <i class="fas fa-phone-alt"></i>
                        </div>
                        <div>
                            <h5 class="mb-1">Numéro de téléphone</h5>
                            <p class="mb-0">{{ implode(', ', $settings->phone) }}</p>
                        </div>
                    </div>

                    <div class="contact-info-item">
                        <div class="contact-icon">
                            <i class="fas fa-envelope"></i>
                        </div>
                        <div>
                            <h5 class="mb-1">Adresse e-mail</h5>
                            <p class="mb-0">{{ $settings->email ?? '' }}</p>
                        </div>
                    </div>

                    <div class="mt-4">
                        <h5 class="mb-3">Suivez-nous</h5>
                        {{-- <div class="social-icons">
                            <a href="#"><i class="fab fa-facebook-f"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                            <a href="#"><i class="fab fa-instagram"></i></a>
                            <a href="#"><i class="fab fa-linkedin-in"></i></a>
                        </div> --}}
                        <div class="contact-info-item">
                        @if(!empty($settings->facebook))
                            <div class="contact-icon">
                                <a href="{{ $settings->facebook }}" target="_blank" style="color:white"><i class="fab fa-facebook-f"></i></a>
                            </div>
                        @endif
                        
                        @if(!empty($settings->twitter))
                            <div class="contact-icon">
                                <a href="{{ $settings->twitter }}" target="_blank" style="color:white"><i class="fab fa-twitter"></i></a>
                            </div>
                        @endif
                        
                        @if(!empty($settings->instagram))
                            <div class="contact-icon">
                                <a href="{{ $settings->instagram }}" target="_blank" style="color:white"><i class="fab fa-instagram"></i></a>
                            </div>
                        @endif
                        
                        @if(!empty($settings->linkedin))
                            <div class="contact-icon">
                                <a href="{{ $settings->linkedin }}" target="_blank" style="color:white"><i class="fab fa-linkedin-in"></i></a>
                            </div>
                        @endif
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Section carte -->
<section class="py-5 bg-light">
    <div class="container">
        <h2 class="text-center mb-5">Trouvez-nous sur la carte</h2>
        <div class="map-container">
            <!-- Remplacez par l'intégration réelle de Google Maps -->
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d49770.971664164244!2d30.246365349999998!3d1.5676265!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x17642b5e630902fd%3A0x761881f3260dc950!2sBunia!5e1!3m2!1sen!2scd!4v1747384529167!5m2!1sen!2scd"width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
        </div>
    </div>
</section>
@endsection