{{View::make('layout.header')}}

@php

$user_join_year = date('d-m-Y',strtotime(App\Models\UserPay::where('username' , Auth::user()->username)->first()->date_commence));

$cutOffStartMonth = getSettingsValue("cut_of_startmonth");



if($cutOffStartMonth!=1){

    if($cutOffStartMonth > date('m')){

        $currentYear = date('Y');

    }else{

        $currentYear = date('Y')+1;

    }

}else{

    $currentYear = date('Y');

}

@endphp

<style>

    /* .table{

        border-width: 0;

    }

    .table thead th, .table tbody td {

        padding:5px 2px !important;

        text-align:center !important;

        height: 40px;

        width: 10%;

        border-width: 1px 0 1px 0;

        border-collapse: collapse;

        font-weight: 500;

        color: #878492;

    } */



    .select-filter{

        font-size: 1rem !important;

        width: 140px;

    }



    .select-filter:focus{

        border-color: #d8d6de !important;

    }



    table.dataTable thead .sorting:before, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:before,

    table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after {

        display : none;

    }

    /* .progress-bar-primary .progress-bar {

        background: linear-gradient(to right, #0f5e307a , #0f5e30);

    }

    .progress-bar-warning .progress-bar {

        background: linear-gradient(to right, #ff9f437a , #ff9f43);

    }

    .progress-bar-success .progress-bar {

        background: linear-gradient(to right, #28c76f7a , #28c76f);

    }

    .progress-bar-danger .progress-bar {

        background: linear-gradient(to right, #ea54557a , #ea5455);

    }

    #category_id,#branch_id,#department_id {

        box-shadow:none;

    } */

    table.dataTable thead>tr>th.sorting_asc, table.dataTable thead>tr>th.sorting_desc, table.dataTable thead>tr>th.sorting, table.dataTable thead>tr>td.sorting_asc, table.dataTable thead>tr>td.sorting_desc, table.dataTable thead>tr>td.sorting {

    padding-right: 8px;

    }

    .flatpickr-calendar {

        width:100%;

        box-shadow: unset;

    }

    #barcontent1 .col-md-3{

        padding-right: 4%;

    }

    .has-action {

        /* background: #569ff7; */

        box-shadow: none;

        color: #fff !important;

        /* border-color: #569ff7; */

    }

    .flatpickr-calendar.inline {

        

        padding:12px 0px;

        

    }

