@extends('admin.layouts.main')

@section('title')
Jobs Dashboard
@endsection

@section('content')

<main class="dashboard-page">

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

    <div class="two-col">

        @include("admin.common.sidebar")

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

            <div class="top-bar d-flex justify-content-between">
                <div class="form-group select btm-arrow without-label d-flex align-items-center">
                    <label class="mb-0 mr-2 text-nowrap" for="category">Select Dashboard</label>
                    <select class="form-control" id="dashboard-select"
                        onchange="javascript:location.href = this.value;">
                        <option hidden="hidden">Select</option>
                        @permission(['dashboard-jobs-read'], false)
                        <option value="{{ route('admin.dashboard.index', ['panel' => session('panel')]) }}?filter=jobs"
                            selected>
                            Jobs
                        </option>
                        @endpermission
                        @permission(['dashboard-candidates-read'], false)
                        <option
                            value="{{ route('admin.dashboard.index', ['panel' => session('panel')]) }}?filter=candidates">
                            Candidate
                        </option>
                        @endpermission
                        @permission(['dashboard-referees-read'], false)
                        <option
                            value="{{ route('admin.dashboard.index', ['panel' => session('panel')]) }}?filter=referees">
                            Referee
                        </option>
                        @endpermission
                        @permission(['dashboard-super-seniors-read'], false)
                        <option
                            value="{{ route('admin.dashboard.index', ['panel' => session('panel')]) }}?filter=super_senior">
                            Super Senior</option>
                        @endpermission
                    </select>
                </div>

                <form action="{{ route('admin.dashboard.index',['panel' => Session::get('panel')]) }}">
                <div class="right-table-container ml-auto">
                    <div class="date">
                        <div class="input-group">
                            <input type="text" class="form-control bg-white" id="start_date" name="start_date" placeholder="Select" value="{{ \Carbon\Carbon::parse($params['start_date'])->format('m/Y') }}"
                                autocomplete="off" readonly required>
                            <div class="input-group-addon">
                                <span class="material-icons">date_range</span>
                            </div>
                        </div>
                    </div>
                    <div class="date">
                        <div class="input-group">
                            <input type="text" class="form-control bg-white" id="end_date" name="end_date" placeholder="Select" value="{{ \Carbon\Carbon::parse($params['end_date'])->format('m/Y') }}"
                                autocomplete="off" readonly>
                            <div class="input-group-addon">
                                <span class="material-icons">date_range</span>
                            </div>
                        </div>
                    </div>
                    <div class="form-action">
                        <input type="submit" class="btn btn-em" value="Apply">
                        @if(Request::get('start_date'))
                        <a href="{{ route('admin.dashboard.index',['panel' => Session::get('panel')]) }}" class="btn btn-em mr-1">Clear</a>
                        @endif
                    </div>
                </div>
                </form>
            </div>


            <div class="row mb-3">

                <div class="col-lg-8">

                    <jobs-stats></jobs-stats>

                    <div class="card mb-3 shadow">
                        <div class="card-body">
                            <canvas id="canvas"></canvas>
                        </div>
                    </div>

                    <div class="card shadow d-none d-lg-block">
                        <upcoming-interviews></upcoming-interviews>
                    </div>
                </div>

                <div class="col-lg-4">

                    <div class="statistics-panel d-flex border border-bottom-0">
                        <div class="col">
                            <div class="stat-panel-info">
                                <jobs-last-submission></jobs-last-submission>
                                <p>Last Candidate Submission</p>
                            </div>
                        </div>
                        <div class="col">
                            <div class="stat-panel-info">
                                <h3>{{ $hiringSuccessRate }}%</h3>
                                <p>Hiring Success Rate</p>
                            </div>
                        </div>
                    </div>

                    <div class="card shadow">
                        <div class="card-body p-0">
                            <ul class="nav border-0 d-flex flex-nowrap side-nav">

                                <li class="nav-item flex-fill text-center">
                                    <a class="nav-link body-text h-100 border-0" @click="tab('currently_sourcing')"
                                        :class="{active:current_tab == 'currently_sourcing'}">
                                        <span class="bold large-font mb-1 d-block">@{{ job_currently_sourcing_count
                                            }}</span>
                                        <p class="xxs-font m-0">Roles Currently in Sourcing</p>
                                    </a>
                                </li>
                                <li class="nav-item flex-fill text-center border-left">
                                    <a class="nav-link body-text h-100 border-0" @click="tab('vacant_jobs')"
                                        :class="{active:current_tab == 'vacant_jobs'}">
                                        <span class="bold large-font mb-1 d-block">@{{ jobs_vacant_count }}</span>
                                        <p class="xxs-font m-0">Vacant Jobs on website</p>
                                    </a>
                                </li>
                                <li class="nav-item flex-fill text-center border-left">
                                    <a class="nav-link body-text h-100 border-0" @click="tab('jobs_with_feedback')"
                                        :class="{active:current_tab == 'jobs_with_feedback'}">
                                        <span class="bold large-font mb-1 d-block">@{{ job_with_feedback_count }}</span>
                                        <p class="xxs-font m-0">Roles with filled Client feedback</p>
                                    </a>
                                </li>
                            </ul>

                            <!-- Tab panes -->
                            <div class="tab-content">

                                <div class="tab-pane" :class="{active:current_tab == 'currently_sourcing'}">
                                    <ul class="m-0" v-if="loaded && job_currently_sourcing.length">
                                        <li class="py-3 px-2 border-bottom"
                                            v-for="(item,index) in job_currently_sourcing">
                                            <p
                                                class="d-flex align-items-center justify-content-between mb-1 semibold small-font">
                                                @{{ item.title }}</p>
                                            <p
                                                class="d-flex align-items-center justify-content-between m-0 gray extrasmall-font">
                                                Posted @{{ item.posted_at_formatted_human}}
                                                <a :href="'jobs/show/'+item.id" target="_blank"
                                                    class="orange text-underlined">View Candidates</a>
                                            </p>
                                        </li>
                                        <li class="p-3" v-if="last_page > 1">
                                            <button class="btn btn-primary-em" :disabled="current_page == 1"
                                                @click="prevPage">Prev</button>
                                            <button class="btn btn-primary-em float-right"
                                                :disabled="current_page == last_page" @click="nextPage">Next</button>
                                        </li>
                                    </ul>
                                    <ul class="m-0" v-else>
                                        <li class="py-3 px-2 border-bottom">
                                            <p
                                                class="d-flex align-items-center justify-content-between mb-1 semibold small-font">
                                                No jobs to show</p>
                                        </li>
                                    </ul>
                                </div>

                                <div class="tab-pane" :class="{active:current_tab == 'vacant_jobs'}">
                                    <ul class="m-0" v-if="loaded && jobs_vacant.length">
                                        <li class="py-3 px-2 border-bottom" v-for="(item,index) in jobs_vacant">
                                            <p
                                                class="d-flex align-items-center justify-content-between mb-1 semibold small-font">
                                                @{{ item.title }} <span class="badge badge-pill badge-primary">@{{
                                                    item.job_candidates_count}} Applicants</span></p>
                                            <p
                                                class="d-flex align-items-center justify-content-between m-0 gray extrasmall-font">
                                                Posted @{{ item.posted_at_formatted_human}}
                                                <a :href="'jobs/show/'+item.id" target="_blank"
                                                    class="orange text-underlined">View Applicants</a>
                                            </p>
                                        </li>
                                        <li class="p-3" v-if="last_page_vacant_jobs > 1">
                                            <button class="btn btn-primary-em" :disabled="current_page_vacant_jobs == 1"
                                                @click="prevPageVacantJobs">Prev</button>
                                            <button class="btn btn-primary-em float-right"
                                                :disabled="current_page_vacant_jobs == last_page_vacant_jobs"
                                                @click="nextPageVacantJobs">Next</button>
                                        </li>
                                    </ul>
                                    <ul class="m-0" v-else>
                                        <li class="py-3 px-2 border-bottom">
                                            <p
                                                class="d-flex align-items-center justify-content-between mb-1 semibold small-font">
                                                No jobs to show</p>
                                        </li>
                                    </ul>
                                </div>

                                <div class="tab-pane" :class="{active:current_tab == 'jobs_with_feedback'}">
                                    <ul class="m-0" v-if="loaded && job_with_feedback.length">
                                        <li class="py-3 px-2 border-bottom" v-for="(item,index) in job_with_feedback">
                                            <p
                                                class="d-flex align-items-center justify-content-between mb-1 semibold small-font">
                                                @{{ item.title }}</p>
                                            <p
                                                class="d-flex align-items-center justify-content-between m-0 gray extrasmall-font">
                                                Posted @{{ item.posted_at_formatted_human}}
                                                <a :href="'jobs/show/'+item.id" target="_blank"
                                                    class="orange text-underlined">Take Action</a>
                                            </p>
                                        </li>
                                        <li class="p-3" v-if="last_page_jobs_with_feedback > 1">
                                            <button class="btn btn-primary-em"
                                                :disabled="current_page_jobs_with_feedback == 1"
                                                @click="prevPageJobsWithFeedback">Prev</button>
                                            <button class="btn btn-primary-em float-right"
                                                :disabled="current_page_jobs_with_feedback == last_page_jobs_with_feedback"
                                                @click="nextPageJobsWithFeedback">Next</button>
                                        </li>
                                    </ul>
                                    <ul class="m-0" v-else>
                                        <li class="py-3 px-2 border-bottom">
                                            <p
                                                class="d-flex align-items-center justify-content-between mb-1 semibold small-font">
                                                No jobs to show</p>
                                        </li>
                                    </ul>
                                </div>

                            </div>
                        </div>
                    </div>

                </div>

            </div>


        </div>
    </div>
