@php

    $countries = get_countries();
    $countries_phone_code = get_countries_phone_code();
    $resume_data = @$resume_data;
    $education = @$resume_data->education;
    $employment = @$resume_data->employment;
    $certificates = @$resume_data->certificates;
    $awards = @$resume_data->awards;
    
    $upload_file_size   = config('common.upload_file_size');
    $allow_file_ext     = collect(config('common.allow_pdf'))->implode(', ');
    $upload_img_size    = config('common.upload_img_size');
    $allow_image_ext    = collect(config('common.allow_image_ext'))->implode(', ');
    
    $passport_photo = @$resume_data['passport_photo'];
    $passport_photo_path = config('common.user-documents').DS.$user->id.DS.$passport_photo;
    
    $passport_photo_url = empty(get_url($passport_photo_path)) 
                    ? url("assets/images/noavatar.png") 
                    : "storage".DS.$passport_photo_path;
@endphp

<style>
    .whatsapp-checkbox input[type=checkbox]{
        opacity: 1 !important;
        position: relative;
        z-index: 2;
    }
    
    .whatsapp-checkbox label::before{
        content: none !important;
    }
    
    .custom-fieldset {
    border: 1px solid #ddd;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 4px;
    position: relative;
    background: #fff;
}

.custom-legend {
    position: absolute;
    top: -10px;
    left: 15px;
    background: #fff;
    padding: 0 10px;
    font-size: 14px;
    font-weight: 600;
}


/* Force small modal width */
#modal-sm .modal-dialog {
    max-width: 600px !important;
}

/* Reduce modal body padding for compact look */
#modal-sm .modal-body2 {
    padding: 15px;
    overflow-y: auto;
    font-size: 15px;
}

.fw-bold{
    font-weight: 500;
    font-size: 15px;
}



</style>


<div class="app-status-panel-content custom_overflow">
    @if($action == "form_rb_7")
    
        <style>
        .form-control-feedback.fa {
            line-height: 2em !important;
        }
        
        .custom_feedback.fa{
            line-height: 0em !important;
            margin-top: -1.8em;
        }   
        </style>
        <form id="{{ $action }}" name="{{ $action }}" enctype="multipart/form-data">
            <input type="hidden" name="rb_step" value="7" />
            <input type="hidden" name="btn_action" value="" />
            <div class="col-sm-12">
                <h3>Candidate Information</h3>
                <div class="notify"></div>
            </div>
            <div class="col-md-12 col-sm-12 col-xs-12 text-right"> 
                <small class="required_instruction">
                    All fields with star (<span style="font-size: 15px;">*</span>) are required
                </small>
            </div>
            <div class="clearfix"></div>
            <div class="row">
                <div class="col-md-12">
                    <div class="col-md-4 col-sm-12">
                        <div class="form-group">
                            <label class="control-label">First Name <small class="text-danger text-required">*</small></label>
                            <input type="text" name="first_name" class="form-control" value="{{ @$user->first_name }}" data-notempty="notempty" required placeholder="First Name" />
                            <div class="help-block with-errors"></div>
                            <div class="form-control-feedback"></div>
                        </div>
                    </div>                    
                    <div class="col-md-4 col-sm-12">
                        <div class="form-group">
                            <label class="control-label">Middle Name <small class="text-danger text-required"></small></label>
                            <input type="text" name="middle_name" class="form-control" value="{{ @$user->middle_name }}" placeholder="Middle Name" />
                            <div class="help-block with-errors"></div>
                            <div class="form-control-feedback"></div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-12">
                        <div class="form-group">
                            <label class="control-label">Last Name <small class="text-danger text-required">*</small></label>
                            <input type="text" name="last_name" class="form-control" value="{{ @$user->last_name }}" data-notempty="notempty" required placeholder="Last Name" />
                            <div class="help-block with-errors"></div>
                            <div class="form-control-feedback"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-12 col-sm-12">
                <div class="form-group">
                    <label class="control-label">Mailing Address <small class="text-danger text-required">*</small></label>
                    <textarea name="address" class="form-control" required placeholder="Mailing Address" data-notempty="notempty">{{ @$resume_data->address }}</textarea>
                    <div class="help-block with-errors"></div>
                    <div class="form-control-feedback"></div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="col-md-6 col-sm-12">
                        <div class="form-group">
                            <label class="control-label">Country <small class="text-danger text-required">*</small></label>
                            <select name="country" class="form-control" required>
                                <option value="">-- Select Country --</option>
                                @foreach($countries as $country)
                                    <option value="{{ $country->country_id }}" {{ is_selected($country->country_id,@$resume_data->country_id) }} >{{ $country->country_name }}</option>
                                @endforeach
                            </select>
                            <div class="help-block with-errors"></div>
                            <div class="form-control-feedback"></div>
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-12 no-padding">
                        <div class="form-group">
                            <label class="control-label col-xs-12 col-md-12 col-sm-12 col-lg-12">Phone Number <small class="text-danger text-required">*</small></label>
                            <div class="col-xs-12 col-sm-4 col-md-3 col-lg-4 custom_select2">
                                <select name="primary_phone_country_code" id="primary_phone_country_code" class="form-control select2 reuired_select2" autocomplete="true" required>
                                    <option value="">-- Select Country Phone Code --</option>
                                    @foreach($countries_phone_code as $code)
                                        <option value="{{ $code }}" {{ is_selected($code,@$resume_data->primary_phone_country_code) }} >{{ $code }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-xs-12 col-md-9 col-sm-8 col-lg-8">
                                <input type="text" name="phone_no" class="form-control mask_ein " value="{{ @$resume_data->primary_phone }}" data-nowhitespace="nowhitespace" required placeholder="Phone no" />
                                <div class="help-block with-errors"></div>
                                <div class="form-control-feedback custom_feedback"></div>
                            </div>
                            
                              <div class="col-xs-12">
                                    <div class="checkbox whatsapp-checkbox">
                                        <label  >
                                            <input type="checkbox" name="is_whatsapp_number" value="1" {{ (!empty($resume_data->is_whatsapp_number) && $resume_data->is_whatsapp_number == 1) ? 'checked' : '' }}>
                                            This number is available on WhatsApp.
                                        </label>
                                    </div>
                                </div>
                            
                        </div>
                    </div>                   
                    
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 col-xs-12">
                    <div class="col-md-6 col-sm-12">
                        <div class="form-group">
                            <label class="control-label">Date of Birth <small class="text-danger text-required">*</small></label>
                            @php
                                        $at_date = "";
                                        if(!empty(@$resume_data->date_of_birth)){
                                            $at_date = dateformat(@$resume_data->date_of_birth,DATEPICKER_DATE);
                                        }
                                    @endphp

                                    <input type="text" class="form-control datepicker mobile_readonly" name="date_of_birth" id="date_of_birth" placeholder="Date of Birth" value="{{$at_date}}" required>
                            <div class="help-block with-errors"></div>
                            <div class="form-control-feedback"></div>
                        </div>
                    </div>
                    
                    

                <div class="col-md-6 col-sm-12">
                        <div class="form-group">
                            <label class="control-label">Email Address<small class="text-danger text-required">*</small></label>
                            @if(!empty($user->email))
                                <input type="email" name="email" class="form-control" value="{{ @$user->email }}" readonly="" required />
                            @else
                                <input type="email" name="email" class="form-control" value="{{ @$resume_data->email }}" required />
                            @endif
                            <div class="help-block with-errors"></div>
                            <div class="form-control-feedback"></div>
                        </div>
                    </div>
                </div>
                
                
                </div>
            
            <div class="row">
                <div class="col-md-12">
                    <div class="col-md-12 col-sm-12">
                        <div class="form-group">
                            <label class="control-label">Describe Yourself Briefly:  <small class="text-danger text-required">*</small></label>
                            <textarea name="introduction" class="form-control" required  placeholder="Briefly describe yourself and why you think you will be a good camp counselor. Try to keep this under 5 lines!" data-notempty="notempty">{{ @$resume_data->introduction }}</textarea>
                            <div class="help-block with-errors"></div>
                            <div class="form-control-feedback"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-12 col-sm-12">
                <div class="form-group">
                    <label class="control-label">Passport style picture <small class="text-danger text-required">*</small> </label>
                    @if(!empty(@$resume_data->passport_photo))
                    <div id="rb_existing_psp">
                        <label>{{ @$resume_data->passport_photo }} <!--<button type="button" class="text-danger" onclick="reNewPSP();"><i class="fa fa-times"></i></button>--></label>
                        <input type="hidden" name="file_check" value="1" />
                    </div>
                    @endif
                    <div id="rb_upload_psp" @if(!empty(@$resume_data->passport_photo)) style="display:none; " @endif>
                        <input type="file" name="passport_photo" value="" required="" @if(!empty(@$resume_data->passport_photo)) disabled @endif/>
                        <small class="text-orange">(Supported image formats: {{$allow_image_ext}} and maximum file Size {{$upload_img_size}} MB.)</small>
                    </div>
                    <div class="help-block with-errors"></div>
                    <div class="form-control-feedback"></div>
                </div>
            </div>
            <div class="col-md-12 col-sm-12">
                <div class="form-actions">
                    <button type="submit" name="save_next" value="save_next" class="btn @if(config('common.portal') == 'ODC') btn-odc btn-info-ODC @else btn-info @endif btn-xs-block" onclick="return setFormBtnAction('{{ $action }}',this.value)">Save & Next</button>
                    <button type="button" name="cancel" class="btn btn-danger btn-xs-block" onclick="return resumeBuilder('hide');">Cancel</button>
                </div>
            </div>
        </form>
    <script>
    $(document).ready(function(){
        $(".mask_ein").inputmask("999999999999");  
    });
    </script>
    @elseif($action == "form_rb_8")
    <style>
        .form-actions{
            margin-top: 0.7em;
            margin-left: 0.3em;
        }
    </style>
            
        <form id="{{ $action }}" name="{{ $action }}">
        <div class="addinfo_notify"></div>
        <input type="hidden" name="btn_action" value="" />
        <div id="popup_notify_id"></div>
        <div id="skill_category_div">
            
             <input type="hidden" name="rb_step" value="8" />
            <input type="hidden" name="btn_action" value="" />
            
            <div class="row m-b-12 pd-20">
                 <h3>Skills & Abilities</h3>
                <div class="notify"></div>
                
                <h3 class="d-inline-b">SELECT SKILLS</h3>
                <p>Begin by selecting the skill categories for activities you believe you can lead, teach or assist with at camp. You will choose the specific skills on the next page.</p>
                
                <div class="col-sm-12">
                    <div class="row">
                        @php $no=0; @endphp
                        @if(!empty($skill_category))
                            @foreach($skill_category as $category)
                            @php $no++; @endphp 
                            <label class="skill_cat_lable cpointer" for="skill_category_{{ $category['skill_category_id'] }}">
                            <div class="col-sm-4 col-md-4 col-xs-12 m-t-10 text-center p-5">
                                <div class="col-md-12 skill_cat_box p-r-0 p-l-0">
                                    <div class="text-center p-5 skill_cat_img_div">
                                    <img class="cpointer" src="{{ $category['document_download_link'] }}" style=" width: 90px; height: 90px;"/> 
                                    </div>
                                    @php
                                        $checked = in_array($category['skill_category_id'],$ev_skill_category_ids)?'checked':'';
                                    @endphp
                                    <div class="checkbox checkbox-info">
                                    <input type="checkbox" class="chk" id="skill_category_{{ $category['skill_category_id'] }}" name="skill_category[]" value="{{ $category['skill_category_id'] }}" {{$checked}} /> <label class="text-center text-info" for="skill_category_{{ $category['skill_category_id'] }}"> {{ $category['skill_category_name'] }}</label>
                                    </div>
                                </div>
                            </div> 
                            </label>
                            @if($no%3==0) </div><p class="p-3"></p><div class="row">@endif 
                            @endforeach
                        @endif 
                    </div> 
                    <div class="row">
                        <div class="form-actions">
                            <button type="button" name="back" value="8" class="btn @if(config('common.portal') == 'ODC') btn-odc btn-info-ODC @else btn-info @endif btn-xs-block" onclick="return gotoRBStep(this.value,'prev')">Back</button>
                            <button type="submit" name="save_next" value="save_next" class="btn @if(config('common.portal') == 'ODC') btn-odc btn-info-ODC @else btn-info @endif btn-xs-block" onclick="return setFormBtnAction('{{ $action }}',this.value)">Save & Next</button>
                            <button type="button" name="cancel" class="btn btn-danger btn-xs-block" onclick="return resumeBuilder('hide');">Cancel</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="skills_div" class="hide"></div>
        <div id="add_more_skill_detail_div" class="hide"></div>
    </form>
     </form>
    @elseif($action == "form_rb_9")
        <style>
                .dropdown-backdrop{  display:none; }
                .bootstrap-select .dropdown-menu a.readonly-select {
                    color: #999 !important;
                    background: #f2f2f2 !important;
                    pointer-events: none !important;
                }
            </style>
        <form id="{{ $action }}" name="{{ $action }}">
            <input type="hidden" name="rb_step" value="9" />
            <input type="hidden" name="btn_action" value="" />
            
            
    @if(!empty($skill_category))
        @foreach($skill_category as $value)
            <input type="hidden" name="skill_category2[]" value="{{ $value }}">
        @endforeach
    @endif
            
            <div class="row m-b-12">
                <h3>Skills & Abilities</h3>
                <div class="notify"></div>
                <h4 class="d-inline-b">Select Skills </h4>
                <p>You can select maximum 10 skills</p>
                <div class="col-sm-12">
                    <div class="row">                      
                       <div style="overflow:hidden;">
                           <select id="skills" name="skills[]" class="selectpicker skill_dropdown" data-container="body" tabindex="1" multiple data-style="btn-default btn-outline">

                            @if(!empty($skill_list_data['skill_category_list']))
                                @foreach($skill_list_data['skill_category_list'] as $category)
                                    <optgroup label="{{ $category['skill_category_name'] }}">

                                        @foreach($skill_list_data['skill_list'] as $skill)

                                            @if($category['skill_category_id'] == $skill['skill_category_id'])

                                                <option value="{{ $skill['skill_id'] }}"
                                                    {{ in_array($skill['skill_id'], $skill_list_data['selected_skill_list']) ? 'selected' : '' }}
                                                    @if($skill['skill_status'] == 0) class="readonly-select" @endif>
                                                    {!! $skill['skill_name'] !!}
                                                </option>

                                            @endif

                                        @endforeach

                                    </optgroup>
                                @endforeach
                            @endif

                        </select>
                        </div>
                        <div class="clearfix"></div>
                        <div class="form-actions m-t-20">
                             <button type="button" name="back" value="9" class="btn @if(config('common.portal') == 'ODC') btn-odc btn-info-ODC @else btn-info @endif btn-xs-block" onclick="return gotoRBStep(this.value,'prev')">Back</button>
                            <button type="submit" name="save_next" value="save_next" class="btn @if(config('common.portal') == 'ODC') btn-odc btn-info-ODC @else btn-info @endif btn-xs-block" onclick="return setFormBtnAction('{{ $action }}',this.value)">Save & Next</button>
                            <button type="button" name="cancel" class="btn btn-danger btn-xs-block" onclick="return resumeBuilder('hide');">Cancel</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
            <script>
                $('.selectpicker').selectpicker();
            </script>
    @elseif($action == "form_rb_10")
         <style>
        .dropdown-backdrop{  display:none; }
        .tabs-left {
        border-bottom: none;
        border-right: 1px solid #ddd;
      }

      .tabs-left>li {
        float: none;
       margin:0px;

      }

      .tabs-left>li.active>a,
      .tabs-left>li.active>a:hover,
      .tabs-left>li.active>a:focus {
        border-bottom-color: #ddd;
        border-right-color: transparent;
        background:#41b3f9;
        border:none;
        border-radius:0px;
        margin:0px;
      }
      .nav-tabs>li>a:hover {
          /* margin-right: 2px; */
          line-height: 1.42857143;
          border: 1px solid transparent;
          /* border-radius: 4px 4px 0 0; */
      }
      .tabs-left>li.active>a::after{content: "";
          position: absolute;
          top: 10px;
          right: -10px;
          border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;

        border-left: 10px solid #41b3f9;
          display: block;
          width: 0;
      }
      .tab-content{
          margin-top: 0px;
      }
      #skill_details_panel .panel {
          border : 1px solid rgba(120,130,140,.13);
      }

      #skill_details_panel .panel-heading {
          padding : 10px;
      }


    /* Rating Star Widgets Style */
    .rating-stars ul {
      list-style-type:none;
      padding:0;

      -moz-user-select:none;
      -webkit-user-select:none;
    }
    .rating-stars ul > li.star {
      display:inline-block;
      margin-right: 15px;

    }
    .star-display{
        display:inline-block;
        margin-left: 15px;
    }

    .star-display span{
        font-size:20px;
    }
    /* Idle State of the stars */
    .rating-stars ul > li.star > i.fa {
      font-size:2.5em; /* Change the size of the stars */
      color:#ccc; /* Color on idle state */
    }

    /* Hover state of the stars */
    .rating-stars ul > li.star.hover > i.fa {
      color:#FFCC36;
    }

    /* Selected state of the stars */
    .rating-stars ul > li.star.selected > i.fa {
      color:#FF912C;
    }
    .level_description ul{
        margin-left : -15px;
    }

    #pop {
      outline: none;
      position: relative;
      width: 75px;
      min-width: 75px;
      max-width: 255px;
    }

    #pop .tool-content {
      margin:0;
      padding:0;
      opacity: 0;
      visibility: hidden;
      position: absolute;
      width:100%;
      height:100%;
    }

    div.tooltip-inner {
        max-width: 450px;
        width: 450px;
        text-align: left;
    }
    .repsonsive-cols-kill li a {
                width: 100%;
                overflow-wrap: break-word;
    }
    @media (max-width:1366px){
        .tooltip-inner ul{
            padding:8px;
        }
        .tooltip-inner {
            max-width: 280px;
            width:280px !important;
        }
    }
    @media (max-width:1440px){
        .tooltip-inner ul{
            padding:8px;
        }
    }
    @media (max-width:480px){
        .repsonsive-cols-kill{
            padding:0px;
        }

        .repsonsive-cols-kill li a{
            padding:3px;
        }
        .repsonsive-cols-kill li {
            margin-bottom: 10px;
        }

        #skill_details_panel{
            padding-right: 0px;
        }
        #skill_details_panel .panel-body{
            padding-left: 20px !important;
        }
        .rating-stars ul > li.star > i.fa {
            font-size: 2em;
        }
        #skill_details_panel .star-display{
            margin-left:0px;
            margin-top:8px;
        }
        .tooltip-inner ul{
            padding:6px;
        }

        .tooltip-inner {
            max-width: 280px;
            width:280px !important;
        }
    }
    @media only screen and (max-width: 768px) and (min-width: 479px)  {

        #skill_details_panel{
            padding-right: 0px;
        }
        #skill_details_panel .panel-body{
            padding-left: 20px !important;
        }
        .rating-stars ul > li.star > i.fa {
            font-size: 2em;
        }
        #skill_details_panel .star-display{
            margin-left:0px;
            margin-top:8px;
        }
        .tooltip-inner ul{
            padding:6px;
        }
        .tooltip-inner {
            max-width: 350px;
            width:350px !important;
        }

    }
