@extends('member') @section('page-title')
<div class="row bg-title">
    <!-- .page title -->
    <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
        <h4 class="page-title"><i class="icon-speedometer"></i> Employee Dashboard</h4>
        <h5>{{$organization->name}}</h5>
    </div>
    <!-- /.page title -->
    <!-- .breadcrumb -->
    <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12">
        <ol class="breadcrumb">
            <li><a href="#">Home</a></li>
            <li><a href="#">Organization</a></li>
            <li class="active">{{$organization->name}}</li>
        </ol>
    </div>
    <!-- /.breadcrumb -->
</div>
@endsection @push('head-script')
<link rel="stylesheet" href="/assets/plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css">
<link rel="stylesheet" href="/assets/plugins/bower_components/calendar/dist/fullcalendar.css">
<link rel="stylesheet" href="/assets/plugins/bower_components/morrisjs/morris.css">
<!--Owl carousel CSS -->
<link rel="stylesheet" href="/assets/plugins/bower_components/owl.carousel/owl.carousel.min.css">
<!--Owl carousel CSS -->
<link rel="stylesheet" href="/assets/plugins/bower_components/owl.carousel/owl.theme.default.css">
<!--Owl carousel CSS -->

<style>
    .col-in {
        padding: 0 20px !important;
    }

    .fc-event {
        font-size: 10px !important;
    }
</style>
@endpush @section('content')
<div class="white-box">
    @if (isset($status))
    <div class="pad margin no-print">
        <div class="alert alert-{{$status['code']}} alert-dismissible fade in" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
            <h4><i class="icon fa fa-ban"></i> {{ $status['header'] }}</h4>
            <ul>
                @foreach ($status['messages'] as $m)
                <li>{{$m}}</li>
                @endforeach
            </ul>
        </div>
    </div>
    @endif
    <!-- <div class="row dashboard-stats front-dashboard">
        


        
        <div class="col-md-4 col-sm-6">
            <a href="#">
                <div class="white-box">
                    <div class="row">
                        <div class="col-xs-3">
                            <div>
                                <span class="bg-info-gradient"><i class="icon-layers"></i></span>
                            </div>
                        </div>
                        <div class="col-xs-9 text-right">
                            <span class="widget-title">Total Present</span><br>
                            <span class="counter">{{$totalPresent}}</span>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <div class="col-md-4 col-sm-6">
            <a href="#">
                <div class="white-box">
                    <div class="row">
                        <div class="col-xs-3">
                            <div>
                                <span class="bg-warning-gradient"><i class="icon-layers"></i></span>
                            </div>
                        </div>
                        <div class="col-xs-9 text-right">
                            <span class="widget-title">Total Absent</span><br>
                            <span class="counter">{{$totalAbsent}}</span>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <div class="col-md-4 col-sm-6">
            <a href="#">
                <div class="white-box">
                    <div class="row">
                        <div class="col-xs-3">
                            <div>
                                <span class="bg-danger-gradient"><i class="icon-layers"></i></span>
                            </div>
                        </div>
                        <div class="col-xs-9 text-right">
                            <span class="widget-title">Total Leave</span><br>
                            <span class="counter">{{$totalLeave}}</span>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <div class="col-md-4 col-sm-6">
            <a href="#">
                <div class="white-box">
                    <div class="row">
                        <div class="col-xs-3">
                            <div>
                                <span class="bg-success-gradient"><i class="icon-layers"></i></span>
                            </div>
                        </div>
                        <div class="col-xs-9 text-right">
                            <span class="widget-title">Total Work From Home</span><br>
                            <span class="counter">{{$totalWfh}}</span>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <div class="col-md-4 col-sm-6">
            <a href="#">
                <div class="white-box">
                    <div class="row">
                        <div class="col-xs-3">
                            <div>
                                <span class="bg-info-gradient"><i class="icon-layers"></i></span>
                            </div>
                        </div>
                        <div class="col-xs-9 text-right">
                            <span class="widget-title">Total Work From Office</span><br>
                            <span class="counter">{{$totalWfo}}</span>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <div class="col-md-4 col-sm-6">
            <a href="#">
                <div class="white-box">
                    <div class="row">
                        <div class="col-xs-3">
                            <div>
                                <span class="bg-warning-gradient"><i class="icon-layers"></i></span>
                            </div>
                        </div>
                        <div class="col-xs-9 text-right">
                            <span class="widget-title">Total Working Hours</span><br>
                            <span class="counter">{{$totalHr}}</span>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <div class="col-md-4 col-sm-6">
            <a href="#">
                <div class="white-box">
                    <div class="row">
                        <div class="col-xs-3">
                            <div>
                                <span class="bg-danger-gradient"><i class="icon-layers"></i></span>
                            </div>
                        </div>
                        <div class="col-xs-9 text-right">
                            <span class="widget-title">Remaining Leaves</span><br>
                            <span class="counter">{{$totalRLeaves}}</span>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <div class="col-md-4 col-sm-6">
            <a href="#">
                <div class="white-box">
                    <div class="row">
                        <div class="col-xs-3">
                            <div>
                                <span class="bg-success-gradient"><i class="icon-layers"></i></span>
                            </div>
                        </div>
                        <div class="col-xs-9 text-right">
                            <span class="widget-title">Requests</span><br>
                            <span class="counter">{{$totalRequest}}</span>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        


    </div> -->

</div>

