@extends('layout.guest.guest') @section('title') {{{ trans('site/user.job_opening') }}} :: @parent @stop 
<title>{{{ trans('site/user.job_opening') }}} | Staqo World Private Ltd.</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
@push('head-script')
<style>
    #loaderDiv{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgb(128,128,128, 0.25);
    }
    .loader {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
        width: 165px;
        height: 165px;
    }
    .first {
        width: 50px;
        height: 50px;
        display: block;
        float: left;
        background: #E4170E;
        animation: animate 2s ease-in infinite;
        border: 2px solid #efeacc;
    }
    .second {
        width: 50px;
        height: 50px;
        display: block;
        float: left;
        background: #158ECF;
        animation: animate 2s ease-in infinite;
        border: 2px solid #efeacc;
    }
    .third {
        float: left;
        background: #fff;
        animation: animate 2s ease-in infinite;
        border: 2px solid #fff;
    }
    .four {
        width: 50px;
        height: 50px;
        display: block;
        float: left;
        background: #F07C00;
        animation: animate 2s ease-in infinite;
        border: 2px solid #efeacc;
    }
    .five {
        width: 50px;
        height: 50px;
        display: block;
        float: left;
        background: #954A97;
        animation: animate 2s ease-in infinite;
        border: 2px solid #efeacc;
    }
    .six {
        width: 50px;
        height: 50px;
        display: block;
        float: left;
        background: #2372B5;
        animation: animate 2s ease-in infinite;
        border: 2px solid #efeacc;
    }
    .seven {
        width: 50px;
        height: 50px;
        display: block;
        float: left;
        background: #FBB900;
        animation: animate 2s ease-in infinite;
        border: 2px solid #efeacc;
    }
    .eight {
        width: 50px;
        height: 50px;
        display: block;
        float: left;
        background: #F07C01;
        animation: animate 2s ease-in infinite;
        border: 2px solid #efeacc;
    }
    .nine {
        width: 50px;
        height: 50px;
        display: block;
        float: left;
        background: #E73428;
        animation: animate 2s ease-in infinite;
        border: 2px solid #efeacc;
    }
    .loader span {
        width: 50px;
        height: 50px;
        display: block;
        float: left;
        /* background: #a23607; */
        animation: animate 2s ease-in infinite;
        border: 2px solid #efeacc;
    }
    .loader span:nth-child(3) {
        animation-delay: 0.8s;
    }
    .loader span:nth-child(2),
    .loader span:nth-child(6) {
        animation-delay: 0.6s;
    }
    .loader span:nth-child(1),
    .loader span:nth-child(5),
    .loader span:nth-child(9) {
        animation-delay: 0.4s;
    }
    .loader span:nth-child(4),
    .loader span:nth-child(8) {
        animation-delay: 0.2s;
    }
    .loader span:nth-child(7) {
        animation-delay: 0s;
    }
    @keyframes animate {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(0);
    }

    50% {
        transform: scale(0);
    }

    75% {
        transform: scale(1);
    }

    100% {
        transform: scale(1);
    }
    }
</style>

