@extends('frontend.layouts.main', array(
    'body_class' => 'no-header',
    'metaData' => $metaData,
    'scripts' => array(
      path_asset('path.frontend.js_path') . '/view/vacancy_apply.js'
    )))

@section('content')
<div class="container-fluid page-container news-detail-template article-detail">
    <div class="row page-header"></div>
    <div class="row page-contents-holder main-content-holder">
        <div class="col-lg-16 col-sm-14 col-xs-24 content-column">
            <div class="container-fluid">
                <div class="row no-gutter item">
                    <div class="col-lg-offset-3 col-lg-17 col-sm-offset-2 col-sm-20">
                        <h1 class="title">{{$vacancy->title}}</h1>
                        <div class="info">
                            <span class="name">
                            @if($vacancy->flexible_location)
                                @lang('Location flexible'):
                                @foreach($vacancy->offices as $i => $office)
                                    {{ $office->city }}@if($i < ($vacancy->offices->count() - 1)),@endif
                                @endforeach
                            @elseif($vacancy->office)
                                {{$vacancy->office->title}}
                            @endif
                            </span>
                            <span class="name">@lang('Job ID:') {{ $vacancy->id }}</span>
                        </div>
                    </div>
                </div>
                <div class="row no-gutter">
                    <div class="col-lg-3 col-sm-2 article-actions">
                        @include('frontend.templates.components.share_button_small', array(
                                'shareTitle' => strip_tags($vacancy->title),
                                'shareDescription' => strip_tags($vacancy->description)
                            ))
                        <div class="clear hidden-xs"></div>
                        @if($vacancy->document)
                            <a target="_blank" class="download-pub" href="{{ url('/uploads/media/' . $vacancy->document->filename) }}">
                            </a>
                        @endif
                        <div class="clear"></div>
                    </div>
                    <div class="col-lg-17 col-sm-20">
                        <div class="news-container article-container">
                            <span>
                                {!! $vacancy->summary !!}
                                {!! $vacancy->detail_content !!}
                            </span>
                        </div>
                    </div>
                </div>
                <div class="row no-gutter">
                    <div class="col-lg-offset-3 col-lg-20 col-sm-offset-3 col-sm-20 col-xs-offset-0 col-xs-24">
                        <div class="margin-buttons">
                            <a class="apply-job submit roundcorner dark-blue" href="#">
                                @lang('frontend.apply_now')
                            </a>
                        </div>
                    </div>
                </div>
                <div class="row no-gutter item job-apply-form std-form">
                    <div class="success-message col-lg-offset-3 col-lg-20 col-sm-offset-3 col-sm-20 col-xs-offset-0 col-xs-24">
                        <div class="row">
                            <div class="col-lg-6">
                                <i class="fa fa-check-circle success-icon" aria-hidden="true"></i>
                            </div>
                            <div class="col-lg-18">
                                <h2>@lang('Thank You!')</h2>
                                <p>@lang('Your application was submitted successfully. You should receive a confirmation e-mail in the next few minutes.')</p>
                            </div>
                        </div>
                    </div>
                    <form id="job_apply_form" method="POST" enctype="multipart/form-data" name="job_apply_form">
                        <input name="job_id" type="hidden" value="{{ $vacancy->id }}">
                        <div class="col-lg-offset-3 col-lg-20 col-sm-offset-3 col-sm-20 col-xs-offset-0 col-xs-24">
                            <div class="row">
                                <div class="col-lg-24">
                                    <h2>@lang('Apply To'):</h2>
                                    <h5>
                                        @if($vacancy->flexible_location)
                                            @lang('Location flexible'),
                                        @elseif($vacancy->office)
                                            {{$vacancy->office->title}},
                                        @endif
                                        <i>@lang('Job ID:') {{ $vacancy->id }}</i>
                                    </h5>
                                    <h3>{{$vacancy->title}}</h3>
                                </div>
                            </div>
                            <div class="row field-row field-first_name">
                                <div class="col-lg-10">
                                    <label for="job_form_first_name">@lang('First Name')*</label>
                                </div>
                                <div class="col-lg-13 col-lg-offset-1 field-type-text input-block" data-field_type="text">
                                    <input class="is-required-field" type="text" maxlength="50" id="job_form_first_name" name="first_name">
                                </div>
                            </div>
                            <div class="row field-row field-last_name">
                                <div class="col-lg-10">
                                    <label for="job_form_last_name">@lang('Last Name')*</label>
                                </div>
                                <div class="col-lg-13 col-lg-offset-1 field-type-text input-block" data-field_type="text">
                                    <input class="is-required-field" type="text" maxlength="50" id="job_form_last_name" name="last_name">
                                </div>
                            </div>
                            <div class="row field-row field-nationality">
                                <div class="col-lg-10">
                                    <label for="job_form_nationality">@lang('Nationality')*</label>
                                </div>
                                <div class="col-lg-13 col-lg-offset-1 field-type-text input-block" data-field_type="text">
                                    <input class="is-required-field" type="text" maxlength="50" id="job_form_nationality" name="nationality">
                                </div>
                            </div>
                            <div class="row field-row field-location">
                                <div class="col-lg-10">
                                    <label for="job_form_location">@lang('Current Location')*</label>
                                </div>
                                <div class="col-lg-13 col-lg-offset-1 field-type-text input-block" data-field_type="text">
                                    <input class="is-required-field" type="text" maxlength="100" id="job_form_location" name="location">
                                </div>
                            </div>
                            <div class="row field-row field-email">
                                <div class="col-lg-10">
                                    <label for="job_form_email">@lang('E-mail')*</label>
                                </div>
                                <div class="col-lg-13 col-lg-offset-1 field-type-text input-block" data-field_type="text">
                                    <input class="is-required-field" type="email" maxlength="100" id="job_form_email" name="email">
                                </div>
                            </div>
                            <div class="row field-row field-phone">
                                <div class="col-lg-10">
                                    <label for="job_form_phone">@lang('Phone')*</label>
                                </div>
                                <div class="col-lg-13 col-lg-offset-1 field-type-text input-block" data-field_type="text">
                                    <input class="is-required-field" type="text" maxlength="100" id="job_form_phone" name="phone">
                                </div>
                            </div>
                            <div class="row field-row field-abstract">
                                <div class="col-lg-10">
                                    <label for="job_form_abstract">@lang('Motivation')*</label>
                                    <div class="field-info">
                                        @lang('(Please describe your motivation for this position in max. 500 characters)')
                                    </div>
                                </div>
                                <div class="col-lg-13 col-lg-offset-1 field-type-text input-block" data-field_type="text">
                                    <textarea class="is-required-field" maxlength="500" id="job_form_abstract" name="abstract"></textarea>
                                </div>
                            </div>
                            <div class="row field-row field-cv">
                                <div class="col-lg-10">
                                    <label for="job_form_cv">@lang('Upload CV')*</label>
                                    <div class="field-info">PDF, DOC, DOCX (Max: 2MB)</div>
                                </div>
                                <div class="col-lg-13 col-lg-offset-1 field-type-text input-block file-input" data-field_type="file">
                                    <a href="#" class="upload-button submit roundcorner dark-blue">@lang('Choose File')</a>
                                    <span class="selected-file">@lang('No file selected')</span>
                                    <input type="file" class="is-required-field" id="job_form_cv" name="cv">
                                </div>
                            </div>
                            <div class="row field-row field-cl">
                                <div class="col-lg-10">
                                    <label for="job_form_cl">@lang('Upload Cover Letter')</label>
                                    <div class="field-info">PDF, DOC, DOCX (Max: 2MB)</div>
                                </div>
                                <div class="col-lg-13 col-lg-offset-1 field-type-text input-block file-input" data-field_type="file">
                                    <a href="#" class="upload-button submit roundcorner dark-blue">@lang('Choose File')</a>
                                    <span class="selected-file">@lang('No file selected')</span>
                                    <input type="file" class="is-required-field" id="job_form_cl" name="cl">
                                </div>
                            </div>
                            @if($vacancy->flexible_location)
                                <div class="row field-row field-based_in">
                                    <div class="col-lg-10">
                                        <label for="job_form_based_in">@lang('What is your preferred location to be based in?') *</label>
                                    </div>
                                    <div class="col-lg-13 col-lg-offset-1 field-type-select input-block" data-field_type="">
                                        <select data-placeholder="Choose a City..." class="is-required-field chosen-select" data-field_type="text" id="job_form_based_in" tabindex="1" name="based_in">
                                            <option value="" disabled selected>Choose a City...</option>
                                            @if(!$vacancy->offices->count())
                                                <option value="amsterdam">Amsterdam</option>
                                                <option value="bangkok">Bangkok</option>
                                                <option value="beijing">Beijing</option>
                                                <option value="berlin">Berlin</option>
                                                <option value="bogota">Bogota</option>
                                                <option value="jakarta">Jakarta</option>
                                                <option value="london">London</option>
                                                <option value="medellin">Medellin</option>
                                                <option value="melbourne">Melbourne</option>
                                                <option value="mexico_city">Mexico City</option>
                                                <option value="new_delhi">New Delhi</option>
                                                <option value="new_york">New York</option>
                                                <option value="singapore">Singapore</option>
                                                <option value="sydney">Sydney</option>
                                                <option value="stockholm">Stockholm</option>
                                                <option value="zurich">Zurich</option>
                                            @else
                                                @foreach($vacancy->offices as $office)
                                                    <option value="{{ str_replace(' ', '_', strtolower($office->getDefaultLanguage()->city)) }}">{{ $office->city }}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>
                            @else
                                <div class="row field-row field-based_in">
                                    <input name="based_in" type="hidden" value="non_flexible">
                                </div>
                            @endif
                            <div class="row field-row field-permit">
                                <div class="col-lg-10">
                                    <label>@lang('Are you already eligible to work in the country you will or prefer to be based in?') *</label>
                                    <div class="field-info">
                                        @lang('(Regulatory requirements may restrict us from supporting visa applications at some of our locations)')
                                    </div>
                                </div>
                                <div class="col-lg-13 col-lg-offset-1 field-type-text input-block" data-field_type="text">
                                    <input class="is-required-field" type="radio" id="job_permit_yes" name="permit" value="Yes"><label for="job_permit_yes">@lang('Yes')</label>
                                    <input class="is-required-field" type="radio" id="job_permit_No" name="permit" value="No"><label for="job_permit_No">@lang('No')</label>
                                </div>
                            </div>
                            <div class="row field-row field-permit_details">
                                <div class="col-lg-10">
                                    <label for="job_form_permit_details">@lang('If yes, what kind of permit do you hold?')</label>
                                </div>
                                <div class="col-lg-13 col-lg-offset-1 field-type-text input-block" data-field_type="text">
                                    <textarea class="is-required-field" maxlength="200" id="job_form_permit_details" name="permit_details"></textarea>
                                </div>
                            </div>
                            <div class="row field-row field-salary">
                                <div class="col-lg-10">
                                    <label for="job_form_salary_currency">@lang('Total annual gross salary expectations in local currency') *</label>
                                </div>
                                <div class="col-lg-13 col-lg-offset-1">
                                    <div class="row">
                                        <div class="col-lg-12 field-type-text input-block" data-field_type="text">
                                            <select data-placeholder="Choose a Currency..." class="is-required-field chosen-select" data-field_type="text" id="job_form_salary_currency" tabindex="1" name="salary_currency">
                                                <option value="" disabled selected>Choose a Currency...</option>
                                                <option value="AUD">AUD</option>
                                                <option value="CHF">CHF</option>
                                                <option value="CNY">CNY</option>
                                                <option value="COP">COP</option>
                                                <option value="EUR">EUR</option>
                                                <option value="GBP">GBP</option>
                                                <option value="IDR">IDR</option>
                                                <option value="INR">INR</option>
                                                <option value="MXN">MXN</option>
                                                <option value="SEK">SEK</option>
                                                <option value="SGD">SGD</option>
                                                <option value="THB">THB</option>
                                                <option value="USD">USD</option>
                                                {{-- <option value="OTH">Other (please specify currency)</option> --}}
                                            </select>
                                        </div>
                                        <div class="col-lg-12 field-type-text input-block" data-field_type="text">
                                            <input class="is-required-field" type="text" id="job_form_salary" name="salary">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row field-row field-source-detail">
                                <div class="col-lg-10">
                                    <label for="job_form_source">@lang('How did you hear about this position?') *</label>
                                </div>
                                <div class="col-lg-13 col-lg-offset-1">
                                    <div class="row">
                                        <div class="col-lg-24 field-type-text input-block" data-field_type="text">
                                            <select placeholder="Choose an option..." data-placeholder="Choose an option..." class="is-required-field chosen-select" data-field_type="text" id="job_form_source" tabindex="1" name="source">
                                                <option value="" disabled selected>Choose an option...</option>
                                                <option value="referral">Referral</option>
                                                <option value="agency">Agency</option>
                                                <option value="linkedin">LinkedIn</option>
                                                <option value="job_board">Job board</option>
                                                <option value="south_pole_careers_site">South Pole careers site</option>
                                                <option value="contacted">South Pole Recruitment Team</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row field-row field-source_text hide">
                                <div class="col-lg-10">
                                    <label for="job_form_source"><span id="referal_label"></span> *</label>
                                </div>
                                <div class="col-lg-13 col-lg-offset-1">
                                    <textarea maxlength="500" id="job_form_source_text" name="source_text"></textarea>
                                </div>
                            </div>
                            <div class="row field-row field-g-recaptcha-response">
                                <div class="col-lg-10">
                                </div>
                                <div class="col-lg-13 col-lg-offset-1 field-type-text input-block">
                                    <div class="g-recaptcha" data-sitekey="{{ $recaptchaKey }}"></div>
                                </div>
                            </div>
                            <div class="row field-row">
                                <div class="col-lg-10">
                                </div>
                                <div class="col-lg-13 col-lg-offset-1 field-type-text input-block" data-field_type="file">
                                    <input class="submit roundcorner dark-blue" type="submit" id="job_form_submit" name="submit" value="@lang('Submit Application')">
                                    <a href="#" class="clear-and-close">@lang('Clear info & close')</a>
                                    <div class="clear"></div>
                                    <div class="error-msg"></div>
                                </div>
                            </div>
                        </div>
                    </form>

                    <div class="loader-overlay">
                        <div class="loading">
                            <span class="fa fa-cog fa-spin"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="side-bar-elem col-lg-8 col-sm-10 col-xs-24 pull-right">
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function(){
        var vacancyApply = new  Eae.View.VacancyApply({
            el: $("body")
        });
    });
</script>
@stop