@extends('formbuilder::front_layout')
@section('title') {{ $pageTitle }} @endsection

@section('styles')

<style>
    /* .footable .btn .caret {
        margin-left: 0;
        display: none;
    } */

    .elementor-6732 .elementor-element.elementor-element-c452343 {
        padding: 0;
    }

    .elementor-6732 .elementor-element.elementor-element-41a7254>.elementor-element-populated {
        padding: 0;
    }

    .elementor-6732 .elementor-element.elementor-element-a0ea12b iframe {
        height: 450px;
    }

    /* .elementor-6732 .elementor-element.elementor-element-4c74c9f2 {
        margin-top: -100px;
        margin-bottom: 0;
        padding: 0 0 110px;
    } */

    @media (min-width: 768px){
        /* .elementor-6732 .elementor-element.elementor-element-63c897e5 {
            width: 65.583%;
        }
        .elementor-6732 .elementor-element.elementor-element-699271d3 {
            width: 34.417%;
        } */
    }


    .elementor-6732 .elementor-element.elementor-element-63c897e5:not(.elementor-motion-effects-element-type-background)>.elementor-column-wrap, .elementor-6732 .elementor-element.elementor-element-63c897e5>.elementor-column-wrap>.elementor-motion-effects-container>.elementor-motion-effects-layer {
        background-color: #f7f9ff;
    }

    .elementor-6732 .elementor-element.elementor-element-63c897e5>.elementor-element-populated {
        transition: background .3s,border .3s,border-radius .3s,box-shadow .3s;
        padding: 50px 45px 60px;
    }

    .elementor-6732 .elementor-element.elementor-element-5c993fb9 .section-title-wrapper .sub-title {
        color: #2782f9;
    }

    .elementor-6732 .elementor-element.elementor-element-5c993fb9 .section-title-wrapper .section-title {
        color: #151515;
        text-transform: capitalize;
    }

   .elementor-6732 .elementor-element.elementor-element-4c5ad180>.elementor-widget-container {
        border-radius: 10px 0 0 10px;
    }


    .elementor-6732 .elementor-element.elementor-element-699271d3:not(.elementor-motion-effects-element-type-background)>.elementor-column-wrap, .elementor-6732 .elementor-element.elementor-element-699271d3>.elementor-column-wrap>.elementor-motion-effects-container>.elementor-motion-effects-layer {
        background-color: #fff;
    }

    .elementor-6732 .elementor-element.elementor-element-699271d3>.elementor-element-populated {
        transition: background .3s,border .3s,border-radius .3s,box-shadow .3s;
        padding: 50px 15px 0 0;
    }

    .elementor-6732 .elementor-element.elementor-element-46b1816>.elementor-widget-container {
        padding: 0 0 0 40px;
    }

    .elementor-6732 .elementor-element.elementor-element-46b1816 .section-title-wrapper .sub-title {
        color: #2782f9;
    }

    .elementor-6732 .elementor-element.elementor-element-46b1816 .section-title-wrapper .section-title {
        color: #151515;
        text-transform: capitalize;
    }

    .elementor-6732 .elementor-element.elementor-element-1bd3a4f6>.elementor-widget-container {
        margin: 0;
        padding: 0 30px 28px 40px;
        background-color: #fff;
        border-style: solid;
        border-width: 0 0 1px;
        border-color: #eaeaea;
        border-radius: 0;
    }

    .elementor-6732 .elementor-element.elementor-element-1bd3a4f6 .feature-box-wrapper .feature-box-icon>span {
        font-size: 24px;
        width: 60px;
        height: 60px;
        line-height: 60px;
        background-color: #2782f9;
        border-color: #fff;
    }

    .elementor-6732 .elementor-element.elementor-element-1bd3a4f6 .feature-box-wrapper .feature-box-title {
        text-transform: none;
    }

    .elementor-6732 .elementor-element.elementor-element-1bd3a4f6 .feature-box-wrapper .feature-box-title, .elementor-6732 .elementor-element.elementor-element-1bd3a4f6 .feature-box-wrapper .feature-box-title>a, .elementor-6732 .elementor-element.elementor-element-1bd3a4f6 .feature-box-wrapper .feature-box-title>a:hover {
        color: #252525;
    }

    .elementor-6732 .elementor-element.elementor-element-0cf55a9>.elementor-widget-container {
        margin: 0;
        padding: 31px 30px 28px 40px;
        background-color: #fff;
        border-style: solid;
        border-width: 0 0 1px;
        border-color: #eaeaea;
        border-radius: 0;
    }

    .elementor-6732 .elementor-element.elementor-element-0cf55a9 .feature-box-wrapper .feature-box-icon>span {
        font-size: 24px;
        width: 60px;
        height: 60px;
        line-height: 60px;
        background-color: #2782f9;
        border-color: #fff;
    }

    .elementor-6732 .elementor-element.elementor-element-0cf55a9 .feature-box-wrapper .feature-box-title {
        text-transform: none;
    }

    .elementor-6732 .elementor-element.elementor-element-0cf55a9 .feature-box-wrapper .feature-box-title, .elementor-6732 .elementor-element.elementor-element-0cf55a9 .feature-box-wrapper .feature-box-title>a, .elementor-6732 .elementor-element.elementor-element-0cf55a9 .feature-box-wrapper .feature-box-title>a:hover {
        color: #252525;
    }

    .elementor-6732 .elementor-element.elementor-element-2ab9a6a>.elementor-widget-container {
        padding: 31px 30px 28px 40px;
        background-color: #fff;
        border-radius: 8px;
    }
    .elementor-6732 .elementor-element.elementor-element-2ab9a6a .feature-box-wrapper .feature-box-icon>span {
        font-size: 24px;
        width: 60px;
        height: 60px;
        line-height: 60px;
        background-color: #2782f9;
        border-color: #fff;
    }

    .elementor-6732 .elementor-element.elementor-element-2ab9a6a .feature-box-wrapper .feature-box-title {
        text-transform: none;
    }
    .elementor-6732 .elementor-element.elementor-element-2ab9a6a .feature-box-wrapper .feature-box-title, .elementor-6732 .elementor-element.elementor-element-2ab9a6a .feature-box-wrapper .feature-box-title>a, .elementor-6732 .elementor-element.elementor-element-2ab9a6a .feature-box-wrapper .feature-box-title>a:hover {
        color: #252525;
    }

    .breadcrumb {
        padding: 0 !important;
        display: block !important;
        background-color: unset !important;
    }

    .elementor-row.dynamic-form-container {
        justify-content: center;
    }

    input.parsley-success,
    select.parsley-success,
    textarea.parsley-success {
        color: #468847;
        background-color: #DFF0D8;
        border: 1px solid #D6E9C6;
    }

    input.parsley-error,
    select.parsley-error,
    textarea.parsley-error {
        color: #B94A48;
        background-color: #F2DEDE;
        border: 1px solid #EED3D7;
    }

    .parsley-errors-list {
        margin: 2px 0 3px;
        padding: 0;
        list-style-type: none;
        font-size: 0.9em;
        line-height: 0.9em;
        opacity: 0;
        color: #B94A48;

        transition: all .3s ease-in;
        -o-transition: all .3s ease-in;
        -moz-transition: all .3s ease-in;
        -webkit-transition: all .3s ease-in;
    }

    .parsley-errors-list.filled {
        opacity: 1;
    }

    .rendered-form .fb-radio-group .radio label {
        display: inline;
    }

    .rendered-form .fb-radio-group .radio-inline label {
        display: inline ;
        margin-bottom: 0;
    }

    input[type=checkbox], input[type=radio] {
        box-sizing: border-box;
        padding: 0;
    }

    .rendered-form .fb-radio-group .radio input{
        position: absolute !important;
        margin-top: 0.3rem !important;
        margin-left: -1.25rem !important;
    }
    .rendered-form .fb-radio-group .radio-inline input {
        position: static !important;
        margin-top: 0 !important;
        margin-right: 0.3125rem !important;
        margin-left: 0 !important;
    }

    .rendered-form .fb-radio-group .radio {
        position: relative;
        display: block;
        padding-left: 1.25rem !important;
    }

    .rendered-form .fb-radio-group .radio-inline {
        display: -ms-inline-flexbox;
        display: inline-flex;
        -ms-flex-align: center;
        align-items: center;
        padding-left: 0;
        margin-right: 0.75rem;
        position: relative;
    }

    .rendered-form .fb-checkbox-group .checkbox {
        position: relative;
        display: block;
        padding-left: 1.25rem !important;
    }

    .rendered-form .fb-checkbox-group .checkbox input {
        position: absolute !important;
        margin-top: 0.3rem !important;
        margin-left: -1.25rem !important;
    }

    .rendered-form .fb-checkbox-group .checkbox label {
        display: inline-block;
        margin-bottom: 0;
    }

    .rendered-form .fb-checkbox-group .checkbox-inline {
        display: -ms-inline-flexbox;
        display: inline-flex;
        -ms-flex-align: center;
        align-items: center;
        padding-left: 0;
        margin-right: 0.75rem;
        position: relative;
    }

    .rendered-form .fb-checkbox-group .checkbox-inline input {
        position: static !important;
        margin-top: 0 !important;
        margin-right: 0.3125rem !important;
        margin-left: 0 !important;
    }

    .rendered-form .fb-checkbox-group .checkbox-inline label {
        display: inline-block;
        margin-bottom: 0;
    }