@endpush
@section('content')
<!-- BEGIN: Content-->
 
    <div class="container-fluid p-0 h-100">
        <div class="row h-100 m-0">
            <div class="col-md-12 col-lg-12 d-flex flex-column">
                <img class="login-logo" src="/app-assets/images/logo/Staqo-Logo-Blue.png" alt="Logo">
                <div class="mt-auto d-none d-sm-block">
                    <div class="row justify-content-center">
                        <div class="col-md-10 text-right loginleftimage">
                            <div class="pricing-free-trial">
                                <div class="row">
                                    <div class="col-12 col-lg-12 col-lg-offset-3 mx-auto">
                                    <div class="pricing-trial-content d-flex justify-content-between">
                                        
                                        <div class="text-center text-md-start">
                                        <h3 class="text-primary">We are hiring for <strong>{{ $job->posting_title }}</strong></h3>
                                        <button class="btn btn-primary waves-effect waves-float waves-light" data-bs-toggle="modal" data-bs-target="#applyJob">Apply Now</button>
                                        
                                        <h5>Job Type: <strong>{{ $job->jobType ? $job->jobType->name : 'Full Time' }}</strong></h5>
                                        <h5>Experience required for the Job: <strong>{{ $job->workExperience ? $job->workExperience->name : 'None' }}</strong></h5>
                                        <h5>Annual Salary of the Job: <strong>{{ $job->salary ? $job->salary->name : 'None' }}</strong></h5>
                                        <h5>Job Location: 
                                            <strong>
                                                {{ $job->location }} 
                                                {{ $job->city ? $job->city->name : '' }} 
                                                {{ $job->state ? $job->state->name : '' }} 
                                                {{ $job->country ? $job->country->name : '' }}  
                                                {{ $job->zip_code }}
                                            </strong>
                                        </h5>
                                        <h5>Key Skills: 
                                            @if (count($job->jobSkill)> 0)
                                                
                                            @foreach ($job->jobSkill as $jobSkill)
                                            <strong>
                                                {{ $loop->iteration > 1 ? ',' :' ' }}{{ $jobSkill->skill ? $jobSkill->skill->name : '' }}
                                            </strong>
                                            @endforeach
                                            @else
                                            None
                                            @endif
                                        </h5>
                                        <h3>Job Responsibilities: <br/>
                                            <strong>{!! $job->description !!}
                                        </h3>

                                        </div>
                            
                                        <!-- image -->
                                        {{-- <img src="/app-assets/images/pages/login-v2.svg" class="pricing-trial-img img-fluid" alt="svg img"> --}}
                                    </div>
                                    </div>
                                </div>
                                </div>
                            {{-- <img src="/app-assets/images/pages/login-v2.svg" alt="Login V2" class="img-fluid" /> --}}
                            <p class="logincopyright">COPYRIGHT © 2022 <span>{{ config('app.name') }}</span></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
        <!-- Apply Job Modal -->
    <div class="modal fade" id="applyJob" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered modal-edit-user">
            <div class="modal-content">
                <div class="modal-header bg-transparent">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pb-5 px-sm-5 pt-50">
                    <div class="text-center mb-2">
                        <h3 class="mb-1 text-primary">We are hiring for <strong>{{ $job->posting_title }} </strong> please apply now.</h3>
                        <p class="text-danger">Please fill all the required fields marked with(<strong>*</strong>)</p>
                    </div>
                    <form role="post-data" method="POST" action="/job-apply/{{ $jobId }}/store" id="applyJobForm" class="row gy-1 pt-75">
                        <input type="hidden" name="source" value="Public URL">
                        <input type="hidden" name="job_id" value="{{ $jobId }}">
                        <input type="hidden" name="organization_id" value="{{ $job->organization_id }}">
                        <div class="col-12 col-md-6">
                            <label class="form-label" for="modalEditUserFirstName">First Name <span class="text-danger"><strong>*</strong></span></label>
                            <input type="text" id="first_name" name="first_name" class="form-control" placeholder="Please enter your first name" data-msg="Please enter your first name" />
                        </div>
                        <div class="col-12 col-md-6">
                            <label class="form-label" for="modalEditUserLastName">Last Name <span class="text-danger"><strong>*</strong></span></label>
                            <input type="text" id="last_name" name="last_name" class="form-control" placeholder="Please enter your last name" data-msg="Please enter your last name" />
                        </div>
                        
                        <div class="col-12 col-md-6">
                            <label class="form-label" for="modalEditUserEmail"> Email <span class="text-danger"><strong>*</strong></span></label>
                            <input type="text" id="email" name="email" class="form-control" placeholder="example@candidate.com" />
                        </div>
                        <div class="col-12 col-md-6">
                            <label class="form-label" for="modalEditUserMobile"> Mobile <span class="text-danger"><strong>*</strong></span></label>
                            <input type="text" id="mobile" name="mobile" class="form-control" placeholder="example@candidate.com" />
                        </div>

                        <div class="col-md-6">
                            <div class="mb-1">
                                <label class="form-label" for="gender"> Gender <span class="mendatory-field text-danger">*</span></label>
                                <select class="form-control select2" id="gender" name="gender">
                                    <option value="">Select</option>
                                    <option value="male" >Male</option>
                                    <option value="female" >Female</option>
                                    <option value="others" >Others</option>
                                </select>   
                                {!! $errors->first('gender', '<label class="error" for="gender">:message</label>')!!}
                            </div>
                        </div>
                        
                        <div class="col-12 col-md-6">
                            <label class="form-label" for="modalEditUserStatus">Current Salary (Per Annum) <span class="text-danger"><strong>*</strong></span></label>
                            <select id="current_salary_id" name="current_salary_id" class="form-select" aria-label="Current Salary">
                                <option value="">Status</option>
                                @foreach ($jobSalaries as $jobSalary)
                                <option value="{{ $jobSalary->id }}">{{ $jobSalary->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12 col-md-6">
                            <label class="form-label" for="modalEditUserStatus">Expected Salary (Per Annum) <span class="text-danger"><strong>*</strong></span></label>
                            <select id="expected_salary_id" name="expected_salary_id" class="form-select" aria-label="Expected Salary">
                                <option value="">Status</option>
                                @foreach ($jobSalaries as $jobSalary)
                                <option value="{{ $jobSalary->id }}">{{ $jobSalary->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    
                        <div class="col-12 col-md-6">
                            <label class="form-label" for="modalEditUserStatus">Currently Working <span class="text-danger"><strong>*</strong></span></label>
                            <select id="current_employment_status" name="current_employment_status" class="form-select" aria-label="current employment status">
                                <option value="">Status</option>
                                <option value="Yes">Yes</option>
                                <option value="No">No</option>
                            </select>
                        </div>

                        <div class="col-12 col-md-6" style="display:none">
                            <label class="form-label" for="modalEditUserName">Current Employer Details <span class="text-danger"><strong>*</strong></span></label>
                            <input type="text" id="current_employer_details" name="current_employer_details" class="form-control" placeholder="Please enter your current employer details" />
                        </div>

                        <div class="col-12 col-md-6">
                            <label class="form-label" for="modalEditUserStatus">Notice Period <span class="text-danger"><strong>*</strong></span></label>
                            <select id="notice_period_id" name="notice_period_id" class="form-select" aria-label="notice_period_id period">
                                <option value="">Status</option>
                                @foreach ($jobNoticePeriods as $jobNoticePeriod)
                                <option value="{{ $jobNoticePeriod->id }}">{{ $jobNoticePeriod->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-12 col-md-6">
                            <label class="form-label" for="skill">{{trans('recruitment/job-requisition.skills')}}<span class="mendatory-field text-danger">*</span></label>
                                <select class="form-control select2" id="skill" name="skill[]" multiple>
                                    <option value="">Select Skill</option>
                                    @foreach($skills as $skill)
                                        <option value="{{$skill->name}}" >{{ ucfirst($skill->name) }}</option>
                                    @endforeach
                                </select> 
                        </div>

                        <div class="col-12 col-md-6">
                            <label class="form-label" for="modalEditLocation">Current Location <span class="text-danger"><strong>*</strong></span></label>
                            <input type="text" id="location" name="location" class="form-control" placeholder="Please enter your location" />
                        </div>

                        <div class="col-12">
                            <label for="customFile" class="form-label">Upload Resume</label>
                            <input class="form-control" type="file" id="resume" name="resume" aria-invalid="false">
                            <span style="font-size: 0.857rem;"><i>{{ trans('common/common.uploadResumeCaption') }}</i></span>
                        </div>
                        
                        {{-- <div class="col-12">
                            <div class="d-flex align-items-center mt-1">
                                <div class="form-check form-switch form-check-primary">
                                    <input type="checkbox" class="form-check-input" name="agreed" id="customSwitch10" value="Yes" />
                                    <label class="form-check-label" for="customSwitch10">
                                        <span class="switch-icon-left"><i data-feather="check"></i></span>
                                        <span class="switch-icon-right"><i data-feather="x"></i></span>
                                    </label>
                                </div>
                                <label class="form-check-label fw-bolder" for="customSwitch10">Have u applied before?</label>
                            </div>
                        </div> --}}
                        <div class="col-12 text-center mt-2 pt-50">
                            <button type="button" class="btn btn-primary me-1" data-request="ajax-submit" data-target="[role=post-data]">Submit</button>
                            <button type="reset" class="btn btn-outline-secondary" data-bs-dismiss="modal" aria-label="Close">
                                Discard
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!--/ Apply Job Modal -->
    
<!-- END: Content-->
 @endsection

@push('footer-script')
<script>

    var app_url = "{{ config('app.url') }}";
    $.ajaxSetup({
        headers: {
            'Access-Control-Allow-Origin': '*',
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
        
</script>
<script src="{{ asset('js/sweetalert.js') }}"></script>
<script src="{{ asset('js/common-script.js') }}"></script>
@endpush