@extends('front.layouts.main')

@section('content')
<main id="app" v-cloak>
    @yield('secondary_content')

    @include('front.modules.cv_builder.skills_based_cv.modals.professional_profile')
    @include('front.modules.cv_builder.skills_based_cv.modals.skills')
    @include('front.modules.cv_builder.skills_based_cv.modals.career_summary')
    @include('front.modules.cv_builder.skills_based_cv.modals.education')
    @include('front.modules.cv_builder.skills_based_cv.modals.course')
    @include('front.modules.cv_builder.skills_based_cv.modals.professional_membership')
    @include('front.modules.cv_builder.skills_based_cv.modals.key_skill')
    @include('front.modules.cv_builder.skills_based_cv.modals.language')
    @include('front.modules.cv_builder.skills_based_cv.modals.interests')
    @include('front.modules.cv_builder.skills_based_cv.modals.referee')
    @include('front.modules.cv_builder.skills_based_cv.modals.select_referees')
    @include('front.modules.cv_builder.components.delete_confirm')
    @include('front.modules.cv_builder.skills_based_cv.modals.certificates')
    @include('front.modules.cv_builder.components.change_cv_template')

    @stack('secondary_pageModals')
</main>
@endsection

@push('pageModals')
    <div class="modal" tabindex="-1" role="dialog" id="ieMessage" data-backdrop="static">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Attention</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>
                        To utilize all the features of Empower platform seamlessly, we recommend you to use
                        the latest versions of <a class="underline" href="https://www.google.com/chrome"
                            target="_blank">Google Chrome</a>
                        or <a class="underline" href="https://www.mozilla.org/en-US/firefox/new/"
                            target="_blank">Mozilla Firefox</a> or
                        <a class="underline" href="https://support.apple.com/downloads/safari" target="_blank">Apple
                            Safari</a> browsers
                        on your Microsoft Windows or MAC system.
                    </p>
                </div>
                <div class="modal-footer d-flex justify-content-center">
                    <button type="button" class="btn btn-transparent" data-dismiss="modal">Okay</button>
                </div>
            </div>
        </div>
    </div>
@endpush

@push('pageJs')
    <script>
        @if(Auth::user())
        if (isIE()) {
            $('#ieMessage').modal();
        }
        @endif
    </script>

    @if(config('app.env') == 'local')
    <script type="text/javascript" src="{{ asset('js/vendor/vue.js') }}"></script>
    @else
    <script type="text/javascript" src="{{ asset('js/vendor/vue.min.js') }}"></script>
    @endif
    {{-- include modal component --}}
    @include('front.modules.cv_builder.components.modal_component')
    @include('front.modules.cv_builder.components.datepicker_component')
    @include('front.modules.cv_builder.components.select2_component')
    @include('front.modules.cv_builder.components.cv_builder_footer')

    <script type="text/javascript" src="{{ asset('js/vendor/snackbar.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/vendor/vuelidate.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/vendor/validators.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/front/cv_builder/cv_mixin.js') }}"></script>

    <script>
        var stateUrl = "{{route('state.showByCountryId')}}";
        var cityUrl = "{{route('city.showByStateId')}}";

        var getUserData = "{{ route('front.cv_builder.get_user_data') }}";
        var updateUserDetails = "{{ route('front.cv_builder.update_user_details') }}";
        var updateProfessionaProfile = "{{ route('front.cv_builder.update_professional_profile') }}";
        var submitUserSkills = "{{ route('front.cv_builder.submit_user_skills') }}";
        var removeUserSkill = "{{ route('front.cv_builder.remove_user_skills' , ['id' => null]) }}";
        var udpateUserSkills = "{{ route('front.cv_builder.update_user_skills') }}";
        var addUserCareerSummary = "{{route('front.cv_builder.store_career_summary')}}";
        var removeUserCareerSummary = "{{route('front.cv_builder.remove_career_summary' , ['id' => null])}}";
        var storeUserEducation = "{{ route('front.cv_builder.store_education') }}";
        var removeUserEducation = "{{ route('front.cv_builder.remove_eduction' , ['id' => null]) }}"
        var storeUserCourse = "{{ route('front.cv_builder.store_course') }}";
        var removeUserCourse = "{{ route('front.cv_builder.remove_course' , ['id' => null]) }}";
        var storeUserMembership = "{{ route('front.cv_builder.store_user_membership') }}";
        var removeUserCommunity = "{{ route('front.cv_builder.remove_user_community' , ['id' => null]) }}";
        var storeUserKeySkills = "{{ route('front.cv_builder.store_user_key_skills') }}";
        var storeUserLanguages = "{{ route('front.cv_builder.store_user_languages') }}";
        var get_search_json = "{{ route('common.get_search_json') }}";
        var get_cities_with_pagination = "{{ route('city.ajaxSearchWithPagination') }}";
        var storeUserInterests = "{{ route('front.cv_builder.store_user_interests') }}";
        var storeReferee = "{{ route('front.cv_builder.store_referee') }}";
        var removeReferee = "{{ route('front.cv_builder.remove_referee' , ['id' => null]) }}";
        var selectRefereeForCv = "{{ route('front.cv_builder.select_referee_for_cv') }}";
        var storeUserCertificate = "{{ route('front.cv_builder.store_user_certificate') }}";
        var removeUserCertificate = "{{ route('front.cv_builder.remove_user_certificate', ['id' => null]) }}";
    
    </script>
    <script type="text/javascript" src="{{ asset('js/front/cv_builder/cv_global_mixin.js') }}"></script>

    <script src="{{ asset('js/vendor/vue-select.js') }}"></script>
    <script>
        Vue.component('v-select', VueSelect.VueSelect);
    </script>

    @stack('secondary_pageJs')
@endpush

@push('pageCss')
<link rel="stylesheet" type="text/css" href="{{ asset('css/vendor/snackbar.min.css') }}">
<link rel="stylesheet" href="https://unpkg.com/vue-select@latest/dist/vue-select.css">
<style>
    .alert-danger {    
        color: red;    
        background-color: transparent;    
        border-color: transparent;
    }
    .vs__open-indicator {
        border-color: #888 transparent transparent transparent;
        border-style: solid;
        border-width: 5px 4px 0 4px;
        height: 0;
        width: 0;
        margin-right: 10px;
        margin-left: 6px;
    }
    .vs__dropdown-toggle {
        min-height: 40px;
    }
</style>
@endpush