</style>
@endsection
@section('content')

<div class="berater-content-wrapper">
    <div class="berater-content berater-page">
        <header id="page-title" class="page-title-wrap">
            <div class="page-title-wrap-inner" data-property="no-video"> <span class="page-title-overlay"></span>
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="page-title-inner">
                                <div class="pull-center">
                                    <!--<h1 class="page-title"></h1>-->
                                    <div id="breadcrumb" class="breadcrumb"><a href="/">Home</a>
                                    <a href="/jobs">Jobs</a> 
                                    <span class="current">Amgroup Form Application</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <div class="berater-content-inner">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div id="primary" class="content-area clearfix">
                            <div id="page-6732" class="post-6732 page type-page status-publish hentry">
                                <div data-elementor-type="wp-page" data-elementor-id="6732" class="elementor elementor-6732" data-elementor-settings="[]">
                                    <div class="elementor-inner">
                                        <div class="elementor-section-wrap">
                                          
                                            <section class="elementor-section elementor-top-section elementor-element elementor-element-4c74c9f2 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="4c74c9f2" data-element_type="section">
                                                <div class="elementor-container elementor-column-gap-default">
                                                    <div class="elementor-row dynamic-form-container">
                                                        <div class="elementor-column elementor-col-70 elementor-top-column elementor-element elementor-element-63c897e5" data-id="63c897e5" data-element_type="column" data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">
                                                            <div class="elementor-column-wrap elementor-element-populated">
                                                                <div class="elementor-widget-wrap">
                                                                    <div class="elementor-element elementor-element-5c993fb9 elementor-widget elementor-widget-beratersectiontitle" data-id="5c993fb9" data-element_type="widget" data-widget_type="beratersectiontitle.default">
                                                                        <div class="elementor-widget-container">
                                                                            <div class="section-title-wrapper margin-bottom-30 text-center-sm light-separator">
                                                                                <div class="title-wrap">
                                                                                    <!-- <span class="sub-title"></span> -->
                                                                                    <!--<h2 class="section-title"></h2><span class="title-separator separator-border theme-color-bg"></span>-->
                                                                                    </div>
                                                                                <div class="section-description"></div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="elementor-element elementor-element-4c5ad180 elementor-widget elementor-widget-contactform" data-id="4c5ad180" data-element_type="widget" data-widget_type="contactform.default">
                                                                        <div class="elementor-widget-container">
                                                                            <div class="contact-form-wrapper cf-default">
                                                                                <div class="contact-form">
                                                                                    <div role="form" class="wpcf7" id="wpcf7-f9742-p6732-o1" lang="en-US" dir="ltr">
                                                                                        <div class="screen-reader-response">
                                                                                            <p role="status" aria-live="polite" aria-atomic="true"></p>
                                                                                            <ul></ul>
                                                                                        </div>
                                                                                        <form action="{{ route('formbuilder::form.submit', $form->identifier) }}" class="wpcf7-form init" method="POST" id="submitForm" enctype="multipart/form-data">
                                                                                            @csrf
                                                                                            @if ($message = Session::get('success'))
                                                                                                <div class="alert alert-success alert-block">
                                                                                                    <strong class="sent-success">{{ $message }}</strong>
                                                                                                </div>
                                                                                            @endif
                                                                                            @if ($message = Session::get('error'))
                                                                                                <div class="alert alert-danger alert-block">
                                                                                                    <strong class="error-sent">{{ $message }}</strong>
                                                                                                </div>
                                                                                            @endif
                                                                                            <div class="row">
                                                                                                <div class="col-md-12">
                                                                                                    <div id="fb-render"></div>
                                                                                                </div>

                                                                                                <div class="col-md-12">
                                                                                                    <button type="submit" class="btn btn-primary confirm-form wpcf7-form-control wpcf7-submit" data-form="submitForm" data-message="Submit your entry for '{{ $form->name }}'?">
                                                                                                        <i class="fa fa-submit"></i> Send Now 
                                                                                                    </button>
                                                                                                </div>
                                                                                            </div>

                                                                                        </form>
                                                                                       
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                       
                                                    </div>
                                                </div>
                                            </section>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push(config('formbuilder.layout_js_stack', 'scripts'))
    <script type="text/javascript">
        window._form_builder_content = {!! json_encode($form->form_builder_json) !!}
    </script>
    <script src="{{ asset('vendor/formbuilder/js/render-form.js') }}{{ doode\FormBuilder\Helper::bustCache() }}" defer></script>
@endpush