</style>
     @php
        $skill_details = $skill_details_data['skill_details'] ?? [];
        $skill_levels  = $skill_details_data['skill_levels'] ?? [];

        $star_arr = ["one","two","three","four","five","six","seven","eight","nine","ten"];
        $count_skill_details = count($skill_details);

        $levels_list = $skill_id_list = [];

        $tooltip = '';
        foreach ($skill_levels as $s_level) {
            $tooltip .= "<li> Star # {$s_level['level_id']} ({$s_level['level_title']}) {$s_level['level_desc']} </li>";
        }
        $tooltip = '<ul>' . $tooltip . '</ul>';
    @endphp


    <div class="row m-b-12">
        <div class="col-sm-12">
            <div class="row">
                <h3>Manage skill details</h3>
                <hr/>

                {{-- LEFT TABS --}}
                <div class="col-xs-3 repsonsive-cols-kill">
                    <ul class="nav nav-tabs tabs-left sideways">
                        @foreach($skill_details as $s_id => $skill)
                            <li class="{{ $s_id == 0 ? 'active' : '' }}">
                                <a href="#skill-{{ $skill['skill_id'] }}"
                                   data-toggle="tab"
                                   class="main_skill_tab_id_{{ $s_id }}">
                                    <b>{{ $skill['skill_name'] }}</b>
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>

                <form id="{{ $action }}" name="{{ $action }}">
                    <input type="hidden" name="rb_step" value="10" />
                    <input type="hidden" name="btn_action" value="" />

                    {{-- RIGHT PANEL --}}
                    <div class="col-xs-9" id="skill_details_panel">
                        <div class="tab-content">

                            @foreach($skill_details as $s_id => $skill)
                                @php
                                    $levels_list[] = $skill['level_id'];
                                    $skill_id_list[] = $skill['skill_id'];
                                @endphp

                                <div class="tab-pane {{ $s_id == 0 ? 'active' : '' }}"
                                     id="skill-{{ $skill['skill_id'] }}">

                                    <div class="panel panel-default">
                                        <div class="panel-heading">
                                            <b>Skill # {{ $skill['skill_name'] }}</b>
                                        </div>

                                        <div class="panel-body">
                                            <div class="row m-b-10">

                                                {{-- SKILL LEVEL --}}
                                                <div class="col-sm-12">
                                                    <div class="form-group m-b-20">
                                                        <label class="font-light font-13">
                                                            Skill Level
                                                            <span class="text-danger text-required">*</span>
                                                        </label>
                                                        [ <a href="javascript:void(0);"
                                                             class="html-tooltip"
                                                             data-html="true"
                                                             title="{!! $tooltip !!}">?</a> ]

                                                        <input type="hidden"
                                                               name="level_id[{{ $skill['skill_id'] }}]"
                                                               value="{{ $skill['level_id'] }}">

                                                        <section class="rating-widget">
                                                            <div class="rating-stars">
                                                                <ul id="stars_{{ $star_arr[$s_id] }}"
                                                                    class="stars stars_skill_id_{{ $skill['skill_id'] }}">

                                                                    @foreach($skill_levels as $s_level)
                                                                        <li class="star"
                                                                            data-desc="{{ $s_level['level_desc'] }}"
                                                                            title="{{ $s_level['level_title'] }}"
                                                                            data-title="{{ $s_level['level_title'] }}"
                                                                            data-value="{{ $s_level['level_id'] }}"
                                                                            data-s_id="{{ $skill['skill_id'] }}">
                                                                            <i class="fa fa-star fa-fw"></i>
                                                                        </li>
                                                                    @endforeach

                                                                    <li class="star-display">
                                                                        <span class="star-display-span-{{ $star_arr[$s_id] }}
                                                                            label label-success"></span>
                                                                    </li>
                                                                </ul>
                                                            </div>

                                                            <div class="success-box-{{ $star_arr[$s_id] }}">
                                                                <div class="text-message"></div>
                                                            </div>
                                                        </section>
                                                    </div>
                                                </div>

                                                {{-- COACHING --}}
                                                <div class="col-sm-12">
                                                    <div class="form-group m-b-20">
                                                        <label class="font-light font-13">
                                                            Do you have experience coaching or teaching this skill?
                                                            <span class="text-danger text-required">*</span>
                                                        </label>

                                                        <div class="form-check">
                                                            <input type="radio"
                                                                   class="form-check-input"
                                                                   name="skill_coaching[{{ $skill['skill_id'] }}]"
                                                                   value="y"
                                                                   {{ $skill['skill_coaching'] == 'y' ? 'checked' : '' }}>
                                                            <label class="form-check-label">Yes</label>
                                                        </div>

                                                        <div class="form-check">
                                                            <input type="radio"
                                                                   class="form-check-input"
                                                                   name="skill_coaching[{{ $skill['skill_id'] }}]"
                                                                   value="n"
                                                                   {{ $skill['skill_coaching'] == 'n' ? 'checked' : '' }}>
                                                            <label class="form-check-label">No</label>
                                                        </div>
                                                    </div>
                                                </div>

                                                {{-- DESCRIPTION --}}
                                                <div class="col-sm-12">
                                                    <div class="form-group m-b-20">
                                                        <label class="font-light font-13">
                                                            <span>Please explain your experience with this skill including any training or certifications you have </span>
                                                            <span class="text-danger text-required">*</span>
                                                            <span id="skills_experience_{{ $skill['skill_id'] }}" style="background-color: #dedbdb;padding: 0 5px;border: 1px solid;">{{ !empty($skill['skill_description']) ? max(0, 300 - mb_strlen($skill['skill_description'])) : 300 }}</span> characters left
                                                        </label>

                                                        <textarea class="form-control"
                                                                  maxlength="300"
                                                                  name="skill_description[{{ $skill['skill_id'] }}]"
                                                                  id="skill_description_{{ $skill['skill_id'] }}"
                                                                  placeholder="Please explain your experience with this skill including any training or certifications you have"
                                                                  onKeyDown="inputTextCounter(this,'skills_experience_{{ $skill['skill_id'] }}',300);"
                                                                  onKeyUp="inputTextCounter(this,'skills_experience_{{ $skill['skill_id'] }}',300);"
                                                                  onblur="inputTextCounter(this,'skills_experience_{{ $skill['skill_id'] }}',300);">{{ $skill['skill_description'] ?? '' }}</textarea>
                                                    </div>
                                                </div>

                                                {{-- NAV BUTTONS --}}
                                                <div class="col-sm-12">
                                                    <div class="form-group m-b-20">
                                                        @if($s_id != 0)
                                                            <button type="button"
                                                                    data-back_index="{{ $s_id - 1 }}"
                                                                    class="btn btn-info back_skill_btn">
                                                                Back
                                                            </button>
                                                        @endif

                                                        @if($s_id != ($count_skill_details - 1))
                                                            <button type="button"
                                                                    data-prev_index="{{ $s_id + 1 }}"
                                                                    class="btn btn-info next_skill_btn">
                                                                Next Skill Details
                                                            </button>
                                                        @endif
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach

                        </div>
                    </div>

                    <div class="clearfix"></div>

                    <div class="form-actions m-t-40">
                            <button type="button" name="back" value="10" class="btn @if(config('common.portal') == 'ODC') btn-odc btn-info-ODC @else btn-info @endif btn-xs-block" onclick="return gotoRBStep(this.value,'prev')">Back</button>
                            <button type="submit" name="save_next" value="save_next" class="btn @if(config('common.portal') == 'ODC') btn-odc btn-info-ODC @else btn-info @endif btn-xs-block" onclick="return setFormBtnAction('{{ $action }}',this.value)">Save & Next</button>
                            <button type="button" name="cancel" class="btn btn-danger btn-xs-block" onclick="return resumeBuilder('hide');">Cancel</button>
                        </div>

                </form>
            </div>
        </div>
    </div>
    
    <script>
    $(document).ready(function() {
        
        $(window).resize(changeSkillTooltip);
        changeSkillTooltip();

        function changeSkillTooltip() {
            var screensize= $(window).width();
            if(screensize <= 768){
                $(".html-tooltip").attr("data-placement","bottom");
                $('.html-tooltip').tooltip();
            }else{
                $(".html-tooltip").attr("data-placement","right");
                $('.html-tooltip').tooltip();
            }
        }
         
        $('input[type="radio"][name^="skill_coaching"]').on('change', function () {
 
            var skillBlock = $(this).closest('.col-sm-12');
 
            var descriptionBlock = skillBlock.next('.col-sm-12');

            var explainMsg = descriptionBlock.find('.explain_msg');
            var explain_desc = descriptionBlock.find('.explain_desc');
            var textarea = descriptionBlock.find('textarea');

            if ($(this).val() === 'y') {
                explainMsg.removeClass('hide');
                explain_desc.addClass('hide');
                textarea.attr(
                    'placeholder',
                    'Please explain your experience with this skill including any training or certifications you have'
                );
            } else {
                explainMsg.addClass('hide');
                explain_desc.removeClass('hide');
                textarea.attr(
                    'placeholder',
                    'Please explain your experience with this skill including any training or certifications you have'
                );
            }
        });
 
        $('input[type="radio"][name^="skill_coaching"]:checked').trigger('change');
        
            var next_step_key = '1_type_preferences';
            $("#manage_skill_form").submit(function(e){
                e.preventDefault();
                var skill_id_list = @json($skill_id_list);
                var error_status = false;
                $.each(skill_id_list, function( index, s_id ) {
                    if($('input[name="skill_coaching['+s_id+']"]').is(':checked') == false){
                        error_status = true;
                    }
                    if( $.trim($('#skill_description_'+s_id).val()) == ''){
                        error_status = true;
                    }
                    if( parseInt($('input[name="level_id['+s_id+']"]').val()) == 0 || $('input[name="level_id['+s_id+']"]').val() == '' || $('input[name="level_id['+s_id+']"]').val() == '0' ){
                        error_status = true;
                    }
                    
                    if(error_status){
                        notifyResponseTimerAlert('Please fill all required information.',"error","Error");
                        return false;
                    }
                });
                
                if(!error_status){
                    var url = "{{ route('updateskillsdetails') }}";
                    var form = $('#manage_skill_form')[0];
                    var formData = new FormData(form);
                    show_inner_loader(".timeline_stp_desc","#all_tab_data");               

                    $.ajax({
                        type: 'post',
                        url: url,
                        dataType: 'json',
                        cache : false,
                        processData: false,
                        contentType: false,
                        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                        data: formData, 
                        success: function(response) {
                            var messages = response.message;
                            if(response.type == "success")
                            {
                                notifyResponseTimerAlert(messages,response.type,response.type.charAt(0).toUpperCase()+ response.type.slice(1));
                                setTimeout(function(){
                                    navigateStages('1',next_step_key);
                                },3000);
                            } else {
                                notifyResponseTimerAlert(messages,response.type,response.type.charAt(0).toUpperCase()+ response.type.slice(1));
                            }
                            hide_inner_loader('.timeline_stp_desc',"#all_tab_data");
                        }
                    });
                }
            });
            
            $('.html-tooltip').tooltip();

            /* 1. Visualizing things on Hover - See next part for action on click */
            $('.stars li').on('mouseover', function(){
                var onStar = parseInt($(this).data('value'), 10); // The star currently mouse on

                // Now highlight all the stars that's not after the current hovered star
                $(this).parent().children('li.star').each(function(e){
                    if (e < onStar) {
                      $(this).addClass('hover');
                    }
                    else {
                      $(this).removeClass('hover');
                    }
                });

            }).on('mouseout', function(){
              $(this).parent().children('li.star').each(function(e){
                $(this).removeClass('hover');
              });
            });
  
  
            /* 2. Action to perform on click */
            $('#stars_one li').not( ".star-display" ).on('click', function(){
                var onStar = parseInt($(this).data('value'), 10); // The star currently selected
                var stars = $(this).parent().children('li.star');

                for (i = 0; i < stars.length; i++) {
                    $(stars[i]).removeClass('selected');
                }

                for (i = 0; i < onStar; i++) {
                    $(stars[i]).addClass('selected');
                }

                // JUST RESPONSE (Not needed)
                var ratingValue = parseInt($('#stars_one li.selected').last().data('value'), 10);
                var s_id = $(this).data('s_id');
                $('input[name="level_id['+s_id+']"]').val(ratingValue);
                var ratingTitle = $('#stars_one li.selected').last().data('title');
                $(".star-display-span-one").text(ratingTitle);
                msg = $(this).data('desc')
                responseMessage(msg, 'one');

            });
            
            $('#stars_two li').not( ".star-display" ).on('click', function(){
                var onStar = parseInt($(this).data('value'), 10); // The star currently selected
                var stars = $(this).parent().children('li.star');

                for (i = 0; i < stars.length; i++) {
                    $(stars[i]).removeClass('selected');
                }

                for (i = 0; i < onStar; i++) {
                    $(stars[i]).addClass('selected');
                }

                // JUST RESPONSE (Not needed)
                var ratingValue = parseInt($('#stars_two li.selected').last().data('value'), 10);
                var s_id = $(this).data('s_id');
                $('input[name="level_id['+s_id+']"]').val(ratingValue);
                var ratingTitle = $('#stars_two li.selected').last().data('title');
                $(".star-display-span-two").text(ratingTitle);
                msg = $(this).data('desc')
                responseMessage(msg, 'two');

            });


            $('#stars_three li').not( ".star-display" ).on('click', function(){
                var onStar = parseInt($(this).data('value'), 10); // The star currently selected
                var stars = $(this).parent().children('li.star');

                for (i = 0; i < stars.length; i++) {
                    $(stars[i]).removeClass('selected');
                }

                for (i = 0; i < onStar; i++) {
                    $(stars[i]).addClass('selected');
                }

                // JUST RESPONSE (Not needed)
                var ratingValue = parseInt($('#stars_three li.selected').last().data('value'), 10);
                var s_id = $(this).data('s_id');
                $('input[name="level_id['+s_id+']"]').val(ratingValue);
                var ratingTitle = $('#stars_three li.selected').last().data('title');
                $(".star-display-span-three").text(ratingTitle);
                msg = $(this).data('desc')
                responseMessage(msg, 'three');

            });


            $('#stars_four li').not( ".star-display" ).on('click', function(){
                var onStar = parseInt($(this).data('value'), 10); // The star currently selected
                var stars = $(this).parent().children('li.star');

                for (i = 0; i < stars.length; i++) {
                    $(stars[i]).removeClass('selected');
                }

                for (i = 0; i < onStar; i++) {
                    $(stars[i]).addClass('selected');
                }

                // JUST RESPONSE (Not needed)
                var ratingValue = parseInt($('#stars_four li.selected').last().data('value'), 10);
                var s_id = $(this).data('s_id');
                $('input[name="level_id['+s_id+']"]').val(ratingValue);
                var ratingTitle = $('#stars_four li.selected').last().data('title');
                $(".star-display-span-four").text(ratingTitle);
                msg = $(this).data('desc')
                responseMessage(msg, 'four');

            });


            $('#stars_five li').not( ".star-display" ).on('click', function(){
                var onStar = parseInt($(this).data('value'), 10); // The star currently selected
                var stars = $(this).parent().children('li.star');

                for (i = 0; i < stars.length; i++) {
                    $(stars[i]).removeClass('selected');
                }

                for (i = 0; i < onStar; i++) {
                    $(stars[i]).addClass('selected');
                }

                // JUST RESPONSE (Not needed)
                var ratingValue = parseInt($('#stars_five li.selected').last().data('value'), 10);
                var s_id = $(this).data('s_id');
                $('input[name="level_id['+s_id+']"]').val(ratingValue);
                var ratingTitle = $('#stars_five li.selected').last().data('title');
                $(".star-display-span-five").text(ratingTitle);
                msg = $(this).data('desc')
                responseMessage(msg, 'five');

            });
            
	    $('#stars_six li').not( ".star-display" ).on('click', function(){
                var onStar = parseInt($(this).data('value'), 10); // The star currently selected
                var stars = $(this).parent().children('li.star');

                for (i = 0; i < stars.length; i++) {
                    $(stars[i]).removeClass('selected');
                }

                for (i = 0; i < onStar; i++) {
                    $(stars[i]).addClass('selected');
                }

                // JUST RESPONSE (Not needed)
                var ratingValue = parseInt($('#stars_six li.selected').last().data('value'), 10);
                var s_id = $(this).data('s_id');
                $('input[name="level_id['+s_id+']"]').val(ratingValue);
                var ratingTitle = $('#stars_six li.selected').last().data('title');
                $(".star-display-span-six").text(ratingTitle);
                msg = $(this).data('desc')
                responseMessage(msg, 'six');

            });
            
            $('#stars_seven li').not( ".star-display" ).on('click', function(){
                var onStar = parseInt($(this).data('value'), 10); // The star currently selected
                var stars = $(this).parent().children('li.star');

                for (i = 0; i < stars.length; i++) {
                    $(stars[i]).removeClass('selected');
                }

                for (i = 0; i < onStar; i++) {
                    $(stars[i]).addClass('selected');
                }

                // JUST RESPONSE (Not needed)
                var ratingValue = parseInt($('#stars_seven li.selected').last().data('value'), 10);
                var s_id = $(this).data('s_id');
                $('input[name="level_id['+s_id+']"]').val(ratingValue);
                var ratingTitle = $('#stars_seven li.selected').last().data('title');
                $(".star-display-span-seven").text(ratingTitle);
                msg = $(this).data('desc')
                responseMessage(msg, 'seven');

            });
            
            $('#stars_eight li').not( ".star-display" ).on('click', function(){
               var onStar = parseInt($(this).data('value'), 10); // The star currently selected
               var stars = $(this).parent().children('li.star');

               for (i = 0; i < stars.length; i++) {
                   $(stars[i]).removeClass('selected');
               }

               for (i = 0; i < onStar; i++) {
                   $(stars[i]).addClass('selected');
               }

               // JUST RESPONSE (Not needed)
               var ratingValue = parseInt($('#stars_eight li.selected').last().data('value'), 10);
               var s_id = $(this).data('s_id');
               $('input[name="level_id['+s_id+']"]').val(ratingValue);
               var ratingTitle = $('#stars_eight li.selected').last().data('title');
               $(".star-display-span-eight").text(ratingTitle);
               msg = $(this).data('desc')
               responseMessage(msg, 'eight');

            });
           
            $('#stars_nine li').not( ".star-display" ).on('click', function(){
               var onStar = parseInt($(this).data('value'), 10); // The star currently selected
               var stars = $(this).parent().children('li.star');

               for (i = 0; i < stars.length; i++) {
                   $(stars[i]).removeClass('selected');
               }

               for (i = 0; i < onStar; i++) {
                   $(stars[i]).addClass('selected');
               }

               // JUST RESPONSE (Not needed)
               var ratingValue = parseInt($('#stars_nine li.selected').last().data('value'), 10);
               var s_id = $(this).data('s_id');
               $('input[name="level_id['+s_id+']"]').val(ratingValue);
               var ratingTitle = $('#stars_nine li.selected').last().data('title');
               $(".star-display-span-nine").text(ratingTitle);
               msg = $(this).data('desc')
               responseMessage(msg, 'nine');

            });
           
            $('#stars_ten li').not( ".star-display" ).on('click', function(){
               var onStar = parseInt($(this).data('value'), 10); // The star currently selected
               var stars = $(this).parent().children('li.star');

               for (i = 0; i < stars.length; i++) {
                   $(stars[i]).removeClass('selected');
               }

               for (i = 0; i < onStar; i++) {
                   $(stars[i]).addClass('selected');
               }

               // JUST RESPONSE (Not needed)
               var ratingValue = parseInt($('#stars_ten li.selected').last().data('value'), 10);
               var s_id = $(this).data('s_id');
               $('input[name="level_id['+s_id+']"]').val(ratingValue);
               var ratingTitle = $('#stars_ten li.selected').last().data('title');
               $(".star-display-span-ten").text(ratingTitle);
               msg = $(this).data('desc')
               responseMessage(msg, 'ten');

            });
            
            var trigger_stars = @json($levels_list);

            var trigger_stars_item = ["one","two","three","four","five","six","seven","eight","nine","ten"];
            $.each(trigger_stars, function( index, value ) {
                var star_index = trigger_stars_item[index];
                $('#stars_'+star_index+' li:nth-child('+value+')').trigger('click');
            });

            $(document).on("click","#back_btn_details",function(){
                $("#skills_div").removeClass("hide");
                $("#add_more_skill_detail_div").addClass("hide");     
                $("#skill_category_div").addClass("hide");            

            });
            
            
            $(document).on("click",".next_skill_btn",function(){
                var skill_tab_id = $(this).data('prev_index');
                $(".main_skill_tab_id_"+skill_tab_id).trigger("click");
            });
            
            $(document).on("click",".back_skill_btn",function(){
                var skill_tab_id = $(this).data('back_index');
                $(".main_skill_tab_id_"+skill_tab_id).trigger("click");
            });
            
  
    });
    function responseMessage(msg, index) {
        $('.success-box-'+index+' div.text-message').html("<span class='level_description'>" + msg + "</span>");
    }
