@extends('front.layouts.main')

@section('title')Super Senior @endsection

@section('content')
@if($isAlreadySuper != true)
<main class="super-senior-landing-page">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-xl-6 col-lg-7 col-md-10">
                <div class="main-content">
                    <div class="box white" id="contact-info">
                        <div class="title-wrapper">
                            <h2 class="box-title large-font-size pb-2">{{ @trans('welcome.apply_for_super_senior') }}</h2>
                        </div>
                        <p>{{ @trans('welcome.feature_headline') }}</p>
                        <p>To be approved as a Super Senior candidate you must fit within the following criteria:</p>
                        <ul style="list-style-type: disc;" class="pl-4">
                            <li>{{ @trans('welcome.first_criteria') }}</li>
                        </ul>
                        <hr>
                        <p class="bold mb-4">{{ @trans('welcome.follow_feature') }}</p>
                        <ul>
                            <li class="d-flex align-items-center mb-4">
                                <div class="img-wrapper text-center mr-4">
                                    <img src="{{ asset('img/ic-ss-feature-one.svg') }}" alt="Confidentiality" />
                                </div>
                            Confidentiality: {{ @trans('welcome.first_feature') }}
                            <li class="d-flex align-items-center mb-4">
                                <div class="img-wrapper text-center mr-4">
                                    <img src="{{ asset('img/ic-ss-feature-two.svg') }}" alt="Service" />
                                </div>
                            Service: {{ @trans('welcome.second_feature') }}</li>
                            <li class="d-flex align-items-center mb-4">
                                <div class="img-wrapper text-center mr-4">
                                    <img src="{{ asset('img/ic-ss-feature-three.svg') }}" alt="Notifications" />
                                </div>
                            Notifications: {{ @trans('welcome.third_feature') }}</li>
                            <li class="d-flex align-items-center mb-4">
                                <div class="img-wrapper text-center mr-4">
                                    <img src="{{ asset('img/ic-ss-feature-four.svg') }}" alt="Exculsivity" />
                                </div>
                            Exclusivity: {{ @trans('welcome.fourth_feature') }}</li>
                        </ul>
                        <hr>
                        <p>There are also more features that will be made available to you in the near future.</p>
                        <p>To progress forward please press the “Apply Button” below, fill up the requested details along with uploading a word.doc version of your CV, and your request will be submitted to our team for approval.</p>
                        <div class="act-wrapper">
                            <a href="#seniorModal" class="btn btn-transparent mr-2" data-toggle="modal" data-target="#seniorModal">Apply Now</a>
                            <a href="{{ route('front.profile.index') }}" class="btn btn-transparent">Cancel</a>
                        </div>
                    </div>
                    
                    <!-- Senior Now Modal Start -->
                    <div class="modal fade" id="seniorModal">
                        <div class="modal-dialog modal-sm">
                            <div class="modal-content">
                                <!-- Modal Header -->
                                <div class="modal-header dark-bg border-0">
                                    <p class="modal-title mb-0">{{ @trans('welcome.i_m_super_senior')}}</p>
                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                                </div>
                                <!-- Modal body -->
                                <div class="modal-body pb-0">
                                    <form method="post" enctype="multipart/form-data" autocomplete="off" name="super_senior_form" id="superseniorform" action="{{route('front.dashboard.postSuperSenior')}}">
                                        @csrf
                                        <div class="form-group required">
                                            <label class="control-label">{{@trans('welcome.company_name_label')}}</label>
                                            <select class="form-control select-two" id="company_id" name="company_id" required>
                                            </select>
                                        </div>
                                        <div class="form-group required">
                                            <label class="control-label">{{@trans('welcome.designation_label')}}</label>
                                            <input type="text" class="form-control" placeholder="Designation" name="designation" id="designation" required>
                                        </div>
                                        <div class="form-group select btm-arrow required">
                                            <label class="control-label">{{ @trans('welcome.position_level_label')}}</label>
                                            <select class="form-control select-two" name="position_level_id" id="position_level_id" required>
                                            <option value="" hidden>Select</option>
                                                @foreach($jobLevel as $key => $value)
                                                <option value="{{$value->id}}">{{$value->name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="form-group select btm-arrow required">
                                            <label class="control-label">{{@trans('welcome.total_exp_label')}}</label>
                                            <select class="form-control select-two" name="total_no_of_experience" id="total_no_of_experience" required>
                                                <option value="" hidden>Select</option>
                                                @for($i = 5; $i<=11; $i++) @if($i !=11) <option value="{{$i}}">{{$i}}</option>
                                                @else
                                                    <option value="{{$i}}">10+</option>
                                                    @endif
                                                    
                                                    @endfor
                                                </select>
                                        </div>
                                        <div class="custom-file file-type-new upload-bg w-100 h-auto required">
                                            <label class="control-label">{{@trans('welcome.upload_your_cv')}}</label>
                                            <div class="form-control">
                                                <input type="file" name="word_cv" id="word_cv" class="custom-file-input h-auto">
                                            </div>
                                        </div>
                                        <div class="alreadyUploadedCv">
                                            @if(isset($resume))
                                            <div class="col-md-12 mt-2">
                                                <div class="form-group file-upload">{{$resume->title}}
                                                    <div class="file-act">
                                                        <a target="_blank" href="{{$resume->user_document_link}}" title="download"><i class="material-icons">get_app</i></a>
                                                        <input type="hidden" name="already_have_resume" id="already_have_resume"  value="{{ $resume->title }}">
                                                    </div>
                                                </div>
                                            </div>
                                            @endif
                                        </div>
                                        <div class="notUploadedCv d-none">
                                            <div class="col-md-12 mt-2">
                                                <div class="form-group file-upload uploadeCvName"></div>
                                            </div>
                                        </div>
                                        <div class="modal-footer border-0 pt-4 justify-content-center">
                                            <input type="submit" class="btn btn-transparent super-senior-submit" value="{{@trans('welcome.submit_btn')}}">
                                        </div>
                                    </form>
                                </div>
                                <!-- Modal footer -->
                            </div>
                        </div>
                    </div>
                    <!-- Senior Now Modal End -->
                </div>
            </div>
        </div>
    </div>
</main>
@else
<main class="cv-submitted-successfully-page pt-0">
    <section class="section bg-white">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 offset-lg-3 col-md-8 offset-md-2 text-center">
                    <img src="{{ asset('img/ic-ss-request-sent.svg') }}" alt="Empower" />
                    <h2 class="bold medium-font-size mt-3 mb-4">{{ @trans('welcome.thanks_cv_submit') }}</h2>
                    <p class="gray mb-2">We have received your application for Super Senior successfully and under review now. If <u>approved</u>, you will receive a call from our team and be notified via email.</p>
                    <p class="gray mb-2">If your application is <u>not approved</u>, you will be notified via email.</p>
                    <p class="gray mb-4 mt-3">{{ @trans('welcome.welcome_smart_platform') }}</p>
                    <a href="{{ route('front.dashboard.index') }}" class="btn btn-transparent">Go to Dashboard</a>
                </div>
            </div>
        </div>
    </section>
</main>

@endif
@endsection

@push('pageJs')
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script type="text/javascript">
    $('#company_id').on('change', function() {
        $(this).valid();
    });

    $('#word_cv').change(function(e){
        $('.alreadyUploadedCv').addClass('d-none');
        $('.uploadeCvName').html(e.target.files[0].name);
        $('.notUploadedCv').removeClass('d-none');
    });

    $('#company_id').select2({
        placeholder: 'Select an option',
        minimumInputLength: 2,
        tags: true,
        allowClear: true,
        dropdownParent: $('#seniorModal .modal-content'),
        ajax: {
            delay: 250,
            url: '{{route("company.searchCommonCompany")}}',
            dataType: 'json',
            data: function(params) {
                var query = {
                    search: params.term
                }
                return query;
            },
            processResults: function(response) {
                return {
                    results: response,
                };
            }
        }
    });

    $('#position_level_id').select2({
        placeholder: 'Select',
        dropdownParent: $('#seniorModal .modal-content'),
    });

    $('#total_no_of_experience').select2({
        placeholder: 'Select',
        dropdownParent: $('#seniorModal .modal-content'),
    });

    $('.super-senior-submit').click(function(e) {
        if($('#superseniorform').valid()){
            $('#superseniorform').submit();
            $(".super-senior-submit").attr("disabled", true);
            $(".super-senior-submit").val("Please wait..");
        }
    });

    $("#superseniorform").validate({
        rules: {
            company_id: 'required',
            total_no_of_experience: 'required',
            position_level_id: 'required',
            designation: 'required',
            word_cv: {
                required : function() {
                    return ($('#already_have_resume').val() == null);
                },
                extension: 'docx|doc',
                filesize: 25,
            }
        },
        messages: {
            company_id: 'This field is required.',
            total_no_of_experience: 'This field is required.',
            position_level_id: 'This field is required.',
            designation: 'This field is required.',
            word_cv: {
                required: 'This field is required.',
                extension: 'Please upload only word document.',
            }
        },
        errorElement: 'span',
        errorClass: 'invalid-feedback',
        errorPlacement: function(error, element) {
            if (element.type == 'input' || element.type == 'select') {
                error.insertAfter(element.sibling(a));
            } else {
                if (element.hasClass('select-two')) {
                    // error.insertAfter(element.next('.select2-container'));
                    error.insertAfter(element.parent());
                } else if (element.prop('type') === 'radio') {
                    error.appendTo(element.parent().parent());
                } else if (element.prop('type') === 'file') {
                    error.appendTo(element.parent().parent());
                } else {
                    if (element.is('#fb-userId')) {
                        el = $(".name-opt .dropdown-menu").parent();
                        error.insertAfter(el);
                    } else {
                        error.insertAfter(element);
                    }
                }
            }
        },
    });
</script>
@endpush