@extends('site.layouts.app')
@section('content')
    <!-- Hero Section -->
    @include('site.inc.herosection')
    <!-- Hero Section -->

    <!-- About Us -->
    @include('site.inc.about_us')
    <!-- About Us -->

    <!-- Our Feature -->
    @include('site.inc.features')
    <!-- Our Feature -->

    <!-- Get App -->
    @include('site.inc.get_app')
    <!-- Get App -->

    <!-- Faqs -->
    @include('site.inc.faqs')
    <!-- Faqs -->



    <!-- modals -->
    @include('site.inc.contact_us')
    <!-- modals -->


    <!-- footer -->
    @include('site.inc.footer')
    <!-- footer -->


    <!-- modals -->
    @include('site.inc.modals')
    <!-- modals -->
@endsection

@section('script')
    @include('site.inc.script_submit')

    <script>
        function clearErrors() {
            document.getElementById("errorMessagesName").innerHTML = "";
            document.getElementById("errorMessagesEmail").innerHTML = "";
            document.getElementById("errorMessagesPhone").innerHTML = "";
            document.getElementById("errorMessagesMessage").innerHTML = "";

            document.getElementById("fullName").style.borderColor = "rgba(0, 0, 0, 0.15)";
            document.getElementById("email").style.borderColor = "rgba(0, 0, 0, 0.15)";
            document.getElementById("phone").style.borderColor = "rgba(0, 0, 0, 0.15)";
            document.getElementById("message").style.borderColor = "rgba(0, 0, 0, 0.15)";
        }

        // دالة التحقق من المدخلات
        function validateForm() {
            let isValid = true;
            let errorMessagesName = "";
            let errorMessagesEmail = "";
            let errorMessagesPhone = "";
            let errorMessagesMessage = "";

            const username = document.getElementById("fullName").value.trim();
            const usernameb = document.getElementById("fullName");
            if (username === "") {
                isValid = false;
                errorMessagesName += "<p>{{ __('validation.The field name is required') }}</p>";
                usernameb.style.borderColor = "red";
            }

            const email = document.getElementById("email").value.trim();
            const emailb = document.getElementById("email");
            const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;

             if (email === "") {
                isValid = false;
                errorMessagesEmail += "<p>{{ __('validation.The field email is required') }}</p>";
                emailb.style.borderColor = "red";
            }else if (!emailPattern.test(email)) {
                isValid = false;
                errorMessagesEmail += "<p>{{ __('validation.The field email must be a valid email address') }}</p>";
                emailb.style.borderColor = "red";
            }

            const phoneNum = document.getElementById("phone").value.trim();
            const phoneb = document.getElementById("phone");
            const container_number = document.getElementById("container_number");
            const phonePattern = /^[0-9]{9,15}$/; 

            if (phoneNum === "") {
                isValid = false;
                errorMessagesPhone += "<p>{{ __('validation.The field mobile is required') }}</p>";
                container_number.style.borderColor = "red";
            }else if (!phonePattern.test(phoneNum)) {
                isValid = false;
                errorMessagesPhone += "<p>{{ __('validation.The mobile must be a valid string.') }}</p>";
                container_number.style.borderColor = "red";
            }

            const message = document.getElementById("message").value.trim();
            const messageb = document.getElementById("message");
            if (message === "") {
                isValid = false;
                errorMessagesMessage += "<p>{{ __('validation.The message field is required.') }}</p>";
                messageb.style.borderColor = "red";
            }

            if (!isValid) {
                document.getElementById("errorMessagesName").innerHTML = errorMessagesName;
                document.getElementById("errorMessagesEmail").innerHTML = errorMessagesEmail;
                document.getElementById("errorMessagesPhone").innerHTML = errorMessagesPhone;
                document.getElementById("errorMessagesMessage").innerHTML = errorMessagesMessage;
            }

            return isValid;
        }
    </script>
@endsection