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

@section('styles')
    <link href="{{ asset('/assets/plugin/jquery-nice-select-1.1.0/css/nice-select.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('/assets/css/dropzone.min.css') }}">
    <script src="{{ asset('/assets/js/dropzone.min.js') }}"></script>
@endsection

@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">Devis</span>
            </div>

            <div class="container">
                <div class="section-title section-separator">
                    <h1 class="fw-extra-bold heading-title separator lh-1 display-3">Devis Gratuit</h1>
                    <div>
                        <p class="fs-4 fw-semibold mb-0 subtitle subtitle-width">Obtenez votre devis gratuit sans engagement.</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- section-title-wrapper -->
    </section>
    <!--Section ======================-->


    <!--Section contact-form-section ======================-->
    <section class="contact-section contact-form-section position-relative">
        <div class="container">
            <div class="row justify-content-between gy-5">
                <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('devis.submit') }}" id="devis-form">
                        @csrf
                        <div style="display:none;">
                            <label for="website">Votre site web</label>
                            <input type="text" id="website" name="website" tabindex="-1" autocomplete="off">
                        </div>
                        <div class="col-md-12">
                            <select name="type_projet" id="type_projet">
                                <option value="">Type de projet</option>
                                @foreach ($typesProjet as $projet)
                                    <option value="{{ $projet->id }}">{{ $projet->libelle }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <select name="type_habitation" id="type_habitation">
                                <option value="">Type de logement</option>
                                @foreach ($typesHabitation as $habitation)
                                    <option value="{{ $habitation->id }}">{{ $habitation->libelle }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <select name="type_construction" id="type_construction">
                                <option value="">Type de construction</option>
                                @foreach ($typesConstruction as $construction)
                                    <option value="{{ $construction->id }}">{{ $construction->libelle }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12">
                            <input type="text" class="form-control" id="devisNom" name="devisNom" placeholder="Votre Nom*" required>
                        </div>
                        <div class="col-md-6">
                            <input type="text" class="form-control" id="devisTelephone" name="devisTelephone" placeholder="Téléphone">
                        </div>
                        <div class="col-md-6">
                            <input type="email" class="form-control" id="devisEmail" name="devisEmail" placeholder="Email*" required>
                        </div>
                        <div class="col-md-9">
                            <input type="text" class="form-control" id="devisAdresse" name="devisAdresse" placeholder="Adresse" required>
                        </div>
                        <div class="col-md-3">
                            <input type="text" class="form-control" id="devisCP" name="devisCP" placeholder="Code Postal*" required>
                        </div>
                        <div class="col-12">
                            <textarea class="form-control" id="devisMessage" name="devisMessage" rows="5" placeholder="Ecrivez votre message ici"></textarea>
                        </div>
                        <div class="col-sm-12">
                            <div class="dropzone" id="files-dropzone"></div>
                            <input type="hidden" name="uploadedFiles" id="uploadedFiles">
                        </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 ma demande &nbsp;
                                    <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>
    </section>
    <!--Section contact-form-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 src="{{ asset('/assets/plugin/jquery-nice-select-1.1.0/js/jquery.nice-select.js') }}"></script>

    <script>
        $(document).ready(function() {
            $('select').niceSelect();
        });

        //Gestion du captcha
        document.getElementById('devis-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);
                });
        }

        Dropzone.autoDiscover = false;
        let uploadedFiles = [];
        var myDropzone = new Dropzone("#files-dropzone", {
            url: "{{ route('upload.devis.file') }}",
            maxFilesize: 10, // MB
            addRemoveLinks: true,
            acceptedFiles: ".jpg,.jpeg,.png,.pdf",
            headers: {
                "X-CSRF-TOKEN": "{{ csrf_token() }}"
            },

            dictDefaultMessage: "Déposez vos fichiers ici ou cliquez pour sélectionner",
            dictFallbackMessage: "Votre navigateur ne supporte pas l'upload de fichiers par glisser-déposer.",
            dictFileTooBig: "Le fichier est trop volumineux. Taille max : 10 Mo.",
            dictInvalidFileType: "Ce type de fichier n’est pas autorisé.",
            dictResponseError: "Erreur lors de l’upload du fichier.",
            dictCancelUpload: "Annuler l’upload",
            dictCancelUploadConfirmation: "Êtes-vous sûr de vouloir annuler cet upload ?",
            dictRemoveFile: "Retirer le fichier",
            dictMaxFilesExceeded: "Vous avez atteint le nombre maximal de fichiers.",

            success: function (file, response) {
                uploadedFiles.push(response.fileName);
                document.getElementById("uploadedFiles").value = JSON.stringify(uploadedFiles);
            },
            removedfile: function(file) {
                const name = file.upload.filename;
                uploadedFiles = uploadedFiles.filter(f => f !== name);
                document.getElementById("uploadedFiles").value = JSON.stringify(uploadedFiles);
                file.previewElement.remove();
            }
        });
    </script>
@endsection