</main>

@endsection

@push('pageJs')
<script src="{{ asset('js/vendor/chart.js') }}"></script>
<script>
    var config = {
        type: 'line',
        data: {
            labels: @php echo json_encode($graphData['labels']) @endphp,
            datasets: [{
                    borderColor: '#9ad0f5',
                    fill: false,
                    data: @php echo json_encode($graphData['individualCvSuccessRate']) @endphp,
                    label: 'Individual CV Success Rate',
                },
                {
                    borderColor: '#ffb1c1',
                    fill: false,
                    data: @php echo json_encode($graphData['companyCvSuccessRate']) @endphp,
                    label: 'Company CV Success Rate',
                },
                {
                    borderColor: '#ceb6ff',
                    fill: false,
                    data: @php echo json_encode($graphData['interviewSuccessRate']) @endphp,
                    label: 'Interview Success Rate',
                },

            ]
        },
        options: {
            legend: {
                position: 'bottom',
            },
            scales: {
                xAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Month'
                    }
                }],
                yAxes: [{
                    ticks: {
                        max: 100,
                        min: 0,
                        stepSize: 10
                    },
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Value (%)',
                    }
                }]
            }
        }
    };

    window.onload = function() {
        var ctx = document.getElementById('canvas').getContext('2d');
        window.myLine = new Chart(ctx, config);
    };

    $(document).ready(function() {

        var today = new Date();
        var $startDate = $('#start_date');
        var $endDate = $('#end_date');

        $startDate.datepicker({
            format: 'mm/yyyy',
            zIndex: 2048,
            autoHide: true,
            date: null,
            endDate: (today.getMonth() + 1) + '/' + today.getFullYear(),
        });
        $endDate.datepicker({
            autoHide: true,
            format: 'mm/yyyy',
            zIndex: 2048,
            date: null,
            startDate: $startDate.datepicker('getDate'),
            endDate: (today.getMonth() + 1) + '/' + today.getFullYear(),
        });

        $startDate.on('change', function () {
            $endDate.datepicker('setStartDate', $startDate.datepicker('getDate'));
            $endDate.datepicker('setDate', $startDate.datepicker('getDate'));

        });

    });

    var start_date = "{{ $params['start_date'] }}";
    var end_date = "{{ $params['end_date'] }}";
    var jobLastSubmission = "{{ route('admin.dashboard.jobLastSubmission',['panel' => session('panel') ])}}";
    var jobsStatsUrl =
        "{!! route('admin.dashboard.jobStats', ['panel' => session('panel'), 'start_date' => $params['start_date'], 'end_date' => $params['end_date']]) !!}";
    var jobUpcomingInterviews = "{{ route('admin.dashboard.jobUpcomingInterviews',['panel' => session('panel') ])}}";
    var jobCurrentlySourcingUrl = "{{ route('admin.dashboard.jobCurrentlySourcing',['panel' => session('panel') ])}}";
    var jobVacantUrl = "{{ route('admin.dashboard.jobVacant',['panel' => session('panel') ])}}";
    var jobWithFeedbackUrl = "{{ route('admin.dashboard.jobWithFeedback',['panel' => session('panel') ])}}";
</script>

<script type="text/javascript" src="{{ asset('js/admin/dashboard/jobs_stats.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/admin/dashboard/jobs_last_submission.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/admin/dashboard/jobs_upcoming_interviews.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/admin/dashboard/jobs_sourcing.js') }}"></script>
@endpush