@extends ('web.layouts-v2.master')

@section ('title')
@lang('messages.menu_request') | @lang('messages.title')
@endsection
@section ('description')
<meta name="description" content="@lang('messages.desc_contact')">
@endsection

@section ('seoNotation')
@include('web.partials.seo-notation')
@endsection

@section ('content')

<!-- Promo Block -->
<section class="g-pos-rel g-pt-80">
    <div class="dzsparallaxer auto-init height-is-based-on-content use-loading mode-scroll loaded dzsprx-readyall" data-options='{direction: "fromtop", animation_duration: 25, direction: "reverse"}'>
        <!-- Parallax Image -->
        <div class="divimage dzsparallaxer--target w-100 g-bg-cover g-bg-size-cover g-bg-pos-top-center g-bg-black-gradient-opacity-v1--after" style="height: 140%; background-image: url({{ asset('../resources/assets/img/inline/request_a_class.jpg') }});"></div>
        <!-- End Parallax Image -->

        <!-- Promo Block Content -->
        <div class="container g-color-white text-center g-pos-rel g-z-index-1 g-pt-80 g-pb-70 hidden-md-down">
            <h2 class="g-font-weight-700 g-font-size-65 text-uppercase">@lang('messages.menu_request')</h2>
        </div>

        <div class="container g-color-white text-center g-pos-rel g-z-index-1 g-pt-80 g-pb-70 hidden-lg-up">
            <h2 class="g-font-weight-700 g-font-size-40 text-uppercase">@lang('messages.menu_request')</h2>
        </div>
        <!-- Promo Block Content -->
    </div>
</section>
<!-- End Promo Block -->

