@extends('admin.layouts.main')

@section('title')
Candidate
@endsection

@section('content')

<main>

    <loading :active.sync="isLoading"></loading>

    <div class="two-col">

        @include("admin.common.sidebar")

        <div class="right-sec" v-cloak>

            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="javascript:void(0)">{{ @trans('candidate.recruitment') }}</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">{{ @trans('candidate.candidates') }}</li>
                </ol>
            </nav>

            <div class="top-bar d-flex align-items-center">

                <h2>{{ @trans('candidate.candidates') }}</h2>
                <div class="right-table-container ml-auto">

                    <a v-if="selected_candidates.length" href="javascript:void(0)" class="btn btn-em"
                        @click="openAddToGroupModal">Add to Group</a>

                    <a v-if="!filtering" href="javascript:void(0)" class="btn btn-em" data-toggle="modal"
                        data-target="#filter">
                        <img src="{{ asset('img/admin/ic_filter.svg') }}" alt="" class="mr-1">Filter</a>
                    <a v-if="filtering" href="javascript:void(0)" class="btn btn-em" @click="openFilterModal">
                        <img src="{{ asset('img/admin/ic_filter_edit.svg') }}" class="mr-1" alt="filter" /> Edit
                        Filter</a>

                    @permission('candidate-write')
                    @if(!Auth::user()->parent_id)
                    <a href="{{ route('admin.candidates.add',['panel' => Session::get('panel')]) }}"
                        class="btn btn-em btn-primary-em">Create New</a>
                    @endif
                    @endpermission
                </div>

            </div>

            <div class="table-wrapper">
                <div class="table-top-panel d-flex align-items-center">

                    <div class="form-group search-input float-left mb-0">
                        <img src="{{asset('/img/admin/ic_search.png')}}" srcset="../../img/admin/ic_search@2x.png 2x"
                            alt="search">
                        <input type="text" name="search_text" id="search_text" v-model="search_text" @input="search"
                            placeholder="Search">
                        <i class="material-icons" v-if="search_text" @click="clearSearch">close</i>
                    </div>

                    <div class="d-flex align-items-center mx-auto">
                        <div class="form-group select btm-arrow mb-0  without-label mr-2 d-flex align-items-center"
                            v-if="candidates.length">
                            <label style="white-space: nowrap;" class="mb-0 gray">{{
                                @trans('candidate.records_per_page') }}</label>
                            <select class="form-control" id="per_page" v-model="per_page" @input="perPage">
                                <option value="25">25 </option>
                                <option value="50">50</option>
                                <option value="100">100</option>
                            </select>
                        </div>
                        <span>Total @{{ total }}</span>
                    </div>

                    <div class="pagination d-flex justify-content-center ml-auto" v-if="candidates.length">
                        @include('admin.common.paginate_js')
                    </div>
                </div>
                <div class="table-data" v-if="candidates.length">
                    <div class="table-responsive table-checkable">

                        <table class="table" id="mtcTable">
                            <thead>
                                <tr>
                                    <th>
                                        <div class="form-group mb-0">
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input candidate-custom-all-checkbox" id="selectAll"
                                                    @click="selectAll">
                                                <label class="custom-control-label" for="selectAll"></label>
                                            </div>
                                        </div>
                                    </th>
                                    <th>#</th>
                                    <th>{{ @trans('candidate.candidate_name') }}<a href="javascript:void(0)"
                                            :class="classSort('first_name')" @click="sort('first_name')"></a></th>
                                    <th>{{ @trans('job.resume') }}</th>
                                    <th>{{ @trans('candidate.status') }}<a href="javascript:void(0)"
                                            :class="classSort('status')" @click="sort('status')"></a></th>
                                    <th>Mobile</th>
                                    <th>{{ @trans('candidate.type') }}</th>
                                    <th>{{ @trans('candidate.designation') }}</th>
                                    <th>{{ @trans('candidate.company') }}</th>
                                    <th>{{ @trans('candidate.country') }}</th>
                                    <th>{{ @trans('candidate.job_applied') }}</th>
                                    <th>{{ @trans('candidate.action') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item,index) in candidates" :key="item.id">
                                    <td>
                                        <div class="form-group mb-0">
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input candidate-custom-checkbox" :id="item.id"
                                                    v-model="selected_candidates" :value="item.id">
                                                <label class="custom-control-label" :for="item.id"></label>
                                            </div>
                                        </div>
                                    </td>
                                    <td>@{{ item.registration_id }}</td>
                                    <td>
                                        <a :href="'{{url(Session::get('panel').'/candidates/show')}}/'+ item.id"
                                            class="d-block text-underlined" :title="item.first_name+' '+item.last_name">
                                            @{{ item.full_name}}
                                        </a>
                                        <img v-if="item.is_blacklist" src="{{ asset('img/admin/ic-blocked-user.png') }}"
                                            data-toggle="tooltip" title="Blacklisted" class="pr-1" width="20" />
                                        <img v-if="item.consultant_profile"
                                            src="{{ asset('img/admin/ic-consultant.png') }}" data-toggle="tooltip"
                                            title="Consultant" class="pr-1" width="20" />
                                        <img v-if="item.moverprofile_count" src="{{ asset('img/admin/ic-mover.png') }}"
                                            data-toggle="tooltip" title="Mover" class="pr-1" width="20" />
                                        <img v-if="item.is_super_senior_status && item.is_super_senior_status == 1"
                                            src="{{ asset('img/admin/ic-super-senior.png') }}" class="pr-1" width="20"
                                            data-toggle="tooltip" title="Super Senior" />
                                    </td>
                                    <td>
                                        <a v-if="item.wordcv" :href="item.wordcv.candidate_document_link"
                                            target="_blank" title="Word CV" data-toggle="tooltip"><img
                                                src="{{ asset('img/admin/ic_document_text.png') }}" width="20" /></a>
                                        <a v-if="item.pdfcv" :href="item.pdfcv.candidate_document_link" target="_blank"
                                            title="PDF CV" data-toggle="tooltip"><img src="{{ asset('img/admin/ic_pdf.png') }}"
                                                width="20" /></a>
                                        <a v-if="item.cv_template_id != null && item.cv_template_token != null"
                                            target="_blank" title="CV Template" data-toggle="tooltip"
                                            :href="'{{ url('cv-viewer') }}/' + item.cv_template_token">
                                            <img src="{{ asset('img/admin/ic_template.png') }}" width="20" /></a>
                                        <a v-else-if="!item.wordcv && !item.pdfcv && !(item.cv_template_id != null
                                            && item.cv_template_token != null)">-</a>
                                    </td>
                                    <td>@{{ item.status_formatted }}</td>
                                    <td>@{{ item.mobile }}</td>
                                    <td>@{{ item.latest_experiences && item.latest_experiences.joblevels ?
                                        item.latest_experiences.joblevels.name :'-' }}
                                    </td>
                                    <td>@{{ item.latest_experiences && item.latest_experiences.positiontitle
                                        ? item.latest_experiences.positiontitle
                                        : '-' }}</td>
                                    <td>@{{ item.latest_experiences && item.latest_experiences.commancompanies
                                        ? item.latest_experiences.commancompanies.name
                                        :'-'  }}</td>
                                    <td>@{{ item.locations && item.locations.countries ? item.locations.countries.name
                                        :'-' }}</td>
                                    <td>@{{ item.applied_jobs_count }}</td>
                                    <td class="act-btn">

                                        @permission('candidate-write')
                                        <label class="switch">
                                            <input type="checkbox" @click="toggleStatus(item.id)"
                                                :checked="item.is_active && item.email_verified_at">
                                            <span class="slider round"></span>
                                        </label>
                                        <a :href="'{{url(Session::get('panel').'/candidates/edit')}}/'+ item.id"
                                            title="Edit" class="btn btn-edit"><i class="material-icons">edit</i>
                                        </a>
                                        @endpermission
                                        @permission('candidate-read')
                                        <a :href="'{{url(Session::get('panel').'/candidates/show')}}/'+ item.id"
                                            title="View" class="btn btn-view"><i
                                                class="material-icons">remove_red_eye</i></a>
                                        @endpermission
                                        {{-- @permission('candidate-delete')
                                        <a href="javascript:void(0)" @click="confirm(item.id)" title="Delete"
                                            class="btn btn-dlt"><i class="material-icons">delete</i>
                                        </a>
                                        @endpermission --}}

                                        @permission('candidate-impersonate-read')
                                        <a v-if="item.can_be_impersonated" class="btn btn-login"
                                            :href="'{{url('impersonate/take')}}/'+ item.id"><i class="material-icons">
                                                input
                                            </i>
                                        </a>
                                        @endpermission

                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                </div>
            </div>

            <div class="row" v-if="!candidates.length && loaded == true">
                <div class="col-md-12">
                    <div class="alert alert-warning" role="alert">
                        {{ @trans('candidate.no_records_to_show') }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
@endsection

@push('pageModals')
@include('admin.components.modal_delete_js')
@include('admin.modules.candidate.modals.filter')
@include('admin.modules.candidate.modals.add_to_group')
@endpush

@push('pageJs')
<script type="text/javascript">
    function initListCandidates() {
        $('[data-toggle="tooltip"]').tooltip({
            container: 'body',
            placement: 'top'
        })
        $(".table-data .table-responsive").freezeTable({
            'columnNum': 3,
            'scrollable': true,
        });

        $(document).on('click', '.candidate-custom-checkbox', function() {
            if($(this).is(':checked')) {
                $('#'+ $(this).attr('id') + '.candidate-custom-checkbox').prop('checked', true);
                setTimeout(() => {
                    $('#'+ $(this).attr('id'))[0].dispatchEvent(new Event('change'))
                }, 0);
            } else {
                $('#'+ $(this).attr('id') + '.candidate-custom-checkbox').prop('checked', false);
                setTimeout(() => {
                    $('#'+ $(this).attr('id'))[0].dispatchEvent(new Event('change'))
                }, 0);
            }
        });

        $(document).on('click', '.candidate-custom-all-checkbox', function(e) {
            if($(this).is(':checked'))
                $('#selectAll.candidate-custom-all-checkbox').prop('checked', true);
            else
                $('#selectAll.candidate-custom-all-checkbox').prop('checked', false);

            setTimeout(() => {
                app.selectAll(e)
            }, 0);
        });
        // JS for highlight column and row on Table hover start
        $(".table-data table td").hover(function() {
                $(this).parents('table').find('td:nth-child(' + ($(this).index() + 1) + ')').add($(this).parent())
                    .addClass('highlight');
            },
            function() {
                $(this).parents('table').find('td:nth-child(' + ($(this).index() + 1) + ')').add($(this).parent())
                    .removeClass('highlight');
            });

        if (app.initListCandidates == true) {
            setTimeout(function() {
                $("input#search_text").focus();
            }, 10);
        }
    }
</script>
<script>
    var candidate_indexUrl = "{{route('admin.candidates.indexJson',['panel' => Session::get('panel') ])}}";
    var candidate_deleteUrl = "{{route('admin.candidates.destroy',['panel' => Session::get('panel'),'id' => null])}}";
    var toggle_status_url =
        "{{route('admin.candidates.toggle_status',['panel' => Session::get('panel'),'id' => null])}}";

    var countries_url = "{{ route('country.coutryajaxsearch') }}";
    var qualifications_url = "{{ route('qualifications.indexJson') }}";
    var employment_status_url = "{{ route('employment_statuses.indexJson') }}";
    var job_level_url = "{{ route('job_levels.indexJson') }}";
    var marital_status_url = "{{ route('marital_status.indexJson') }}";
    var ethnicity_url = "{{ route('ethnicity.indexJson') }}";
    var religion_url = "{{ route('religion.indexJson') }}";
    var certificate_category_url = "{{ route('certificate_categories.indexJson') }}";
    var institution_url = "{{ route('institution.indexJson') }}";


    var groupsUrl = "{{ route('admin.candidates.groups',['panel' => session('panel')]) }}";
    var candidateGroupUrl = "{{ route('admin.candidates.candidateGroups',['panel' => session('panel')]) }}";
    var groupStore = "{{ route('admin.candidates.storeGroup',['panel' => session('panel')]) }}";
    var syncCandidateGroup = "{{ route('admin.candidates.syncCandidateGroup',['panel' => session('panel')]) }}";

    @if(Session::has('message'))
    Snackbar.show({
        pos: 'bottom-right',
        text: "{!! session('message') !!}",
        actionText: 'Okay'
    });
    @endif
</script>
<script>
var search_text = '';
var candidate_status = 'verified';

@if(Request::get('search_text'))
var search_text = "{{ Request::get('search_text') }}";
var candidate_status = 'inactive';
@endif
</script>
<script type="text/javascript" src="{{ asset('js/admin/candidate/index.js') }}"></script>

@endpush