</style>

 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.4.0/dist/chartjs-plugin-datalabels.min.js"></script> 

    <!-- BEGIN: Content-->

    <div class="app-content content ">

        <div class="content-overlay"></div>

        <div class="header-navbar-shadow"></div>

        <div class="content-wrapper">

            <div class="content-header row">

                <div class="content-header-left col-md-9 col-12 mb-2">

                    <div class="row breadcrumbs-top">

                        <div class="col-12">

                            <h2 class="content-header-title float-left mb-0">E-Leave</h2>

                            <div class="breadcrumb-wrapper">

                                <ol class="breadcrumb">

                                    <li class="breadcrumb-item">HR

                                    </li>

                                    <li class="breadcrumb-item active"><a href="#">Dashboard</a>

                                    </li>

                                </ol>

                            </div>

                        </div>

                    </div>

                </div>

                @if(session()->has('message'))

                <div class="alert alert-success">

                {{ session()->get('message') }}

                </div>

                @endif

                @if(session()->has('danger'))

                <div class="alert alert-danger">

                {{ session()->get('danger') }}

                </div>

                @endif



            </div>

            <div class="content-body">

                <section id="dashboard-ecommerce">

                    <div class="row match-height">



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

                            <div class="card earnings-card" style="background:#ff9e4326;">

                                <div class="card-body" style="padding:0px;">

                                    <div class="row" style="margin:0px;">

                                        <div class="col-6" style="padding:0px;">

                                            <div style="padding: 1.5rem;">

                                                <h5 class="card-title " style="margin-bottom:10px;">Total<br>Employees</h5>

                                                <div class="progress progress-bar-warning" style="height: 7px; width:35%;">

                                                    <div

                                                    class="progress-bar"

                                                    role="progressbar"

                                                    aria-valuenow="100"

                                                    aria-valuemin="100"

                                                    aria-valuemax="100"

                                                    style="width: 100%"

                                                    ></div>

                                                </div>

                                                <!-- <div class="font-small-2">This Month</div>

                                                <h5 class="mb-1 hdashboardtitle">56</h5> -->

                                            </div>

                                        </div>

                                        <div class="col-6" style="padding:0px; align-items: center; display: flex; justify-content: flex-end;">

                                            <h2 class="text-warning" style="padding-right:15px;">{{ number_format($totalemployees) }}</h2>

                                        </div>

                                    </div>

                                </div>

                            </div>

                        </div>

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

                            <div class="card earnings-card" style="background:#28c76f26;">

                                <div class="card-body" style="padding:0px;">

                                    <div class="row" style="margin:0px;">

                                        <div class="col-6" style="padding:0px;">

                                            <div style="padding: 1.5rem;">

                                                <h5 class="card-title" style="margin-bottom:10px;">New<br>Joining</h5>

                                                <div class="progress progress-bar-success" style="height: 7px; width:35%;">

                                                    <div

                                                    class="progress-bar"

                                                    role="progressbar"

                                                    aria-valuenow="100"

                                                    aria-valuemin="100"

                                                    aria-valuemax="100"

                                                    style="width: 100%"

                                                    ></div>

                                                </div>

                                            </div>

                                        </div>

                                        <div class="col-6" style="padding:0px; align-items: center; display: flex; justify-content: flex-end;">

                                            <h2 class="text-success" style="padding-right:15px;">{{ number_format($newemployees) }}</h2>

                                        </div>

                                    </div>

                                </div>

                            </div>

                        </div>

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

                            <div class="card earnings-card" style="background:#ea545526;">

                                <div class="card-body" style="padding:0px;">

                                    <div class="row" style="margin:0px;">

                                        <div class="col-6" style="padding:0px;">

                                            <div style="padding: 1.5rem;">

                                                <h5 class="card-title" style="margin-bottom:10px;">Today's<br>Attendance</h5>

                                                <div class="progress progress-bar-danger" style="height: 7px; width:35%;">

                                                    <div

                                                    class="progress-bar"

                                                    role="progressbar"

                                                    aria-valuenow="100"

                                                    aria-valuemin="100"

                                                    aria-valuemax="100"

                                                    style="width: 100%"

                                                    ></div>

                                                </div>

                                            </div>

                                        </div>

                                        <div class="col-6" style="padding:0px; align-items: center; display: flex; justify-content: flex-end;">

                                            <h5><span class="text-secondary" style="font-size:14px; font-weight:700">({{ $totalemployees-$todayleave }})</span></h5><br>&nbsp;

                                            <h2 class="text-danger" style="padding-right:15px;">{{ sprintf("%0.1f",$todayleavepercent) }}%</h2>

                                        </div>

                                    </div>

                                </div>

                            </div>

                        </div>



                        

                        <!-- <div class="col-xl-8 col-md-8 col-12">

                            <div class="card card-user-timeline">

                                <div class="card-header">

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

                                        <h4 class="card-title" id="graph-title"></h4>

                                        

                                    </div>

                                    <div class="btn-group" style="margin-bottom:10px;">

                                                

                                        <select name="graphtype" id="graphtype" class="form-control " onchange="piechartchange()" style="margin-bottom:10px; border-width: 0px; border-radius:0px;">

                                            <option value="gender-composition" selected>Gender Composition</option>

                                            <option value="type-composition">Type Composition</option>

                                                   

                                        </select>

                                               

                                                

                                    </div>

                                    

                                </div>

                                <div class="card-body">

                                    <div class="row" id="gendercomposition">

                                        <div class="col-xl-5 col-md-5 col-12">

                                            

                                            <div id="gender-composition"></div>

                                        </div>

                                        <div class="col-xl-7 col-md-7 col-12">

                                            <div class="btn-group" style="margin-bottom:10px;">

                                                

                                                <select name="emccategory" id="emccategory" class="form-control " onchange="setempgendercompositiongraph1()" style="margin-bottom:10px; border-width: 0px 1px 0px 0px; border-radius:0px;">

                                                    <option value="">Category</option>

                                                    <option value="">All</option>

                                                    @foreach($categories as $category)

                                                        <option value="{{ $category->id }}">{{ $category->name }}</option>

                                                    @endforeach

                                                </select>

                                                &nbsp;

                                                <select name="emcbranch" id="emcbranch" class=" form-control" onchange="setempgendercompositiongraph1()" style="margin-bottom:10px;border-width: 0 1px 0 0px; border-radius:0px;">

                                                    <option value="">Branch</option>

                                                    <option value="">All</option>

                                                    @foreach($branches as $branch)

                                                        <option value="{{ $branch->id }}">{{ $branch->name }}</option>

                                                    @endforeach

                                                </select>

                                                &nbsp;

                                                <select name="emcdepartment" id="emcdepartment" class=" form-control" onchange="setempgendercompositiongraph1()" style="margin-bottom:10px; border-width: 0px; border-radius:0px;">

                                                    <option value="">Department&nbsp;&nbsp;</option>

                                                    <option value="">All</option>

                                                    @foreach($departments as $department)

                                                        <option value="{{ $department->id }}">{{ $department->name }}</option>

                                                    @endforeach

                                                </select>

                                                

                                            </div>

                                            <div id="graphcontent"></div>

                                        </div>

                                    </div>



                                    <div class="row" id="typecomposition">

                                        <div class="col-xl-7 col-md-7 col-12">

                                          

                                            <div id="type-composition"></div>

                                        </div>

                                        <div class="col-xl-5 col-md-5 col-12">

                                            <div class="btn-group" style="margin-top:15px;">

                                                

                                                <select name="emccategory1" id="emccategory1" class="form-control " onchange="setemptypecompositiongraph1()" style="margin-bottom:10px; border-width: 0px 1px 0px 0px; border-radius:0px;">

                                                    <option value="">Category</option>

                                                    <option value="">All</option>

                                                    @foreach($categories as $category)

                                                        <option value="{{ $category->id }}">{{ $category->name }}</option>

                                                    @endforeach

                                                </select>

                                                &nbsp;

                                                <select name="emcbranch1" id="emcbranch1" class=" form-control" onchange="setemptypecompositiongraph1()" style="margin-bottom:10px;border-width: 0 1px 0 0px; border-radius:0px;">

                                                    <option value="">Branch</option>

                                                    <option value="">All</option>

                                                    @foreach($branches as $branch)

                                                        <option value="{{ $branch->id }}">{{ $branch->name }}</option>

                                                    @endforeach

                                                </select>

                                                &nbsp;

                                                <select name="emcdepartment1" id="emcdepartment1" class=" form-control" onchange="setemptypecompositiongraph1()" style="margin-bottom:10px; border-width: 0px; border-radius:0px;">

                                                    <option value="">Department&nbsp;&nbsp;</option>

                                                    <option value="">All</option>

                                                    @foreach($departments as $department)

                                                        <option value="{{ $department->id }}">{{ $department->name }}</option>

                                                    @endforeach

                                                </select>

                                                

                                            </div>

                                            <div id="graphcontent1"></div>

                                        </div>

                                    </div>

                                        

                                    

                                </div>

                            </div>

                        </div> -->

                        <div class="col-xl-8 col-md-8 col-12" style="">

                                <!-- <div class="col-xl-12 col-md-12 col-12"> -->

                                    <div class="card card-user-timeline">

                                        <div class="card-header" style="">

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

                                                <h4 class="card-title" id="mgraph-title">Monthly Attendance</h4>

                                                

                                            </div>

                                            <div class="btn-group" style="width:27%;">

                                                        

                                                <select name="graphtype11" id="graphtype11" class="form-control " style="margin-bottom:10px; border-width: 0px; border-radius:0px;" onchange="monthlyattendancechange()">

                                                    <option value="new-join-resign" selected>New join / Resigned</option> 

                                                    <option value="attendance" >Attendance</option>

                                                    <option value="attrition">Attrition</option>

                                                      

                                                </select>

                                                    

                                                        

                                            </div>

                                            

                                        </div>

                                        <div class="card-body" >

                                            

                                            <div class="row" id="attendance">

                                                <div class="col-xl-12 col-md-12 col-12 mb-1">

                                                    

                                                    <canvas id="bargraph1" style="width:100%;max-width:100%"></canvas>

                                                

                                                    

                                                </div>

                                                <div class="col-xl-12 col-md-12 col-12">

                                                        <div id="barcontent1"></div>

                                                </div>

                                            </div>



                                            <div class="row" id="attrition">

                                                <div class="col-xl-12 col-md-12 col-12 mb-1">

                                                    

                                                    <canvas id="attrition_bargraph1" style="width:100%;max-width:100%"></canvas>

                                                

                                                    

                                                </div>

                                                <div class="col-xl-12 col-md-12 col-12">

                                                        <div id="attrition_content"></div>

                                                </div>

                                            </div>



                                            <div class="row" id="new-join-resign">

                                                <div class="col-xl-12 col-md-12 col-12 mb-1">

                                                    

                                                    <canvas id="join_resignbargraph1" style="width:100%;max-width:100%"></canvas>

                                                

                                                    

                                                </div>

                                                <div class="col-xl-12 col-md-12 col-12">

                                                        <div id="new-join-resign-content"></div>

                                                </div>

                                            </div>

                                                

                                            

                                        </div>

                                </div>

                                <!-- </div>

                                 -->

                        </div>



                        <div class="col-xl-4 col-md-4 col-12">

                        <div class="card card-user-timeline">

                            <div class="card-body">



                                <div class="row">



                                    <div class="col-xl-12 col-md-12 col-12 mb-1">



                                        <input type="hidden" class="form-control flatpickr-inline1" id="birthday"

                                            placeholder="YYYY-MM-DD" style="display:none;" />



                                    </div>

                                    <div class="col-xl-12 col-md-12 col-12 card card-transaction"

                                        style="border:0px; margin-bottom:0px;">

                                        <div class="card-header">

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

                                                <h4 class="card-title">Birthday & Anniversary</h4>

                                            </div>

                                        </div>

                                        <div class="" style="padding-bottom:0px;">

                                            {{-- <input type="text" class="form-control" id="birthday11"

                                                value="{{ date('F j, Y') }}" placeholder="DD-MM-YYYY" readonly /> --}}



                                            <div class="row">

                                                <div class="col-md-3">

                                                    <select class="form-control" onchange="birthdayMonth()"

                                                        id="birthday_month" name=""

                                                        style="border-width: 0px;">



                                                        <option value='1'>Jan</option><option selected value='2'>Feb</option><option value='3'>Mar</option><option value='4'>Apr</option><option value='5'>May</option><option value='6'>Jun</option><option value='7'>Jul</option><option value='8'>Aug</option><option value='9'>Sep</option><option value='10'>Oct</option><option value='11'>Nov</option><option value='12'>Dec</option>
                                                    </select>

                                                </div>

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

                                                    <select class="form-control" onchange="birthdayYear()"

                                                        id="birthday_year" name="" style="border-width: 0px;">

                                                        <br />
<b>Fatal error</b>:  Uncaught Error: Call to undefined function getSettingsValue() in /home/ecoleave/public_html/backup/v6/resources/views/hr/dashboard.blade.php:829
Stack trace:
#0 {main}
  thrown in <b>/home/ecoleave/public_html/backup/v6/resources/views/hr/dashboard.blade.php</b> on line <b>829</b><br />