@extends($data['layout'])
@section('title', $data['page']->meta_title)
@section('meta_description', $data['page']->meta_description)
@section('meta_url', URL::Current())
@section('page_title', $data['page']->meta_title)
@section('product_description',$data['page']->meta_description)
@php
    if(app()->environment() == 'dev')
        $site = 'dev';
    else
        $site = 'www';
@endphp
@section('image','https://'.$site.'.germedusa.com/static/assets/images/og_imag_logo.png')
@section('image:width', "385")
@section('image:height', "145")
@push('head-area')
    <link rel="stylesheet" href="{{asset('design/assets/css/contactstyle.css')}}">
@endpush
@section('content')

    <section class="ContactHeroSection py-5">
        <div class="container pt-3">
            <div class="row mx-0">
                <div class="col-md-12">
                    <div class="breadcrumbSection">
                        <a href="/">Home</a> / <span>Contact Us</span>
                    </div>
                    <div class="mainTitle">
                        Contact Us
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="mapAndContactSection py-5">
        <div class="container">
            <div class="row" style="row-gap: 1.5rem;">
                <div class="col-lg-7 col-md-6 col-sm-12">
                    <div id="google-map">
                        <iframe class="w-100 h-100 rounded-4"
                        src="https://maps.google.com/maps?q=GerMedUSA%20Inc&amp;t=&amp;z=18&amp;ie=UTF8&amp;iwloc=&amp;output=embed"
                        id="gmap_canvas" frameborder="0" scrolling="no"></iframe>
                    </div>
                </div>
                <div class="col-lg-5 col-md-6 col-sm-12">
                    <div class="contactContentSection">
                        <div class="mainContentTitle">
                            Get In Touch
                        </div>
                        <div class="contactItemTitle">
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <g clip-path="url(#clip0_1331_1685)">
                                <path d="M11.6667 5.83338C11.6667 6.16301 11.569 6.48525 11.3858 6.75933C11.2027 7.03341 10.9424 7.24703 10.6379 7.37318C10.3333 7.49932 9.9982 7.53233 9.6749 7.46802C9.3516 7.40371 9.05463 7.24498 8.82154 7.01189C8.58845 6.7788 8.42972 6.48183 8.36541 6.15853C8.3011 5.83523 8.33411 5.50012 8.46025 5.19557C8.5864 4.89103 8.80002 4.63073 9.0741 4.4476C9.34818 4.26446 9.67042 4.16671 10.0001 4.16671C10.4421 4.16671 10.866 4.34231 11.1786 4.65487C11.4911 4.96743 11.6667 5.39135 11.6667 5.83338ZM14.1317 10.1534L11.5834 12.6792C11.3766 12.8877 11.1306 13.0531 10.8596 13.1661C10.5885 13.279 10.2978 13.3371 10.0042 13.3371C9.7106 13.3371 9.41989 13.279 9.14885 13.1661C8.87781 13.0531 8.63182 12.8877 8.42505 12.6792L5.87838 10.1667C4.78485 9.03935 4.17244 7.531 4.17058 5.9604C4.16871 4.38981 4.77753 2.88001 5.86838 1.75004C6.40452 1.19612 7.04657 0.755656 7.75635 0.454846C8.46613 0.154037 9.22916 -0.000976562 10.0001 -0.000976562C10.7709 -0.000976562 11.534 0.154037 12.2438 0.454846C12.9535 0.755656 13.5956 1.19612 14.1317 1.75004C15.2209 2.87757 15.8297 4.38401 15.8297 5.95171C15.8297 7.51941 15.2209 9.02585 14.1317 10.1534ZM13.3334 5.83338C13.3334 5.17411 13.1379 4.52964 12.7716 3.98148C12.4053 3.43331 11.8848 3.00607 11.2757 2.75378C10.6666 2.50149 9.99635 2.43548 9.34975 2.56409C8.70315 2.69271 8.1092 3.01018 7.64303 3.47636C7.17685 3.94253 6.85938 4.53647 6.73077 5.18308C6.60215 5.82968 6.66816 6.4999 6.92045 7.10899C7.17274 7.71808 7.59999 8.23867 8.14815 8.60494C8.69631 8.97122 9.34078 9.16671 10.0001 9.16671C10.8841 9.16671 11.732 8.81552 12.3571 8.1904C12.9822 7.56528 13.3334 6.71743 13.3334 5.83338ZM17.2942 7.66671C16.9901 9.044 16.3079 10.3092 15.3242 11.32L12.7592 13.8642C12.3984 14.226 11.9698 14.5131 11.4979 14.7091C11.026 14.9051 10.5202 15.0063 10.0092 15.0067C9.49854 15.0069 8.99282 14.9065 8.52096 14.7111C8.04911 14.5158 7.62036 14.2294 7.25922 13.8684L4.70672 11.3492C3.736 10.3527 3.05472 9.11084 2.73588 7.75671C2.19463 7.95511 1.69974 8.26225 1.28172 8.65921C0.87426 9.0466 0.550363 9.51324 0.32995 10.0305C0.109538 10.5477 -0.00273094 11.1045 5.04432e-05 11.6667V15.0625C0.00180177 15.9637 0.294877 16.84 0.835543 17.5609C1.37621 18.2818 2.13548 18.8086 3.00005 19.0625L5.39172 19.8125C5.79344 19.9376 6.21183 20.0008 6.63255 20C7.01421 19.9996 7.39404 19.9474 7.76172 19.845L12.5784 18.42C13.0074 18.3025 13.4602 18.3025 13.8892 18.42L15.8784 19.0867C16.3686 19.206 16.8796 19.2125 17.3727 19.1057C17.8658 18.9988 18.3282 18.7814 18.7251 18.4698C19.122 18.1582 19.4429 17.7606 19.6638 17.307C19.8846 16.8533 19.9996 16.3554 20.0001 15.8509V11.56C19.9972 10.7132 19.7369 9.8873 19.2536 9.19191C18.7703 8.49653 18.0869 7.96459 17.2942 7.66671Z" fill="#0071B8"/>
                                </g>
                                <defs>
                                <clipPath id="clip0_1331_1685">
                                <rect width="20" height="20" fill="white"/>
                                </clipPath>
                                </defs>
                            </svg>
                            Address
                        </div>
                        <div class="contactItemContent">
                            2417 Jericho Turnpike, #333, Garden City Park, NY (USA).
                        </div>
                        <div class="contactItemTitle">
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <g clip-path="url(#clip0_1329_1617)">
                                <path d="M19.9617 4.61816L12.9467 11.6332C12.1645 12.4134 11.1048 12.8515 10 12.8515C8.89521 12.8515 7.83552 12.4134 7.05333 11.6332L0.0383333 4.61816C0.0266667 4.74983 0 4.869 0 4.99983V14.9998C0.00132321 16.1045 0.440735 17.1635 1.22185 17.9446C2.00296 18.7258 3.062 19.1652 4.16667 19.1665H15.8333C16.938 19.1652 17.997 18.7258 18.7782 17.9446C19.5593 17.1635 19.9987 16.1045 20 14.9998V4.99983C20 4.869 19.9733 4.74983 19.9617 4.61816Z" fill="#0071B8"/>
                                <path d="M11.7675 10.4547L19.3791 2.84217C19.0104 2.23077 18.4903 1.72471 17.8691 1.37278C17.2479 1.02086 16.5465 0.834958 15.8325 0.833008H4.16581C3.45183 0.834958 2.75039 1.02086 2.12916 1.37278C1.50793 1.72471 0.987873 2.23077 0.619141 2.84217L8.23081 10.4547C8.70045 10.9224 9.33629 11.1851 9.99914 11.1851C10.662 11.1851 11.2978 10.9224 11.7675 10.4547Z" fill="#0071B8"/>
                                </g>
                                <defs>
                                <clipPath id="clip0_1329_1617">
                                <rect width="20" height="20" fill="white"/>
                                </clipPath>
                                </defs>
                            </svg>
                            Email Address
                        </div>
                        <div class="contactItemContent">
                            sale@GerMedUSA.com
                        </div>
                        <div class="contactItemTitle">
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M17.4993 10.3537V9.16699C17.4993 7.17787 16.7091 5.27021 15.3026 3.86369C13.896 2.45717 11.9884 1.66699 9.99927 1.66699C8.01014 1.66699 6.10249 2.45717 4.69597 3.86369C3.28944 5.27021 2.49927 7.17787 2.49927 9.16699V10.3537C1.62523 10.7385 0.909934 11.412 0.473118 12.2612C0.0363026 13.1105 -0.0955155 14.084 0.0997317 15.0189C0.294979 15.9537 0.80544 16.7931 1.54566 17.3965C2.28588 18 3.21092 18.3308 4.16593 18.3337C4.60796 18.3337 5.03188 18.1581 5.34445 17.8455C5.65701 17.5329 5.8326 17.109 5.8326 16.667V11.667C5.8326 11.225 5.65701 10.801 5.34445 10.4885C5.03188 10.1759 4.60796 10.0003 4.16593 10.0003V9.16699C4.16593 7.6199 4.78052 6.13616 5.87448 5.0422C6.96844 3.94824 8.45217 3.33366 9.99927 3.33366C11.5464 3.33366 13.0301 3.94824 14.1241 5.0422C15.218 6.13616 15.8326 7.6199 15.8326 9.16699V10.0003C15.3906 10.0003 14.9667 10.1759 14.6541 10.4885C14.3415 10.801 14.1659 11.225 14.1659 11.667V16.667C14.1659 17.109 14.3415 17.5329 14.6541 17.8455C14.9667 18.1581 15.3906 18.3337 15.8326 18.3337C16.7876 18.3308 17.7127 18 18.4529 17.3965C19.1931 16.7931 19.7036 15.9537 19.8988 15.0189C20.094 14.084 19.9622 13.1105 19.5254 12.2612C19.0886 11.412 18.3733 10.7385 17.4993 10.3537Z" fill="#0071B8"/>
                            </svg>
                            Phone Number
                        </div>
                        <div class="contactItemContent">
                            +1 (516) 997-2180
                        </div>
                        <div class="contactItemTitle">
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <g clip-path="url(#clip0_1326_733)">
                                <path d="M6.66667 6.66667V16.6667C6.66667 18.5083 5.175 20 3.33333 20C1.49167 20 0 18.5083 0 16.6667V6.66667C0 4.825 1.49167 3.33333 3.33333 3.33333C5.175 3.33333 6.66667 4.825 6.66667 6.66667ZM8.33333 8.33333H20V15.8333C20 18.1333 18.1333 20 15.8333 20H7.05C7.84167 19.1167 8.33333 17.95 8.33333 16.6667V8.33333ZM15 12.0833C15 12.775 15.5583 13.3333 16.25 13.3333C16.9417 13.3333 17.5 12.775 17.5 12.0833C17.5 11.3917 16.9417 10.8333 16.25 10.8333C15.5583 10.8333 15 11.3917 15 12.0833ZM15 16.25C15 16.9417 15.5583 17.5 16.25 17.5C16.9417 17.5 17.5 16.9417 17.5 16.25C17.5 15.5583 16.9417 15 16.25 15C15.5583 15 15 15.5583 15 16.25ZM10.8333 12.0833C10.8333 12.775 11.3917 13.3333 12.0833 13.3333C12.775 13.3333 13.3333 12.775 13.3333 12.0833C13.3333 11.3917 12.775 10.8333 12.0833 10.8333C11.3917 10.8333 10.8333 11.3917 10.8333 12.0833ZM10.8333 16.25C10.8333 16.9417 11.3917 17.5 12.0833 17.5C12.775 17.5 13.3333 16.9417 13.3333 16.25C13.3333 15.5583 12.775 15 12.0833 15C11.3917 15 10.8333 15.5583 10.8333 16.25ZM16.6667 5C15.75 5 15 4.25 15 3.33333V0H11.6667C9.825 0 8.33333 1.49167 8.33333 3.33333V6.66667H20V5H16.6667ZM16.6667 3.33333H19.4667C19.4 3.25 19.3417 3.16667 19.2667 3.09167L16.9083 0.733333C16.8333 0.658333 16.75 0.6 16.6667 0.533333V3.33333Z" fill="#0071B8"/>
                                </g>
                                <defs>
                                <clipPath id="clip0_1326_733">
                                <rect width="20" height="20" fill="white"/>
                                </clipPath>
                                </defs>
                            </svg>
                            Fax Number
                        </div>
                        <div class="contactItemContent">
                            800-260-7177 | +1(516) 358 2182
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="formAndMessage py-5">
        <div class="container">
            <div class="row" style="row-gap: 1.5rem;">
                <div class="col-lg-5 col-md-6 col-sm-12">
                    <div class="rightSectionContent">
                        <div class="rightSectionContentTitle">
                            Tell Us Your Message
                        </div>
                        <div class="rightSectionContentDec">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris risus odio, placerat et blandit at, molestie non dolor.
                        </div>
                    </div>
                </div>
                <div class="col-lg-7 col-md-6 col-sm-12">
                    <div class="contact-form-content">
                        <div class="contact-form">
                            <form id="contact-form" method="POST" action="/contact/send" class="needs-validation" novalidate>
                                <div class="mb-3">
                                    <label for="name" class="form-label">Full Name</label>
                                    <input type="text" id="name" name="name" class="form-control" placeholder="Enter your name" maxlength="191" required autofocus />
                                    <div class="invalid-feedback">Please provide your name.</div>
                                </div>
                                <div class="mb-3">
                                    <label for="email" class="form-label">Email</label>
                                    <input type="email" id="email" name="email" class="form-control" placeholder="Your email address ..."
                                           pattern="^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$"
                                           required />
                                    <div class="invalid-feedback">Please provide a valid email address.</div>
                                </div>
                                <div class="mb-3">
                                    <label for="phone" class="form-label">Phone</label>
                                    <input type="text" id="phoneNumber" name="phone" class="form-control" placeholder="Enter phone ..." maxlength="14" required
                                           pattern="\d*" />
                                    <div class="invalid-feedback">Please provide a valid phone number.</div>
                                </div>
                                <div class="mb-3">
                                    <label for="message" class="form-label">Message</label>
                                    <textarea id="message" name="message" class="form-control" placeholder="Enter your message" rows="3" required></textarea>
                                    <div class="invalid-feedback">Please enter your message.</div>
                                </div>
                                <div class="mb-3">
                                    <div class="cf-widget"></div>
                                </div>
                                <div class="mb-3 text-end">
                                    <button class="btn btn-primary" type="submit" disabled>Submit</button>
                                </div>
                                <p class="form-message mt-3 mb-0"></p>
                            </form>
                            <div class="json_message d-none px-2 py-1"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<script>
    window.addEventListener("load", (event) => {
            turnstile.render(".cf-widget", {
            sitekey: "0x4AAAAAAA0ZprtGxWG32Orf",
            callback: function (token) {
                $('.btn-cf-submit').removeAttr('disabled');
            },
        });
    });
</script>

@endsection

@push('after-scripts')
    <script>
        $(".contact-form_btn").click(function() {
            $('html, body').animate({
                scrollTop: $(".contact-page-side-content").offset().top
            }, 200);
        });
    </script>
    @if (config('access.captcha.contact'))
        @captchaScripts
    @endif
@endpush