<div class="row bg-title">
    <!-- .page title -->
    <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
        <h4 class="page-title">
            <i class="icon-speedometer"></i> Month Summary</h4>
    </div>
    <!-- /.page title -->
    <!-- .breadcrumb -->


    <!-- /.breadcrumb -->
</div>

<div class="white-box">
    <div class="row">
        <div class="col-xs-12 m-b-10" style="display: flex;align-items: center;">

            <div class="input-daterange input-group" id="month" style="margin-right: 10px;">
                <label style="font-size: 13px;margin-bottom: 0;margin-right: 10px;">@lang('app.month')</label>
                <select class="form-control select2" id="month_id">
                    <option value="">Select Month</option>
                    @foreach ($month as $mkey=>$monthitem)
                      <option value="{{$mkey}}" {{ ( $mkey == $month_id) ? 'selected' : '' }}>{{$monthitem}}</option>
                    @endforeach
                </select>
            </div>

            <div class="input-daterange input-group" id="year" style="margin-right: 10px;">
                <label style="font-size: 13px;margin-bottom: 0;margin-right: 10px;">@lang('app.year')</label>
                <select class="form-control select2" id="year_id">
                        <option value="">Select Year</option>
                        @foreach ($year as $ykey=>$yearitem)
                            <option value="{{$yearitem}}" {{ ( $yearitem == $year_id) ? 'selected' : '' }}>{{$yearitem}}</option> 
                        @endforeach
                </select>
            </div>

            <button type="button" id="apply-filters" class="btn btn-success btn-sm"><i class="fa fa-check"></i> @lang('app.apply')</button>
        </div>
        
    </div>
</div>

<div class="white-box" id="dashboard-month-wise-data">
         
</div>

<div class="row bg-title">
    <!-- .page title -->
    <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
        <h4 class="page-title">
            <i class="icon-speedometer"></i> Today's Status</h4>
    </div>
    <!-- /.page title -->
    <!-- .breadcrumb -->


    <!-- /.breadcrumb -->
</div>

<div class="white-box">
        <div class="row">
            <div class="col-xs-12 m-b-10" style="display: flex;align-items: center;">

                <div class="input-daterange input-group" id="date-range" style="margin-right: 10px;">
                    <label style="font-size: 13px;margin-bottom: 0;margin-right: 10px;">@lang('app.selectDate')</label>
                    <input type="text" class="form-control" id="start-date" placeholder="@lang('app.startDate')" style=""
                        value="{{ \Carbon\Carbon::parse($fromDate)->format('d-m-Y') }}"/>
                    
                </div>

                <button type="button" id="apply-date-filters" class="btn btn-success btn-sm" style="margin-top: 17px;"><i class="fa fa-check"></i> @lang('app.apply')</button>
            </div>
            
        </div>
    </div>

<div class="white-box" id="dashboard-date-wise-data">
         
</div>




@endsection @push('footer-script')
<script src="/assets/js/chart/highcharts.js"></script>
<script src="/assets/js/chart/exporting.js"></script>
<script src="/assets/js/chart/export-data.js"></script>
<script src="/assets/js/chart/accessibility.js"></script>
<script src="/assets/plugins/bower_components/raphael/raphael-min.js"></script>
<script src="/assets/plugins/bower_components/morrisjs/morris.js"></script>

<script src="/assets/plugins/bower_components/calendar/jquery-ui.min.js"></script>
<script src="/assets/plugins/bower_components/moment/moment.js"></script>
<script src="/assets/plugins/bower_components/calendar/dist/fullcalendar.min.js"></script>
<script src="/assets/plugins/bower_components/calendar/dist/jquery.fullcalendar.js"></script>
<script src="/assets/plugins/bower_components/calendar/dist/locale-all.js"></script>
<script src="/assets/js/event-calendar.js"></script>
<script src="/assets/plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script type="text/javascript">
    function getLatestDate(){
        month_id = $('#month_id').val();
        year_id = $('#year_id').val();

        month_id = encodeURIComponent(month_id);
        year_id = encodeURIComponent(year_id);
    }

    function getDatewiseDate(){
        startDate = $('#start-date').val();
        if (startDate == '') { startDate = null; }
        startDate = encodeURIComponent(startDate);
    }

    $(function() {
        jQuery('#date-range').datepicker({
            toggleActive: true,
            format: 'dd-mm-yyyy',
            language: 'en',
            autoclose: true
        });
    });

    $('#apply-filters').click(function() {
        getLatestDate();
        loadData();
    });

    $('#apply-date-filters').click(function() {
        getDatewiseDate();
        loadDateWiseData();
    });
    
    getLatestDate();
    loadData();
    getDatewiseDate();
    loadDateWiseData();

    loadMyTeamData();

    function loadData () {
        var url = "{{route('memberDashboard',['alias'=>$alias])}}?month_id=" + month_id + '&year_id=' + year_id;
        $.easyAjax({
            url: url,
            container: '#dashboard-month-wise-data',
            type: "GET",
            success: function (response) {
                $('#dashboard-month-wise-data').html(response.view);
            }
        })

    }

    function loadDateWiseData () {
        var url = "{{route('dashboardDatewiseSummary',['alias'=>$alias])}}?startDate="+startDate;
        $.easyAjax({
            url: url,
            container: '#dashboard-date-wise-data',
            type: "GET",
            success: function (result) {
                $('#dashboard-date-wise-data').html(result.view);
            }
        })

    }

</script>
@endpush