@extends('template-layout.app')
@section('content')
    @include('header')

    <!-- Page Header Start -->
    <div class="page-header dark-section">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-12">
                    <!-- Page Header Box Start -->
                    <div class="page-header-box">
                        <h1 class="text-anime-style-3" data-cursor="-opaque">Contact us</h1>
                        <nav class="wow fadeInUp">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ route('index') }}">home</a></li>
                                <li class="breadcrumb-item active" aria-current="page">contact us</li>
                            </ol>
                        </nav>
                    </div>
                    <!-- Page Header Box End -->
                </div>
            </div>
        </div>
    </div>
    <!-- Page Header End -->

    <!-- Page Contact Us Start -->
    <div class="page-contact-us">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <!-- Contact Us Box Start -->
                    <div class="contact-us-box">
                        <!-- Contact Us Content Start -->
                        <div class="contact-us-content">
                            <!-- Section Title Start -->
                            <div class="section-title">
                                <h3 class="wow fadeInUp">contact us</h3>
                                <h2 class="text-anime-style-3" data-cursor="-opaque">We're here to help</h2>
                                <p class="wow fadeInUp" data-wow-delay="0.2s">Have a question, need a repair, or just want
                                    to know more about our services? Our team is ready to assist you with fast responses.
                                </p>
                            </div>
                            <!-- Section Title End -->

                            <!-- Contact Info List Start -->
                            <div class="contact-info-list">
                                <!-- Contact Info Item Start -->
                                <div class="contact-info-item wow fadeInUp" data-wow-delay="0.4s">
                                    <!-- Icon Box Start -->
                                    <div class="icon-box">
                                        <img src="images/icon-phone.svg" alt="">
                                    </div>
                                    <!-- Icon Box End -->

                                    <!-- Contact Item Content Start -->
                                    <div class="contact-item-content">
                                        <p>contact us</p>
                                        <h3><a href="tel:tel:{{ $company->CM_Phone }}">{{ $company->CM_Phone }}</a><br>
                                            <a href="tel:tel:{{ $company->CM_Phone2 }}">{{ $company->CM_Phone2 }}</a>
                                        </h3>
                                    </div>
                                    <!-- Contact Item Content End -->
                                </div>
                                <!-- Contact Info Item End -->

                                <!-- Contact Info Item Start -->
                                <div class="contact-info-item wow fadeInUp" data-wow-delay="0.6s">
                                    <!-- Icon Box Start -->
                                    <div class="icon-box">
                                        <img src="images/icon-mail.svg" alt="">
                                    </div>
                                    <!-- Icon Box End -->

                                    <!-- Contact Item Content Start -->
                                    <div class="contact-item-content">
                                        <p>email us</p>
                                        <h3><a href="mailto:{{ $company->CM_Email }}">{{ $company->CM_Email }}</a><br>
                                            <a href="mailto:{{ $company->CM_Email2 }}">{{ $company->CM_Email2 }}</a>
                                        </h3>
                                    </div>
                                    <!-- Contact Item Content End -->
                                </div>
                                <!-- Contact Info Item End -->

                                <!-- Contact Info Item Start -->
                                <div class="contact-info-item wow fadeInUp" data-wow-delay="0.8s">
                                    <!-- Icon Box Start -->
                                    <div class="icon-box">
                                        <img src="images/icon-location.svg" alt="">
                                    </div>
                                    <!-- Icon Box End -->

                                    <!-- Contact Item Content Start -->
                                    <div class="contact-item-content">
                                        <p>location</p>
                                        <h3>{{ $company->CM_Address }}</h3>
                                    </div>
                                    <!-- Contact Item Content End -->
                                </div>
                                <!-- Contact Info Item End -->
                            </div>
                            <!-- Contact Info List End -->
                        </div>
                        <!-- Contact Us Content End -->

                        <!-- Contact Us Form Start -->
                        <div class="contact-us-form">
                            <!-- Section Title Start -->
                            <div class="section-title">
                                <h2 class="text-anime-style-3" data-cursor="-opaque">Get in touch today</h2>
                            </div>
                            <!-- Section Title End -->

                            <div class="contact-form">
                                <form class="wow fadeInUp" data-wow-delay="0.2s">
                                    <div class="row">
                                        <div class="form-group col-md-6 mb-4">
                                            <input type="text" name="name" class="form-control" id="name"
                                                placeholder="Name" required>
                                            <div class="help-block with-errors"></div>
                                        </div>



                                        <div class="form-group col-md-6 mb-4">
                                            <input type="email" name ="email" class="form-control" id="email"
                                                placeholder="Email" required>
                                            <div class="help-block with-errors"></div>
                                        </div>

                                        <div class="form-group col-md-6 mb-4">
                                            <input type="text" name="phone" class="form-control" id="phone"
                                                placeholder="Phone" required>
                                            <div class="help-block with-errors"></div>
                                        </div>
                                        <div class="form-group col-md-6 mb-4">
                                            <input type="text" name="service" class="form-control" id="service"
                                                placeholder="Service" required>
                                            <div class="help-block with-errors"></div>
                                        </div>

                                        <div class="form-group col-md-12 mb-5">
                                            <textarea name="message" class="form-control" id="message" rows="3" placeholder="Message"></textarea>
                                            <div class="help-block with-errors"></div>
                                        </div>

                                        <div class="col-md-12">
                                            <button onclick="sendWhatsapp()" type="button" class="btn-default">Send
                                                Message</button>
                                            <div id="msgSubmit" class="h3 hidden"></div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <!-- Contact Us Form End -->
                    </div>
                    <!-- Contact Us Box End -->
                </div>
            </div>
        </div>
    </div>
    <!-- Page Contact Us End -->

    <!-- Google Map Section Start -->
    <div class="google-map">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <!-- Google Map IFrame Start -->
                    <div class="google-map-iframe">
                        <iframe src="{{ $company->CM_GoogleMap }}" allowfullscreen="" loading="lazy"
                            referrerpolicy="no-referrer-when-downgrade"></iframe>
                    </div>
                    <!-- Google Map IFrame End -->
                </div>
            </div>
        </div>
    </div>
    <!-- Google Map Section End -->

    @include('footer')

    <script>
        function sendWhatsapp() {
            let name = document.getElementById("name").value;
            let email = document.getElementById("email").value;
            let phone = document.getElementById("phone").value;
            let service = document.getElementById("service").value;
            let message = document.getElementById("message").value;

            let whatsappNumber = "971505839494";

            let text = `Hello,
Name: ${name}
Email: ${email}
Phone: ${phone}
Service: ${service}
Message: ${message}`;

            let encodedText = encodeURIComponent(text);

            let url = `https://wa.me/${whatsappNumber}?text=${encodedText}`;

            window.open(url, "_blank");
        }
    </script>
@endsection