@model CreateContactUsDto

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>

<section class="section novi-background bg-cover bg-white section-inset-1 parallax-scene-js" id="contacts">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-6 d-none d-lg-block wow fadeInLeft">
                <img src="~/SeedData/ContactForm_Image-1.png" alt="" width="538" height="694" />
            </div>
            <div class="col-md-8 col-lg-6">
                <div class="inset-xl-left-35 section-sm">
                    <h3 class="wow fadeInRight">Bize<br>Ulaşın</h3>
                    <h6 class="title-style-1 wow fadeInRight" data-wow-delay=".05s"
                        style="background-color: #ffffff; display: inline-block; padding: 5px 10px; border-radius: 6px;">
                        Gelin Birlikte Çalışalım!
                    </h6>

                    <div class="form-style-1 context-dark wow blurIn">
                        <!-- RD Mailform-->
                        <form method="post" class="rd-mailform text-left" id="contactForm">
                            <div class="form-wrap">
                                <input class="form-input" placeholder="Adınız Soyadınız" asp-for="NameSurname" id="nameInput" required />
                                <span asp-validation-for="NameSurname" class="text-danger"></span>
                            </div>
                            <div class="form-wrap">
                                <input class="form-input" placeholder="e-posta Adresiniz" asp-for="Mail" id="emailInput" required />
                                <span asp-validation-for="Mail" class="text-danger"></span>
                            </div>
                            <div class="form-wrap">
                                <input class="form-input" placeholder="Telefonunuz" asp-for="Phone" id="phoneInput" required />
                                <span asp-validation-for="Phone" class="text-danger"></span>
                            </div>
                            <div class="form-wrap">
                                <textarea class="form-input" placeholder="Mesajınız" asp-for="MessageContent" id="messageInput" required></textarea>
                                <span asp-validation-for="MessageContent" class="text-danger"></span>
                            </div>
                            <div class="form-wrap">
                                <div class="g-recaptcha" data-sitekey="6LeH2M8qAAAAAHbDq0txKL7O48Wo9vgHvkXP7_-X"></div>
                            </div>

                            <div class="form-button">
                                <button class="button button-jerry button-primary" type="button" id="sendMessageButton">
                                    Gönder<span class="button-jerry-line"></span><span class="button-jerry-line"></span><span class="button-jerry-line"></span><span class="button-jerry-line"></span>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layer-wrap layer-3">
        <div class="layer" data-depth="0.4">
            <img src="~/SeedData/ContactForm_bg.png" alt="" width="1047" height="531" />
        </div>
    </div>
</section>


<script>
    document.addEventListener("DOMContentLoaded", function () {
        var contacts = document.getElementById('contacts');
        var parallaxInstance = new Parallax(contacts);
    });
</script>


<script>
    $(document).on("click", "#sendMessageButton", function () {
            var isValid = true;

            // Form elemanlarını al
            var name = $("#nameInput").val().trim();
            var email = $("#emailInput").val().trim();
            var phone = $("#phoneInput").val().trim();
            var message = $("#messageInput").val().trim();

            // Önce tüm hata stillerini temizle
            $(".form-input").removeClass("input-error");

            // Boş alan kontrolü
            if (!name) {
                $("#nameInput").addClass("input-error");
                isValid = false;
            }
            if (!email) {
                $("#emailInput").addClass("input-error");
                isValid = false;
            }
            if (!phone) {
                $("#phoneInput").addClass("input-error");
                isValid = false;
            }
            if (!message) {
                $("#messageInput").addClass("input-error");
                isValid = false;
            }

            if (!isValid) {
                alert("Lütfen tüm alanları doldurunuz.");
                return;
            }

        // Email doğrulaması
        if (isValid && !validateEmail(email)) {
            isValid = false;
            errorMessage = "Geçerli bir email adresi giriniz.";
        }


            // Telefon formatı kontrolü
            if (!/^\d{3} \d{3} \d{2} \d{2}$/.test(phone)) {
                $("#phoneInput").addClass("input-error");
                alert("Telefon numarası sadece şu formatta olmalıdır: 555 111 22 33");
                return;
            }

         // reCAPTCHA doğrulaması
        var recaptchaResponse = grecaptcha.getResponse();
        if (isValid && recaptchaResponse.length == 0) {
            isValid = false;
            errorMessage = "Lütfen reCAPTCHA doğrulamasını yapın.";
        }

        // Hata mesajını gösterme
        if (!isValid) {
            alert(errorMessage);
            return;
        }

            // Form verisi
            var contactData = {
                NameSurname: name,
                Mail: email,
                Phone: phone,
                MessageContent: message,
                RecaptchaResponse: recaptchaResponse
            };

            // AJAX ile gönderim
            $.ajax({
                url: '@ViewBag.ApiBaseUrl/api/ContactUs',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(contactData),
                success: function () {
                    alert("Mesajınız başarıyla gönderildi. En kısa sürede sizinle iletişime geçeceğiz!");
                    $("#contactForm")[0].reset();
                    grecaptcha.reset(); // reCAPTCHA sıfırlanır
                },
                error: function () {
                    alert("Mesaj gönderilirken bir hata oluştu. Lütfen daha sonra tekrar deneyin.");
                }
            });
        });

            // Email doğrulama fonksiyonu
    function validateEmail(email) {
        var regex = /^[a-zA-Z0-9._-]+@@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
        return regex.test(email);
    }

</script>
<style>
    .input-error {
        border: 2px solid #c4956a !important;
    }
</style>