</script>
    @elseif($action == "form_rb_11")
     <form id="{{ $action }}" name="{{ $action }}">
            <input type="hidden" name="rb_step" value="11" />
            <input type="hidden" name="btn_action" value="" />
            <input type="hidden" name="remove_existing_id" value="" />
            <div class="col-sm-12">
                <h3>Education</h3>
                <div class="notify"></div>
            </div>

            <div id="rb_edu_section_1" class="rb_section">
                <div class="col-sm-12">
                    <div class="section_title">
                        <input type="checkbox" id="check_rb_edu_1" name="education_1" class="rb_section_checkbox hide" value="1" checked  onclick="return false;">
                        <span>Education #1</span>
                    </div>
                </div>
                <div class="clearfix"></div>
                <div class="rb_section_content">
                    <input type="hidden" name="education[0][education_id]" value="{{ @$education[0]->id }}"/>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label">School or University / Location</label>
                                    <textarea name="education[0][school]" class="form-control" placeholder="School or University / Location ">{{ @$education[0]->school }}</textarea>     
                                    
                                    <div class="help-block with-errors"></div>
                                    <div class="form-control-feedback"></div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label">Full Name of The Degree</label>
                                    <input type="text" name="education[0][degree]" class="form-control" value="{{ @$education[0]->degree }}" placeholder="Full Name of The Degree" />
                                    <div class="help-block with-errors"></div>
                                    <div class="form-control-feedback"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label">Start Date</label>
                                    <input type="text" name="education[0][start_date]" class="form-control datepicker mobile_readonly" value="{{ dateformat(@$education[0]->start_date) }}" placeholder="Start Date" autocomplete="off" />
                                    <div class="help-block with-errors"></div>
                                    <div class="form-control-feedback"></div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label">Actual or Expected Graduation Date </label>
                                    <input type="text" name="education[0][end_date]" class="form-control datepicker mobile_readonly" value="{{ dateformat(@$education[0]->end_date) }}" placeholder="Actual or Expected Graduation Date" autocomplete="off" />
                                    <div class="help-block with-errors"></div>
                                    <div class="form-control-feedback"></div>
                                </div>
                            </div>
                        </div>
                    </div>
