@extends('layouts.view')
@section('title',trans('lang.dashboard'))
@section('content')

    <link href="{{ asset('plugins/jvectormap/jquery-jvectormap-2.0.2.css') }}" rel="stylesheet">
    <link href="{{ asset('plugins/fullcalendar/packages/core/main.css') }}" rel="stylesheet" />
    <link href="{{ asset('plugins/fullcalendar/packages/daygrid/main.css') }}" rel="stylesheet" />
    <link href="{{ asset('plugins/fullcalendar/packages/bootstrap/main.css') }}" rel="stylesheet" />
    <link href="{{ asset('plugins/fullcalendar/packages/timegrid/main.css') }}" rel="stylesheet" />
    <link href="{{ asset('plugins/fullcalendar/packages/list/main.css') }}" rel="stylesheet" />
    <!-- Page Content-->
    <style>
        .file-box-content{
            display: inline-block;
            vertical-align: middle;
            -webkit-transform: perspective(1px) translateZ(0);
            transform: perspective(1px) translateZ(0);
            box-shadow: 0 0 1px rgba(0, 0, 0, 0);
            -webkit-transition-duration: 0.5s;
            transition-duration: 0.5s;
            margin-bottom: 3px !important;
        }
        .file-box-content:hover{
            -webkit-transform: translatey(-8px);
            transform: translatey(-8px);
        }

    </style>
    <form class="form-horizontal row-fluid" action="#" method="post" enctype="multipart/form-data">
        <div class="container-fluid">
            <!-- Page-Title -->
            <div class="row">
                <div class="col-sm-12">
                    <div class="page-title-box">
                        <div class="float-right">
                            <div class="float-right">
                                @csrf
                                <select name="department_id" id="department_id" class="form-control">
                                    <option value="All Depts">- {{trans('lang.all_departments')}} -</option>
                                                                    </select>
                            </div>
                        </div>
                        <h4 class="page-title">{{trans('lang.dashboard')}}</h4>
                    </div><!--end page-title-box-->
                </div><!--end col-->
            </div>
            <!-- end page title end breadcrumb -->
            <div class="row">
                <div class="col-lg-3 file-box-content">
                    <div class="card">
                        <a href="{{ route('users.index') }}">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-2 align-self-center">
                                        <div class="icon-info">
                                            <i data-feather="users" class="align-self-center icon-lg icon-dual-warning"></i>
                                        </div>
                                    </div>
                                    <div class="col-10 align-self-center text-right">
                                        <div class="ml-2">
                                            <p class="mb-1 text-muted">{{trans('lang.total_employees')}}</p>
                                            <h3 class="mt-0 mb-1 font-weight-semibold" id="all">{{$all}}</h3>
                                        </div>
                                    </div>
                                </div>
                                <div class="progress mt-2" style="height:3px;">
                                    <div class="progress-bar bg-warning" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                            </div></a><!--end card-body-->
                    </div><!--end card-->
                </div><!--end col-->

                <div class="col-lg-3 file-box-content">
                    <div class="card">
                        <a href="{{ route('pending_requests') }}">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-2 align-self-center">
                                        <div class="icon-info">
                                            <i data-feather="file-text" class="align-self-center icon-lg icon-dual-purple"></i>
                                        </div>
                                    </div>
                                    <div class="col-10 align-self-center text-right">
                                        <div class="ml-2">
                                            <p class="mb-1 text-muted">{{trans('lang.Pending_Requests')}}</p>
                                            <h3 class="mt-0 mb-1 font-weight-semibold" id="pending_req">
                                                {{$pending_req}}</h3>
                                        </div>
                                    </div>
                                </div>
                                <div class="progress mt-2" style="height:3px;">
                                    <div class="progress-bar bg-purple" role="progressbar" style="width:{{$pending_req}}%;" aria-valuenow="{{$pending_req}}" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                            </div></a><!--end card-body-->
                    </div><!--end card-->
                </div><!--end col-->

                <div class="col-lg-3 file-box-content">
                    <div class="card">
                        <a href="{{ route('attend_employees') }}">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-2 align-self-center">
                                        <div class="icon-info">
                                            <i data-feather="check-square" class="align-self-center icon-lg icon-dual-success"></i>
                                        </div>
                                    </div>
                                    <div class="col-10 align-self-center text-right">
                                        <div class="ml-2">
                                            <p class="mb-0 text-muted">{{trans('lang.attend_employees')}}</p>
                                            <h3 class="mt-0 mb-1 font-weight-semibold d-inline-block" id="attend">{{$attend}}</h3>
                                            <span class="badge badge-soft-success mt-1 shadow-none">Active</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="progress mt-2" style="height:5px;">
                                    <div class="progress-bar bg-success" role="progressbar" style="width: {{$attend*100/$all}}%;" aria-valuenow="{{$attend*100/$all}}" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                            </div></a><!--end card-body-->
                    </div><!--end card-->
                </div><!--end col-->

                <div class="col-lg-3 file-box-content">
                    <div class="card">
                        <a href="{{ route('absent_employees') }}">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-2 align-self-center">
                                        <div class="icon-info">
                                            <i data-feather="eye-off" class="align-self-center icon-lg icon-dual-danger"></i>
                                        </div>
                                    </div>
                                    <div class="col-10 align-self-center text-right">
                                        <div class="ml-2">
                                            <p class="mb-1 text-muted">{{trans('lang.absent_employees')}}</p>
                                            <h3 class="mt-0 mb-1 font-weight-semibold" id="absent">{{$absent}}</h3>
                                        </div>
                                    </div>
                                </div>
                                <div class="progress mt-2" style="height:3px;">
                                    <div class="progress-bar bg-danger" role="progressbar" style="width: {{$absent*100/$all}}%;" aria-valuenow="{{$absent*100/$all}}" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                            </div></a><!--end card-body-->
                    </div><!--end card-->
                </div><!--end col-->
            </div><!--end row-->
            <div class="row">
                <div class="col-lg-3 file-box-content">
                    <div class="card">
                        <a href="{{ route('expire_iqama') }}">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-2 align-self-center">
                                        <div class="icon-info">
                                            <i data-feather="file-plus" class="align-self-center icon-lg icon-dual-info"></i>
                                        </div>
                                    </div>
                                    <div class="col-10 align-self-center text-right">
                                        <div class="ml-2">
                                            <p class="mb-1 text-muted">{{trans('lang.nearly_expired_iqama')}}</p>
                                            <h3 class="mt-0 mb-1 font-weight-semibold" id="expire_iqama">{{$expire_iqama}}</h3>
                                        </div>
                                    </div>
                                </div>
                                <div class="progress mt-2" style="height:3px;">
                                    <div class="progress-bar bg-info" role="progressbar" style="width: {{$expire_iqama*100/$all}}%;" aria-valuenow="{{$expire_iqama*100/$all}}" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                            </div></a><!--end card-body-->
                    </div><!--end card-->
                </div><!--end col-->

                <div class="col-lg-3 file-box-content">
                    <div class="card"> <a href="{{ route('expire_passport') }}">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-2 align-self-center">
                                        <div class="icon-info">
                                            <i data-feather="book" class="align-self-center icon-lg icon-dual-dark"></i>
                                        </div>
                                    </div>
                                    <div class="col-10 align-self-center text-right">
                                        <div class="ml-2">
                                            <p class="mb-1 text-muted">{{trans('lang.nearly_expired_passport')}}</p>
                                            <h3 class="mt-0 mb-1 font-weight-semibold" id="expire_passport">{{ $expire_passport}}</h3>
                                        </div>
                                    </div>
                                </div>
                                <div class="progress mt-2" style="height:3px;">
                                    <div class="progress-bar bg-dark" role="progressbar" style="width: {{$expire_passport*100/$all}}%;" aria-valuenow="{{$expire_passport*100/$all}}" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                            </div></a><!--end card-body-->
                    </div><!--end card-->
                </div><!--end col-->

                <div class="col-lg-3 file-box-content">
                    <div class="card"><a href="{{ route('expire_hr_docs') }}">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-2 align-self-center">
                                        <div class="icon-info">
                                            <i data-feather="file-minus" class="align-self-center icon-lg icon-dual-danger"></i>
                                        </div>
                                    </div>
                                    <div class="col-10 align-self-center text-right">
                                        <div class="ml-2">
                                            <p class="mb-0 text-muted">{{trans('lang.nearly_expired_hr_files')}}</p>
                                            <h3 class="mt-0 mb-1 font-weight-semibold d-inline-block" id="hrDocuments">{{$hrDocuments}}</h3>
                                            @if($hrDocuments)
                                                <span class="badge badge-soft-danger mt-1 shadow-none">warning</span>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <div class="progress mt-2" style="height:3px;">
                                    <div class="progress-bar bg-danger" role="progressbar" style="width: {{$hrDocuments*100/$all_hrDocuments}}%;" aria-valuenow="{{$hrDocuments*100/$all_hrDocuments}}" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                            </div></a><!--end card-body-->
                    </div><!--end card-->
                </div><!--end col-->

                <div class="col-lg-3 file-box-content">
                    <div class="card"><a href="#">
                            <div class="card-body">
                                <div class="row">
                                    <div class=" col-2 align-self-center">
                                        <div class="icon-info">
                                            <i data-feather="file" class="align-self-center icon-lg icon-dual-secondary"></i>
                                        </div>
                                    </div>
                                    <div class="col-10 align-self-center text-right">
                                        <div class="ml-2">
                                            <p class="mb-1 text-muted">{{trans('lang.nearly_expired_utilities_contracts')}}</p>
                                            <h3 class="mt-0 mb-1 font-weight-semibold d-inline-block" id="expire_visit">{{ $expire_visit}}</h3>
                                            @if($expire_visit)
                                                <span class="badge badge-soft-danger mt-1 shadow-none">warning</span>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <div class="progress mt-2" style="height:3px;">
                                    <div class="progress-bar bg-secondary" role="progressbar" style="width: {{$expire_visit*100/$all}}%;" aria-valuenow="{{$expire_visit*100/$all}}" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                            </div></a><!--end card-body-->
                    </div><!--end card-->
                </div><!--end col-->
            </div><!--end row-->
            <div class="row">
                <div class="col-lg-3 file-box-content">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="header-title mt-0 mb-3">{{trans('lang.Saudi_vs_expat')}}</h4>
                            <div class="">
                                <div id="simple-pie-2" class="ct-chart ct-golden-section simple-pie-chart-chartist drop-shadow"></div>
                                <span class="text-blue">{{trans('lang.saudi')}}: {{$saudi}}  - </span>
                                <span class="text-secondary" style="margin-left: 10px;">{{trans('lang.expat')}}: {{$expat}} </span>
                            </div>
                        </div><!--end card-body-->
                    </div><!--end card-->
                </div> <!--end col-->            <div class="col-lg-3 file-box-content">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="header-title mt-0 mb-3">{{trans('lang.nationalities')}}</h4>
                            <div class="" style="padding-top:35px">
                                <div id="apex_pie1" class="apex-charts"></div>
                            </div>
                        </div><!--end card-body-->
                    </div><!--end card-->
                </div> <!--end col-->
                <div class="col-lg-3 file-box-content">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="header-title mt-0 mb-3">{{trans('lang.gender')}}</h4>
                            <div class="">

                                <div id="simple-pie" class="ct-chart ct-golden-section simple-pie-chart-chartist drop-shadow"></div>
                                <span class="text-blue">{{trans('lang.male')}}: {{$male}} - </span>
                                <span class="text-secondary" style="margin-left: 10px;">{{trans('lang.female')}}: {{$female}}</span>

                            </div>
                        </div><!--end card-body-->
                    </div><!--end card-->
                </div> <!--end col-->
                <div class="col-lg-3 file-box-content">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="header-title mt-0 mb-3">{{trans('lang.marital_status')}}</h4>
                            <div class="">

                                <div id="simple-pie3" class="ct-chart ct-golden-section simple-pie-chart-chartist drop-shadow"></div>
                                <span class="text-blue">{{trans('lang.single')}}: {{$single}} - </span>
                                <span class="text-secondary" style="margin-left: 10px;">{{trans('lang.married')}}: {{$married}}</span>

                            </div>
                        </div><!--end card-body-->
                    </div><!--end card-->
                </div> <!--end col-->

            </div><!--end row-->

        </div><!-- container -->
    </form>
    <!--  Modal content for the above example -->
    <!-- end page content -->
