@extends('frontend.layouts.app')
@section('title', app_name() . ' | ' . __('labels.frontend.contact.box_title'))
@push('head-area')
    <link rel="canonical" href="{{ URL::to('/contact') }}" />
    <link rel="amphtml" href="{{ URL::to('/contact') }}?amp=1" />
    <!-- <script src="https://challenges.cloudflare.com/turnstile/v0/api.js?onload=_turnstileCb" defer></script> -->
@endpush
@section('content')
    <div class="cart_area cart-area-padding pt--35">
        <div class="container content-height">
            <div class="page-section-title">
                <h1>{{ $data['page']->heading }}</h1>
            </div>
            <div class="row">
                <div class="col-12 page-content">
                    <div class="row">
                        <div class="col-md-8"><h4>SEND US A MESSAGE</h4>
                            <div class="card-body">
                                @include('includes.partials.messages')
                                {{ html()->form('POST', route('frontend.contact.send'))->id('frm_contact')->open() }}
                                <div class="row">
                                    <div class="col">
                                        <div class="form-group">
                                            {{ html()->label(__('validation.attributes.frontend.name'))->for('name') }}
                                            {{ html()->text('name', optional(auth()->user())->name)
                                                ->class('form-control')
                                                ->placeholder(__('validation.attributes.frontend.name'))
                                                ->attribute('maxlength', 191)
                                                ->required()
                                                ->autofocus() }}
                                        </div><!--form-group-->
                                    </div><!--col-->
                                </div><!--row-->
                                <div class="row">
                                    <div class="col">
                                        <div class="form-group">
                                            {{ html()->label(__('validation.attributes.frontend.email'))->for('email') }}
                                            {{ html()->email('email', optional(auth()->user())->email)
                                                ->class('form-control')
                                                ->placeholder(__('validation.attributes.frontend.email'))
                                                ->attribute('maxlength', 191)
                                                ->required() }}
                                        </div><!--form-group-->
                                    </div><!--col-->
                                </div><!--row-->
                                <div class="row">
                                    <div class="col">
                                        <div class="form-group">
                                            {{ html()->label(__('validation.attributes.frontend.phone'))->for('phone') }}
                                            {{ html()->text('phone')
                                                ->class('form-control')
                                                ->placeholder(__('validation.attributes.frontend.phone'))
                                                ->attribute('maxlength', 191)
                                                ->required() }}
                                        </div><!--form-group-->
                                    </div><!--col-->
                                </div><!--row-->
                                <div class="row">
                                    <div class="col">
                                        <div class="form-group">
                                            {{ html()->label(__('validation.attributes.frontend.message'))->for('message') }}
                                            {{ html()->textarea('message')
                                                ->class('form-control')
                                                ->placeholder(__('validation.attributes.frontend.message'))
                                                ->attribute('rows', 3)
                                                ->required() }}
                                        </div><!--form-group-->
                                    </div><!--col-->
                                </div><!--row-->
                                
                                <div class="row">
                                    <div class="col">
                                        <div class="cf-widget"></div>
                                    </div><!--col-->
                                </div><!--row-->
                                
                                <div class="row">
                                    <div class="col">
                                        <div class="form-group mb-0 clearfix">
                                            <!-- {{ form_submit(__('labels.frontend.contact.button')) }} -->
                                            <button class="btn btn-success btn-sm pull-right btn-cf-submit" type="submit" disabled="disabled">Send Information</button>
                                        </div><!--form-group-->
                                    </div><!--col-->
                                </div><!--row-->
                                {{ html()->form()->close() }}
                            </div><!--card-body-->
                        </div>
                        <div class="col-md-4"><h4>GET OFFICE INFO.</h4>{!! $data['page']->content  !!}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
    // This function is called when the Turnstile script is loaded and ready to be used.
    // The function name matches the "onload=..." parameter.

    // function _turnstileCb() {
    //     console.debug('_turnstileCb called');
    //     turnstile.render('.cf-widget', {
    //     sitekey: '0x4AAAAAAA0ZprtGxWG32Orf',
    //     //sitekey: '3x00000000000000000000FF',
    //     theme: 'light',
    //     callback: function (token) {
    //         $('.btn-cf-submit').removeAttr('disabled');
    //         //console.log(`Challenge Success ${token}`);
    //     },
    //     });
    // }

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

    </script>
@endsection
@push('after-scripts')
    @if(config('access.captcha.contact'))
        @captchaScripts
    @endif
@endpush