<!--                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="control-label">Concentration or Minor </label>
                            <input type="text" name="education[0][minor]" class="form-control" value="{{ @$education[0]->minor }}" placeholder="Concentration or Minor, if applicable" />
                            <div class="help-block with-errors"></div>
                            <div class="form-control-feedback"></div>
                        </div>
                    </div>-->
                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="control-label">Level of Degree </label>
                            <textarea name="education[0][description]" class="form-control" placeholder="Level of Degree" >{{ @$education[0]->description }}</textarea>
                            <div class="help-block with-errors"></div>
                            <div class="form-control-feedback"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="rb_edu_section_2" class="rb_section">
                <div class="col-sm-12">
                    <div class="section_title">
                        <input type="checkbox" id="check_rb_edu_2" name="education_2"  value="1" class="rb_section_checkbox" onclick="return toggleRBSection(this,'rb_edu_section_2','{{ $action }}')" {{ is_checked(@$education[1]->id, @$education[1]->id) }}/>
                        <span>Education #2</span>
                    </div>
                </div>
                <div class="rb_section_content">
                    <input type="hidden" name="education[1][education_id]" class="rb_existing_id" value="{{ @$education[1]->id }}"/>
                    <div class="clearfix"></div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label">School or University / Location</label>
                                    <input type="text" name="education[1][school]" class="form-control" value="{{ @$education[1]->school }}" placeholder="School or University / Location" />
                                    <div class="help-block with-errors"></div>
                                    <div class="form-control-feedback"></div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label">Full Name of The Degree</label>
                                    <input type="text" name="education[1][degree]" class="form-control" value="{{ @$education[1]->degree }}"  placeholder="Full Name of The Degree"/>
                                    <div class="help-block with-errors"></div>
                                    <div class="form-control-feedback"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label">Start Date</label>
                                    <input type="text" name="education[1][start_date]" class="form-control datepicker mobile_readonly" value="{{ dateformat(@$education[1]->start_date) }}" placeholder="Start Date" autocomplete="off" />
                                    <div class="help-block with-errors"></div>
                                    <div class="form-control-feedback"></div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label">Actual or Expected Graduation Date</label>
                                    <input type="text" name="education[1][end_date]" class="form-control datepicker mobile_readonly" value="{{ dateformat(@$education[1]->end_date) }}" placeholder="Actual or Expected Graduation Date" autocomplete="off" />
                                    <div class="help-block with-errors"></div>
                                    <div class="form-control-feedback"></div>
                                </div>
                            </div>
                        </div>
                    </div>
<!--                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="control-label">Concentration or Minor </label>
                            <input type="text" name="education[1][minor]" class="form-control" value="{{ @$education[1]->minor }}" placeholder="Concentration or Minor, if applicable" />
                            <div class="help-block with-errors"></div>
                            <div class="form-control-feedback"></div>
                        </div>
                    </div>-->

                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="control-label">Level of Degree </label>
                            <textarea name="education[1][description]" class="form-control" placeholder="Level of Degree" >{{ @$education[1]->description }}</textarea>
                            <div class="help-block with-errors"></div>
                            <div class="form-control-feedback"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="rb_edu_section_3" class="rb_section">
                <div class="col-sm-12">
                    <div class="section_title">
                        <input type="checkbox" id="check_rb_edu_3" name="education_3" value="1" class="rb_section_checkbox" onclick="return toggleRBSection(this,'rb_edu_section_3','{{ $action }}')" {{ is_checked(@$education[2]->id, @$education[2]->id) }}/>
                        <span>Education #3</span>
                    </div>
                </div>
                <div class="rb_section_content">
                    <input type="hidden" name="education[2][education_id]" class="rb_existing_id" value="{{ @$education[2]->id }}"/>
                    <div class="clearfix"></div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label">School or University / Location</label>
                                    <input type="text" name="education[2][school]" class="form-control" value="{{ @$education[2]->school }}" placeholder="School or University / Location"/>
                                    <div class="help-block with-errors"></div>
                                    <div class="form-control-feedback"></div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label">Full Name of The Degree</label>
                                    <input type="text" name="education[2][degree]" class="form-control" value="{{ @$education[2]->degree }}" placeholder="Full Name of The Degree"/>
                                    <div class="help-block with-errors"></div>
                                    <div class="form-control-feedback"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label">Start Date</label>
                                    <input type="text" name="education[2][start_date]" class="form-control datepicker mobile_readonly" value="{{ dateformat(@$education[2]->start_date) }}" placeholder="Start Date" autocomplete="off" />
                                    <div class="help-block with-errors"></div>
                                    <div class="form-control-feedback"></div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label">Actual or Expected Graduation Date</label>
                                    <input type="text" name="education[2][end_date]" class="form-control datepicker mobile_readonly" value="{{ dateformat(@$education[2]->end_date) }}" placeholder="Actual or Expected Graduation Date" autocomplete="off" />
                                    <div class="help-block with-errors"></div>
                                    <div class="form-control-feedback"></div>
                                </div>
                            </div>
                        </div>
                    </div>
<!--                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="control-label">Concentration or Minor </label>
                            <input type="text" name="education[2][minor]" class="form-control" value="{{ @$education[2]->minor }}" placeholder="Concentration or Minor, if applicable" />
                            <div class="help-block with-errors"></div>
                            <div class="form-control-feedback"></div>
                        </div>
                    </div>-->
                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="control-label">Level of Degree </label>
                            <textarea name="education[2][description]" class="form-control" placeholder="Brief description of degree or courses Level of Degree" >{{ @$education[2]->description }}</textarea>
                            <div class="help-block with-errors"></div>
                            <div class="form-control-feedback"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-12 col-sm-12">
                <div class="form-actions">
                    <button type="button" name="back" value="11" class="btn @if(config('common.portal') == 'ODC') btn-odc btn-info-ODC @else btn-info @endif btn-xs-block" onclick="return gotoRBStep(this.value,'prev')">Back</button>
                    <button type="submit" name="save_next" value="save_next" class="btn @if(config('common.portal') == 'ODC') btn-odc btn-info-ODC @else btn-info @endif btn-xs-block" onclick="return setFormBtnAction('{{ $action }}',this.value)">Save & Next</button>
                    <button type="button" name="cancel" class="btn btn-danger btn-xs-block" onclick="return resumeBuilder('hide');">Cancel</button>
                </div>
            </div>
        </form>
    @elseif($action == "form_rb_12")
    <form id="{{ $action }}" name="{{ $action }}">
            <input type="hidden" name="rb_step" value="12" />
            <input type="hidden" name="btn_action" value="" />
            <input type="hidden" name="remove_existing_id" value="" />
            <div class="col-sm-12">
                <h3>EXPERIENCE WITH CHILDREN</h3>
                <div class="notify"></div>
            </div>
            <div id="rb_emp_section_1" class="rb_section">
                <div class="col-sm-12">
                    <div class="section_title">
                        <input type="checkbox" id="check_rb_emp_1" name="hostcompany_1" value="1" class="rb_section_checkbox hide" checked>
                        <span>Company #1</span>
                    </div>
                </div>
                <div class="rb_section_content">
                    <input type="hidden" name="employment[0][employment_id]" value="{{ @$employment[0]->id }}"/>
                    <div class="row">
                        <div class="col-md-12">                            
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label">Company Name / Location 
                                    <span id="employer_name_0" style="background-color: #dedbdb;padding: 0 5px;border: 1px solid;">{{ !empty(@$employment[0]->employer_name) ? max(0, 150 - mb_strlen(@$employment[0]->employer_name)) : 150 }}</span> characters left
                                    </label>                                    
                                      <textarea name="employment[0][employer_name]" class="form-control" placeholder="Company Name / Location"
                                                onKeyDown="inputTextCounter(this,'employer_name_0',150);"
                                                onKeyUp="inputTextCounter(this,'employer_name_0',150);"
                                                onblur="inputTextCounter(this,'employer_name_0',150);"
                                                >{{ @$employment[0]->employer_name }}</textarea>                                      
                                    <div class="help-block with-errors"></div>
                                    <div class="form-control-feedback"></div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label">Position / Title
                                    <span id="position_title_0" style="background-color: #dedbdb;padding: 0 5px;border: 1px solid;">{{ !empty(@$employment[0]->title) ? max(0, 150 - mb_strlen(@$employment[0]->title)) : 150 }}</span> characters left
                                    </label>
                                    <textarea name="employment[0][title]" class="form-control" placeholder="Position / Title" onKeyDown="inputTextCounter(this,'position_title_0',150);" onKeyUp="inputTextCounter(this,'position_title_0',150);" onblur="inputTextCounter(this,'position_title_0',150);">{{ @$employment[0]->title }}</textarea>                                      
                                    <div class="help-block with-errors"></div>
                                    <div class="form-control-feedback"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label">Start Date of Employment</label>
                                    <input type="text" name="employment[0][start_date]" class="form-control datepicker mobile_readonly" value="{{ dateformat(@$employment[0]->start_date) }}" placeholder="Start Date" autocomplete="off" />
                                    <div class="help-block with-errors"></div>
                                    <div class="form-control-feedback"></div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label">End Date or Present</label>
                                    <input type="text" name="employment[0][end_date]" class="form-control datepicker mobile_readonly" value="{{ dateformat(@$employment[0]->end_date) }}" placeholder="End Date" autocomplete="off" />
                                    <div class="help-block with-errors"></div>
                                    <div class="form-control-feedback"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-12">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="control-label">Please Describe Your Experience</label>
                                    <span id="duties_0" style="background-color: #dedbdb;padding: 0 5px;border: 1px solid;">{{ !empty(@$employment[0]->duties) ? max(0, 300 - mb_strlen(@$employment[0]->duties)) : 300 }}</span> characters left
                                    <textarea name="employment[0][duties]" class="form-control" placeholder="Please Describe Your Experience" onKeyDown="inputTextCounter(this,'duties_0',300);" onKeyUp="inputTextCounter(this,'duties_0',300);" onblur="inputTextCounter(this,'duties_0',300);">{{ @$employment[0]->duties }}</textarea>
                                    <div class="help-block with-errors"></div>
                                    <div class="form-control-feedback"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="rb_emp_section_2" class="rb_section">
                <div class="col-sm-12">
                    <div class="section_title">
                        <input type="checkbox" id="check_rb_emp_2" name="hostcompany_2" value="1" class="rb_section_checkbox" onclick="return toggleRBSection(this,'rb_emp_section_2','{{ $action }}')" {{ is_checked(@$employment[1]->id, @$employment[1]->id) }}/>
                        <span>Company #2</span>
                    </div>
                </div>
                <div class="rb_section_content">
                    <input type="hidden" name="employment[1][employment_id]" class="rb_existing_id" value="{{ @$employment[1]->id }}"/>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label">Company Name / Location
                                    <span id="employer_name_1" style="background-color: #dedbdb;padding: 0 5px;border: 1px solid;">{{ !empty(@$employment[1]->employer_name) ? max(0, 150 - mb_strlen(@$employment[1]->employer_name)) : 150 }}</span> characters left
                                    </label>
                                    <input type="text" name="employment[1][employer_name]" class="form-control" value="{{ @$employment[1]->employer_name }}" placeholder="Company Name / Location" onKeyDown="inputTextCounter(this,'employer_name_1',150);" onKeyUp="inputTextCounter(this,'employer_name_1',150);" onblur="inputTextCounter(this,'employer_name_1',150);"/>
                                    <div class="help-block with-errors"></div>
                                    <div class="form-control-feedback"></div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label">Position / Title <span id="position_title_1" style="background-color: #dedbdb;padding: 0 5px;border: 1px solid;">{{ !empty(@$employment[1]->title) ? max(0, 150 - mb_strlen(@$employment[1]->title)) : 150 }}</span> characters left</label>
                                    <input type="text" name="employment[1][title]" class="form-control" value="{{ @$employment[1]->title }}" placeholder="Position / Title" onKeyDown="inputTextCounter(this,'position_title_1',150);" onKeyUp="inputTextCounter(this,'position_title_1',150);" onblur="inputTextCounter(this,'position_title_1',150);" />
                                    <div class="help-block with-errors"></div>
                                    <div class="form-control-feedback"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label">Start Date of Employment </label>
                                    <input type="text" name="employment[1][start_date]" class="form-control datepicker mobile_readonly" value="{{ dateformat(@$employment[1]->start_date) }}"  placeholder="Start Date" autocomplete="off" />
                                    <div class="help-block with-errors"></div>
                                    <div class="form-control-feedback"></div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label">End Date or Present </label>
                                    <input type="text" name="employment[1][end_date]" class="form-control datepicker mobile_readonly" value="{{ dateformat(@$employment[1]->end_date) }}"  placeholder="End Date" autocomplete="off" />
                                    <div class="help-block with-errors"></div>
                                    <div class="form-control-feedback"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="control-label">Please Describe Your Experience</label>
                                    <span id="duties_1" style="background-color: #dedbdb;padding: 0 5px;border: 1px solid;">{{ !empty(@$employment[1]->duties) ? max(0, 300 - mb_strlen(@$employment[1]->duties)) : 300 }}</span> characters left
                                    <textarea name="employment[1][duties]" class="form-control" placeholder="Please Describe Your Experience" onKeyDown="inputTextCounter(this,'duties_1',300);" onKeyUp="inputTextCounter(this,'duties_1',300);" onblur="inputTextCounter(this,'duties_1',300);">{{ @$employment[1]->duties }}</textarea>
                                    <div class="help-block with-errors"></div>
                                    <div class="form-control-feedback"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="rb_emp_section_3" class="rb_section">
                <div class="col-sm-12">
                    <div class="section_title">
                        <input type="checkbox" id="check_rb_emp_3" name="hostcompany_3" value="1" class="rb_section_checkbox" onclick="return toggleRBSection(this,'rb_emp_section_3','{{ $action }}')" {{ is_checked(@$employment[2]->id, @$employment[2]->id) }}/>
                        <span>Company #3</span>
                    </div>
                </div>
                <div class="rb_section_content">
                    <input type="hidden" name="employment[2][employment_id]" class="rb_existing_id" value="{{ @$employment[2]->id }}"/>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label">Company Name / Location
                                    <span id="employer_name_2" style="background-color: #dedbdb;padding: 0 5px;border: 1px solid;">{{ !empty(@$employment[2]->employer_name) ? max(0, 150 - mb_strlen(@$employment[2]->employer_name)) : 150 }}</span> characters left
                                    </label>
                                     <input type="text" name="employment[2][employer_name]" class="form-control" value="{{ @$employment[2]->employer_name }}" placeholder="Company Name / Location" onKeyDown="inputTextCounter(this,'employer_name_2',150);" onKeyUp="inputTextCounter(this,'employer_name_2',150);" onblur="inputTextCounter(this,'employer_name_2',150);"/>
                                    <div class="help-block with-errors"></div>
                                    <div class="form-control-feedback"></div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label">Position / Title <span id="position_title_2" style="background-color: #dedbdb;padding: 0 5px;border: 1px solid;">{{ !empty(@$employment[2]->title) ? max(0, 150 - mb_strlen(@$employment[2]->title)) : 150 }}</span> characters left</label>
                                    <input type="text" name="employment[2][title]" class="form-control" value="{{ @$employment[2]->title }}" placeholder="Position / Title" onKeyDown="inputTextCounter(this,'position_title_2',150);" onKeyUp="inputTextCounter(this,'position_title_2',150);" onblur="inputTextCounter(this,'position_title_2',150);"/>
                                    <div class="help-block with-errors"></div>
                                    <div class="form-control-feedback"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label">Start Date of Employment </label>
                                    <input type="text" name="employment[2][start_date]" class="form-control datepicker mobile_readonly" value="{{ dateformat(@$employment[2]->start_date) }}"  placeholder="Start Date" autocomplete="off" />
                                    <div class="help-block with-errors"></div>
                                    <div class="form-control-feedback"></div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label">End Date or Present </label>
                                    <input type="text" name="employment[2][end_date]" class="form-control datepicker mobile_readonly" value="{{ dateformat(@$employment[2]->end_date) }}"  placeholder="End Date" autocomplete="off" />
                                    <div class="help-block with-errors"></div>
                                    <div class="form-control-feedback"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="control-label">Please Describe Your Experience</label>
                                    <span id="duties_2" style="background-color: #dedbdb;padding: 0 5px;border: 1px solid;">{{ !empty(@$employment[2]->duties) ? max(0, 300 - mb_strlen(@$employment[2]->duties)) : 300 }}</span> characters left
                                    <textarea name="employment[2][duties]" class="form-control" placeholder="Please Describe Your Experience" onKeyDown="inputTextCounter(this,'duties_2',300);" onKeyUp="inputTextCounter(this,'duties_2',300);" onblur="inputTextCounter(this,'duties_2',300);">{{ @$employment[2]->duties }}</textarea>
                                    <div class="help-block with-errors"></div>
                                    <div class="form-control-feedback"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-12 col-sm-12">
                <div class="form-actions">
                    <button type="button" name="back" value="12" class="btn @if(config('common.portal') == 'ODC') btn-odc btn-info-ODC @else btn-info @endif btn-xs-block" onclick="return gotoRBStep(this.value,'prev')">Back</button>
                    <button type="submit" name="save_next" value="save_next" class="btn @if(config('common.portal') == 'ODC') btn-odc btn-info-ODC @else btn-info @endif btn-xs-block" onclick="return setFormBtnAction('{{ $action }}',this.value)">Save & Next</button>
                    <button type="button" name="cancel" class="btn btn-danger btn-xs-block" onclick="return resumeBuilder('hide');">Cancel</button>
                </div>
            </div>
        </form>
    @elseif($action == "form_rb_13")
    
    