@endsection
@section('scripts')

    <script src="{{ asset('plugins/chartist/js/chartist.min.js') }}"></script>
    <script src="{{ asset('plugins/apexcharts/apexcharts.min.js') }}"></script>
    <script src="{{ asset('plugins/raphael/raphael.min.js') }}"></script>
    <script src="{{ asset('plugins/moment/moment.js') }}"></script>
    <script src='{{ asset('plugins/fullcalendar/packages/core/main.js') }}'></script>
    <script src='{{ asset('plugins/fullcalendar/packages/daygrid/main.js') }}'></script>
    <script src='{{ asset('plugins/fullcalendar/packages/timegrid/main.js') }}'></script>
    <script src='{{ asset('plugins/fullcalendar/packages/interaction/main.js') }}'></script>
    <script src='{{ asset('plugins/fullcalendar/packages/list/main.js') }}'></script>
    <script src='{{ asset('assets/pages/jquery.calendar.js') }}'></script>
    <script src="{{ asset('plugins/chartjs/chart.min.js') }}"></script>
    <script>
        $(document).ready(function(){
            $("#department_id").change(function(){
                //   alert($(this).val());
                $.ajax({
                    url: "{{route('filter_dashboard2')}}/"+$(this).val(),
                    type: 'GET',
                    async: false,
                    dataType: 'json',
                    success: function(html){
                        //  alert(html.data.all);
                        $('#all').html(html.data.all);
                        $('#attend').html( html.data.attend);
                        $('#absent').html(html.data.absent);
                        $('#expire_iqama').html(html.data.expire_iqama);
                        $('#expire_passport').html( html.data.expire_passport);
                        $('#expire_visit').html( html.data.expire_visit);
                        $('#hrDocuments').html(html.data.hrDocuments);
                    },
                    cache: false,
                    contentType: false,
                    processData: false
                }).done(function() {
                    console.log('done');
                })

            });
        });

    </script>
    <script>
        !function($) {
            "use strict";

            var ChartJs = function() {};

            ChartJs.prototype.respChart = function(selector,type,data, options) {
                // get selector by context
                var ctx = selector.get(0).getContext("2d");
                // pointing parent container to make chart js inherit its width
                var container = $(selector).parent();

                // enable resizing matter
                $(window).resize( generateChart );

                // this function produce the responsive Chart JS
                function generateChart(){
                    // make chart width fit with its container
                    var ww = selector.attr('width', $(container).width() );
                    switch(type){
                        case 'Pie':
                            new Chart(ctx, {type: 'pie', data: data, options: options});
                            break;
                    }
                    // Initiate new chart or Redraw

                };
                // run function - render chart at first load
                generateChart();
            },

                //init
                ChartJs.prototype.init = function() {
                    //creating lineChart
                    //Pie chart
                    var pieChart = {
                        labels: ["Married","Single"
                        ],
                        datasets: [
                            {
                                data: [{{$married}},{{$single}}
                                ],
                                backgroundColor: [
                                    "#4d79f6",
                                    "#4ac7ec",
                                    "#e0e7fd",
                                    "#4ac7ec",
                                    "#4d79f6",
                                    "#ff5da0",
                                    "#e0e7fd",
                                    "#4ac7ec",
                                    "#4d79f6",
                                    "#ff5da0",
                                    "#e0e7fd",
                                    "#4ac7ec",
                                ],
                                borderColor: "transparent",
                                hoverBackgroundColor: [
                                    "#4d79f6",
                                    "#ff5da0",
                                    "#e0e7fd",
                                    "#4ac7ec",
                                ],
                                hoverBorderColor: "#ffffff"
                            }]
                    };
                    var pieChartOpts = {
                        legend : {
                            labels : {
                                fontColor : '#8997bd'
                            }
                        }
                    };
                    this.respChart($("#pie"),'Pie',pieChart, pieChartOpts);

                },
                $.ChartJs = new ChartJs, $.ChartJs.Constructor = ChartJs

        }(window.jQuery),

