@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")
@section('content')
    <div class="contact-main-page mt-25">
        <div class="google-map_area">
            <div class="container-fluid">
                <div id="google-map"><iframe class="w-100 h-100"
                        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>
        <div class="text-area">
            <h1 class="h1-tag " style="margin-left: 5%; margin-top: 2%;">Contact Us </h1>
        </div>
        <div class="container-fluid">
            <div class="row">
                <div class="@if ($data['layout'] !== 'frontend.layouts.mobile') d-flex  @endif gap-4">
                    <div class="contact-page-side-content"
                        @if ($data['layout'] == 'frontend.layouts.mobile') style="position: relative; right: 8%; margin-top: 0px;" @endif>
                        @if ($data['layout'] == 'frontend.layouts.mobile')
                        <h3 class="contact-page-title">Get Office Info.</h3>
                            <table>
                                <tbody>
                                    <tr>
                                        <td style="text-align:center; vertical-align:top">
                                            <div class="fa fa-3x fa-map-marker">&nbsp;</div>
                                        </td>
                                        <td><strong>Our Address</strong>
                                            <p>2417 Jericho Turnpike, #333,<br />
                                                Garden City Park,<br />
                                                NY 11040 (USA).</p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="text-align:center; vertical-align:top">
                                            <div class="fa fa-2x fa-phone">&nbsp;</div>
                                        </td>
                                        <td><strong>Phone Number</strong>
                                            <p>Office:  +1(516) 997-2180</p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="text-align:center; vertical-align:top">
                                            <div class="fa fa-2x fa-fax">&nbsp;</div>
                                        </td>
                                        <td><strong>Fax Number</strong>
                                            <p>800-260-7177 | +1(516) 358 2182</p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="text-align:center; vertical-align:top">
                                            <div class="fa fa-2x fa-envelope">&nbsp;</div>
                                        </td>
                                        <td><strong>Email Address</strong>
                                            <p>Email: <a href="mailto:sales@GerMedUSA.com">sales@GerMedUSA.com</a></p>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        @else
                            {!! $data['page']->content !!}
                        @endif
                    </div>
                    <div class="col-lg-8">
                        <div class="contact-form-content"
                            @if ($data['layout'] == 'frontend.layouts.mobile') style=" margin-top: 0px;" @endif>
                            <h3 class="contact-page-title">Tell Us Your Message</h3>
                            <div class="contact-form">
                                {{ html()->form('POST', route('frontend.contact.send'))->id('contact-form')->open() }}
                                <div class="form-group">
                                    {{ html()->label(__('validation.attributes.frontend.name'))->for('name') }}
                                    {{ html()->text('name', optional(auth()->user())->name)->placeholder(__('validation.attributes.frontend.name'))->attribute('maxlength', 191)->required()->autofocus()->value('')->style('transition:none') }}
                                </div>
                                <div class="form-group">
                                    {{ html()->label(__('validation.attributes.frontend.email'))->for('email') }}
                                    {{-- {{ html()->email('email', optional(auth()->user())->email)
                                    ->placeholder(__('validation.attributes.frontend.email'))
                                    ->attribute('maxlength', 191)
                                    ->required()->value((''))
                                    ->style('transition:none') }} --}}
                                    <input type="email"
                                        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 name="email" class="form-control mb-0"
                                        placeholder="Your email address ...">
                                </div>
                                <div class="form-group">
                                    {{ html()->label(__('validation.attributes.frontend.phone'))->for('phone') }}
                                    {{-- {!! Form::text('phone', null,['required' => 'required','pattern'=>"\d*",'maxlength'=>'13', 'placeholder'=>'Enter phone ...', 'class' => 'text_input' , 'id' =>'phoneNumber']) !!} --}}
                                    {{ html()->text('phone')->placeholder(__('validation.attributes.frontend.phone'))->class('phone')->id('phoneNumber')->attribute('maxlength', 14)->required()->style('transition:none') }}
                                </div>
                                <div class="form-group form-group-2">
                                    {{ html()->label(__('validation.attributes.frontend.message'))->for('message') }}
                                    {{ html()->textarea('message')->placeholder(__('validation.attributes.frontend.message'))->attribute('rows', 3)->required()->style('transition:none,resize: none')->style('resize: none') }}
                                </div>
                                <div class="row">
                                    <div class="col">
                                        <div class="form-group">
                                            <div class="cf-widget"></div>
                                        </div>
                                    </div><!--col-->
                                </div><!--row-->
                                <div class="form-group mb-0 contact-form-btn">
                                    <button class="my-1 quicky-btn-2 contact-form_btn transition-none btn-cf-submit" disabled="disabled" type="submit">Send Information</button>
                                </div>
                                <p class="form-messege mt-3 mb-0"></p>
                                {{ html()->form()->close() }}
                                <div class="json_messsge d-none px-2 py-1" ></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <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