@extends('layout.master')
@section('content')
@section('title','Contact us')
@include('layout.header')

    {{-- <section class="section partnerSection mdSectionArea">
        <div class="container">
            <div class="row ">
                <div class="col-md-6">
                    <h1 class="sectionTitle  mdTile">Our awards</h1>
                    <div class="partnerFlexBar">
                        <img src="assets/images/partner-logo-1.png" alt="" class="partnerLogo">
                        <img src="assets/images/partner-logo-2.png" alt="" class="partnerLogo">
                        <img src="assets/images/partner-logo-3.png" alt="" class="partnerLogo">
                        <img src="assets/images/partner-logo-4.png" alt="" class="partnerLogo">
                        <img src="assets/images/partner-logo-5.png" alt="" class="partnerLogo">

                    </div>
                </div>
            </div>
        </div>
    </section> --}}

    <section class="section">
        <div class="container">
            <div class="sectionDarkCard formDarkSection">
                <div class="row algnItem-C">
                    <div class="col-md-6">
                        <div class="formContentBox">
                            <img src="assets/images/mail-rocket-img.svg" class="formRocketImg">
                            <h1 class="sectionMDTitle wieght700 clrWt mb-4">From start-ups to large enterprises</h1>
                            <p class="pMdTest clrWtDim  mb-5">
                                Tell us about your needs. Together we can build a long-term partnership that
                                will take your business to the bright future.
                            </p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div>
                            <div wire:id="7QdkGMT8GWKMr14kLFAK"
                                wire:initial-data="{&quot;fingerprint&quot;:{&quot;id&quot;:&quot;7QdkGMT8GWKMr14kLFAK&quot;,&quot;name&quot;:&quot;contact-us&quot;,&quot;locale&quot;:&quot;en&quot;,&quot;path&quot;:&quot;industries&quot;,&quot;method&quot;:&quot;GET&quot;,&quot;v&quot;:&quot;acj&quot;},&quot;effects&quot;:{&quot;listeners&quot;:[]},&quot;serverMemo&quot;:{&quot;children&quot;:[],&quot;errors&quot;:[],&quot;htmlHash&quot;:&quot;226a5d8f&quot;,&quot;data&quot;:{&quot;name&quot;:null,&quot;email&quot;:null,&quot;contact_no&quot;:null,&quot;company&quot;:null,&quot;project_details&quot;:null,&quot;darkLayoutClass&quot;:&quot;updateForm&quot;},&quot;dataMeta&quot;:[],&quot;checksum&quot;:&quot;b0f56a6348ee33b93571361de0bdda72f9b76ce42c7062d82d0b0660e42efb20&quot;}}"
                                class="updateForm">
                                <form id="contactForm" class="formCardArea">
                                    @csrf
                                    <div class="formCardAreaContainer">
                                        <h4>Let’s Talk.</h4>
                                        <p>Have a question or want to learn more about our services? Contact us today, we will be happy to assist you.</p>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <input type="text" name="name" id="name" class="form-control inputField" placeholder="Your Name" required>
                                            </div>
                                            <div class="col-md-6">
                                                <input type="email" name="email" id="email" class="form-control inputField" placeholder="Email Address" required>
                                            </div>
                                            <div class="col-md-6">
                                                <input type="text" name="contact_no" id="contact_no" class="form-control inputField" placeholder="Contact No" required>
                                            </div>
                                            <div class="col-md-6">
                                                <input type="text" name="company" id="company" class="form-control inputField" placeholder="Company">
                                            </div>
                                            <div class="col-md-12">
                                                <textarea class="form-control inputField textAreaField" rows="5" id="project_details" name="project_details" placeholder="About your Project" required></textarea>
                                            </div>
                                            <div class="col-md-12 frmBtnBar">
                                                <div id="formStatus"></div> &nbsp;&nbsp;
                                                <input type="submit" class="submitBtn fillBtn" value="Submit">
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>

                            <!-- Livewire Component wire-end:7QdkGMT8GWKMr14kLFAK -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

  @include('layout.footer')

    <!-- Start of HubSpot Embed Code -->
    <script data-cfasync="false" src="cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
    <script type="text/javascript" id="hs-script-loader" async defer src="../js-na1.hs-scripts.com/9141828.json"></script>
    <!-- End of HubSpot Embed Code -->

    <script src="../cdn.jsdelivr.net/npm/bootstrap%405.0.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="../cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $(window).bind('scroll', function() {
                var navHeight = $(window).height() - 400;
                if ($(window).scrollTop() > navHeight) {
                    $('nav').addClass('fixed');
                } else {
                    $('nav').removeClass('fixed');
                }
            });
        });
    </script>
    <script src="livewire/livewire4a5a.js?id=90730a3b0e7144480175" data-turbo-eval="false" data-turbolinks-eval="false">
    </script>
    <script data-turbo-eval="false" data-turbolinks-eval="false">
        window.livewire = new Livewire();
        window.Livewire = window.livewire;
        window.livewire_app_url = '';
        window.livewire_token = 'iQYGjEtD2WOxjXziKxMMMA6YsQMZYWLkB93PyPh2';
        window.deferLoadingAlpine = function(callback) {
            window.addEventListener('livewire:load', function() {
                callback();
            });
        };
        let started = false;
        window.addEventListener('alpine:initializing', function() {
            if (!started) {
                window.livewire.start();
                started = true;
            }
        });
        document.addEventListener("DOMContentLoaded", function() {
            if (!started) {
                window.livewire.start();
                started = true;
            }
        });
    </script>
        <script>
            $(document).ready(function () {
                $('#contactForm').on('submit', function (e) {
                    e.preventDefault(); // Prevent the default form submission
            
                    // Clear previous status message
                    $('#formStatus').html('');
            
                    // Collect form data
                    var formData = $(this).serialize();
            
                    $.ajax({
                        url: "{{ route('contact.store') }}", // Laravel route
                        method: "POST",
                        data: formData,
                        success: function (response) {
                            $('#formStatus').html('<div class="testa" style="color:green";>' + response.message + '</div>');
                            $('#contactForm')[0].reset(); // Reset the form on success
                        },
                        error: function (response) {
                            var errors = response.responseJSON.errors;
                            var errorMessage = '<div class="texta"><ul>';
                            $.each(errors, function (key, value) {
                                errorMessage += '<li>' + value[0] + '</li>';
                            });
                            errorMessage += '</ul></div>';
                            $('#formStatus').html(errorMessage);
                        }
                    });
                });
            });
            </script>
    
@endsection