<!-- Contact Form And Map -->
<section class="container g-pt-20 g-pb-10 g-pt-50--md g-pb-30--md">
    <div class="row justify-content-between">
        <div class="col-lg-7">
            <h2 class="h3">@lang('messages.menu_request')</h2>

            <hr class="g-my-20">

            <!-- Contact Form -->
            <section class="container-fluid">
                <form class="validatable-form" method="POST" action="{{ URL::to('/postContactUs') }}" onsubmit="return validate();">
                    {{ csrf_field() }}

                    <!-- VTiger hidden fields -->
                    <input type="hidden" name="__vtrftk" value="sid:134292ad4b0d6315ccd0685c035610973b25bc2b,1506446194">
                    <input type="hidden" name="publicid" value="f8b48965cb1892130a86dd9296833e44">
                    <input type="hidden" name="name" value="Leads Webform">
                    <input type="hidden" name="VTIGER_RECAPTCHA_PUBLIC_KEY" value="6LcoOjEUAAAAANeJaeYvn8mIAOg58Ue3hs7mh9of">
                    <input type="hidden" name="leadsource" value="{{ $leadsource }}">
                    <input type="hidden" name="course" value="{{ isset($course) ? $course : '' }}">
                    <!-- End VTiger hidden fields -->

                    <div class="row justify-content-center">
                        <div class="col-lg-12 col-md-8">

                            @if (session('notice'))
                            <!-- Teal Alert -->
                            <div class="alert alert-dismissible fade show g-bg-teal g-color-white rounded-1" role="alert" data-auto-dismiss="2000">
                                <button type="button" class="close u-alert-close--light" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">×</span>
                                </button>

                                <div class="media">
                                    <span class="d-flex g-mr-10 g-mt-5">
                                        <i class="icon-check g-font-size-25"></i>
                                    </span>
                                    <span class="media-body align-self-center">
                                        {{ session('notice') }}
                                    </span>
                                </div>
                            </div>
                            <!-- End Teal Alert -->
                            @endif

                            <h2 class="h5 text-uppercase g-color-gray-dark-v1">Hosting Agency Info</h2>
                            <div class="row">
                                <div class="col-md-12 form-group g-mb-0 p-1">
                                    <input class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v3 g-brd-primary--hover rounded-3 g-py-8 g-px-15" 
                                           type="text" id="agency" name="agency" placeholder=Agency value="{{ old('agency') }}" required>
                                </div>

                                <div class="col-md-12 form-group g-mb-5 p-1">
                                    <input class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v3 g-brd-primary--hover rounded-3 g-py-8 g-px-15" 
                                           type="text" title="Street Address" id="address" name="address" placeholder="Street Address" value="{{ old('address') }}" required>
                                </div>
                                
                                <div class="col-md-4 form-group g-mb-0 p-1">
                                    <input class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v3 g-brd-primary--hover rounded-3 g-py-8 g-px-15" 
                                           type="text" id="city" name="city" placeholder=City value="{{ old('city') }}" required>
                                </div>
                                
                                <div class="col-md-4 form-group g-mb-0 p-1">
                                    <input class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v3 g-brd-primary--hover rounded-3 g-py-8 g-px-15" 
                                           type="text" id="state" name="state" placeholder=State value="{{ old('state') }}" required>
                                </div>


                                <div class="col-md-4 form-group g-mb-5 p-1">
                                    <input class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v3 g-brd-primary--hover rounded-3 g-py-8 g-px-15" 
                                           type="text" id="zip-code" name="zip-code" placeholder="Zip Code" value="{{ old('zip-code') }}" required>
                                </div>

                                <div class="col-md-12 form-group g-mb-5 p-1">
                                    <input class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v3 g-brd-primary--hover rounded-3 g-py-8 g-px-15" 
                                           type="text" id="website" name="website" placeholder="Agency Website" value="{{ old('website') }}" required>
                                </div>
                            </div>
                            <h2 class="h5 text-uppercase g-color-gray-dark-v1">Primary Point of Contact Info</h2> 
                            <div class="row">

                                <div class="col-md-4 form-group g-mb-0 p-1">
                                    <input class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v3 g-brd-primary--hover rounded-3 g-py-8 g-px-15" 
                                           type="text" id="firstname" name="firstname" placeholder="@lang('messages.label_firstname')" value="{{ old('firstname') }}" required>
                                </div>

                                <div class="col-md-4 form-group g-mb-0 p-1">
                                    <input class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v3 g-brd-primary--hover rounded-3 g-py-8 g-px-15" 
                                           type="text" id="lastname" name="lastname" placeholder="@lang('messages.label_lastname')" value="{{ old('lastname') }}" required>
                                </div>

                                <div class="col-md-4 form-group g-mb-5 p-1">
                                    <input class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v3 g-brd-primary--hover rounded-3 g-py-8 g-px-15" 
                                           type="text" id="rank" name="rank" placeholder=Rank value="{{ old('rank') }}" required>
                                </div>

                                <div class="col-md-6 form-group g-mb-0 p-1">
                                    <input class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v3 g-brd-primary--hover rounded-3 g-py-8 g-px-15" 
                                           type="email" id="email" name="email" aria-describedby="emailHelp" placeholder="@lang('messages.label_email')" value="{{ old('email') }}" required>
                                    <!-- <small id="emailHelp" class="form-text text-muted g-ml-2">@lang('messages.label_privacy_email')</small> -->
                                </div>
                                
                                <div class="col-md-6 form-group g-mb-0 p-1">
                                    <input class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v3 g-brd-primary--hover rounded-3 g-py-8 g-px-15" 
                                           type="email" id="confirm_email" name="confirm_email" aria-describedby="emailHelp" placeholder="@lang('messages.label_confirm_email')" value="{{ old('email') }}" required>
                                </div>

                                <div class="col-md-4 form-group g-mb-5 p-1">
                                    <input class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v3 g-brd-primary--hover rounded-3 g-py-8 g-px-15" 
                                           type="tel" pattern="^\d{3}-\d{3}-\d{4}$" title="Phone Number (Format: 999-999-9999)" id="phone" name="phone" placeholder="@lang('messages.label_phone')" value="{{ old('phone') }}" required>
                                </div>
                                <div class="col-6">
                                    <select id="discipline" name="dscipline" placeholder=Discipline class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v3 g-brd-primary--hover rounded-3 g-py-8 g-px-15" required>
                                        <option value="Select">Select</option>
                                        <option value="Law Enforcement">Law Enforcement</option>
                                        <option value="Fire/EMS">Fire/EMS</option>
                                        <option value="EM">EM</option>
                                        <option value="Other">Other</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-10 col-md-8">
                            <h2 class="h5 text-uppercase g-color-gray-dark-v1">Law Enforcement Point of Contact Info</h2>
                            <div id="accordion-05" class="u-accordion" role="tablist" aria-multiselectable="true">
                                <!-- Card -->
                                <div class="card rounded-0 g-bg-white g-color-primary g-brd-none">
                                    <div id="accordion-05-heading-02" class="u-accordion__header g-pa-2" role="tab">
                                    <h5 class="mb-0 text-uppercase g-font-size-12 g-font-weight-600">
                                        <a class="d-flex collapsed g-color g-text-underline--none--hover" href="#accordion-05-body-02" data-toggle="collapse" data-parent="#accordion-05" aria-expanded="false" aria-controls="accordion-05-body-02">
                                        <span class="u-accordion__control-icon g-mr-10">
                                            <i class="fa fa-plus"></i>
                                            <i class="fa fa-minus"></i>
                                        </span>
                                        Why do we need this?
                                        </a>
                                    </h5>
                                    </div>
                                    <div id="accordion-05-body-02" class="collapse" role="tabpanel" aria-labelledby="accordion-05-heading-02" data-parent="#accordion-05">
                                    <div class="u-accordion__body g-color-primary text-uppercase g-font-size-12 g-font-weight-600">
                                        Providing a Law Enforcement and Fire/EMS contact seperately ensures that the course will be filled with the appropriate distribution of participants. 
                                    </div>
                                    </div>
                                </div>
                                <!-- End Card -->
                            </div>
                            <div class="row">
                                <div class="col-md-4 form-group g-mb-0 p-1">
                                    <input class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v3 g-brd-primary--hover rounded-3 g-py-8 g-px-15" 
                                           type="text" id="firstname" name="firstname" placeholder="@lang('messages.label_firstname')" value="{{ old('firstname') }}">
                                </div>

                                <div class="col-md-4 form-group g-mb-0 p-1">
                                    <input class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v3 g-brd-primary--hover rounded-3 g-py-8 g-px-15" 
                                           type="text" id="lastname" name="lastname" placeholder="@lang('messages.label_lastname')" value="{{ old('lastname') }}">
                                </div>

                                <div class="col-md-4 form-group g-mb-5 p-1">
                                    <input class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v3 g-brd-primary--hover rounded-3 g-py-8 g-px-15" 
                                           type="text" id="rank" name="rank" placeholder=Rank value="{{ old('rank') }}">
                                </div>

                                <div class="col-md-6 form-group g-mb-0 p-1">
                                    <input class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v3 g-brd-primary--hover rounded-3 g-py-8 g-px-15" 
                                           type="email" id="email" name="email" aria-describedby="emailHelp" placeholder="@lang('messages.label_email')" value="{{ old('email') }}">
                                    <!-- <small id="emailHelp" class="form-text text-muted g-ml-2">@lang('messages.label_privacy_email')</small> -->
                                </div>
                                
                                <div class="col-md-6 form-group g-mb-0 p-1">
                                    <input class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v3 g-brd-primary--hover rounded-3 g-py-8 g-px-15" 
                                           type="email" id="confirm_email" name="confirm_email" aria-describedby="emailHelp" placeholder="@lang('messages.label_confirm_email')" value="{{ old('email') }}">
                                </div>

                                <div class="col-md-4 form-group g-mb-5 p-1">
                                    <input class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v3 g-brd-primary--hover rounded-3 g-py-8 g-px-15" 
                                           type="tel" pattern="^\d{3}-\d{3}-\d{4}$" title="Phone Number (Format: 999-999-9999)" id="phone" name="phone" placeholder="@lang('messages.label_phone')" value="{{ old('phone') }}">
                            </div>
                            </div>
                            <h2 class="h5 text-uppercase g-color-gray-dark-v1">Fire/EMS Point of Contact Info</h2>
                            <div class="row">
                                <div class="col-md-4 form-group g-mb-0 p-1">
                                    <input class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v3 g-brd-primary--hover rounded-3 g-py-8 g-px-15" 
                                           type="text" id="firstname" name="firstname" placeholder="@lang('messages.label_firstname')" value="{{ old('firstname') }}">
                                </div>

                                <div class="col-md-4 form-group g-mb-0 p-1">
                                    <input class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v3 g-brd-primary--hover rounded-3 g-py-8 g-px-15" 
                                           type="text" id="lastname" name="lastname" placeholder="@lang('messages.label_lastname')" value="{{ old('lastname') }}">
                                </div>

                                <div class="col-md-4 form-group g-mb-5 p-1">
                                    <input class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v3 g-brd-primary--hover rounded-3 g-py-8 g-px-15" 
                                           type="text" id="rank" name="rank" placeholder=Rank value="{{ old('rank') }}">
                                </div>

                                <div class="col-md-6 form-group g-mb-0 p-1">
                                    <input class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v3 g-brd-primary--hover rounded-3 g-py-8 g-px-15" 
                                           type="email" id="email" name="email" aria-describedby="emailHelp" placeholder="@lang('messages.label_email')" value="{{ old('email') }}">
                                    <!-- <small id="emailHelp" class="form-text text-muted g-ml-2">@lang('messages.label_privacy_email')</small> -->
                                </div>
                                
                                <div class="col-md-6 form-group g-mb-0 p-1">
                                    <input class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v3 g-brd-primary--hover rounded-3 g-py-8 g-px-15" 
                                           type="email" id="confirm_email" name="confirm_email" aria-describedby="emailHelp" placeholder="@lang('messages.label_confirm_email')" value="{{ old('email') }}">
                                </div>

                                <div class="col-md-4 form-group g-mb-5 p-1">
                                    <input class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v3 g-brd-primary--hover rounded-3 g-py-8 g-px-15" 
                                           type="tel" pattern="^\d{3}-\d{3}-\d{4}$" title="Phone Number (Format: 999-999-9999)" id="phone" name="phone" placeholder="@lang('messages.label_phone')" value="{{ old('phone') }}">
                            </div>
                            </div>
                        </div>
                        <div class="col-lg-12 col-md-8">
                            <h2 class="h5 text-uppercase g-color-gray-dark-v1">Training Facility</h2>
                            <div class="row">
                                
                            <div class="col-md-12">
                                <div class="form-group g-mb-0">
                                                <label class="u-check g-pl-30">
                                                    
                                                    <input class="hidden-xs-up g-pos-abs g-top-0 g-left-0" type="checkbox" name='interested[]' value='Facility'>
                                                    
                                                    <div class="u-check-icon-checkbox-v4 g-absolute-centered--y g-left-0">
                                                        <i class="fa" data-check-icon="&#xf00c"></i>
                                                    </div>
                                                    I understand the facility must have at least 5000 square feet of available space.
                                                </label>
                                </div>
                                <div class="form-group g-mb-0">
                                                <label class="u-check g-pl-30">
                                                    
                                                    <input class="hidden-xs-up g-pos-abs g-top-0 g-left-0" type="checkbox" name='interested[]' value='Facility'>
                                                    
                                                    <div class="u-check-icon-checkbox-v4 g-absolute-centered--y g-left-0">
                                                        <i class="fa" data-check-icon="&#xf00c"></i>
                                                    </div>
                                                    I understand the facility must have at least three (3) 20 amp circuits.
                                                </label>
                                </div>
                            
                            <fieldset class="form-group">
                                <div class="form-check">
                                    <label class="form-check-label">
                                        <input type="radio" class="form-check-input mr-1" name="rd_facility" id="rd_facility" value="1" checked="">I will get a facility.
                                    </label>
                                </div>
                                <div class="form-check">
                                    <label class="form-check-label">
                                        <input type="radio" class="form-check-input mr-1" name="rd_facility" id="rd_facility" value="2">I have a facility.
                                    </label>
                                </div>
                            </fieldset>
                            </div>
                            
                            <!-- @ if(true) -->
                            <div id="getFacility" style="background-color: aliceblue;"> <!-- style=" display: none;" -->
                                <div class="col-md-12 form-group g-mb-0 p-1">
                                    <input class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v3 g-brd-primary--hover rounded-3 g-py-8 g-px-15" 
                                           type="text" id="name" name="name" placeholder="Facility Name" value="{{ old('name') }}" required>
                                </div>
                                
                                <div class="col-md-12 form-group g-mb-0 p-1">
                                    <input class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v3 g-brd-primary--hover rounded-3 g-py-8 g-px-15" 
                                           type="text" id="name" name="name" placeholder="Room Name/Number" value="{{ old('name') }}" required>
                                </div>

                                <div class="col-md-12 form-group g-mb-5 p-1">
                                    <input class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v3 g-brd-primary--hover rounded-3 g-py-8 g-px-15" 
                                           type="text" title="Street Address" id="address" name="address" placeholder="Street Address" value="{{ old('address') }}" required>
                                </div>
                                
                                <div class="col-md-4 form-group g-mb-0 p-1">
                                    <input class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v3 g-brd-primary--hover rounded-3 g-py-8 g-px-15" 
                                           type="text" id="city" name="city" placeholder=City value="{{ old('city') }}" required>
                                </div>
                                
                                <div class="col-md-4 form-group g-mb-0 p-1">
                                    <input class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v3 g-brd-primary--hover rounded-3 g-py-8 g-px-15" 
                                           type="text" id="state" name="state" placeholder=State value="{{ old('state') }}" required>
                                </div>

                                <div class="col-md-4 form-group g-mb-5 p-1">
                                    <input class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v3 g-brd-primary--hover rounded-3 g-py-8 g-px-15" 
                                           type="text" id="zip-code" name="zip-code" placeholder="Zip Code" value="{{ old('zip-code') }}" required>
                                </div>
                                </div>
                            </div>
                            <!-- @ endif -->
                            
                            <h2 class="h5 text-uppercase g-color-gray-dark-v1">Justification for grant funded training:</h2>
                            <div class="row">
                                <div class="col-md-12 form-group g-mb-20 p-1">
                                    <textarea class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v3 g-brd-primary--hover g-resize-none rounded-3 g-py-8 g-px-15" 
                                              rows="7" id="description" name="description" placeholder=Justification required>{{ old('description') }}</textarea>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-12 col-md-4 p-1">
                            <!-- Interested in -->
                            <div class="g-mx-15">
                                <h2 class="h5 text-uppercase g-color-gray-dark-v1">We can fulfill these requirements:</h2>
                                <hr class="g-brd-gray-light-v4 g-my-10">
                            <div class="row checkbox-group required">
                                    <div class=" g-mb-30">
                                        <!-- Left Column -->
                                        <div class="col-md-12">
                                            <div class="form-group g-mb-0">
                                                <label class="u-check g-pl-30">
                                                    
                                                    <input class="hidden-xs-up g-pos-abs g-top-0 g-left-0" type="checkbox" name='interested[]' value='Participants'>
                                                    
                                                    <div class="u-check-icon-checkbox-v4 g-absolute-centered--y g-left-0">
                                                        <i class="fa" data-check-icon="&#xf00c"></i>
                                                    </div>
                                                    Fill the class with 60 appropriately mixed-discipline participants (30 Law Enforcement, 20 Fire/EMS, 5 Dispatchers, 2 Public Information Officers, 2 Emergency Managers, & [optional] 1 Helicopter Pilot).
                                                </label>
                                            </div>
                                        </div>
                                        </br>
                                    </div>
                            </div>
                                    <div class="col-lg-12 col-md-8">
                                    <h2 class="h5 text-uppercase g-color-gray-dark-v1">Your state's Training POC must approve this course delivery.</h2>
                                        <div id="accordion-05" class="u-accordion" role="tablist" aria-multiselectable="true">
                                            <!-- Card -->
                                            <div class="card rounded-0 g-bg-white g-color-primary g-brd-none">
                                                <div id="accordion-05-heading-03" class="u-accordion__header g-pa-2" role="tab">
                                                <h5 class="mb-0 text-uppercase g-font-size-12 g-font-weight-600">
                                                    <a class="d-flex collapsed g-color-primary g-text-underline--none--hover" href="#accordion-05-body-03" data-toggle="collapse" data-parent="#accordion-05" aria-expanded="false" aria-controls="accordion-05-body-03">
                                                    <span class="u-accordion__control-icon g-mr-10">
                                                        <i class="fa fa-plus"></i>
                                                        <i class="fa fa-minus"></i>
                                                    </span>
                                                    Who is my TPOC?
                                                    </a>
                                                </h5>
                                                </div>
                                                <div id="accordion-05-body-03" class="collapse" role="tabpanel" aria-labelledby="accordion-05-heading-03" data-parent="#accordion-05">
                                                <div class="u-accordion__body g-color-primary text-uppercase g-font-size-12 g-font-weight-600">
                                                    <span> A TPOC is the person under SAA who is primarily responsible for training deliveries and grant funding. You can find your TPOC at this </span>
                                                    <a class="g-color-main g-font-weight-500 u-link-v5 g-color-primary--hover" href="{{ URL::to('https://www.firstrespondertraining.gov/frts/statecontacts') }}">website
                                                    </a>
                                                </div>
                                                </div>
                                            </div>
                                            <!-- End Card -->
                                        </div>
                                    <hr class="g-brd-gray-light-v4 g-my-10">
                                    <div class="form-group g-mb-0">
                                                <label class="u-check g-pl-30">
                                                    
                                                    <input class="hidden-xs-up g-pos-abs g-top-0 g-left-0" type="checkbox" name='interested[]' value='Participants'>
                                                    
                                                    <div class="u-check-icon-checkbox-v4 g-absolute-centered--y g-left-0">
                                                        <i class="fa" data-check-icon="&#xf00c"></i>
                                                    </div>
                                                    I have permission.
                                                </label>
                                            </div>
                                            <div class="form-group g-mb-0">
                                                <label class="u-check g-pl-30">
                                                    
                                                    <input class="hidden-xs-up g-pos-abs g-top-0 g-left-0" type="checkbox" name='interested[]' value='POC'>
                                                    
                                                    <div class="u-check-icon-checkbox-v4 g-absolute-centered--y g-left-0">
                                                        <i class="fa" data-check-icon="&#xf00c"></i>
                                                    </div>
                                                    I will get permission.
                                                </label>
                                            </div>
                                    </div>
                                        <!-- End Left Column -->   

                                    <label id="checkbox-group-message" class="c3-error-message d-none" for="checkbox-group">@lang('messages.label_field_required')</label>
                                    </br>
                                <div class="col-lg-12 col-md-8">
                                <h2 class="h5 text-uppercase g-color-gray-dark-v1">Class Type</h2>  
                                </div>  
                                <div class="col-6">
                                    <select id="country" name="country" class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v3 g-brd-primary--hover rounded-3 g-py-8 g-px-15" required>
                                        <option selected value="ASIM ADVANCED">ASIM Advanced</option>
                                        <!-- <option value="@lang('messages.label_outside_country_abbr')">@lang('messages.label_outside_country')</option> -->
                                    </select>
                                </div>
                                </div>
                            </div>
                            <!-- End Interested in -->
                        </div>

                        <div class="col-lg-12 col-md-12 p-2">

                            <div class="col-lg-8 col-md-12">
                                @include ('web.layouts-v2.errors')
                            </div>

                            <div class="row">
                                <div class="d-flex flex-sm-row g-px-10">
                                    <div class="w-100 text-justify">
                                        <label class="right">@lang('messages.label_captcha'):</label>
                                        <div class="g-recaptcha" data-callback="capcha_filled" data-expired-callback="capcha_expired" data-sitekey="6LcoOjEUAAAAANeJaeYvn8mIAOg58Ue3hs7mh9of"></div>
                                        
                                        <label id="recaptcha-message" class="c3-error-message d-none" for="g-recaptcha">@lang('messages.label_field_required')</label>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="d-flex flex-sm-row justify-content-center p-3"> <!-- mx-auto -->
                                    <div>
                                        <button class="btn btn-lg u-btn-primary g-font-weight-600 g-font-size-default rounded-3 text-uppercase g-py-10 g-px-20" type="submit" role="button">@lang('messages.button_send')</button>
                                    </div>
                                </div>
                            </div>

                        </div>
                </form>
            </section>
            <!-- End Contact Form -->  
        </div>

        <div class="col-lg-4">
            <!-- Contact Info -->
            <h2 class="h3 mb-4 g-color-primary">@lang('messages.title_inc')</h2>
            <div class="media mb-2">
                <i class="d-flex g-color-gray-dark-v5 mt-1 mr-3 icon-hotel-restaurant-235 u-line-icon-pro"></i>
                <div class="media-body">
                    <br />
