@extends('layouts.app')

@section('title', 'Accueil')

@section('content')
    <!-- Carousel Start -->
    <div class="container-fluid p-0">
        <div id="header-carousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img class="w-100" src="{{ asset('assets/img/carousel-1.jpg') }}" alt="Image">
                    <div class="carousel-caption d-flex flex-column align-items-center justify-content-center">
                        <div class="p-3" style="max-width: 900px;"> <i
                                class="fa fa-home fa-4x text-primary mb-4 d-none d-sm-block"></i>
                            <h1 class="display-2 text-uppercase text-white mb-md-4">Solutions d'Ingénierie Intégrées</h1>
                            <p class="text-white mb-md-4">Expert en Électricité, Climatisation et Génie Civil</p>
                            <a href="{{ route('contact.index') }}"
                                class="btn btn-primary py-md-3 px-md-5 mt-2 me-2">Contactez-nous</a>
                            <a href="{{ route('quotes.create') }}"
                                class="btn btn-outline-light py-md-3 px-md-5 mt-2">Demander un devis</a>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <img class="w-100" src="{{ asset('assets/img/carousel-2.jpg') }}" alt="Image">
                    <div class="carousel-caption d-flex flex-column align-items-center justify-content-center">
                        <div class="p-3" style="max-width: 900px;"> <i
                                class="fa fa-tools fa-4x text-primary mb-4 d-none d-sm-block"></i>
                            <h1 class="display-2 text-uppercase text-white mb-md-4">Innovation & Excellence Technique</h1>
                            <p class="text-white mb-md-4">Des Solutions Innovantes pour Vos Projets</p>
                            <a href="{{ route('contact.index') }}"
                                class="btn btn-primary py-md-3 px-md-5 mt-2 me-2">Contactez-nous</a>
                            <a href="{{ route('quotes.create') }}"
                                class="btn btn-outline-light py-md-3 px-md-5 mt-2">Demander un devis</a>
                        </div>
                    </div>
                </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#header-carousel" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Précédent</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#header-carousel" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Suivant</span>
            </button>
        </div>
    </div>
    <!-- Carousel End -->

    <!-- About Start -->
    <div class="container-fluid py-6 px-5">
        <div class="row g-5">
            <div class="col-lg-7">
                <h1 class="display-5 text-uppercase mb-4">Votre Partenaire en <span class="text-primary">Solutions
                        Techniques</span> Intégrées</h1>
                <h4 class="text-uppercase mb-3 text-body">Excellence et Innovation à votre service</h4>
                <p>2ECG est une entreprise leader en ingénierie et solutions techniques, offrant une expertise complète à
                    travers
                    9 domaines d'activité. Notre équipe d'experts qualifiés s'engage à fournir des solutions innovantes et
                    durables pour tous vos projets.</p>
                <div class="row gx-5 py-2">
                    @foreach ($expertiseDomains->chunk(ceil($expertiseDomains->count() / 2)) as $chunk)
                        <div class="col-sm-6 mb-2">
                            @foreach ($chunk as $domain)
                                <p class="fw-bold mb-2">
                                    <i class="fa {{ $domain->icon }} text-primary me-3"></i>
                                    {{ $domain->name }}
                                </p>
                            @endforeach
                        </div>
                    @endforeach
                </div>
                <p class="mb-4">Basés à Lomé et intervenant dans tout le Togo, nous mettons notre expertise technique et
                    notre
                    engagement qualité au service de vos projets. Contactez 2ECG pour des solutions sur mesure et un
                    accompagnement
                    professionnel.</p>
                <a href="{{ route('about') }}" class="btn btn-primary py-3 px-5">En savoir plus</a>
            </div>
            <div class="col-lg-5 pb-5" style="min-height: 400px;">
                <div class="position-relative bg-dark-radial h-100 ms-5">
                    <img class="position-absolute w-100 h-100 mt-5 ms-n5" src="{{ asset('assets/img/about.jpg') }}"
                        style="object-fit: cover;">
                </div>
            </div>
        </div>
    </div>
    <!-- About End -->

    <!-- Services Start -->
    <div class="container-fluid bg-light py-6 px-5">
        <div class="text-center mx-auto mb-5" style="max-width: 600px;">
            <h1 class="display-5 text-uppercase mb-4">Nos <span class="text-primary">services</span> professionnels</h1>
        </div>
        <div class="row g-5">
            @foreach ($services->take(3) as $service)
                <div class="col-lg-4 col-md-6">
                    <div class="service-item bg-white d-flex flex-column align-items-center text-center">
                        <img class="img-fluid" src="{{ asset($service->image) }}" alt="{{ $service->title }}">
                        <div class="service-icon bg-white">
                            <i class="fa fa-3x {{ $service->icon ?? 'fa-cogs' }} text-primary"></i>
                        </div>
                        <div class="px-4 pb-4">
                            <h4 class="text-uppercase mb-3">{{ $service->title }}</h4>
                            <p>{{ Str::limit($service->description, 100) }}</p>
                            <a class="text-uppercase fw-bold" href="{{ route('services.show', $service->slug) }}">Lire plus
                                <i class="bi bi-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
    <!-- Services End -->

    <!-- Projects Start -->
    <div class="container-fluid py-6 px-5">
        <div class="text-center mx-auto mb-5" style="max-width: 600px;">
            <h1 class="display-5 text-uppercase mb-4">Nos <span class="text-primary">projets</span> récents</h1>
        </div>
        <div class="row g-5">
            @foreach ($projects->take(3) as $project)
                <div class="col-lg-4 col-md-6">
                    <div class="service-item bg-light d-flex flex-column align-items-center text-center">
                        <img class="img-fluid" src="{{ asset($project->cover_image) }}" alt="{{ $project->title }}">
                        <div class="service-icon">
                            <i class="fa fa-3x fa-industry text-primary"></i>
                        </div>
                        <div class="px-4 pb-4">
                            <h4 class="text-uppercase mb-3">{{ $project->title }}</h4>
                            <p>{{ Str::limit($project->description, 100) }}</p>
                            <a class="text-uppercase fw-bold" href="{{ route('projects.show', $project->slug) }}">Voir
                                détails <i class="bi bi-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
        <div class="row mt-4">
            <div class="col-12 text-center">
                <a href="{{ route('projects.index') }}" class="btn btn-primary px-5 py-3 text-uppercase fw-bold">Voir
                    tous les projets</a>
            </div>
        </div>
    </div>
    <!-- Projects End -->

    <!-- Contact Start -->
    <div class="container-fluid bg-light py-6 px-5">
        <div class="text-center mx-auto mb-5" style="max-width: 600px;">
            <h1 class="display-5 text-uppercase mb-4">Contactez-<span class="text-primary">nous</span> pour un devis
                gratuit</h1>
        </div>
        @if (session('success'))
            <div class="alert alert-success position-sticky top-0 start-50 translate-middle-x" style="z-index:9999;">
                {{ session('success') }}
            </div>
        @endif
        <div aria-live="polite" aria-atomic="true" class="position-fixed top-0 end-0 p-3"
            style="z-index: 2000; min-width: 300px;">
            <div id="contact-success-toast" class="toast align-items-center text-bg-success border-0" role="alert"
                aria-live="assertive" aria-atomic="true">
                <div class="d-flex">
                    <div class="toast-body" id="contact-success-toast-body">
                        <!-- Message JS -->
                    </div>
                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
                        aria-label="Fermer"></button>
                </div>
            </div>
        </div>
        <div class="row g-5">
            <div class="col-lg-7 col-md-6">
                <form id="contact-form-home" action="{{ route('contact.store') }}" method="POST">
                    @csrf
                    <div class="row g-3">
                        <div class="col-12">
                            <input type="text" name="name" class="form-control border border-primary bg-light px-4"
                                placeholder="Votre nom" style="height: 55px;" required>
                        </div>
                        <div class="col-12">
                            <input type="email" name="email" class="form-control border border-primary bg-light px-4"
                                placeholder="Votre email" style="height: 55px;" required>
                        </div>
                        <div class="col-12">
                            <input type="text" name="phone" class="form-control border border-primary bg-light px-4"
                                placeholder="Votre téléphone" style="height: 55px;" required>
                        </div>
                        <div class="col-12">
                            <input type="text" name="subject" class="form-control border border-primary bg-light px-4"
                                placeholder="Sujet" style="height: 55px;" required>
                        </div>
                        <div class="col-12">
                            <textarea name="message" class="form-control border border-primary bg-light px-4 py-3" rows="5"
                                placeholder="Message" required></textarea>
                        </div>
                        <div class="col-12">
                            <button class="btn btn-primary w-100 py-3" type="submit">Envoyer</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-lg-5 col-md-6">
                <div class="d-flex align-items-center">
                    <div class="d-flex flex-shrink-0 align-items-center justify-content-center bg-white"
                        style="width: 60px; height: 60px;">
                        <i class="bi bi-geo-alt fs-4 text-primary"></i>
                    </div>
                    <div class="ms-4">
                        <p class="mb-2">Notre adresse</p>
                        <h5 class="mb-0">AGOE - KOVE, Lomé, Togo</h5>
                    </div>
                </div>
                <div class="d-flex align-items-center mt-4">
                    <div class="d-flex flex-shrink-0 align-items-center justify-content-center bg-white"
                        style="width: 60px; height: 60px;">
                        <i class="bi bi-envelope-open fs-4 text-primary"></i>
                    </div>
                    <div class="ms-4">
                        <p class="mb-2">Notre email</p>
                        <h5 class="mb-0">eecg.contact@gmail.com</h5>
                    </div>
                </div>
                <div class="d-flex align-items-center mt-4">
                    <div class="d-flex flex-shrink-0 align-items-center justify-content-center bg-white"
                        style="width: 60px; height: 60px;">
                        <i class="bi bi-phone-vibrate fs-4 text-primary"></i>
                    </div>
                    <div class="ms-4">
                        <p class="mb-2">Appelez-nous</p>
                        <h5 class="mb-0"><a href="tel:+22891623533">(+228) 91 62 35 33</a> / <a
                                href="tel:+22897550570">97 55 05 70</a></h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Contact End -->

    <!-- Quote CTA Start -->
    <div class="container-fluid bg-primary text-white py-5 my-6 px-5">
        <div class="row g-5 align-items-center">
            <div class="col-lg-8">
                <h1 class="display-4 text-uppercase mb-4">Besoin d'un devis pour votre projet ?</h1>
                <p class="fs-5 mb-4">Nous vous proposons des solutions sur mesure adaptées à vos besoins. Demandez votre
                    devis gratuit dès maintenant.</p>
                <p class="mb-4">
                    <i class="fa fa-check text-white me-2"></i>Réponse rapide
                    <i class="fa fa-check text-white mx-2"></i>Devis détaillé
                    <i class="fa fa-check text-white mx-2"></i>Prix compétitifs
                </p>
            </div>
            <div class="col-lg-4">
                <div
                    class="d-flex flex-column align-items-center justify-content-center text-center h-100 bg-white px-5 py-5">
                    <h4 class="text-uppercase mb-3">Demandez un devis</h4>
                    <p>Cliquez ci-dessous pour commencer</p>
                    <a href="{{ route('quotes.create') }}" class="btn btn-primary py-3 px-5">Demander un devis</a>
                </div>
            </div>
        </div>
    </div>
    <!-- Quote CTA End -->
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('contact-form-home');
            if (form) {
                form.addEventListener('submit', function(e) {
                    e.preventDefault();
                    const formData = new FormData(form);
                    fetch(form.action, {
                            method: 'POST',
                            headers: {
                                'X-Requested-With': 'XMLHttpRequest',
                                'X-CSRF-TOKEN': formData.get('_token'),
                            },
                            body: formData
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                const toastBody = document.getElementById('contact-success-toast-body');
                                toastBody.textContent = data.message;
                                const toastEl = document.getElementById('contact-success-toast');
                                const toast = new bootstrap.Toast(toastEl, {
                                    delay: 4000
                                });
                                toast.show();
                                form.reset();
                            }
                        });
                });
            }
        });
    </script>
@endpush