@extends('layouts.master')

@push('plugin-styles')
  <link href="{{ asset('theme_v2/assets/plugins/flatpickr/flatpickr.min.css') }}" rel="stylesheet" />
  <link rel="stylesheet" href="{{ asset('theme/css/daterangepicker.css') }}">
@endpush

@section('content')

<div class="row">
    <div class="col-m-12">
        <div class="card">
            <div class="card-header">
                <strong class="card-title mb-0">Analytic Recruitments</strong>
            </div>
            <div class="card-body">
            <div class="row">
                    <div class="col-md-3 desktop mb-4">
                        <div class="card custom-card2">
                            <div class="card-body">
                                <div class="title-card">
                                    <h6>Job Applicant</h6>
                                </div>
                                <div class="count mt-2">
                                    <h4 id="total_applicant">0</h4>
                                </div>
                            </div>
                            <div class="card-footer d-flex" id="applicant">
                                <img src="https://hris.truest.co.id/images/male.png" style="width:15px"><span id="applicant_pria">0</span>
                                <img src="https://hris.truest.co.id/images/female.png" style="width:15px;margin-left:10px"><span id="applicant_wanita">0</span>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3 desktop mb-4">
                        <div class="card custom-card2">
                            <div class="card-body">
                                <div class="title-card">
                                    <h6>Qualifications</h6>
                                </div>
                                <div class="count mt-2">
                                    <h4 id="total_qualifikasi">0</h4>
                                </div>
                            </div>
                            <div class="card-footer d-flex" id="qualification">
                                <img src="https://hris.truest.co.id/images/male.png" style="width:15px"><span id="qualification_pria">0</span>
                                <img src="https://hris.truest.co.id/images/female.png" style="width:15px;margin-left:10px"><span id="qualification_wanita">0</span>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3 desktop mb-4">
                        <div class="card custom-card2">
                            <div class="card-body">
                                <div class="title-card">
                                    <h6>IQ Test</h6>
                                </div>
                                <div class="count mt-2">
                                    <h4 id="total_iq">0</h4>
                                </div>
                            </div>
                            <div class="card-footer d-flex" id="iq_test">
                            <img src="https://hris.truest.co.id/images/male.png" style="width:15px"><span id="iq_test_pria">0</span>
                            <img src="https://hris.truest.co.id/images/female.png" style="width:15px;margin-left:10px"><span id="iq_test_wanita">0</span>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3 desktop mb-4">
                        <div class="card custom-card2">
                            <div class="card-body">
                                <div class="title-card">
                                    <h6>EQ Test</h6>
                                </div>
                                <div class="count mt-2">
                                    <h4 id="total_eq">0</h4>
                                </div>
                            </div>
                            <div class="card-footer d-flex" id="eq_test">
                                <img src="https://hris.truest.co.id/images/male.png" style="width:15px"><span id="eq_test_pria">0</span>
                                <img src="https://hris.truest.co.id/images/female.png" style="width:15px;margin-left:10px"><span id="eq_test_wanita">0</span>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3 desktop mb-4">
                        <div class="card custom-card2">
                            <div class="card-body">
                                <div class="title-card">
                                    <h6>Value Test</h6>
                                </div>
                                <div class="count mt-2">
                                    <h4 id="total_value">0</h4>
                                </div>
                            </div>
                            <div class="card-footer d-flex" id="value_test">
                                <img src="https://hris.truest.co.id/images/male.png" style="width:15px"><span id="value_pria">0</span>
                                <img src="https://hris.truest.co.id/images/female.png" style="width:15px;margin-left:10px"><span id="value_wanita">0</span>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3 desktop mb-4">
                        <div class="card custom-card2">
                            <div class="card-body">
                                <div class="title-card">
                                    <h6>Medical Test</h6>
                                </div>
                                <div class="count mt-2">
                                    <h4 id="total_medis">0</h4>
                                </div>
                            </div>
                            <div class="card-footer d-flex" id="medis_test">
                                <img src="https://hris.truest.co.id/images/male.png" style="width:15px"><span id="medis_pria">0</span>
                                <img src="https://hris.truest.co.id/images/female.png" style="width:15px;margin-left:10px"><span id="medis_wanita">0</span>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3 desktop mb-4">
                        <div class="card custom-card2">
                            <div class="card-body">
                                <div class="title-card">
                                    <h6>Training</h6>
                                </div>
                                <div class="count mt-2">
                                    <h4 id="total_training">0</h4>
                                </div>
                            </div>
                            <div class="card-footer d-flex" id="training">
                                <img src="https://hris.truest.co.id/images/male.png" style="width:15px"><span id="training_pria">0</span>
                                <img src="https://hris.truest.co.id/images/female.png" style="width:15px;margin-left:10px"><span id="training_wanita">0</span>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3 desktop mb-4">
                        <div class="card custom-card2">
                            <div class="card-body">
                                <div class="title-card">
                                    <h6>Total Applicant to Training</h6>
                                </div>
                                <div class="count mt-2">
                                    <h4 id="total_app_to_training">0</h4>
                                </div>
                            </div>
                            <div class="card-footer d-flex" id="app_to_training">
                               
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12 mt-4">
        <div class="card ">
            <div class="card-header">
                <strong class="card-title mb-0">Applicant 5 Week</strong>
            </div>  
            <div class="card-body">
                <div id="applicant_5_week"></div>
            </div>
        </div>
    </div>    
</div>

<div class="row">
    <div class="col-md-12 mt-4">
        <div class="card ">
            <div class="card-header">
                <strong class="card-title mb-0">Chart Project Requirements</strong>
            </div>  
            <div class="card-body">
                <div id="turnOver"></div>
            </div>
        </div>
    </div>    
</div>

<div class="row">
    <div class="col-md-12 mt-4">
        <div class="card ">
            <div class="card-header">
                <strong class="card-title mb-0">Data Source Pelamar</strong> 
                
            </div>
            <div class="card-body">
                <div id="data_source" width="400" height="500"></div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12 mt-4">
        <div class="card ">
        <div class="card-header">
            <strong class="card-title mb-0">Grafik 5 minggu Terakhir</strong> 
            
        </div>
        <div class="card-body">
        <div id="turnOver10" width="400" height="100%"></div>
        </div> <!-- /.card-body -->
        </div> <!-- /.card -->
    </div>
</div>

<div class="row">
    <div class="col-md-12 mt-4">
        <div class="card ">
        <div class="card-header">
            <strong class="card-title mb-0">Analytic Link Test</strong> 
            
        </div>
        <div class="card-body">
            <div id="link_analytic"></div>

        </div> <!-- /.card-body -->
        </div> <!-- /.card -->
    </div> <!-- /. col -->
</div>
@endsection

@push('plugin-scripts')
  <script src="{{ asset('theme_v2/assets/plugins/flatpickr/flatpickr.min.js') }}"></script>
  <script src="{{ asset('theme_v2/assets/plugins/apexcharts/apexcharts.min.js') }}"></script>
  <script src="{{ asset('theme/js/daterangepicker.js') }}"></script>
@endpush

@push('custom-scripts')



@endpush