@extends("website.layouts.layout")
@section('title',"Contact Us")
@section("body")
<style>
    .contact-center{
        margin-top: 8rem !important;
        margin-left: 5rem !important;
    }
</style>
<!-- banner background image starts -->
<section class="banner-services">
    <img class="banner-background-ellipse" src="./assets/images/banner-bg-img.png" alt="">
</section>
<!--- services section -->
<section class="services-breadcrumb-section dashboard-breadcrumb">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{route('homepage')}}">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">Contact us</li>
            </ol>
        </nav>

    </div>
</section>
<section class="contact-us-form">
    <div class="container">
        <div class="contact-us-block row">
            <div class="col-lg-6">
                <div class="contact-inner-block row flex-column gap-5 contact-center ">
                    <div class="contact-us-heading">
                        <h4>Contact Us</h4>
                    </div>
                    <div class=" conatct-details address-block d-flex gap-2">
                        <svg preserveAspectRatio="xMidYMid meet" data-bbox="53.5 36.5 93 127" viewBox="53.5 36.5 93 127"
                            height="25" width="25" xmlns="http://www.w3.org/2000/svg" data-type="color"
                            role="presentation" aria-hidden="true" aria-label="">
                            <defs>
                                <style>
                                #comp-lnm94ha91 svg [data-color="1"] {
                                    fill: #FFFFFF;
                                }
                                </style>
                            </defs>
                            <g>
                                <path
                                    d="M99.999 163.5l-3.25-3.895C94.986 157.487 53.5 107.468 53.5 82.916 53.5 57.323 74.359 36.5 99.999 36.5c25.644 0 46.501 20.823 46.501 46.416 0 24.551-41.483 74.571-43.252 76.688l-3.249 3.896zm0-118.56c-20.978 0-38.046 17.036-38.046 37.977 0 16.359 25.019 51.015 38.046 67.305 13.029-16.29 38.048-50.946 38.048-67.305 0-20.942-17.068-37.977-38.048-37.977z"
                                    fill="#2F54DD" data-color="1"></path>
                                <path
                                    d="M99.999 101.658c-10.351 0-18.775-8.407-18.775-18.741 0-10.335 8.424-18.743 18.775-18.743 10.353 0 18.777 8.408 18.777 18.743 0 10.333-8.424 18.741-18.777 18.741zm0-29.046c-5.69 0-10.32 4.621-10.32 10.304 0 5.68 4.63 10.303 10.32 10.303 5.692 0 10.324-4.622 10.324-10.303 0-5.682-4.632-10.304-10.324-10.304z"
                                    fill="#2F54DD" data-color="1"></path>
                            </g>
                        </svg>

                        <!-- <p>5750 Dow Avenue Alexandria, VA 22304</p> -->
                        <p>
                    <a href="https://www.google.com/maps/search/?api=1&query=5750+Dow+Avenue+Alexandria+VA+22304" target="_blank">
                        5750 Dow Avenue Alexandria, VA 22304
                    </a>
                </p>
                    </div>
                    <div class=" conatct-details phone-block d-flex gap-2">
                        <svg preserveAspectRatio="xMidYMid meet" data-bbox="38.999 39 122.001 122"
                            viewBox="38.999 39 122.001 122" height="25" width="25" xmlns="http://www.w3.org/2000/svg"
                            data-type="color" role="presentation" aria-hidden="true" aria-label="">
                            <defs>
                                <style>
                                #comp-lnm94hac1 svg [data-color="1"] {
                                    fill: #FFFFFF;
                                }
                                </style>
                            </defs>
                            <g>
                                <path
                                    d="M66.248 47.383c2.234 0 4.783.813 6.746 3.742 5.289 7.88 10.39 15.304 13.215 20.359.956 1.715 1.884 6.569-1.238 10.083-2.696 3.029-5.074 3.772-6.511 5.984-.985 1.524-2.11 4.931-.259 8.848 2.213 4.678 4.913 8.52 10.838 14.54 6.018 5.917 9.859 8.615 14.546 10.829 1.53.722 2.984.99 4.276.99 2.019 0 3.647-.651 4.573-1.249 2.213-1.434 2.958-3.812 5.989-6.507 1.827-1.621 4.014-2.15 5.935-2.15 1.779 0 3.33.454 4.152.916 5.057 2.82 12.484 7.919 20.372 13.203 5.532 3.707 3.515 9.499 2.736 11.32-.783 1.821-4.788 7.847-13.4 12.352-2.37 1.239-5.497 1.974-9.288 1.974-11.935 0-30.424-7.304-52.356-29.225-28.895-28.88-32.402-51.787-27.261-61.607 4.506-8.61 10.536-12.613 12.36-13.392.854-.368 2.589-1.01 4.575-1.01zm0-8.383c-3.278 0-6.106.923-7.9 1.699C54.8 42.211 47.294 47.555 41.88 57.9c-6.765 12.922-3.295 39.381 28.762 71.419C98.22 156.883 118.998 161 128.929 161c5.024 0 9.457-.987 13.175-2.93 10.331-5.404 15.687-12.899 17.222-16.475 3.579-8.37 1.312-16.839-5.772-21.589-1.216-.813-2.421-1.623-3.606-2.42-6.566-4.414-12.769-8.585-17.35-11.141-2.239-1.252-5.244-1.975-8.238-1.977-4.382 0-8.36 1.473-11.504 4.264-2.088 1.855-3.389 3.574-4.34 4.827-.196.259-.44.582-.628.813h-.027c-.197 0-.43-.062-.694-.187-3.482-1.644-6.597-3.675-12.199-9.178-5.508-5.6-7.54-8.714-9.185-12.193-.152-.321-.191-.558-.189-.718.231-.188.557-.433.817-.63 1.255-.95 2.973-2.249 4.826-4.33 5.306-5.974 5.143-14.623 2.3-19.731-2.579-4.614-6.782-10.857-11.234-17.465-.772-1.148-1.557-2.312-2.346-3.487C76.736 41.648 71.866 39 66.248 39z"
                                    fill="#2F54DD" data-color="1"></path>
                            </g>
                        </svg>

                        <!-- <p>+1 (202) 413-2591</p> -->
                                        <p>
                        <a href="tel:+12024132591">+1 (202) 413-2591</a>
                    </p>
                    </div>
                    <div class=" conatct-details email-block d-flex gap-2">
                        <svg preserveAspectRatio="xMidYMid meet" data-bbox="35 56 130 88" viewBox="35 56 130 88"
                            height="25" width="25" xmlns="http://www.w3.org/2000/svg" data-type="color"
                            role="presentation" aria-hidden="true" aria-label="">
                            <defs>
                                <style>
                                #comp-lnm94hae1 svg [data-color="1"] {
                                    fill: #FFFFFF;
                                }
                                </style>
                            </defs>
                            <g>
                                <path
                                    d="M35 56v88h130V56H35zm64.879 58.87L49.15 64.499h101.455L99.879 114.87zM72.191 99.311l-28.755 30.025V70.757l28.755 28.554zm6.009 5.967l21.679 21.525 21.677-21.525 28.93 30.224H49.254L78.2 105.278zm49.364-5.967l29-28.796v59.092l-29-30.296z"
                                    fill="#2F54DD" data-color="1"></path>
                            </g>
                        </svg>
                        <p>
                            <a href="mailto:contact@skillram.com">contact@skillram.com</a>
                        </p>
                                            <!-- <p>contact@skillram.com</p> -->
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                
                <div class="sign-up-form">
                    <form method="POST" action="{{route('support.contact-us')}}" enctype="multipart/form-data" id="contact-form">
                        <div class="form-name-field gap-3">
                            <div class="name-block">
                                <label for="first_name">Name</label>
                                <input type="text" name="first_name" id="first_name" class="w-100" placeholder="Name">
                            </div>
                            <div class="phone-block contact-us">
                                <label for="phone">Phone</label>
                                <span class="phone">
                                    <div class="phone-img-col d-flex">
                                        <img src="{{asset('webAssets/assets/images/dropdown.svg')}}" alt="country">+1
                                    </div>
                                    <input type="text" placeholder="Phone Number" id="phone" class="w-100" name="phone">
                                </span>
                            </div>
                        </div>
                        @csrf
                        <div class="email-block d-flex flex-column gap-1">
                            <label for="email">Email</label>
                            <input type="text" placeholder="Email" name="email" id="contact_email">
                        </div>
                        <div class="select">
                            <h6 class="heading">Purpose to Connect</h6>
                            <select class="form-select form-select-lg mb-3" aria-label="Large select example" id="registering_as" name="registering_as">
                                <option value="">Choose reason to connect</option>
                                <option value="Client">Client</option>
                                <option value="Provider">Service Provider</option>
                                <option value="Client Registration">Client Registration</option>
                                <option value="Service Provider Registration">Service Provider Registration</option>
                                <!-- <option value="Account">Account</option> -->
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="exampleFormControlTextarea1">Message</label>
                            <textarea class="form-control" id="exampleFormControlTextarea1" name="message" rows="3"></textarea>
                        </div>
                  
                        <!-- Submit Button -->
                        <div class="submit-button">
                            <button type="submit" id="contactFormBtn" class="btn btn-primary w-100">Submit</button>
                        </div>
                    </form>
                </div>

               
            </div>
            <hr class="mt-5 mb-5 spacer"/>
            <div class="col-lg-12 map-col mb-3">
    <div id="map" style="height: 300px;"></div>