<b>Notice</b>:  Undefined variable: company in <b>/home/c3/public_html/ncier/resources/views/web/request_a_class.blade.php</b> on line <b>461</b><br />
<br />
<b>Notice</b>:  Trying to get property 'latitude' of non-object in <b>/home/c3/public_html/ncier/resources/views/web/request_a_class.blade.php</b> on line <b>461</b><br />
<br />
<b>Notice</b>:  Undefined variable: company in <b>/home/c3/public_html/ncier/resources/views/web/request_a_class.blade.php</b> on line <b>461</b><br />
<br />
<b>Notice</b>:  Trying to get property 'longitude' of non-object in <b>/home/c3/public_html/ncier/resources/views/web/request_a_class.blade.php</b> on line <b>461</b><br />
<br />
<b>Notice</b>:  Undefined variable: company in <b>/home/c3/public_html/ncier/resources/views/web/request_a_class.blade.php</b> on line <b>461</b><br />
<br />
<b>Notice</b>:  Trying to get property 'map_data' of non-object in <b>/home/c3/public_html/ncier/resources/views/web/request_a_class.blade.php</b> on line <b>461</b><br />
                    <address class="mb-0">
                        <a class="g-color-gray-dark-v4"  href="{{ $mapLink }}" target="_blank">
                            {{ $company->address }}<br>
                            {{ $company->addressCity . ', ' . $company->addressState . ', ' . $company->zipCode }}
                        </a>
                    </address>    
                </div>
            </div>
            <div class="media mb-2">
                <i class="d-flex g-color-gray-dark-v5 mt-1 mr-3 icon-communication-062 u-line-icon-pro"></i>
                <div class="media-body">
                    <p class="g-color-gray-dark-v3 mb-2">@lang('messages.label_email'): <a class="g-color-gray-dark-v4" href="mailto:{{ $company->info_email }}">{{ $company->info_email }}</a></p>
                </div>
            </div>
            <div class="media mb-2">
                <i class="d-flex g-color-gray-dark-v5 mt-1 mr-3 icon-communication-033 u-line-icon-pro"></i>
                <div class="media-body">
                    <p class="mb-0">@lang('messages.label_phone'): <a class="g-color-gray-dark-v4" href="tel: +{{ $company->phone }}" target="_blank">{{ $company->phone }}</a> 
                        <br> @lang('messages.label_fax'): <a class="g-color-gray-dark-v4" href="tel: +{{ $company->fax }}">{{ $company->fax }} </a>
                        <br> @lang('messages.label_toll_free'): <a class="g-color-gray-dark-v4" href="tel: +{{ $company->tollfree }}">{{ $company->tollfree }}</a></p>
                </div>
            </div>
            <!-- End Contact Info -->  

            <!-- Figure Social Icons -->
            <div class="g-pl-20 g-pt-10">
                <ul class="list-inline">
                    <li class="list-inline-item g-mx-4" data-toggle="tooltip" data-placement="bottom" title="@lang('messages.label_linkedin')">
                        <a class="u-icon-v1 g-color-gray-dark-v5 g-bg-gray-light-v5 g-color-white--hover g-bg-linkedin--hover rounded-circle" href="{{ $company->linkedIn }}" target="_blank">
                            <i class="g-font-size-default fa fa-linkedin"></i>
                        </a>
                    </li>

                    @if ($company->youtube)
                    <li class="list-inline-item g-mx-4" data-toggle="tooltip" data-placement="bottom" title="@lang('messages.label_youtube')">
                        <a class="u-icon-v1 g-color-gray-dark-v5 g-bg-gray-light-v5 g-color-white--hover g-bg-youtube--hover rounded-circle" href="{{ $company->youtube }}" target="_blank">
                            <i class="g-font-size-13 fa fa-youtube"></i>
                        </a>
                    </li>
                    <!--<a class="u-icon-v2 g-rounded-50x g-color-youtube g-color-white--hover g-bg-youtube--hover g-brd-gray-dark-v5--hover g-mr-15 g-mb-20" href="#"><i class="fa fa-youtube"></i></a>-->
                    @endif
                    @if ($company->facebook)
                    <li class="list-inline-item g-mx-4" data-toggle="tooltip" data-placement="bottom" title="@lang('messages.label_facebook')">
                        <a class="u-icon-v1 g-color-gray-dark-v5 g-bg-gray-light-v5 g-color-white--hover g-bg-facebook--hover rounded-circle" href="{{ $company->facebook }}" target="_blank">
                            <i class="g-font-size-13 fa fa-facebook"></i>
                        </a>
                    </li>
                    @endif
                    @if ($company->twitter)
                    <li class="list-inline-item g-mx-4" data-toggle="tooltip" data-placement="bottom" title="@lang('messages.label_twitter')">
                        <a class="u-icon-v1 g-color-gray-dark-v5 g-bg-gray-light-v5 g-color-white--hover g-bg-twitter--hover rounded-circle" href="{{ $company->twitter }}" target="_blank">
                            <i class="g-font-size-13 fa fa-twitter"></i>
                        </a>
                    </li>
                    @endif
                    @if ($company->blog)
                    <li class="list-inline-item g-mx-4" data-toggle="tooltip" data-placement="bottom" title="@lang('messages.label_blog')">
                        <a class="u-icon-v1 g-color-gray-dark-v5 g-bg-gray-light-v5 g-color-white--hover g-bg-facebook--hover rounded-circle" href="{{ $company->blog }}" target="_blank">
                            <i class="g-font-size-default fa fa-rss"></i>
                        </a>
                    </li>
                    @endif
                </ul>
            </div>
            <!-- End Figure Social Icons -->

            <hr class="g-my-40">

            <!-- Google Map -->
            <div id="GMapCustomized-light" class="js-g-map embed-responsive embed-responsive-21by9 g-height-50vh"
                 data-type="custom"
                 data-lat="{{ $company->latitude }}"
                 data-lng="{{ $company->longitude }}"
                 data-zoom="7"
                 data-title="C3 Pathways"
                 data-styles='[["", "", [{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]], ["", "labels", [{"visibility":"on"}]], ["water", "", [{"color":"#bac6cb"}]] ]'
                 data-pin="true"
                 data-pin-icon="{{ asset('../resources/assets/img/icons/pin/darkred.png') }}">
            </div>
            <!-- End Google Map -->  

        </div>
    </div>
