@extends('layouts.app')
@section('title', 'Contact - L\'unique Création')
@section('meta_description', $meta_description)

@section('content')

    @if (session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif

    <!--Section ======================-->
    <section class="full-width-section pt-60">
        <div class="section-title-wrapper position-relative">
            <div class="scroll-move">
                <span class="scrolling-text display-1 fw-extra-bold stroke-title text-stroke stroke-opacity-20 stroke-width-1 stroke-primary lh-1">Contact</span>
            </div>

            <div class="container">
                <div class="section-title section-separator">
                    <h1 class="fw-extra-bold heading-title separator lh-1 display-3">Contactez-nous</h1>
                    <div>
                        <p class="fs-4 fw-semibold mb-0 subtitle subtitle-width">Contactez-nous pour donner vie aux espaces de vos rêves.</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- section-title-wrapper -->
    </section>
    <!--Section ======================-->


    <!--Section ======================-->
    <section class="contact-section contact-form-section position-relative">
        <div class="contact-section position-relative">
            <div class="container">
                <div class="row justify-content-between gx-20 gy-30">
                    <div class="col-lg-5">
                        <div class="section-title">
                            <h2 class="fw-extra-bold display-3 lh-1">Vous avez un projet en tête ?</h2>
                        </div>
                    </div>
                    <!-- col-5 -->
                    <div class="col-lg-6">
                        <form class="contact-form row gy-3 gx-20" method="POST" action="{{ route('contact.submit') }}" id="contact-form">
                            @csrf
                            <div class="col-12">
                                <input type="text" class="form-control" id="contactNom" name="contactNom" placeholder="Votre nom*" required>
                            </div>
                            <div class="col-md-6">
                                <input type="text" class="form-control" id="contactTelephone" name="contactTelephone" placeholder="Votre téléphone*">
                            </div>
                            <div class="col-md-6">
                                <input type="email" class="form-control" id="contactEmail" name="contactEmail" placeholder="E-mail *" required>
                            </div>
                            <div class="col-12">
                                <textarea class="form-control" id="contactMessage" name="contactMessage" rows="5" placeholder="Ecrivez votre message ici"></textarea>
                            </div>
                            <div class="col-12">
                                <div class="row">
                                    <div class="col-sm-4">
                                        <!-- Section CAPTCHA -->
                                        <div class="captcha-section">
                                            <img id="captcha-image" src="{{ route('captcha.generate') }}" alt="CAPTCHA" class="img-fluid">
                                        </div>
                                    </div>
                                    <div class="col-sm-8">
                                        <div class="form-group">
                                            <input type="text" name="captcha" class="form-control" required placeholder="Saisissez les caractères de l'image">
                                            <div class="margin-top-10">
                                                <a href="javascript://" type="button" onclick="refreshCaptcha()" class="txtwhite main-lien"><i class="fa fa-refresh" aria-hidden="true"></i> Nouveau code</a> &nbsp;&nbsp; | &nbsp;&nbsp;
                                                <a href="javascript://" type="button" id="captcha-audio-btn" onclick="speakCaptcha()" class="txtwhite main-lien"><i class="fa fa-volume-up" aria-hidden="true"></i> Écouter le CAPTCHA</a>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="col-sm-12">
                                        <div class="form-group">
                                            <div id="erreur_captcha" class="text-danger mt-2"></div>
                                        </div>
                                    </div>
                                    <input type="hidden" id="erreur_captcha_input" value="1">
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="text-lg-end">
                                    <button type="submit" class="btn btn-outline-primary  gap-10">Envoyer message
                                        <svg width="35" height="22" viewBox="0 0 35 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path fill-rule="evenodd" clip-rule="evenodd" d="M24 0.585815L34.4142 10.9999L24 21.4142L22.5858 20L30.5857 12L0 12L2.38419e-07 10L30.5858 10L22.5858 2.00003L24 0.585815Z"/>
                                        </svg>
                                    </button>
                                </div>
                            </div>
                            <div class="response py-3"></div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--Section ======================-->

    <!--Certification Section ======================-->
    @include('zone-intervention-light')
    <!--Certification Section ======================-->

    <!--Portfolio-Section ======================-->
    @include('portfolio')
    <div class="pb-160"></div>
    <!--Portfolio-Section ======================-->

@endsection

@section('scripts')

    <script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@1.0.29/bundled/lenis.min.js"></script>
    <script src="{{ asset('/assets/js/jquery-3.7.0.min.js') }}"></script>
    <script src="{{ asset('/assets/js/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ asset('/assets/js/jquery.magnific-popup.min.js') }}"></script>
    <script src="{{ asset('/assets/js/wow.min.js') }}"></script>
    <script src="{{ asset('/assets/js/jquery.progressScroll.min.js') }}"></script>
    <script src="{{ asset('/assets/js/script.js') }}"></script>

    <script>
        //Gestion du captcha
        document.getElementById('contact-form').addEventListener('submit', function (e) {
            e.preventDefault();

            const captchaInput = document.querySelector('input[name="captcha"]');
            const erreurCaptcha = document.getElementById('erreur_captcha');
            const form = this;

            erreurCaptcha.innerText = '';
            captchaInput.classList.remove('is-invalid');

            // Si vide ou trop court, on bloque direct
            if (!captchaInput.value || captchaInput.value.length < 6) {
                erreurCaptcha.innerText = "Veuillez saisir le code CAPTCHA complet.";
                captchaInput.classList.add('is-invalid');
                return;
            }

            // On récupère le texte réel en session via /captcha-text
            fetch('/captcha-text')
                .then(response => response.json())
                .then(data => {
                    const inputCode = captchaInput.value.trim().toLowerCase();
                    const realCode = data.text.trim().toLowerCase();

                    if (inputCode === realCode) {
                        form.submit(); // ✅ Le code est bon
                    } else {
                        erreurCaptcha.innerText = "Le code CAPTCHA est incorrect.";
                        captchaInput.classList.add('is-invalid');
                    }
                })
                .catch(() => {
                    erreurCaptcha.innerText = "Erreur lors de la vérification du code.";
                });
        });

        function refreshCaptcha() {
            const img = document.getElementById('captcha-image');
            img.src = "{{ route('captcha.generate') }}?" + Date.now(); // Bypass cache
        }

        function speakCaptcha() {
            fetch('/captcha-text')
                .then(response => response.json())
                .then(data => {
                    const text = data.text.split('').join(', ');
                    const utterance = new SpeechSynthesisUtterance(text);
                    speechSynthesis.speak(utterance);
                });
        }
    </script>
@endsection