@extends('admin.layouts.main')

@section('title')
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">
                            Jobs
                        </option>
                        @endpermission
                        @permission(['dashboard-candidates-read'], false)
                        <option
                            value="{{ route('admin.dashboard.index', ['panel' => session('panel')]) }}?filter=candidates"
                            selected>
                            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')]) }}">
                    <input type="hidden" name="filter" value="candidates" />
                    <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')]) }}?filter=candidates"
                                class="btn btn-em mr-1">Clear</a>
                            @endif
                        </div>
                    </div>
                </form>
            </div>

            <div class="row mb-3">

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

                    <candidates-stats></candidates-stats>

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

                    <candidates-starting-job></candidates-starting-job>

                </div>

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

                    <div class="statistics-panel d-flex border border-bottom-0">
                        <div class="col">
                            <div class="stat-panel-info">
                                <h3>{{ $registeredTotal }}</h3>
                                <p class="xxs-font">Registered Candidates</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 h-100 px-2 body-text border-0"
                                        @click="tab('candidate_placed')"
                                        :class="{active:current_tab == 'candidate_placed'}">
                                        <span class="bold large-font mb-1 d-block">
                                        <span v-if="loaded">
                                            @{{ candidates_placed_count }}
                                        </span>
                                        </span>
                                        <p class="xxs-font m-0">Candidates Placed</p>
                                    </a>
                                </li>
                                <li class="nav-item flex-fill text-center border-left">
                                    <a class="nav-link h-100 px-2 body-text border-0" @click="tab('candidate_applied')"
                                        :class="{active:current_tab == 'candidate_applied'}">
                                        <span class="bold large-font mb-1 d-block">
                                        <span v-if="loaded">
                                            @{{ candidates_applied_count }}
                                        </span>
                                        </span>
                                        <p class="xxs-font m-0">Candidates with 5+ Applications</p>
                                    </a>
                                </li>
                                <li class="nav-item flex-fill text-center border-left">
                                    <a class="nav-link h-100 px-2 body-text border-0" @click="tab('candidate_inactive')"
                                        :class="{active:current_tab == 'candidate_inactive'}">
                                        <span class="bold large-font mb-1 d-block">
                                        <span v-if="loaded">
                                            @{{ candidates_inactive_count }}
                                        </span>
                                        </span>
                                        <p class="xxs-font m-0">Candidates with Unactivated Emails (last 24hrs)</p>
                                    </a>
                                </li>
                            </ul>

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

                                <div class="tab-pane" :class="{active:current_tab=='candidate_placed'}">
                                    <ul class="m-0 li-hover" v-if="loaded && candidates_placed.length">
                                        <li class="py-3 px-2 border-bottom" v-for="(item,index) in candidates_placed">
                                            <a :href="'jobs/show/'+item.job.id+'#candidates'" target="_blank">
                                            <p
                                                class="d-flex align-items-center justify-content-between mb-1 semibold small-font">
                                                @{{ item.user.first_name }} @{{ item.user.last_name }}
                                                <span class="badge normal badge-pill badge-primary">@{{ item.user.talent_advisor && item.user.talent_advisor[0] ? item.user.talent_advisor[0].first_name.substring(0,1) +''+ item.user.talent_advisor[0].last_name.substring(0,1): '' }}</span></p>
                                            <p class="d-flex align-items-center justify-content-between m-0 gray extrasmall-font">
                                                Placed @{{ item.hired_at_formatted_human }} @{{ item.job.company ? '| '+item.job.company.name : ''}}</p>
                                                </a>
                                        </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 Candidates to show</p>
                                        </li>
                                    </ul>
                                </div>

                                <div class="tab-pane" :class="{active:current_tab=='candidate_applied'}">
                                    <ul class="m-0 li-hover" v-if="loaded && candidates_applied.length">
                                        <li class="py-3 px-2 border-bottom" v-for="(item,index) in candidates_applied">
                                            <a :href="'candidates/show/'+item.id+'?tab=logs'" target="_blank">
                                            <p class="d-flex align-items-center justify-content-between mb-1 semibold small-font">
                                                @{{ item.first_name }} @{{ item.last_name }}
                                                <span class="badge normal badge-pill badge-warning">@{{ item.applied_jobs_count }} Applications</span></p>
                                            </a>
                                        </li>
                                        <li class="p-3" v-if="last_page_candidates_applied > 1">
                                            <button class="btn btn-primary-em" :disabled="current_page_candidates_applied == 1"
                                                @click="prevPageCandidatesApplied">Prev</button>
                                            <button class="btn btn-primary-em float-right"
                                                :disabled="current_page_candidates_applied == last_page_candidates_applied" @click="nextPageCandidatesApplied">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 Candidates to show</p>
                                        </li>
                                    </ul>
                                </div>


                                <div class="tab-pane" :class="{active:current_tab=='candidate_inactive'}">
                                    <ul class="m-0 li-hover" v-if="loaded && candidates_inactive.length">
                                        <li class="py-3 px-2 border-bottom" v-for="(item,index) in candidates_inactive">
                                        <p class="d-flex align-items-center justify-content-between mb-1 semibold small-font">@{{ item.first_name }} @{{ item.last_name }}</p>
												<p class="d-flex align-items-center justify-content-between m-0 gray extrasmall-font">@{{ item.created_at_time }}
                                                    <a :href="'candidates?search_text='+item.registration_id" class="orange text-underlined" target="_blank">Activate</a></p>
                                        </li>
                                        <li class="p-3" v-if="last_page_candidates_inactive > 1">
                                            <button class="btn btn-primary-em" :disabled="current_page_candidates_inactive == 1"
                                                @click="prevPageCandidatesInacitve">Prev</button>
                                            <button class="btn btn-primary-em float-right"
                                                :disabled="current_page_candidates_inactive == last_page_candidates_inactive" @click="nextPageCandidatesInacitve">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 Candidates 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 configRegistered = {
        type: 'line',
        data: {
            labels: @php echo json_encode($registeredGraphData['labels']) @endphp,
            datasets: [
                @foreach($registeredGraphData['registered'] as $key =>  $registered)
                {
                    borderColor: '@php echo '#' . substr(md5($key), 0, 6) @endphp',
                    fill: false,
                    data: @php echo json_encode(array_values($registered)) @endphp,
                    label: '{{ $key }}',
                },
                @endforeach
            ]
        },
        options: {
            title: {
               display: true,
                text: 'Candidate Registrations'
            },
            legend: {
                position: 'bottom',
            },
            scales: {
                xAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Month'
                    }
                }],
                yAxes: [{
                    ticks: {
                        min: 0,
                    },
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Number',
                    }
                }]
            }
        }
    };
    var configJobStats = {
        type: 'line',
        data: {
            labels: @php echo json_encode($jobStatsGraphData['labels']) @endphp,
            datasets: [
                {
                    borderColor: '#9ad0f5',
                    fill: false,
                    data: @php echo json_encode($jobStatsGraphData['noOfApplications']) @endphp,
                    label: 'No of Job Applications',
                },
                {
                    borderColor: '#ffb1c1',
                    fill: false,
                    data: @php echo json_encode($jobStatsGraphData['noOfHired']) @endphp,
                    label: 'No of Candidate Placements',
                },

            ]
        },
        options: {
            legend: {
                position: 'bottom',
            },
            scales: {
                xAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Month'
                    }
                }],
                yAxes: [{
                    ticks: {
                        min: 0,
                    },
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Number',
                    }
                }]
            }
        }
    };


    window.onload = function() {
        var ctxRegistered = document.getElementById('canvasCanidateRegistered').getContext('2d');
        window.myLine = new Chart(ctxRegistered, configRegistered);

        var ctxJobStats = document.getElementById('canvasJobStats').getContext('2d');
        window.myLine = new Chart(ctxJobStats, configJobStats);
    };
</script>

<script>
    $(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 candidateStatsUrl =
        "{!! route('admin.dashboard.candidateStats', ['panel' => session('panel'), 'start_date' => $params['start_date'], 'end_date' => $params['end_date']]) !!}";
    var CandidatePlacedUrl = "{{ route('admin.dashboard.CandidatePlaced',['panel' => session('panel') ])}}";
    var CandidateAppliedUrl = "{{ route('admin.dashboard.CandidateApplied',['panel' => session('panel') ])}}";
    var CandidateInactiveUrl = "{{ route('admin.dashboard.CandidateInactive',['panel' => session('panel') ])}}";
    var CandidateStartingJobUrl = "{{ route('admin.dashboard.CandidateStartingJob',['panel' => session('panel') ])}}";

    var start_date = "{{ $params['start_date'] }}";
    var end_date = "{{ $params['end_date'] }}";
</script>

<script type="text/javascript" src="{{ asset('js/admin/dashboard/candidate_stats.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/admin/dashboard/candidate_starting_job.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/admin/dashboard/candidate_sourcing.js') }}"></script>
@endpush