{{ View::make('layout.header') }}
@php
    $user_join_year = date('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') + 1;
        } else {
            $currentYear = date('Y') + 1;
        }
    } else {
        $currentYear = date('Y') + 1;
    }
@endphp
<style>
    .timeline .timeline-item .timeline-event h6 {
        word-break: break-all
    }

    .table tbody td,
    .table thead th {
        padding-left: 6px !important;
        padding-right: 6px !important
    }

    table.dataTable thead .sorting:after,
    table.dataTable thead .sorting:before,
    table.dataTable thead .sorting_asc:after,
    table.dataTable thead .sorting_asc:before,
    table.dataTable thead .sorting_desc:after,
    table.dataTable thead .sorting_desc:before {
        display: none
    }

    #start_year {
        -webkit-appearance: none !important;
        padding-right: 3.5rem
    }
</style>
<!-- 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-Attendance</h2>
                        <div class="breadcrumb-wrapper">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item">HR
                                </li>
                                <li class="breadcrumb-item active"><a href="{{ route('dashboardHr') }}">Dashboard</a>
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <style>
            @media screen and (min-width: 1000px) {
                .col-lgg-3 {
                    width: 20% !important;
                    padding-left: 10px;
                }
            }

            @media screen and (max-width: 480px) {
                .col-lgg-3 {
                    width: 100% !important;
                    padding-left: 20px;
                    padding-right: 20px;
                }

            }
        </style>
        <div class="content-body">
            <section id="dashboard-ecommerce">
                <div class="row match-height">
                    <!-- Statistics Card -->
                    <div class="col-lgg-3">
                        <div class="card earnings-card" style="background:#ff9e4326;">
                            <div class="card-body" style="padding:0px;">
                                <div class="row" style="margin:0px;">
                                    <div class="col-8" style="padding:0px;">
                                        <div style="padding: 1rem;">
                                            <h5 class="card-title " style="margin-bottom:10px;">Total</h5>
                                        </div>
                                    </div>
                                    <div class="col-4"
                                        style="padding:0px;
                                        align-items: center; display: flex;
                                        justify-content: flex-end;">
                                        <h2 class="text-warning" style="padding-right:15px;" id="total_emp"></h2>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lgg-3">
                        <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: 1rem;">
                                            <h5 class="card-title " style="margin-bottom:10px;">Present</h5>
                                        </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;" id="present_emp"></h2>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lgg-3">
                        <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: 1rem;">
                                            <h5 class="card-title" style="margin-bottom:10px;">Absent</h5>
                                        </div>
                                    </div>
                                    <div class="col-6"
                                        style="padding:0px;
                                        align-items: center; display: flex;
                                        justify-content: flex-end;">
                                        <h2 class="text-danger" style="padding-right:15px;" id="absent_emp"></h2>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lgg-3">
                        <div class="card earnings-card" style="background:#bed7db;">
                            <div class="card-body" style="padding:0px;">
                                <div class="row" style="margin:0px;">
                                    <div class="col-6" style="padding:0px;">
                                        <div style="padding: 1rem;">
                                            <h5 class="card-title" style="margin-bottom:10px;">Late
                                            </h5>
                                        </div>
                                    </div>
                                    <div class="col-6"
                                        style="padding:0px;
                                        align-items: center; display: flex;
                                        justify-content: flex-end;">
                                        <h2 class="text-danger" style="padding-right:15px;" id="late_emp"></h2>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lgg-3">
                        <div class="card earnings-card" style="background:#a6afda;">
                            <div class="card-body" style="padding:0px;">
                                <div class="row" style="margin:0px;">
                                    <div class="col-8" style="padding:0px;">
                                        <div style="padding: 1rem;">
                                            <h5 class="card-title" style="margin-bottom:10px;">UnAssigned
                                            </h5>
                                        </div>
                                    </div>
                                    <div class="col-4"
                                        style="padding:0px;
                                        align-items: center; display: flex;
                                        justify-content: flex-end;">
                                        <h2 class="text-info" style="padding-right:15px;" id="unAssignedEmp"></h2>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- line chart --}}
                    <div class="col-xl-12 col-md-12 col-12">

                        <div class="card card-user-timeline">
                            <div class="card-header" style="">
                                <div class="">
                                    <button onclick="more_filter_graph()"
                                        class="btn btn-primary waves-effect waves-float waves-light"
                                        style="">Filter</button>
                                </div>

                            </div>
                            <div class="card activity filter-container"
                                style="margin: 0px 15px; background-color:#e6e5e5; padding:10px 20px 20px 20px; display:none !important;"
                                id="empleavetoday">
                                <div class="row">
                                    <div class="col-md-12" style="padding:0px;">
                                        <button id="spanclose" onclick="more_filter_graph()"
                                            style="float:right;border:0px;background-color:transparent;color:white;padding: 3px 8px 5px;">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"
                                                viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                class="feather feather-x cursor-pointer font-large-1"
                                                data-repeater-delete="">
                                                <line x1="18" y1="6" x2="6" y2="18">
                                                </line>
                                                <line x1="6" y1="6" x2="18" y2="18">
                                                </line>
                                            </svg>
                                        </button>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-3 filter-form-group mb-1">
                                        Department &nbsp;:&nbsp;
                                        <select name="department" id="department" class="form-control">
                                            <option value="">Department</option>
                                            @foreach ($departments as $department)
                                                <option value="{{ $department->id }}">{{ $department->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-sm-3 filter-form-group mb-1">
                                        Branch &nbsp;:&nbsp;
                                        <select name="branch" id="branch" class="form-control">
                                            <option value="">Branch</option>
                                            @foreach ($branches as $branch)
                                                <option value="{{ $branch->id }}">{{ $branch->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-sm-3 filter-form-group mb-1">
                                        Category &nbsp;:&nbsp;
                                        <select name="category" id="category" class="form-control">
                                            <option value="">Category</option>
                                            @foreach ($categories as $category)
                                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>


                                    <div class="col-sm-6 filter-form-group" style="margin-top:19px;">
                                        <input type="button" value="Apply"
                                            onclick="year_filter({{ date('Y') }}, {{ date('Y') - 1 }})"
                                            class="filter-apply btn btn-info" />
                                    </div>
                                </div>
                            </div>

                            <div id="line-charts" class="p-2">

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

                    {{-- overview branch wise --}}
                    <div class="col-xl-6 col-md-6 col-12">
                        <div class="card card-user-timeline">
                            <div class="card-header d-flex">
                                <h4 class="card-title">Monthly Attendance Overview (%)</h4>
                                <form id="filter-form">
                                    <div class="d-sm-flex justify-content-between align-items-center">
                                        <div class="d-flex align-items-center">

                                            @csrf
                                            <select onchange="dataYear(this.value)" class="form-control"
                                                id="data_year" name="data_year" 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/E-Attendance/dashboard_hr.blade.php:274
Stack trace:
#0 {main}
  thrown in <b>/home/ecoleave/public_html/backup/v6/resources/views/E-Attendance/dashboard_hr.blade.php</b> on line <b>274</b><br />