</div>
        </div>
    </div>

</section>
<script>
    document.addEventListener('DOMContentLoaded', function() {

        const Contactform = document.getElementById('contact-form');

        // Function to show error message
        function showErrorContact(input, message) {
            clearError(input); // Clear any existing error message
            const error = document.createElement('div');
            error.className = 'error-message';
            error.style.color = 'red';
            error.innerText = message;
            input.parentNode.insertBefore(error, input.nextSibling); // Place error below the input
        }

        // Function to clear error message
        function clearErrorContact(input) {
            const error = input.parentNode.querySelector('.error-message');
            if (error) {
                error.remove();
            }
        }

        // Validate input on input event
        function validateInputContact(target) {
            if (target.matches('input[id="first_name"]')) {
                clearErrorContact(target);
                if (!target.value.trim()) {
                    showErrorContact(target, 'Name is required.');
                }
            }

            if (target.matches('input[id="contact_email"]')) {
                clearErrorContact(target);
                const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                if (!emailPattern.test(target.value.trim())) {
                    showErrorContact(target, 'Please enter a valid email address.');
                }
            }

            if (target.matches('input[id="phone"]')) {
                clearErrorContact(target);
                target.value = target.value.replace(/\D/g, '');
                if (!target.value.trim()) {
                    valid = false;
                    showErrorContact(target, 'Phone Number is required.');
                } else if (target.value.length !== 10) {
                    valid = false;
                    showErrorContact(target, 'Phone Number must be exactly 10 digits.');
                }
            }

            if (target.matches('select[id="registering_as"]')) {
                clearErrorContact(target);
                if (!target.value.trim()) {
                    showErrorContact(target, 'Purpose to Connect is required.');
                }
            }
            if (target.matches('textarea[id="exampleFormControlTextarea1"]')) {
                clearErrorContact(target);
                if (!target.value.trim()) {
                    showErrorContact(target, 'Message is required.');
                }
            }
        }

        // Validate on input
        Contactform.addEventListener('input', function(event) {
            const target = event.target;
            validateInputContact(target);
        });

        // Validate on blur
        Contactform.addEventListener('blur', function(event) {
            const target = event.target;
            validateInputContact(target);
        }, true); // Use capture phase to catch events on child inputs

        Contactform.addEventListener('submit', function(event) {
            event.preventDefault(); // Prevent default form submission
            let valid = true;
            const selectingElement = document.getElementById('registering_as');
            const messageElement = document.getElementById('exampleFormControlTextarea1');

            // Clear previous error messages
            const errorMessages = document.querySelectorAll('.error-message');
            errorMessages.forEach(msg => msg.remove());

        
            Contactform.querySelectorAll('input').forEach(input => {
                if (input.matches('input[id="first_name"]') && !input.value.trim()) {
                    valid = false;
                    showErrorContact(input, 'First Name is required.');
                }
                if (input.matches('input[id="contact_email"]')) {
                    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                    if (!emailPattern.test(input.value.trim())) {
                        valid = false;
                        showErrorContact(input, 'Please enter a valid email address.');
                    }
                }
                if (input.matches('input[id="phone"]') && !input.value.trim()) {
                    valid = false;
                    showErrorContact(input, 'Phone Number is required.');
                }
                // Validate select element
                if (!selectingElement.value.trim()) {
                    valid = false;
                    showErrorContact(selectingElement, 'Purpose to Connect is required.');
                }

                // Validate textarea
                if (!messageElement.value.trim()) {
                    valid = false;
                    showErrorContact(messageElement, 'Message is required.');
                }
            });

            // If valid, submit the form
            if (valid) {
                var btnClient = document.getElementById("contactFormBtn");
                btnClient.setAttribute('disabled', 'disabled');
                btnClient.innerHTML = ' <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>Sending ...';
                Contactform.submit(); // Submit the form if everything is valid
            }
        });
    });
</script>
<script type="text/javascript">
    function initMap() {
        // Coordinates for the specific address
        var myLatLng = { lat: 38.8187, lng: -77.1266 };

        // Create a map object centered on the coordinates
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 15,
            center: myLatLng
        });

        // Add a marker to the map
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            title: '5750 Dow Avenue, Alexandria, VA 22304'
        });
    }
    // Load the map when the window loads
    window.onload = function() {
        initMap();
    };
</script>
@endsection
@section('footerItems')
@endsection