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

@section ('title')
@lang('messages.menu_request_dhsfunded_class') | @lang('messages.title')
@endsection
@section ('description')
<meta name="description" content="@lang('messages.desc_dhs_request_class')">
@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 u-bg-overlay g-bg-white-opacity-0_2--after" style="height: 130%; background-image: }});"></div> --}}
        <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">
            <h1 class="g-font-weight-700 g-font-size-65 text-uppercase">@lang('messages.menu_request_dhsfunded_class')</h1>
        </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">
            <h1 class="g-font-weight-700 g-font-size-40 text-uppercase">@lang('messages.menu_request_dhsfunded_class')</h1>
        </div>
        <!-- Promo Block Content -->
    </div>
</section>
<!-- End Promo Block -->

<!-- Request DHS Class 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">
            <div class="mb-2 text-center">
                <h2 class="h3 g-font-weight-600 g-font-size-20 g-font-size-30--md mb-3 g-color-black">Hosting a DHS Funded Course Delivery</h2> <!-- @ lang('messages.menu_request_dhsfunded_class') -->
            </div>

            <!-- 1 Column Body -->
            <div class="d-flex justify-content-between g-mt-20">
                <div class="text-justify">
                    <p>DHS Funded Course Deliveries provide free training to emergency responders, paid for by DHS FEMA. 
                    You agree to provide a facility that meets requirements and fill the class with appropriate attendees.
                    All form fields are required. Questions? <a href="{{ URL::route('contactUs') }}">@lang('messages.menu_contact_us')</a>.
                    </p>
                </div>
            </div>
            <!-- End 1 Column Body -->

            <!-- Request DHS Class Form -->
            <section class="container-fluid">
                <form class="validatable-form" method="POST" action="{{ URL::to('/postRequestDHSDelivery') }}" 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="6Lf__DcUAAAAAOyoe1sOgOQr9Am0OqBaGj-hQZ_l">
                    <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

                            <!-- Agency Information -->
                            <div class="container-fluid m-0 p-0 g-mt-10">
                                <h2 class="h5 text-uppercase g-color-gray-dark-v1">@lang('messages.label_hosting') @lang('messages.label_agency') </h2>
                                        
                                <div class="row g-px-10">
                                    <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="@lang('messages.label_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" id="street_address" name="street_address" placeholder="@lang('messages.label_street_address')" value="{{ old('street_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=@lang('messages.label_city') value="{{ old('city') }}" required>
                                    </div>
                                    
                                    <div id="us-state-div" class="col-md-4 form-group g-mb-0 p-1">
                                        <select 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" style="max-height: 88%" id="state" name="state" required>
                                            <option value="">@lang('messages.label_state')</option>
                                            @foreach ($states as $state)
                                                <option value="{{ $state->abbr }}" {{ old('state') == $state->abbr ? 'selected' : '' }}>{{ $state->abbr }}</option>
                                            @endforeach
                                        </select>
                                    </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="@lang('messages.label_zip_code')" value="{{ old('zip_code') }}" 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="county" name="county" placeholder="@lang('messages.label_county')" value="{{ old('county') }}" required>
                                    </div>

                                    <div class="col-md-8 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="agency_website" name="agency_website" placeholder="@lang('messages.label_agency') @lang('messages.label_website')" value="{{ old('agency_website') }}" required>
                                    </div>
                                </div>

                            </div>
                            <!-- End of Agency Information -->

                            <!-- POC  -->
                            <div class="container-fluid m-0 p-0 g-mt-10">
                                <h2 class="h5 text-uppercase g-color-gray-dark-v1 g-pt-10 g-mb-0">Primary Point of Contact</h2>
                                <span class="g-font-size-12">Please provide cell phone number</span>

                                <div class="row g-px-10">
                    
                                    <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="text" id="poc_name" name="poc_name" placeholder="@lang('messages.label_name')" value="{{ old('poc_name') }}" required>
                                    </div>

                                    <div class="col-md-3 form-group g-mb-0 p-1">
                                        <select id="poc_discipline" name="poc_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"  style="max-height: 88%" required>
                                            <option {{ old('poc_discipline') == '' ? 'selected="selected"' : '' }} value="">@lang('messages.label_discipline')</option>
                                            <option {{ old('poc_discipline') == __('messages.label_role_LE') ? 'selected="selected"' : '' }} value="@lang('messages.label_role_LE')">@lang('messages.label_role_LE')</option>
                                            <option {{ old('poc_discipline') == "__('messages.label_Fire')/__('messages.label_role_EMS')" ? 'selected="selected"' : '' }} value="@lang('messages.label_Fire')/@lang('messages.label_role_EMS')">@lang('messages.label_Fire')/@lang('messages.label_role_EMS')</option>
                                            <option {{ old('poc_discipline') == __('messages.label_EM_short') ? 'selected="selected"' : '' }} value="@lang('messages.label_EM_short')">@lang('messages.label_EM_short')</option>
                                            <option {{ old('poc_discipline') == __('messages.label_role_Other') ? 'selected="selected"' : '' }} value="@lang('messages.label_role_Other')">@lang('messages.label_role_Other')</option>
                                        </select>
                                    </div>
                                        
                                    <div class="col-md-3 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="poc_rank" name="poc_rank" placeholder="@lang('messages.label_rank')" value="{{ old('poc_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="poc_email" name="poc_email" aria-describedby="emailHelp" placeholder="@lang('messages.label_email')" value="{{ old('poc_email') }}" required>
                                        <!-- <small id="emailHelp" class="form-text text-muted g-ml-2">@ lang('messages.label_privacy_email')</small> -->
                                    </div>
                                    
                                    <div class="col-md-3 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="poc_cellphone" name="poc_cellphone" placeholder="@lang('messages.label_cell_phone')" value="{{ old('poc_cellphone') }}" required>
                                    </div>
                                </div>

                                <!-- Secundary POC -->
                                <h2 class="h5 text-uppercase g-color-gray-dark-v1 g-pt-20 g-mb-0">Backup Point of Contact</h2>
                                <div class="row g-px-10">
                                    <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="sec_poc_name" name="sec_poc_name" placeholder="@lang('messages.label_name')" value="{{ old('sec_poc_name') }}" 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="email" id="sec_poc_email" name="sec_poc_email" placeholder="@lang('messages.label_email')" value="{{ old('sec_poc_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="sec_poc_cellphone" name="sec_poc_cellphone" placeholder="@lang('messages.label_cell_phone')" value="{{ old('sec_poc_cellphone') }}" required>
                                    </div>
                                        
                                </div>
                                <!-- End of Secundary POC -->

                            </div>
                            <!-- End of POC -->

                            <div class="container-fluid m-0 p-0 g-mt-10 g-pt-20">
                                <h2 class="h5 text-uppercase g-color-gray-dark-v1">Requested @lang('messages.label_course')</h2>
                                <div class="row g-px-10">
                                    <div class="col-md-6 form-group g-mb-0 p-1">
                                        <select id="course_dhs" name="course_dhs" 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 {{ old('course_dhs') == '' ? 'selected="selected"' : '' }} value="">@lang('messages.label_select') @lang('messages.label_course')</option> --}}
                                            <option {{ old('course_dhs') == __('messages.label_asim_advanced_dhs_code') ? 'selected="selected"' : '' }} value="@lang('messages.label_asim_advanced_dhs_code')">@lang('messages.label_asim_advanced_dhs_w_day')</option>
                                            {{-- <option {{ old('course_dhs') == __('messages.label_asim_intermediate_dhs_code') ? 'selected="selected"' : '' }} value="@lang('messages.label_asim_intermediate_dhs_code')">@lang('messages.label_asim_intermediate_dhs_w_day')</option> --}}
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <!-- Delivery Requirements -->
                            <div id="delivery-req-div" class="container-fluid m-0 p-0 g-mt-10 g-pt-30 d-none">
                                <h2 class="h5 text-uppercase g-color-gray-dark-v1">Delivery Requirements</h2>
                                <hr class="g-brd-gray-light-v4 g-my-10">
                                <div class="row checkbox-group required">
                                    <!-- 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="fill_class_cbox" value="1">
                                                <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 fill the class with <span class="g-font-weight-600">60 participants</span> (30 Law Enforcement, 20 Fire/EMS, 5 Dispatchers, 2 Public Information Officers, 2 Emergency Managers, and 1 Helicopter Pilot).
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="row checkbox-group required">
                                    <!-- 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="individual_poc_cbox" value="1">
                                                <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 provide individual <span class="g-font-weight-600">LE and Fire/EMS points of contact</span> to ensure attendance numbers are met.
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                
                                <div id="accordion-05" class="u-accordion px-1 g-pt-20" 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>
                                            State TPOC Approval?
                                            </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-gray-dark-v5 g-font-size-13 g-font-weight-600"> 
                                                <span> A State TPOC (Training Point of Contact) is the person under the SAA (State Administrative Agency, e.g. homeland security, emergency management, etc.) 
                                                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"> --}}
                                                <a href="{{ URL::to('https://www.firstrespondertraining.gov/frts/statecontacts') }}" target="_blank">Website
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- End Card -->
                                </div>
                                <div class="col-md-12 px-1">
                                    <div class="form-group g-mb-0">
                                        <fieldset class="form-group g-mb-0">
                                            <div class="form-check">
                                                <label class="form-check-label">
                                                    <input type="radio" class="form-check-input mr-2" name="tpoc_permission" id="tpoc_permission" value="1">&nbsp;I have my State TPOC's approval.
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <label class="form-check-label">
                                                    <input type="radio" class="form-check-input mr-2" name="tpoc_permission" id="tpoc_permission" value="2" checked="">&nbsp;I will get my State TPOC's approval.
                                                </label>
                                            </div>
                                        </fieldset>
                                    </div>
                                </div>
                                <label id="tpoc_permission-group-message" class="c3-error-message d-none" for="checkbox-group">@lang('messages.label_field_required')</label>
                            </div>
                            <!-- End of Delivery Requirements -->

                            <!-- Facility Requirements -->
                            <div id="training-facility-div" class="container-fluid m-0 p-0 g-mt-40 d-none">
                                <h2 class="h5 text-uppercase g-color-gray-dark-v1">Facility Requirements</h2>
                                <hr class="g-brd-gray-light-v4 g-my-10">
                                        
                                <div class="row checkbox-group required">
                                    <!-- 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="facility_square_ft_cbox" value="1">
                                                <div class="u-check-icon-checkbox-v4 g-absolute-centered--y g-left-0">
                                                    <i class="fa" data-check-icon="&#xf00c"></i>
                                                </div>
                                                Single room with <span class="g-font-weight-600">minimum 5,000 square feet</span> of available space (example 100'x50')
                                            </label>
                                        </div>
                                    </div>
                                    <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="facility_circuits_cbox" value="1">
                                                <div class="u-check-icon-checkbox-v4 g-absolute-centered--y g-left-0">
                                                    <i class="fa" data-check-icon="&#xf00c"></i>
                                                </div>
                                                Room must have at least <span class="g-font-weight-600">three (3) 20 amp circuits</span>
                                            </label>
                                        </div>
                                    </div>
                                    <label id="checkbox-group-message" class="c3-error-message d-none" for="checkbox-group">@lang('messages.label_field_required')</label>

                                    <div class="col-md-12">
                                        <div class="form-group g-mb-0">
                                            <fieldset class="form-group">
                                                <div class="form-check">
                                                    <label class="form-check-label">
                                                        <input type="radio" class="form-check-input mr-1" name="facility_status" id="facility_status" value="1">&nbsp;I have a facility
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <label class="form-check-label">
                                                        <input type="radio" class="form-check-input mr-1" name="facility_status" id="facility_status" value="2" checked="">&nbsp;I will get a facility
                                                    </label>
                                                </div>
                                            </fieldset>
                                        </div>
                                    </div>

                                    {{-- @if(true == false)
                                        <div id="getFacility" class="row g-px-20" style="background-color: aliceblue;"> <!-- style=" display: none;" -->
                                            <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="text" id="name" name="name" placeholder="Facility Name" value="{{ old('name') }}" 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="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>
                                    @endif  --}}
                                    <!-- end if Facility information place  -->

                                    <!-- End Left Column -->
                                </div>     
                            </div>
                            <!-- End of Facility Requirements -->
                            
                            <!-- Final Requirements -->
                            <div class="container-fluid m-0 p-0 g-mt-20">
                                <h2 class="h5 text-uppercase g-color-gray-dark-v1">Justification for grant funded training</h2>
                                <div class="row g-px-10">
                                    <div class="col-md-12 form-group g-mb-10 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="justification" name="justification" placeholder="@lang('messages.label_description')" value="{{ old('justification') }}" required></textarea>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Final Requirements -->

                        </div>

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

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

                            <div class="row">
                                <div class="d-flex flex-sm-row g-px-20">
                                    <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="6Lf__DcUAAAAAEegE6375ZiUw18M1Kes0ESTk-dw"></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 g-pa-5 g-mb-50">
                                <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 Request DHS Class Form -->  
        </div>

        <div class="col-lg-4">
            <!-- DHS Funded Information -->
            {{-- @ include ('web.partials-v2.dhs-funded_alt') --}}
            @include ('web.partials-v2.dhs-funded-vertical')
            <!-- End of DHS Funded Information -->

            <br class="g-my-10">

            @include('web.partials-v2.contact-info')
        </div>
    </div>
</section>
<!-- End Request DHS Class 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>

<!-- 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>

<script type="text/javascript">
    $(function() {
        $("#course_dhs").trigger('change');

        $('form.validatable-form').validate({
            rules: {
                "agency": {
                    required: true,
                    minlength: 3
                },
                "street_address": {
                    required: true,
                    minlength: 3
                },
                "city": {
                    required: true
                },
                "state": {
                    required: true,
                    minlength: 1
                },
                "zip_code": {
                    required: true,
                    zipcodeUS: true
                },
                "agency_website": {
                    required: true,
                    minlength: 3
                },
                "poc_name": {
                    required: true
                },
                "poc_discipline": {
                    required: true
                    // minlength: 2
                },
                "poc_rank": {
                    required: true,
                    minlength: 2
                },
                "poc_email": {
                    required: true
                },
                "poc_cellphone" : {
                    required: true,
                    phoneUS: true
                },
                "poc_name": {
                    required: true
                },
                "poc_email": {
                    required: true
                },
                "poc_cellphone" : {
                    required: true,
                    phoneUS: true
                },
                "fill_class_cbox": {
                    required: true
                },
                "individual_poc_cbox": {
                    required: true
                },
                "tpoc_permission": {
                    required: true
                },
                "facility_square_ft_cbox": {
                    required: true
                },
                "facility_circuits_cbox": {
                    required: true
                },
                "facility_status": {
                    required: true
                },
                "justification": {
                    required: true
                }
            },
            messages: {
                "confirm_email": {
                    equalTo: "Emails don't match."
                }
            },
            errorPlacement: function (error, element) {
                if (element.parent().hasClass('group')) {
                    element = element.parent();
                    error.insertBefore(element);
                }
                else if (element.parent().hasClass('error-group')) { // Especial case for radio
                    element = element.parent().parent();
                    error.insertBefore(element);
                }
                else if (element.hasClass('select2-hidden-accessible')) { // Especial case for select2
                    element = element.next();
                    error.insertAfter(element);
                }
                else {
                    error.insertAfter(element);
                }
            }
        });
        
    });

    // Course selection
    $("#course_dhs").change(function(){
        $("#delivery-req-div").addClass('d-none');
        $("#training-facility-div").addClass('d-none');
        
        let courseText = $("#course_dhs option:selected").text();
        
        if (courseText.indexOf("ASIM") >= 0) {
            $("#delivery-req-div").removeClass('d-none');
            $("#training-facility-div").removeClass('d-none');
        }

    }); 
    
    // recaptcha validation init
    var allowSubmit = false;

    function capcha_filled() {
        allowSubmit = true;
    }

    function capcha_expired() {
        allowSubmit = false;
    }

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

    // Checkbox validation
    /*function validate() {
        if ($("input:checked").val() === "1") // "Agree"
        {
            $('#checkbox-group-message').addClass("d-none");
            
            // Validate if Captcha is not empty
            if (checkIfCaptchaIsFilled()) {
                
                // Insert values via API
                callChecklistAPI();
            }
            else {
                return checkIfCaptchaIsFilled();
            }
            
        } else {
            $('#checkbox-group-message').removeClass("d-none");
            return false;
        }
    }*/

</script>
@endsection