@extends('layouts.organization.app')
@section('content')

@if(Auth::user()->is_admin==1)
<style>
.grey-bg {
    background-color: #F5F7FA;
}
</style>
<div class="main-panel">
    <div class="content-wrapper cv">
        <div class="row">
            <a href="{{url('office-master')}}" class="col-xl-3 col-sm-6 col-12 mb-4 ic">
                <div class="card">
                    <div class="card-content">
                        <div class="card-body">
                            <div class="media d-flex">
                                <div class="media-body text-left">
                                    <h3 class="danger">{{$office}}</h3>
                                    <span class="text-dark">Total Office</span>
                                </div>
                                <div class="align-self-center">
                                    <i class="fa fa-home text-danger font-large-2 float-right"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
            <a href="{{url('employee-details')}}" class="col-xl-3 col-sm-6 col-12 ic">
                <div class="card">
                    <div class="card-content">
                        <div class="card-body">
                            <div class="media d-flex">
                                <div class="media-body text-left">
                                    <h3 class="success">{{$employee}}</h3>
                                    <span class="text-dark">Total Emp</span>
                                </div>
                                <div class="align-self-center">
                                    <i class="fa fa-user text-success font-large-2 float-right"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
            <a href="{{url('department-master')}}" class="col-xl-3 col-sm-6 col-12 ic">
                <div class="card">
                    <div class="card-content">
                        <div class="card-body">
                            <div class="media d-flex">
                                <div class="media-body text-left">
                                    <h3 class="warning">{{$department}}</h3>
                                    <span class="text-dark">Department</span>
                                </div>
                                <div class="align-self-center">
                                    <i class="fa fa-building-o text-warning font-large-2 float-right"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
            <a href="{{url('view-employee-attendance')}}" class="col-xl-3 col-sm-6 col-12 ic">
                <div class="card">
                    <div class="card-content">
                        <div class="card-body">
                            <div class="media d-flex">
                                <div class="media-body text-left">
                                    <h3 class="primary">{{$present}}</h3>
                                    <span class="text-dark">Present</span>
                                </div>
                                <div class="align-self-center">
                                    <i class="fa fa-support text-primary font-large-2 float-right"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
            <a href="{{url('list-leave')}}" class="col-xl-3 col-sm-6 col-12 ic">
                <div class="card">
                    <div class="card-content">
                        <div class="card-body">
                            <div class="media d-flex">
                                <div class="media-body text-left">
                                    <h3 class="primary">{{$leave}}</h3>
                                    <span class="text-dark">Leave Request</span>
                                </div>
                                <div class="align-self-center">
                                    <i class="fa fa-calendar text-primary font-large-2 float-right"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
            <a href="{{url('assets-pending-request')}}" class="col-xl-3 col-sm-6 col-12 ic">
                <div class="card">
                    <div class="card-content">
                        <div class="card-body">
                            <div class="media d-flex">
                                <div class="media-body text-left">
                                    <h3 class="warning">{{$assets}}</h3>
                                    <span class="text-dark">Assets Request</span>
                                </div>
                                <div class="align-self-center">
                                    <i class="fa fa-indent text-warning font-large-2 float-right"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
            <a href="{{url('shift-details')}}" class="col-xl-3 col-sm-6 col-12 ic">
                <div class="card">
                    <div class="card-content">
                        <div class="card-body">
                            <div class="media d-flex">
                                <div class="media-body text-left">
                                    <h3 class="success">{{$shift}}</h3>
                                    <span class="text-dark">Total Shift</span>
                                </div>
                                <div class="align-self-center">
                                    <i class="fa fa-clock-o text-success font-large-2 float-right"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
            <a href="{{url('shift-details')}}" class="col-xl-3 col-sm-6 col-12 ic">
                <div class="card">
                    <div class="card-content">
                        <div class="card-body">
                            <div class="media d-flex">
                                <div class="media-body text-left">
                                    <h3 class="success">{{$total_absent}}</h3>
                                    <span class="text-dark">Total Absent</span>
                                </div>
                                <div class="align-self-center">
                                    <i class="fa fa-clock-o text-success font-large-2 float-right"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <!-- content-wrapper ends -->
    </div>
    <div class="content-wrapper cw">
        <div class="row">
            <div class="col-12 col-xl-12 stretch-card">
                <div class="row w-100 flex-grow">
                    <div class="col-md-6 stretch-card mb-4">
                        <div class="card">
                            <div class="card-body">
                                <p class="card-title">Absence Rate</p>
                                <div class="d-flex justify-content-between flex-wrap">
                                    <p class="text-muted">Current Month</p>
                                <!-- <div class="row mb-3">
                                    <div class="col-md-5">
                                        <ul class="nav nav-pills nav-pills-custom justify-content-md-end"
                                            id="pills-tab-custom" role="tablist">
                                            <li class="nav-item">
                                                <a class="nav-link active" id="pills-home-tab-custom" data-toggle="pill"
                                                    href="#pills-health" role="tab" aria-controls="pills-home"
                                                    aria-selected="true">
                                                    Day
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" id="pills-profile-tab-custom" data-toggle="pill"
                                                    href="#pills-career" role="tab" aria-controls="pills-profile"
                                                    aria-selected="false">
                                                    Week
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" id="pills-contact-tab-custom" data-toggle="pill"
                                                    href="#pills-music" role="tab" aria-controls="pills-contact"
                                                    aria-selected="false">
                                                    Month
                                                </a>
                                            </li>
                                        </ul>
                                    </div>-->
                                </div> 
                                <canvas id="audience-chart"></canvas>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 stretch-card mb-4">
                        <div class="card">
                            <div class="card-body pb-0">
                                <p class="card-title">Number Of Hiring</p>
                                <div class="d-flex justify-content-between flex-wrap">
                                    <p class="text-muted">Current Month</p>
                                    <!-- <div
                                        class="d-flex align-items-center flex-wrap server-status-legend mt-3 mb-3 mb-md-0">
                                        <div class="item mr-3">
                                            <div class="d-flex align-items-center">
                                                <div class="color-bullet"></div>
                                            </div>
                                        </div>
                                        <div class="item mr-3">
                                            <div class="d-flex align-items-center">
                                                <div class="color-bullet"></div>
                                            </div>
                                        </div>
                                        <div class="item mr-3">
                                            <div class="d-flex align-items-center">
                                                <div class="color-bullet"></div>
                                            </div>
                                        </div>
                                    </div> -->
                                </div>
                                <canvas id="audience-chart1"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6 stretch-card pb-4">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between flex-wrap">
                            <p class="card-title">Leave Request</p>
                        </div>
                        
                        <canvas id="leave-chart" height="130"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-md-6 stretch-card">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between flex-wrap">
                            <p class="card-title">Assets Requet</p>
                            <p class="text-success font-weight-medium">45.39 %</p>
                        </div>
                        <canvas id="task-chart" height="130"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @else
    <div class="content-wrapper">
        <div class="row">
            <div class="col-md-6 stretch-card text-decoration-none">
                <div class="card @if(!empty($emp_attendance->in_time))@if(!empty($emp_attendance->out_time)) bg-success @else bg-warning @endif @else bg-info @endif d-flex">
                    <div class="card-body">
                        <div class="d-flex flex-row justify-content-md-center justify-content-xl-start py-1">
                            <i class="fa fa-camera text-white icon-lg"></i>
                            <div class="ml-1 ml-md-0 ml-xl-3 w-100">
                                <div class="row text-white">
                                    @if(!empty($emp_attendance->in_time))
                                    <div class="col-md-6">
                                        <button class="btn btn-light font-weight-bold" disabled
                                            title="Already marked in">In Time -
                                            {{$emp_attendance->in_time}}</button>
                                    </div>
                                    <div class="col-md-6">
                                        @if(!empty($emp_attendance->out_time))
                                        <button class="btn btn-light font-weight-bold" disabled
                                            title="Already marked Out">Out Time -
                                            {{$emp_attendance->out_time}}</button>
                                        @else
                                        <a class="btn btn-light font-weight-bold" href="{{url('attendance-list')}}">Mark
                                            Attendance Out</a>
                                        @endif
                                    </div>
                                    @else
                                    <div class="col-md-12"><a class="btn btn-light font-weight-bold"
                                            href="{{url('attendance-list')}}">Mark Attendance In</a></div>
                                    @endif
                                </div>
                                <p class="mt-2 text-white card-text">
                                    @if(!empty($emp_attendance->in_time))
                                    @if(!empty($emp_attendance->out_time))
                                    You have successfully marked out your today's attendance
                                    @else
                                    You have successfully marked in your today's attendance
                                    @endif
                                    @else
                                    Mark your today's attendance in
                                    @endif
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endif
</div>
@push('body-scripts')
<script>
$(document).ready(function() {
    attendance_chart();
    onboard_chart();
    leave_chart();
});
function attendance_chart(){
    $.get("{{ url('attendance-chart') }}", function(xhr, status){
        if(xhr.status == 200){
            var datas = xhr.data;
            let days = [];
            let present = [];
            let absent = [];
            for(var i=0;i<datas.length;i++){
                days.push(datas[i].days);
                present.push(datas[i].present);
                absent.push(datas[i].absent);
            }
            audience_chart(xhr,days,absent,present);
        }
    });
}
function onboard_chart(){
    $.get("{{ url('onboard-chart') }}", function(xhr, status){
        if(xhr.status == 200){
            var datas = xhr.data;
            let month = [];
            let employee = [];
            for(var i=0;i<datas.length;i++){
                month.push(datas[i].month);
                employee.push(datas[i].employee);
            }
            onboard(xhr,month,employee);
        }
    });
}
function leave_chart(){
    $.get("{{ url('leave-chart') }}", function(xhr, status){
        if(xhr.status == 200){
            var datas = xhr.data;
            let month = [];
            let employee = [];
            for(var i=0;i<datas.length;i++){
                month.push(datas[i].month);
                employee.push(datas[i].employee);
            }
            leave(xhr,month,employee);
        }
    });
}
function audience_chart(xhr,days,absent,present){
    if ($("#audience-chart").length) {
        var AudienceChartCanvas = $("#audience-chart").get(0).getContext("2d");
        var AudienceChart = new Chart(AudienceChartCanvas, {
            type: 'bar',
            data: {
                labels: days,
                datasets: [
                    {
                        label: 'Absent',
                        data: absent,
                        backgroundColor: '#25476a'
                    },
                    {
                        label: 'Present',
                        data: present,
                        backgroundColor: '#0cab6f'
                    }
                ]
            },
            options: {
            responsive: true,
            maintainAspectRatio: true,
            layout: {
                padding: {
                left: 0,
                right: 0,
                top: 20,
                bottom: 0
                }
            },
            scales: {
                yAxes: [{
                display: true,
                gridLines: {
                    display: true,
                    drawBorder: false,
                    color: "#f8f8f8",
                    zeroLineColor: "#f8f8f8"
                },
                ticks: {
                    display: true,
                    min: 0,
                    max: xhr.max_line,
                    stepSize: 100,
                    fontColor: "#b1b0b0",
                    fontSize: 10,
                    padding: 10
                }
                }],
                xAxes: [{
                stacked: false,
                ticks: {
                    beginAtZero: true,
                    fontColor: "#b1b0b0",
                    fontSize: 10
                },
                gridLines: {
                    color: "rgba(0, 0, 0, 0)",
                    display: false
                },
                barPercentage: .9,
                categoryPercentage: .7,
                }]
            },
            legend: {
                display: true
            },
            elements: {
                point: {
                radius: 3,
                backgroundColor: '#ff4c5b'
                }
            }
            },
        });
    }
}
function onboard(xhr,month,employee){
    if ($("#audience-chart1").length) {
        var AudienceChartCanvas = $("#audience-chart1").get(0).getContext("2d");
        var AudienceChart = new Chart(AudienceChartCanvas, {
            type: 'bar',
            data: {
                labels: month,
                datasets: [
                    {
                        label: 'Employee',
                        data: employee,
                        backgroundColor: '#00d082'
                    }
                ]
            },
            options: {
            responsive: true,
            maintainAspectRatio: true,
            layout: {
                padding: {
                left: 0,
                right: 0,
                top: 20,
                bottom: 0
                }
            },
            scales: {
                yAxes: [{
                display: true,
                gridLines: {
                    display: true,
                    drawBorder: false,
                    color: "#f8f8f8",
                    zeroLineColor: "#f8f8f8"
                },
                ticks: {
                    display: true,
                    min: 0,
                    max: 500,
                    stepSize: 100,
                    fontColor: "#b1b0b0",
                    fontSize: 10,
                    padding: 10
                }
                }],
                xAxes: [{
                stacked: false,
                ticks: {
                    beginAtZero: true,
                    fontColor: "#b1b0b0",
                    fontSize: 10
                },
                gridLines: {
                    color: "rgba(0, 0, 0, 0)",
                    display: false
                },
                barPercentage: .9,
                categoryPercentage: .7,
                }]
            },
            legend: {
                display: false
            },
            elements: {
                point: {
                radius: 3,
                backgroundColor: '#ff4c5b'
                }
            }
            },
        });
    }
}
function leave(xhr,month,employee){
    if ($("#leave-chart").length) {
        var AudienceChartCanvas = $("#leave-chart").get(0).getContext("2d");
        var AudienceChart = new Chart(AudienceChartCanvas, {
            type: 'bar',
            data: {
                labels: month,
                datasets: [
                    {
                        label: 'Leave',
                        data: employee,
                        backgroundColor: '#f83e37'
                    }
                ]
            },
            options: {
            responsive: true,
            maintainAspectRatio: true,
            layout: {
                padding: {
                left: 0,
                right: 0,
                top: 20,
                bottom: 0
                }
            },
            scales: {
                yAxes: [{
                display: true,
                gridLines: {
                    display: true,
                    drawBorder: false,
                    color: "#f8f8f8",
                    zeroLineColor: "#f8f8f8"
                },
                ticks: {
                    display: true,
                    min: 0,
                    max: 30,
                    stepSize: 5,
                    fontColor: "#b1b0b0",
                    fontSize: 10,
                    padding: 10
                }
                }],
                xAxes: [{
                stacked: false,
                ticks: {
                    beginAtZero: true,
                    fontColor: "#b1b0b0",
                    fontSize: 10
                },
                gridLines: {
                    color: "rgba(0, 0, 0, 0)",
                    display: false
                },
                barPercentage: .9,
                categoryPercentage: .7,
                }]
            },
            legend: {
                display: false
            },
            elements: {
                point: {
                radius: 3,
                backgroundColor: '#ff4c5b'
                }
            }
            },
        });
    }
}
</script>
@endpush
@endsection('content')