<!-- Bootstrap Modal -->
      <div id="modal-sm" class="modal modal-effect fade bs-example-modal-sm" tabindex="-1" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-sm">
    
      <div class="modal-content">
<div class="modal-header bg-info">
    <button type="button" class="close text-white" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3 class="modal-title text-white">Lifeguard Certification Prerequisites</h3>
</div>
 <div class="modal-body2" style="min-height: 400px !important;">

        <p>You would need to be able to pass the pre-requisite used in most US lifeguarding courses which includes:</p>

        <h6 class="fw-bold">Prerequisite 1: Complete a swim-tread-swim sequence without stopping to rest:</h6>
        <ul>
          <li>Jump into the water and totally submerge, resurface then swim 150 yards using the front crawl, breaststroke or a combination of both. (Swimming on the back or side is not permitted. Swim goggles are allowed.)</li>
          <li>Maintain position at the surface of the water for 2 minutes by treading water using only the legs.</li>
          <li>Swim 50 yards using the front crawl, breaststroke or a combination of both.</li>
        </ul>

        <h6 class="fw-bold">Prerequisite 2: Complete a timed event within 1 minute, 40 seconds:</h6>
        <ul>
          <li>Starting in the water, swim 20 yards. (The face may be in or out of the water. Swim goggles are not allowed.)</li>
            <li>Surface dive (feet-first or head-first) to a depth of 7 – 10 feet to retrieve a 10-pound object.</li>
            <li>Return to the surface and swim 20 yards on the back to return to the starting point, holding the object at the surface with both hands and keeping the face out at or near the surface.</li>
            <li>Exit the water without using a ladder or steps.</li>

        </ul>

      </div>
<div class="modal-footer">
    <button type="button" class="btn btn-danger mbottom5 btn-xs-block" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
      
      
  </div>
</div>

    <form id="{{ $action }}" name="{{ $action }}">
            <input type="hidden" name="rb_step" value="13" />
            <input type="hidden" name="btn_action" value="" />
            <input type="hidden" name="remove_existing_id" value="" />
            <div class="col-sm-12">
                <h3>QUESTIONAIRE</h3>
                <div class="notify"></div>
            </div>
            <div id="rb_emp_section_1" class="rb_section">
                <div class="rb_section_content">
                    

                    <div class="col-sm-12">
                        <div class="custom-fieldset">
                            <div class="custom-legend">Previous Experience:</div>
                            <div class="row">

                                <div class="col-sm-12">
                                    <div class="form-group m-b-20">
                                        <label class="font-light font-13 camp_counselor_program_past_label common_label">
                                            Participated in the J-1 Camp Counselor Program in the past?
                                            <span class="text-danger text-required">*</span>
                                        </label>

                                        <div class="form-check">
                                                <input type="radio" class="form-check-input" name="camp_counselor_program_past" id="camp_counselor_program_past_yes" value="1" {{ @$resume_data->camp_counselor_program_past == '1' ? 'checked' : '' }}>
                                            <label class="form-check-label" for="camp_counselor_program_past_yes">Yes</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="radio" class="form-check-input" name="camp_counselor_program_past" id="camp_counselor_program_past_no" value="0" {{ @$resume_data->camp_counselor_program_past == '0' ? 'checked' : '' }}>
                                            <label class="form-check-label" for="camp_counselor_program_past_no">No</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-12" id="camp_many_times_wrapper" style="display: {{ (@$resume_data->camp_counselor_program_past ?? '') == '1' ? 'block' : 'none' }};">
                                    <div class="form-group">
                                        <label class="control-label"> how many times? <small class="text-danger text-required">*</small></label>
                                        <select name="camp_counselor_past_many_times" class="form-control" required>
                                            <option value="1" {{ @$resume_data->camp_counselor_past_many_times == '1' ? 'selected' : '' }}>1</option>
                                            <option value="2" {{ @$resume_data->camp_counselor_past_many_times == '2' ? 'selected' : '' }}>2</option>
                                            <option value="3" {{ @$resume_data->camp_counselor_past_many_times == '3' ? 'selected' : '' }}>3</option>
                                            <option value="4" {{ @$resume_data->camp_counselor_past_many_times == '4' ? 'selected' : '' }}>4</option>
                                            <option value="5" {{ @$resume_data->camp_counselor_past_many_times == '5' ? 'selected' : '' }}>5</option>
                                        </select>
                                        <div class="help-block with-errors"></div>
                                        <div class="form-control-feedback"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-12">
                        <div class="custom-fieldset">
                            <div class="custom-legend">Faith-based Camp:</div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="form-group m-b-20">
                                        <label class="font-light font-13 faith_based_camp_label common_label">
                                            Are you willing to work at a faith-based camp?
                                            <span class="text-danger text-required">*</span>
                                        </label>

                                        <div class="form-check">
                                            <input type="radio" class="form-check-input" name="faith_based_camp" id="faith_based_camp_yes" value="1" {{ @$resume_data->faith_based_camp== '1' ? 'checked' : '' }}>
                                            <label class="form-check-label" for="faith_based_camp_yes">Yes</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="radio" class="form-check-input" name="faith_based_camp" value="0" id="faith_based_camp_no" {{ @$resume_data->faith_based_camp== '0' ? 'checked' : '' }}>
                                            <label class="form-check-label" for="faith_based_camp_no">No</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12 col-sm-12">
                                    <div class="form-group">
                                        <label class="control-label"> What is your religion and/or denomination? <span class="text-danger text-required">*</span>
                                        <span id="religion_counter" style="background-color: #dedbdb;padding: 0 5px;border: 1px solid;">{{ !empty(@$resume_data->religion) ? max(0, 150 - mb_strlen(@$resume_data->religion)) : 150 }}</span> characters left
                                        </label>
                                        <textarea name="religion" class="form-control" placeholder="Fill in here" onKeyDown="inputTextCounter(this,'religion_counter',150);" onKeyUp="inputTextCounter(this,'religion_counter',150);" onblur="inputTextCounter(this,'religion_counter',150);" required>{{ @$resume_data->religion }}</textarea>
                                        <div class="help-block with-errors"></div>
                                        <div class="form-control-feedback"></div>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="control-label describe_doctrine_label common_label"> Please describe your testimony/doctrine: <span class="text-danger text-required">*</span></label>
                                        <textarea name="describe_doctrine" class="form-control" placeholder="Fill in here" required>{{ @$resume_data->describe_doctrine }}</textarea>
                                        <div class="help-block with-errors"></div>
                                        <div class="form-control-feedback"></div>
                                    </div>
                                </div>
                                <div class="col-sm-12">
                                    <div class="form-group m-b-20">
                                        <label class="font-light font-13 activities_such_as_bible_study_label common_label">
                                            Are you comfortable leading and/or planning faith-based activities such as bible study, etc.?
                                            <span class="text-danger text-required">*</span>
                                        </label>

                                        <div class="form-check">
                                            <input type="radio" class="form-check-input" name="activities_such_as_bible_study" id="activities_such_as_bible_study_yes" value="1" {{ @$resume_data->activities_such_as_bible_study== '1' ? 'checked' : '' }}>
                                            <label class="form-check-label" for="activities_such_as_bible_study_yes">Yes</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="radio" class="form-check-input" name="activities_such_as_bible_study" id="activities_such_as_bible_study_no"  value="0" {{ @$resume_data->activities_such_as_bible_study== '0' ? 'checked' : '' }}>
                                            <label class="form-check-label" for="activities_such_as_bible_study_no">No</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="col-sm-12">
                        <div class="custom-fieldset">
                            <div class="custom-legend">Special & Medical Needs Camps:</div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="form-group m-b-20">
                                        <label class="font-light font-13 personal_care_label common_label">
                                            Are you comfortable assisting with personal care to youth or adult campers with special needs, that may include feeding, hygiene, dressing, toileting, mobility support, etc.? 
                                            <span class="text-danger text-required">*</span>
                                        </label>

                                        <div class="form-check">
                                            <input type="radio" class="form-check-input" name="personal_care" id="personal_care_yes" value="1" {{ @$resume_data->personal_care == '1' ? 'checked' : '' }}>
                                            <label class="form-check-label" for="personal_care_yes">Yes</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="radio" class="form-check-input" name="personal_care" id="personal_care_no" value="0" {{ @$resume_data->personal_care == '0' ? 'checked' : '' }}>
                                            <label class="form-check-label" for="personal_care_no">No</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-12">
                                    <div class="form-group m-b-20">
                                        <label class="font-light font-13 special_needs_children_label common_label">
                                            Do you have experience working with special needs children or adults?
                                            <span class="text-danger text-required">*</span>
                                        </label>

                                        <div class="form-check">
                                            <input type="radio" class="form-check-input" name="special_needs_children" id="special_needs_children_yes" value="1" {{ @$resume_data->special_needs_children=='1'?'checked':'' }}>
                                            <label class="form-check-label" for="special_needs_children_yes">Yes</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="radio" class="form-check-input" name="special_needs_children" id="special_needs_children_no" value="0" {{ @$resume_data->special_needs_children=='0'?'checked':'' }}>
                                            <label class="form-check-label" for="special_needs_children_no">No</label>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-sm-12">
                                    <div class="form-group m-b-20">
                                        <label class="font-light font-13 work_special_needs_camp_label common_label">
                                            Are you willing to work with primarily adult campers, in a special needs camp setting?
                                            <span class="text-danger text-required">*</span>
                                        </label>

                                        <div class="form-check">
                                            <input type="radio" class="form-check-input" name="work_special_needs_camp" id="work_special_needs_camp_yes" value="1" {{ @$resume_data->work_special_needs_camp =='1'?'checked':'' }}>
                                            <label class="form-check-label" for="work_special_needs_camp_yes">Yes</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="radio" class="form-check-input" name="work_special_needs_camp" id="work_special_needs_camp_no" value="0" {{ @$resume_data->work_special_needs_camp =='0'?'checked':'' }}>
                                            <label class="form-check-label" for="work_special_needs_camp_no">No</label>
                                        </div>
                                    </div>
                                </div>
                                
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-sm-12">
                        <div class="custom-fieldset">
                            <div class="custom-legend">General Questions:</div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="form-group m-b-20">
                                        <label class="font-light font-13 lifeguard_certified_label common_label">
                                            Are you willing and able to become lifeguard certified (the camp would provide training <a href="javascript:void(0);" onclick="open_model();"><i class="fa fa-info-circle text-primary" style="cursor:pointer;font-size: 18px;"></i></a> )?
                                            <span class="text-danger text-required">*</span>
                                        </label>

                                        <div class="form-check">
                                            <input type="radio" class="form-check-input" name="lifeguard_certified" id="lifeguard_certified_yes" value="1" {{ @$resume_data->lifeguard_certified=='1'?'checked':'' }}>
                                            <label class="form-check-label" for="lifeguard_certified_yes">Yes, I have the swimming skills needed.</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="radio" class="form-check-input" name="lifeguard_certified" id="lifeguard_certified_yes_certified" value="2" {{ @$resume_data->lifeguard_certified=='2'?'checked':'' }}>
                                            <label class="form-check-label" for="lifeguard_certified_yes_certified">Yes, I am currently or previously lifeguard certified.</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="radio" class="form-check-input" name="lifeguard_certified" id="lifeguard_certified_no" value="0" {{ @$resume_data->lifeguard_certified=='0'?'checked':'' }}>
                                            <label class="form-check-label" for="lifeguard_certified_no">No</label>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-sm-12">
                                    <div class="form-group m-b-20">
                                        <label class="font-light font-13 rustic_env_comfort_label common_label">
                                            Are you comfortable living in a rustic environment at camp? <span class="text-danger text-required">*</span><br/>
                                            (May include limited access to electricity, no or limited air conditioning, no or limited flushing toilets, open air cabins/platform tents, etc.)
                                        </label>

                                        <div class="form-check">
                                            <input type="radio" class="form-check-input" name="rustic_env_comfort" id="rustic_env_comfort_yes" value="1" {{ @$resume_data->rustic_env_comfort=='1'?'checked':'' }}>
                                            <label class="form-check-label" for="rustic_env_comfort_yes">Yes</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="radio" class="form-check-input" name="rustic_env_comfort" id="rustic_env_comfort_no" value="0" {{ @$resume_data->rustic_env_comfort=='0'?'checked':'' }}>
                                            <label class="form-check-label" for="rustic_env_comfort_no">No</label>
                                        </div>
                                    </div>
                                </div>


                                <div class="col-md-12 col-sm-12">
                                    <div class="form-group">
                                        <label class="control-label">Why do you want to work at a camp in the United States? <span class="text-danger text-required">*</span></label>
                                        <textarea name="why_work_us_camp" class="form-control" required placeholder="Fill in here" data-notempty="notempty">{{ @$resume_data->why_work_us_camp }}</textarea>
                                        <div class="help-block with-errors"></div>
                                        <div class="form-control-feedback"></div>
                                    </div>
                                </div>

                                <div class="col-md-12 col-sm-12">
                                    <div class="form-group">
                                        <label class="control-label">How do you think you can have a positive impact at camp? <span class="text-danger text-required">*</span></label>
                                        <textarea name="positive_camp_impact" class="form-control" required placeholder="Fill in here" data-notempty="notempty">{{ @$resume_data->positive_camp_impact }}</textarea>
                                        <div class="help-block with-errors"></div>
                                        <div class="form-control-feedback"></div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>


                    
                    
                    
                </div>
            </div>
            <div class="col-md-12 col-sm-12">
                <div class="form-actions">
                    <button type="button" name="back" value="13" class="btn @if(config('common.portal') == 'ODC') btn-odc btn-info-ODC @else btn-info @endif btn-xs-block" onclick="return gotoRBStep(this.value,'prev')">Back</button>
                   <button type="submit" name="save_preview" value="save_preview" class="btn @if(config('common.portal') == 'ODC') btn-odc btn-info-ODC @else btn-info @endif btn-xs-block" onclick="return setFormBtnAction('{{ $action }}',this.value)">Save & Preview</button>
                    <button type="button" name="cancel" class="btn btn-danger btn-xs-block" onclick="return resumeBuilder('hide');">Cancel</button>
                </div>
            </div>
        </form>
        <script>
            $(document).on('change', 'input[name="camp_counselor_program_past"]', function () {

                if ($(this).val() === '1') {
                    $('#camp_many_times_wrapper').slideDown();
                    $('input[name="camp_counselor_many_times"]').attr('required', true);
                } else {
                    $('#camp_many_times_wrapper').slideUp();
                    $('input[name="camp_counselor_many_times"]').removeAttr('required').val('');
                }

            });
            
            function open_model(){
                $('#modal-sm').modal('show');
            }
        </script>
    @elseif($action == "resume_preview")
    <head>