</section>
<!-- End Contact Form And Map -->
@endsection

@section ('javascript')
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<!-- JS JQuery Validation -->
<script  src="{{ asset('../resources/assets/js/components/validation/jquery.validate.min.js') }}"></script>
<script  src="{{ asset('../resources/assets/js/components/validation/additional-methods.min.js') }}"></script>

<script type="text/javascript">
    // recaptcha validation
    var allowSubmit = false;

    function capcha_filled() {
        allowSubmit = true;
    }

    function capcha_expired() {
        allowSubmit = false;
    }

    function checkIfCapchaIsFilled(e) {
        if (allowSubmit) {
            $('#recaptcha-message').addClass("d-none");
            return true;
        } else {
            $('#recaptcha-message').removeClass("d-none");
            return false;
        }
    }

    function validate() {
        if ($('div.checkbox-group.required :checkbox:checked').length > 0)
        {
            $('#checkbox-group-message').addClass("d-none");
            // Validate if Captcha is not empty
            return checkIfCapchaIsFilled();
        } else {
            $('#checkbox-group-message').removeClass("d-none");
            return false;
        }
    }

$(function () {
    // Training facility
    // each event link click
    /* $('#rd_facility').click(
        let value = $(this).val();
        alert("Holaaaaaaaa");
    ); */
    // $('#rd_facility').click(alert("456"));
    

    /* $('#rd_facility').click(function(){
        alert($(this).val());
        var name = $(this).data('poc-name');
    } */ 

    $('form.validatable-form').validate({
        rules: {
            "phone" : {
                required: true,
                phoneUS: true
            },
            "confirm_email": {
                required: true,
                equalTo: "#email"
            }
        },
        messages: {
            "confirm_email": {
                equalTo: "Emails don't match."
            }
        },
        errorPlacement: function (error, element) {
            if (element.parent().hasClass('group')) {
                element = element.parent();
                error.insertBefore(element);
            }
            else {
                error.insertAfter(element);
            }
        }
    });
});

</script>

<!-- JS Map Plugins -->
<script src="{{ asset('../resources/assets/vendor/gmaps/gmaps.min.js') }}"></script>
<script src="{{ asset('../resources/assets/js/components/gmap/hs.map.js') }}"></script>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBObR5c_wRinb7TP58zwZfr8YrcAkSpNvA&callback=initMap" async defer></script>
<script>
    // Maps
    function initMap() {
        $.HSCore.components.HSGMap.init('.js-g-map');
    }   
</script>
@endsection