//initializing
            function($) {
                "use strict";
                $.ChartJs.init()
            }(window.jQuery);



    </script>
    <script>

        var options = {
            chart: {
                height: 320,
                type: 'pie',
                dropShadow: {
                    enabled: true,
                    top: 4,
                    left: 0,
                    bottom: 0,
                    right: 0,
                    blur: 2,
                    color: '#45404a2e',
                    opacity: 0.35
                },
            },
            stroke: {
                show: true,
                width: 2,
                colors: ['transparent']
            },
            series: [ @foreach($nationality as $natcount=>$key)
                {{$nationality[$natcount]['count']}},
                @endforeach],
            labels:[ @foreach($nationality as $natcount=>$key)
                "{{$nationality[$natcount]['nat']}}",
                @endforeach],
            colors: ["#a3cae0", "#232f5b","#f06a6c", "#f1e299", "#08aeb0"],
            legend: {
                show: true,
                position: 'bottom',
                horizontalAlign: 'center',
                verticalAlign: 'middle',
                floating: false,
                fontSize: '14px',
                offsetX: 0,
                offsetY: 6
            },
            responsive: [{
                breakpoint: 600,
                options: {
                    chart: {
                        height: 320
                    },
                    legend: {
                        show: false
                    },
                }
            }]
        }

        var chart = new ApexCharts(
            document.querySelector("#apex_pie1"),
            options
        );

        chart.render();

        var male= {{ $male }};
        var female= {{ $female }};
        var data = {
            series: [male, female],
        };

        var sum = function(a, b) { return a + b };

        new Chartist.Pie('#simple-pie', data, {
            labelInterpolationFnc: function(value) {
                return Math.round(value / data.series.reduce(sum) * 100) + '%';
            }
        });


        var saudi= {{ $saudi }};
        var expat= {{ $expat }};
        var data3 = {
            series: [saudi, expat],
        };

        var sum = function(a, b) { return a + b };

        new Chartist.Pie('#simple-pie-2', data3, {
            labelInterpolationFnc: function(value) {
                return Math.round(value / data3.series.reduce(sum) * 100) + '%';
            }
        });


        var single= {{ $single }};
        var married= {{ $married }};
        var data2 = {
            series: [single, married],
        };

        var sum = function(a, b) { return a + b };

        new Chartist.Pie('#simple-pie3', data2, {
            labelInterpolationFnc: function(value) {
                return Math.round(value / data2.series.reduce(sum) * 100) + '%';
            }
        });

    </script>

@endsection