<meta charset="utf-8">
        <style type="text/css">
            .resume_table { font-size:12px; font-family:Arial, Helvetica, sans-serif; }
            .resume_table tr td { vertical-align:top; }
            .border_top td { border-top:solid 1px #333333;border-collapse:collapse; }
            .border_bottom td { border-bottom:solid 1px #333333; }
            .title { font-weight:bold;font-size:13px; }
            .picture { max-width:150px; }
            .tr_rb_section td { padding: 5px 10px; }
            .tr_intro td label { width: 100px; font-weight: bold; }
            @media (max-width:990px){
                .custom_overflow{ overflow-x : auto; }
                .width_100{ width:100%; }
            }
            .resume_header {
                text-align: center;
                margin-bottom: 20px;
            }

            .resume_header .photo {
                max-width: 150px;
                display: block;
                margin: 0 auto 10px auto;
            }

            .resume_header h1 {
                margin: 10px 0;
                font-size: 22px;
            }

            .resume_header p {
                margin: 3px 0;
            }
           .resume_padding { padding: 11px 0px 10px 0px; }
           .stars {
            margin-bottom: 8px;
        }

        .star-on {
            color: #f0ad4e;
        }

        .star-off {
            color: #ddd;
        }


        .skill_description {
            word-break: break-word;
        }
        
        .label2 {
            display: inline;
            padding: 0.2em 0.6em 0.3em;
            font-size: 75%;
            font-weight: 700;
            line-height: 1;
            color: #fff;
            text-align: center;
            white-space: nowrap;
            vertical-align: baseline;
            border-radius: 0.25em;
        }

        .label-success2 {
            background-color: #5cb85c; 
        }

        .desc_li{
            text-align: left !important;
        }
        .desc_li ul {
            list-style-type: disc !important;
            padding-left: 15px; 
            margin: 0;
        }

        .desc_li li {
            list-style-position: outside;
        }

       
        
            
            .skill_cat_img_div {
                background-color: #5ca9dc;
            }
            .p-r-0 {
                padding-right: 0 !important;
            }

            .p-l-0 {
                padding-left: 0 !important;
            } 

            .skill_cat_box .checkbox.checkbox-info {
                padding: 5px 10px 5px 30px;
                font-size: 16px;
                margin: 0;
                word-break: break-word;
            }

            .checkbox-info{
                text-align: center;
            }

            .checkbox label {
                display: inline-block;
                padding-left: 5px;
                position: relative;
            }

            .skill_cat_box {
                border: 1px solid #5ca9dc !important;
            }
            
            .mb-4{
              margin-top:10px;   
            }
            
            .badge {
    display: inline-block;
    text-transform: uppercase;
     font-weight: 400 !important;
    padding: 6px 10px !important;
    font-size: 12px;
    line-height: 1;
    margin-top: 2px;
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    border-radius: 10px;
}

/* Status Colors */
.bg-danger {
    background-color: #f33155;
}

.bg-success {
    background-color: #7ace4c;
}

.bg-info {
    background-color: #41b3f9;
}

.border_table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.border_table th,
.border_table td {
    border: 1px solid #000;
    padding: 6px;
    vertical-align: top;
    word-break: break-word;
}

.border_table thead th {
    background-color: #f2f2f2;
    text-align: center;
}

.skill_cat_box {
    border: 1px solid #5ca9dc;
}

.skill_cat_img_div {
    background-color: #5ca9dc;
    text-align: center;
    padding: 6px;
}

.skill_cat_img_div img {
    width: 50px;
    height: 50px;
}



/* ================= PAGE ================= */
@page {
    margin: 150px 0 100px 0; /* ONLY top & bottom */
}
  
body {
    margin: 0;
    padding: 0;
    font-family: DejaVu Sans, sans-serif;
    font-size: 12px;
}


/* ================= CONTENT WRAPPER ================= */
.content {
    padding: 0 40px; /* INNER MARGINS */
    margin-top: 15px;
}

.content_div{
    width: 95%;
    display: block;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    text-align: left;
    line-height: 1.5em;
}


.resume_wrapper {
    width: 100%;
}

.section {
    margin-top: 20px;
}

.section-title {
    font-weight: bold;
    border-bottom: 1px solid #000;
    margin-bottom: 10px;
    padding-bottom: 5px;
}

.row {
    width: 100%;
    display: block;
    clear: both;
}

.col-left {
    width: 50%;
    float: left;
}

.col-right {
    width: 50%;
    float: right;
    text-align: left;
}

.mt-5 {
    margin-top: 5px;
}

.block {
    page-break-inside: avoid !important;
    margin-bottom: 10px !important;
    margin-left: 5px;
}



.no-break {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
}

.custom-fieldset {
    page-break-inside: avoid !important;
}

.mb-4 {
    page-break-inside: avoid !important;
}    

.dejavu-font{
    font-family: DejaVu Sans, sans-serif;
    font-size: 16px;
    display: inline-block;
    width: 12px;
 position: relative;
    top: 6px; /* adjust 1px–2px if needed */
    left: 2px;
}
.dejavu-font-green { color: green; }
.dejavu-font-red { color: red; }
        </style>
</head>


<div class="content">

        <table cellpadding="10" cellspacing="0" width="100%" border="0" class="resume_table">
            <tr>
                <td colspan="2" style="padding:0px; margin-bottom: 10px;">
                    <div class="resume_header">
                        <img src="{{ $passport_photo_url }}" class="photo">

                            <h1>{{ $resume_data['full_name'] }}</h1>

                        <p><strong>Address:</strong> {{ $resume_data['address'] }}</p>
                        <p><strong>Country:</strong> {{ get_country_name($resume_data['country_id']) }}</p>
                        <p>
    <strong>Phone:</strong> 
    +{{ $resume_data['primary_phone_country_code'] }} {{ $resume_data['primary_phone'] }}
    &nbsp; | &nbsp;
    <strong>WhatsApp:</strong> 
    @if(!empty($resume_data['is_whatsapp_number']) && $resume_data['is_whatsapp_number'] == 1)
        <span class="dejavu-font-green  {{ ($is_pdf == 1) ? 'dejavu-font' : '' }}">&#10004;</span>
        <span style="color:green;">Available</span>
    @else
        <span class="dejavu-font-red ">X</span>
        <span style="color:red;">Not Available</span>
    @endif

</p>
                       
                        <p><strong>Email:</strong> {{ $resume_data['email'] }}</p>
                        <p><strong>Date of birth :</strong> 
                        @if(!empty(strtotime($resume_data['date_of_birth']))) {{ dateformat($resume_data['date_of_birth'],DISPLAY_DATE) }} @endif
                        </p>
                    </div>
                </td>
            </tr>

            <tr class="border_bottom">
                <td align="left" class="title" colspan="2">INTRODUCTION</td>
            </tr>
            <tr>
                <td align="left" class="resume_padding" colspan="2"> <span style="margin-left: 10px;">{{ $resume_data['introduction'] }}</span></td>
            </tr>
             <tr class="border_bottom">
                    <td align="left" class="title">SKILLS & ABILITIES</td>
                    <td >&nbsp;</td>
                </tr>
                </table>       
    
    
    <table border="1" class="table table-bordered table-condensed table-striped border_table" cellpadding="8" cellspacing="0" width="100%" style="    margin-top: 10px;">
                    <thead>
             <tr>                 
                 <th style="width: {{ $is_pdf == 1 ? '11%' : '11%' }};">Category</th>
<th style="width: {{ $is_pdf == 1 ? '10%' : '10%' }};">Skill</th>
<th style="width: {{ $is_pdf == 1 ? '10%' : '8%' }};">Rating</th>
<th style="width: {{ $is_pdf == 1 ? '12%' : '11%' }};">Level</th>
<th style="width: {{ $is_pdf == 1 ? '21%' : '22%' }};">Level Description</th>
<th style="width: {{ $is_pdf == 1 ? '12%' : '12%' }};">Do you have expierence<br/> coaching or teaching this skill?</th>
<th style="width: {{ $is_pdf == 1 ? '24%' : '26%' }};">Skill Description</th>
             </tr>
             </thead>
        <tbody>

            @php
                $campSkills = $user_skills_details['data']['camp_skill'] ?? [];
                $skillLevels = collect($user_skills_details['data']['skill_levels'] ?? []);
            @endphp

            @foreach($campSkills as $skill)

                @php
                    $level = $skillLevels->firstWhere('level_id', $skill['level_id']);
                @endphp

                <tr>
                    <td align="center">
                        <div class="skill_cat_box">
                            <div class="text-center p-2 skill_cat_img_div">
                                <img src="{{ $skill['document_download_link'] }}" style="width:50px;height:50px;" class="photo">
                            </div>
                            <div>
                                <span>{{ $skill['category_name'] }}</span>
                            </div>
                        </div>
                    </td>

                    <td>{{ $skill['skill_name'] }}</td>

                    <td style="font-family: DejaVu Sans, sans-serif; font-size:16px;padding: 10px 1px 1px 6px !important;">
                        @for($i = 1; $i <= 5; $i++)                           
                            <span style="color: {{ $i <= $skill['level_id'] ? '#f4c542' : '#cccccc' }};">★</span>          
                        @endfor
                    </td>

                    <td>
                        <span class="label2 label-success2">
                            {{ $level['level_title'] ?? '' }}
                        </span>
                    </td>

                    <td class="desc_li">
                        {!! $level['level_desc'] ?? '' !!}
                    </td>

                    <td>
                        {{ $skill['skill_coaching'] == 'y' ? 'Yes' : 'No' }}
                    </td>

                    <td class="skill_description">
                        {!! $skill['skill_description'] ?? '' !!}
                    </td>
                </tr>
            @endforeach

            </tbody>
    </table>
   
    @php
        $validEducation = collect($education)->filter(function($item){
            return !empty($item->school) 
                || !empty($item->degree) 
                || !empty($item->description) 
                || (!empty($item->start_date) && $item->start_date != "0000-00-00")
                || (!empty($item->end_date) && $item->end_date != "0000-00-00");
        });
    @endphp
    
    {{-- EDUCATION --}}
    @if($validEducation->count() > 0)
    <div class="no-break">
        <div class="section resume_wrapper">
            <div class="section-title">EDUCATION</div>

            @foreach($validEducation as $item)
                <div class="block">
                    @php
                        $lines = preg_split("/\r\n|\n|\r/", @$item->school);
                    @endphp

                    <div style="width:100%;">

                        <div style="width:100%;">

                            <div style="display:inline-block; width:48%; vertical-align:top;">
                                @if(!empty($lines))
                                <strong>{{ $lines[0] }}</strong><br>
                                {!! nl2br(e(implode("\n", array_slice($lines, 1)))) !!}
                                @endif
                            </div>

                            <div style="display:inline-block; width:51%; vertical-align:top; text-align:left;">
                                @if(!empty($item->start_date) && $item->start_date != "0000-00-00")
                                Start: {{ dateformat($item->start_date,DISPLAY_DATE) }}
                                @endif
                                @if(!empty($item->end_date) && $item->end_date != "0000-00-00")
                                - End: {{ dateformat($item->end_date,DISPLAY_DATE) }}
                                @endif

                                @if(!empty($item->degree))
                                <br/><strong>{{ $item->degree }}</strong>
                                @endif

                                @if(!empty($item->description))
                                <br/>{{ $item->description }}
                                @endif 
                            </div>

                        </div>
                    </div>                    
              </div>
            @endforeach
        </div>
    </div>
    @endif

    @php
        $validEmployment = collect($employment)->filter(function($item){
            return !empty($item->title) 
                || !empty($item->employer_name) 
                || !empty($item->duties) 
                || (!empty($item->start_date) && $item->start_date != "0000-00-00")
                || (!empty($item->end_date) && $item->end_date != "0000-00-00");
        });
    @endphp

    @if($validEmployment->count() > 0)
    <div class="no-break">
        <div class="section resume_wrapper">
            <div class="section-title">EXPERIENCE</div>

            @foreach($validEmployment as $item)
                <div class="block">
                    @php
                        $lines = preg_split("/\r\n|\n|\r/", @$item->employer_name);
                    @endphp

                    <div style="width:100%;">

                        <div style="width:100%;">

                            <div style="display:inline-block; width:48%; vertical-align:top;">
                                @if(!empty($lines))
                                <strong>{{ $lines[0] }}</strong><br>
                                {!! nl2br(e(implode("\n", array_slice($lines, 1)))) !!}
                                @endif
                            </div>

                            <div style="display:inline-block; width:51%; vertical-align:top; text-align:left;">
                                @if(!empty($item->start_date) && $item->start_date != "0000-00-00")
                                From: {{ dateformat($item->start_date,DISPLAY_DATE) }}
                                @endif
                                @if(!empty($item->end_date) && $item->end_date != "0000-00-00")
                                - To: {{ dateformat($item->end_date,DISPLAY_DATE) }}
                                @endif

                                @php
                                $lines = preg_split("/\r\n|\n|\r/", @$item->title);
                                @endphp

                                @if(!empty($lines))
                                <br/><strong>{{ $lines[0] }}</strong>
                                {!! nl2br(e(implode("\n", array_slice($lines, 1)))) !!}
                                @endif
                            </div>

                        </div>

                        @if(!empty($item->duties))
                        <div style="width:100%;">
                            {{ $item->duties }}
                        </div>
                        @endif

                    </div>
                </div>
            @endforeach
        </div>
    </div>
    @endif
    
    
    
    <div class="no-break">

    <!-- MAIN TITLE -->
    <div class="row" style="margin-top: 15px;">
        <div class="col-md-12">
            <div style="border-bottom: 1px solid #333; font-weight: bold; padding-bottom: 5px;">
                QUESTIONNAIRE
            </div>
        </div>
    </div>

    <!-- Previous Experience -->
    <div class="custom-fieldset" style="margin-top: 15px;">
        <div class="custom-legend">Previous Experience</div>

        <div class="mb-4">
            <label class="fw-semibold">
                Participated in the J-1 Camp Counselor Program in the past?
            </label>
            <div>
                <span class="badge {{ @$resume_data->camp_counselor_program_past == '1' ? 'bg-success' : 'bg-danger' }}">
                    {{ @$resume_data->camp_counselor_program_past == '1' ? 'Yes' : 'No' }}
                </span>
            </div>
        </div>

        @if(@$resume_data->camp_counselor_program_past == '1')
        <div class="mb-4">
            <label class="fw-semibold">If yes, how many times?</label>
            <div>
                <span class="badge bg-info">
                    {{ @$resume_data->camp_counselor_past_many_times }}
                </span>
            </div>
        </div>
        @endif
    </div>
    
    </div>

     <div class="no-break">
    <!-- Faith-based Camp -->
    <div class="custom-fieldset" style="margin-top: 15px;">
        <div class="custom-legend">Faith-based Camp:</div>

        <div class="mb-4">
            <label class="fw-semibold">Are you willing to work at a faith-based camp?</label>
            <div>
                <span class="badge {{ @$resume_data->faith_based_camp == '1' ? 'bg-success' : 'bg-danger' }}">
                    {{ @$resume_data->faith_based_camp == '1' ? 'Yes' : 'No' }}
                </span>
            </div>
        </div>

        <div class="mb-4">
            <label class="fw-semibold">What is your religion and/or denomination?</label>
            <div>
                <span class="badge bg-info content_div">
                    {{ @$resume_data->religion }}
                </span>
            </div>
        </div>

        <div class="mb-4">
            <label class="fw-semibold">Please describe your testimony/doctrine:</label>
            <div>
                <span class="badge bg-info content_div">
                    {{ @$resume_data->describe_doctrine }}
                </span>
            </div>
        </div>

        <div class="mb-4">
            <label class="fw-semibold">
                Are you comfortable leading and/or planning faith-based activities?
            </label>
            <div>
                <span class="badge {{ @$resume_data->activities_such_as_bible_study == '1' ? 'bg-success' : 'bg-danger' }}">
                    {{ @$resume_data->activities_such_as_bible_study == '1' ? 'Yes' : 'No' }}
                </span>
            </div>
        </div>

    </div>
    </div>



         
     <div class="no-break">
        <div class="custom-fieldset" style="margin-top: 15px;">
        <div class="custom-legend">Special & Medical Needs Camps:</div>
            <div class="mb-4">
                <label class="fw-semibold">Are you comfortable assisting with personal care to youth or adult campers with special needs, that may include feeding, hygiene, dressing, toileting, mobility support, etc.?</label>
                <div><span class="badge {{ @$resume_data->personal_care == '1' ? 'bg-success' : 'bg-danger' }}">{{ @$resume_data->personal_care == '1' ? 'Yes' : 'No' }}</span></div>
            </div>

            <div class="mb-4">
                <label class="fw-semibold">Do you have experience working with special needs children or adults?</label>
                <div><span class="badge {{ @$resume_data->special_needs_children == '1' ? 'bg-success' : 'bg-danger' }}">{{ @$resume_data->special_needs_children == '1' ? 'Yes' : 'No' }}</span></div>
            </div>
        
            <div class="mb-4">
                <label class="fw-semibold">Are you willing to work with primarily adult campers, in a special needs camp setting?</label>
                <div><span class="badge {{ @$resume_data->work_special_needs_camp == '1' ? 'bg-success' : 'bg-danger' }}">{{ @$resume_data->work_special_needs_camp == '1' ? 'Yes' : 'No' }}</span></div>
            </div>
        
        </div>
    </div>
    
    <div class="no-break">
        <div class="custom-fieldset" style="margin-top: 15px;">
            <div class="custom-legend">General Questions</div>
            
            <div class="mb-4">
                <label class="fw-semibold">Are you willing and able to become lifeguard certified (the camp would provide training)?</label>
                <div><span class="badge {{ (@$resume_data->lifeguard_certified == '1' || @$resume_data->lifeguard_certified == '2') ? 'bg-success' : 'bg-danger' }}">
                        @if(@$resume_data->lifeguard_certified == 1)
                        Yes, I have the swimming skills needed.
                        @elseif(@$resume_data->lifeguard_certified == 2)
                        Yes, I am currently or previously lifeguard certified.
                        @else
                        No
                        @endif
                    </span></div>
            </div>

            <div class="mb-4">
                <label class="fw-semibold">Are you comfortable living in a rustic environment at camp? *
                    (May include limited access to electricity, no or limited air conditioning, no or limited flushing toilets, open air cabins/platform tents, etc.)</label>
                <div><span class="badge {{ @$resume_data->rustic_env_comfort == '1' ? 'bg-success' : 'bg-danger' }}">{{ @$resume_data->rustic_env_comfort == '1' ? 'Yes' : 'No' }}</span></div>
            </div>

            <div class="mb-4">
                <label class="fw-semibold">Why do you want to work at a camp in the United States?</label>
                <div><span class="badge bg-info content_div">{{ @$resume_data->why_work_us_camp }}</span></div>
            </div>

            <div class="mb-4">
                <label class="fw-semibold">How do you think you can have a positive impact at camp?</label>
                <div><span class="badge bg-info content_div">{{ @$resume_data->positive_camp_impact }}</span></div>
            </div>
        </div>
    </div>
    
        
    
</div>


<script type="text/php">
if (isset($pdf)) {

    $header = public_path('assets/images/odc_camp/odc_camp_header.png');
    $footer = public_path('assets/images/odc_camp/odc_camp_footer.png');

    $pdf->page_script(function ($pageNumber, $pageCount, $pdf) use ($header, $footer) {

        $pageWidth  = $pdf->get_width();   
        $pageHeight = $pdf->get_height(); 

        $headerHeight = 90;
        $footerHeight = 90;

        $pdf->image($header, 0, 0, $pageWidth, $headerHeight);

        $pdf->image($footer, 0, $pageHeight - $footerHeight, $pageWidth, $footerHeight);

    });

}
</script>

    @elseif($action == "resume_preview_modal")
        <div class="modal-content">
            <div class="modal-header bg-info">
                <button type="button" class="close text-white" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h2 class="modal-title text-white">Resume Preview</h2>
            </div>
            <div class="modal-body">{!! @$resume_preview !!}</div>
            <div class="modal-footer">
                <button type="button" class="btn @if(config('common.portal') == 'ODC') btn-odc btn-info-ODC @else btn-info @endif mbottom5 btn-xs-block" onclick="return buildResume(this)">Build Resume</button>
                <button type="button" class="btn btn-danger mbottom5 btn-xs-block" data-dismiss="modal" aria-hidden="true">Cancel</button>
            </div>
        </div>
        <script>
            function buildResume(ele)
            {
                loadingButton(ele,'start');

                $.ajax({
                    url: "{{ route('buildresumepdf') }}",
                    type: 'post',
                    dataType: 'json',
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                    success: function(response){
                        if(response.type == "success"){
                            loadingButton(ele,'stop','Build Resume');
                            navigateStages('1');
                        }
                        hide_popup('modal-lg');
                    },
                });
            }
        </script>
    @else
        @if($is_step_success == 0)
            <form name="resume_upload" id="resume_upload" enctype="multipart/form-data" action="">
                <div class="row">
                    <div class="col-sm-12">
                        <h3 class="d-inline-b">Next step is to create your resume...</h3>
                        <button type="button" title="Contact Support" class="btn btn-success pull-right support_width" onclick="return viewPopup('Resume Upload','{{@$active_step_key}}');">Support<i class="mdi mdi-help-circle-outline step-help"></i></button>
                        <div id="{{ $notify_id }}" class="col-xs-12"></div>
                        <p>Create your updated Resume/CV. Your potential host will view this first so be sure to include all details you think are relevant and proofread/spellcheck the document before submitting.</p>
                        <div class="uploadresume">
                            <div class="form-group m-b-10">
                                
                                <div class="row">
                                    <div class="col-xs-12">
                                        <div id="display_resume_template">
                                        </div>
                                    </div>
                                </div>
                                    <div class="submit_resume_div row">
                                        <div class="col-sm-12"> 
                                            <button type="button" class="btn btn-sm @if(config('common.portal') == 'ODC') btn-odc btn-info-ODC @else btn-info @endif disable btn-xs-block" onclick="return resumeUploadSubmit('{{ $next_step_key }}');"><i class="fa fa-plus-circle"></i> Upload Resume</button>
                                        </div>
                                    </div>
                                    
                            </div> 
                        </div>
                        <div class="text-center response"></div>                        
                    </div>    
                </div>
                <div class="clearfix"></div>
                <hr class="full_dotted_line m-b-20" />
            </form>
            @if($is_step_locked != 1)
            <div id="resume_builder">
                <div class="resume_builder_activator row">
                    <div class="col-sm-12"> 
                        <!--<a class="text-info fa-1x cpointer" data-toggle="collapse" data-target="#create_resume"> Create a resume</a>-->
                        <!--<div id="create_resume" class="collapse">-->
                            <!--<p>If you don't have one, you can use our free resume builder.</p>-->
                            <button type="button" class="btn btn-sm @if(config('common.portal') == 'ODC') btn-odc btn-info-ODC @else btn-info @endif disable btn-xs-block" onclick="return resumeBuilder('show');"><i class="fa fa-plus-circle"></i> {{ ($step_verified_data['is_re_create_resume'] == 1) ? 'Update and Re-submit My Resume' : 'Create a Resume' }}
                            </button>
                        <!--</div>-->
                    </div>
                </div>
                <div class="resume_builder_form row" style="display: none;">

                </div>
            </div>
            @endif
        @elseif($is_step_success == 1 || $is_step_success == 2)
            <div class="row">
                <div class="col-sm-12">
                    <h3 class="d-inline-b">Next step is to upload your resume...</h3>
                    <button type="button" title="Contact Support" class="btn btn-success pull-right" onclick="return viewPopup('Resume Upload','{{@$active_step_key}}');">Support<i class="mdi mdi-help-circle-outline step-help"></i></button>
                    <p>Upload a resume that can impress your {{ __('application_term.employer') }}. It is recommended that you keep your resume less than 3 pages long.</p>
<!--                    <p class="text-muted">Resume should be a {{$allow_file_ext}} and doesn't exceed {{$upload_file_size}} MB.</p><br>-->
                    <div class="text-center response alert alert-{{ $step_verified_data['type'] }}">{{ $step_verified_data['message'] }}</div>
                    @if($is_step_success == 1)
                        @if(!empty($next_step_key))
                            <button type="button" class="btn @if(config('common.portal') == 'ODC') btn-odc btn-info-ODC @else btn-info @endif btn-xs-block" onclick="loadStepContent('{{ $next_step_key }}')">Next Step</button>
                        @endif
                    @endif
                </div>    
            </div>
        @endif
        <script type="text/template" id="resume_template">
            <div class="alert alert-info resume_tmp">
                <a href="javascript:void(0)" class="close delete_resume" aria-label="close ">&times;</a>
                <i class="fa fa-file-pdf-o fa-2x text-danger" aria-hidden="true" ></i> <span class="original_file">anc.pdf</span>
                    <input type="hidden" name="resumes[]" class="resumes"> 
            </div>
        </script>
        <script>
            $(document).ready(function(){
                 $(".submit_resume_div").hide();
            });
            function resumeUpload(){
                
                $("#resume_upload .response").removeClass().addClass('text-center response').html('Please wait... <i class="fa fa-spin fa-spinner"></i>').show();
                var fd = new FormData();
                var files = $('#resume_file')[0].files[0];
                fd.append('resume',files);

                $.ajax({
                    url:  "{{ route('uploadresumefiles') }}",
                    type: 'post',
                    data: fd,
                    dataType: 'json',
                    contentType: false,
                    processData: false, 
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                    success: function(response){
                        $("#resume_upload").trigger("reset");
                        if(response.type == "success"){
                            var $tpl = $( $( '#resume_template' ).html() );
                            $tpl.find('.original_file').text(response.original_file_name);
                            $tpl.find('.resumes').val(response.data);
                            $tpl.find(".delete_resume").click( function() {
      				var $this = $(this);
                                $this.parents('.resume_tmp').remove();
                                if ($(".resume_tmp").length <= 0){
                                    $(".submit_resume_div").hide();
                                }
                            });
            
            
                            $( '#display_resume_template' ).append( $tpl );
                            
                            $("#resume_upload .uploadresume").show();
                            $("#resume_upload .response").hide();
                            
                            $(".submit_resume_div").show();
                        }
                        else{
                            $("#resume_upload .uploadresume").show();
                            $("#resume_upload .response").removeClass().addClass('text-center response alert alert-danger').html(response.message);
                        }
                    },
                });
            }
            
            
            function resumeUploadSubmit(next_step_key){
                
                if ($(".resume_tmp").length <= 1){
                    resumeUploadSubmitResponse(next_step_key);
                } else {
                    swal({
                        title: "Are you sure you want to merge into a single PDF?",
                        text: "",
                        type: "warning",
                        showCancelButton: true,
                        confirmButtonColor: "#DD6B55",
                        confirmButtonText: "Okay",
                        closeOnConfirm: true,
                        confirmButtonColor: "#00ccff",
                      },function(btn){
                        if(btn === true){
                            resumeUploadSubmitResponse(next_step_key);
                        }
                    });
                }
            }
            
            function resumeUploadSubmitResponse(next_step_key){
                
                $("#resume_upload .uploadresume").hide(); 
                $("#resume_upload .response").show().addClass('text-center response').html('Please wait... <i class="fa fa-spin fa-spinner"></i>');
                var form = $('#resume_upload')[0]; // You need to use standard javascript object here
                var formData = new FormData(form);

                $.ajax({
                    url:  "{{ route('uploadresume') }}",
                    type: 'post',
                    data: formData,
                    dataType: 'json',
                    contentType: false,
                    processData: false, 
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                    success: function(response){
                        $("#resume_upload").trigger("reset");
                        if(response.type == "success"){
                            $("#resume_upload .response").removeClass().addClass('text-center response alert alert-success').html(response.message);
                            setTimeout(function(){
                                $("#resume_upload .response").hide()
                                    .html("").removeClass()
                                    .addClass('text-center response alert alert-warning')
                                    .html("Hold tight, we are processing your request...").show();

                                setTimeout(function(){
                                    navigateStages(1,next_step_key);
                                }, 3000);
                            }, 3000);
                        }
                        else if(response.type == "warning"){
                            $("#resume_upload .response").removeClass().addClass('text-center response alert alert-warning').html(response.message);
                        }
                        else{
                            $("#resume_upload .uploadresume").show();
                            $("#resume_upload .response").removeClass().addClass('text-center response alert alert-danger').html(response.message);
                        }
                    },
                });
            }

            function resumeBuilder(action){
                if(action == "show"){
                    $("#resume_builder .resume_builder_form").show();
                    $("#resume_upload,#resume_builder .resume_builder_activator").hide();
                    loadRBForm("7");
                }
                else{
                    $("#resume_builder .resume_builder_form,#resume_builder .resume_builder_form form").hide();
                    $("#resume_upload,#resume_builder .resume_builder_activator,#rb_1").show();
                }
            }

            function loadRBForm(form_number){
                show_inner_loader(".timeline_stp_desc","#all_tab_data");
                
                var action = "form_rb_"+form_number;
                var skill_category = $('input[name="skill_category[]"]:checked').map(function () {
                    return $(this).val();
                }).get();

                var skill_category_str = skill_category.length ? skill_category.join(',') : '';
                if ($('.custom_overflow .skill_category_str').length == 0 && skill_category_str != '') {
                    $('.custom_overflow').append('<input type="hidden" name="skill_category_str" class="skill_category_str" value="' + skill_category_str + '">');
                }else{
                    if(skill_category_str != ''){
                        var skill_category_str = $('.custom_overflow .skill_category_str').val(skill_category_str);		
                    }
                }
                var skill_category_str = $('.custom_overflow .skill_category_str').val();
                
                var form_selector = "#"+action;
                $.ajax({
                    url:  "{{ route('loadrbform') }}",
                    type: 'post',
                    data: { form_number: form_number,skill_category_str:skill_category_str },
                    dataType: 'json',
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                    success: function(response){
                        if(response.type == "success"){
                            $("#resume_builder .resume_builder_form").html(response.form_content);
                            initAjaxValidator(form_selector);
                            initRBSection();
                            load_datepicker();
                            hide_inner_loader(".timeline_stp_desc","#all_tab_data");
                            
                            if(form_number == 8){
                                if (skill_category_str) {
                                    skill_category_str.split(',').forEach(function(val){
                                        $('input[name="skill_category[]"][value="'+val+'"]').prop('checked', true);
                                    });
                                }
                            }    
                        }
                        else{
                            hide_inner_loader(".timeline_stp_desc","#all_tab_data");
                        }
                    },
                });
            }
            
            function showFieldError(fieldName, message) {
                var $label = $('.' + fieldName + '_label');
                var $input = $('[name="' + fieldName + '"]');
                
                $label.addClass('text-danger');
                if ($input.length) {
                    setTimeout(function () {
                        $input.focus();
                    }, 300);
                }
            }


            function initAjaxValidator(rb_form_selector){

                ajaxFormValidator(rb_form_selector,function(ele,event){

                    event.preventDefault();
                    show_inner_loader(".timeline_stp_desc","#all_tab_data");
                    
                    var currentStepNum = $(ele).find("input[name='rb_step']").val();
                    
                    var btn_action = $(ele).find("input[name='btn_action']").val();
                    if(btn_action == "" || btn_action == "undefined" || btn_action == null)
                    {
                        return false;
                    }

                    var form_data = new FormData(ele);

                    $(ele).find("input[name='btn_action']").val("");

                    $.ajax({
                        url: "{{ route('resumebuilder') }}",
                        type: 'post',
                        data: form_data,
                        dataType: 'json',
                        processData: false,
                        contentType: false,
                        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                        success: function(response){
                            $('.common_label').removeClass('text-danger');
                            if(response.type == "success"){
                                if(response.btn_action == "save_next"){
                                    gotoRBStep(response.action_step);
                                }
                                if(response.btn_action == "save_preview"){
                                    popupRBPreview();
                                    hide_inner_loader(".timeline_stp_desc","#all_tab_data");
                                }
                            }else{
                                hide_inner_loader(".timeline_stp_desc","#all_tab_data");
                                var Html = '<div class="alert swl-alert-danger">'+response.message+'</div>'; 
                                notifyResponseTimerAlert(Html,"error","Error","","", function () {
                                    if (response.field && response.field !== '') {
                                        showFieldError(response.field, response.message);
                                    }
                                });
                            }
                        },
                    });

                    /****/
                });
            }

            function reNewPSP()
            {
                $("#rb_existing_psp").hide();
                $("#rb_existing_psp input").attr("disabled",true);

                $("#rb_upload_psp").show();
                $("#rb_upload_psp input").removeAttr("disabled");
            }

            function gotoRBStep(currentStepNum,direction)
            {
                show_inner_loader(".timeline_stp_desc","#all_tab_data");
                var gotoStep = 1;
                if(direction == "prev"){
                    gotoStep = Number(currentStepNum) - Number(1);
                }
                else{
                    gotoStep = Number(currentStepNum) + Number(1);
                }
                loadRBForm(gotoStep);
            }

            function toggleRBSection(ele,section_id,form_id)
            {
                var section_selector = "#"+section_id+" .rb_section_content";
                var form_selector = "#"+form_id+" input[name='remove_existing_id']";
                var remove_existing_id = $(form_selector).val();
                var existing_id = $(section_selector).find(".rb_existing_id").val();

                if(remove_existing_id != "" && remove_existing_id != "undefined" && remove_existing_id != null)
                {
                    remove_existing_id = remove_existing_id.split(',');
                }
                else
                {
                    remove_existing_id = [];
                }

                if($(ele).is(":checked") == true){
                    $(section_selector).show();
                    $(section_selector).find("select, textarea, input").removeAttr('disabled');

                    if(existing_id != "" && existing_id != "undefined" && existing_id != null){
                        remove_existing_id = removeArrayElement(remove_existing_id, existing_id);
                        $(form_selector).val(remove_existing_id);
                    }
                }
                else{
                    $(section_selector).hide();
                    $(section_selector).find("select, textarea, input").attr('disabled',true);

                    if(existing_id != "" && existing_id != "undefined" && existing_id != null){
                        remove_existing_id.push(existing_id);
                        $(form_selector).val(remove_existing_id);
                    }
                }
            }

            function initRBSection()
            {
                $(".rb_section").each(function(i,e){
                    if($(this).find(".rb_section_checkbox").length > 0)
                    {
                        var ele_id = $(this).attr('id');
                        var section_selector = "#"+ele_id+" .rb_section_content";

                        if($(this).find(".rb_section_checkbox").is(":checked") == true)
                        {
                            $(section_selector).show();
                            $(section_selector).find("select, textarea, input").removeAttr('disabled');
                        }
                        else
                        {
                            $(section_selector).hide();
                            $(section_selector).find("select, textarea, input").attr('disabled',true);
                        }
                    }
                });
            }

            function popupRBPreview()
            {
                show_popup('modal-lg');
                get_common_ajax('{{ route("previewresume") }}',{
                    action: "resume_preview",
                },"modal-lg");
            }

            function resetResume()
            {
                $.ajax({
                    url: "{{ route('resetresume') }}",
                    type: "post",
                    dataType: "json",
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                    data: { action : "reset_resume" },
                    success:function(response){
                        if(response.type == "success"){
                            resumeBuilder('hide');
                        }
                    }
                });
            }
        </script>
    @endif
</div>


<script>
        
        function inputTextCounter(inputField, limit_counter_id, limitNum, callback) {

            if(typeof callback === "function")
                callback(inputField,limit_counter_id,limitNum);

            if (inputField.value.length > limitNum) {
                inputField.value = inputField.value.substring(0, limitNum);
            } else {
                var counter_left = limitNum - inputField.value.length;
                $("#"+limit_counter_id).text(counter_left);
            }
        }
  </script>      

            
            
@section('scripts')

@endsection