@extends('app')

@push('head-script')
    <style>
        .list-group{
            margin-bottom:0px !important;
        }
    </style>
@endpush
@section('page-title')
    <div class="row bg-title">
        {{-- @if(session('error'))
            <div class="alert alert-danger alert-dismissible fade show mx-2" role="alert">
                {{ session('error') }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        @endif --}}
        <!-- .page title -->
        <div class="col-lg-7 col-md-4 col-sm-4 col-xs-12">
            <h4 class="page-title"><i class="icon-speedometer"></i> @lang($pageTitle)</h4>
        </div>
        @if(!Auth::user()->organizations->isEmpty() && count(Auth::user()->organizations)>1)
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12" style="">
                <div class="row">
                    <div class="col-md-12" style="float: right;">
                        <div class="form-group">
                            <label>Switch to Organization</label>
                            <select class="form-control select2" id="organization_id">
                                <option value="all" selected>All</option>
                                    @foreach(Auth::user()->organizations as $organizationData)
                                        <option value="{{$organizationData->id}}" @if( ($organizationIds!='') && ($organizationIds!=null)) @if(($organizationIds=='['.$organizationData->id.']')) selected @endif @else @if((Auth::user()->organization_id==$organizationData->id)) selected @endif @endif >{{$organizationData->name}}</option>
                                    @endforeach
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        <div class="col-lg-2 col-sm-6 col-md-7 col-xs-12 text-right">
        @else
        <div class="col-lg-5 col-sm-6 col-md-7 col-xs-12 text-right">
        @endif
            <a href="javascript:void();" class="btn btn-default filterbutton"><i class="fa fa-filter"></i> Filter</a>
        </div>
    </div>
    
    <div class="white-box">   
        <div class="row">
            <link rel="stylesheet" href="/assets/plugins/bower_components/calendar/dist/fullcalendar.css">
            <link rel="stylesheet" href="/assets/plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.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 -->
            <link rel="stylesheet" href="/assets/plugins/bower_components/morrisjs/morris.css">
            <link href="/assets/css/custom-new.css" rel="stylesheet">
            <link href="/assets/css/rounded.css" rel="stylesheet">  
            <style>
                .pagecompany { margin-top: 0; color: #707070; font-weight: 500; margin-bottom: 5px; }
                .page-title { margin-bottom: 3px;}
                .border-top-dashed { border-top: 1px #dadfe3 dashed; }
                
                .dashcard { box-shadow: 0px 5px 25px #52575d1a; border: 1px solid #F252524D; border-radius: 20px; background: #fff; padding: 20px; margin: 20px 0 }
                .dashcard.success { border: 1px solid #0ddd393a;  }
                
                .dashcard .card-header { padding: 0 0 8px; border-bottom: 1px solid rgba(0,0,0,.125);} 
                .align-items-end { display: flex; flex-wrap: wrap; -ms-flex-align: end!important; align-items: flex-end!important; }
                .align-items-center { display: flex; flex-wrap: wrap; -ms-flex-align: center!important; align-items: center!important; }
                .dashcard h2 { line-height: 1.2; color: #031912; margin: 0 0 3px; font-weight: 900; font-size: 14px; }
                .dashcard h3 { line-height: 1.2; color: #8BA29B; margin: 0; font-weight: 500; font-size: 13px; }
                .dashcard .card-body { padding: 20px 0 0;}
                .dashcard .approdashstat h4 { font-size: 45px; font-weight: 500; color: #031912; margin: 0; line-height: 1.2 }
                .dashcard .approdashstat p { font-size: 11px; font-weight: 600; color: #3d3d3e; margin: 0; }
                .organisationsetting { margin-top: 10px; margin-bottom: 10px }
                .organisationsetting .page-title { font-weight: 600 }
                .approdashstat2 p { margin-bottom: 20px !important}
                .btn-default { border-radius: 20px; font-size: 14px; font-weight: 500; padding: 6px 25px; letter-spacing: 0.6px; margin-top:18px }
                
                .monthselectnew label { margin-top: 15px; font-weight: 600; font-size: 14px; margin-bottom: 7px } 
                .monthselectnew select.form-control { 
                background: url(arrow-down.jpg) no-repeat right 10px center #f9f9f9;
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none; height: 47px; color: #495057 !important; font-size: 13px;  border: #f2f4f4 thin solid !important; font-weight: 500; padding: 12px 11px;  border-radius: 10px; }
                .monthselectnew input.form-control { 
                    background: #f9f9f9;
                height: 47px; color: #495057 !important; font-size: 13px;  border: #f2f4f4 thin solid !important; font-weight: 500; padding: 12px 11px;  border-radius: 10px; }
                
                .border-top-dashed { border-top: 1px #dadfe3 dashed }
                .monthselectnew label { font-weight: 600; font-size: 14px; margin-bottom: 7px }
                .monthselectnew .text-danger { color: #ff0001 !important }
                /* .monthselectnew .form-control { 
                background: url('/assets/img/arrow-down.jpg') no-repeat right 10px center #f9f9f9;
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none; height: 47px; color: #495057 !important; font-size: 13px;  border: #f2f4f4 thin solid !important; font-weight: 500; padding: 12px 11px;  border-radius: 10px; } */
                .btn-search { border-radius: 20px; background-color: rgb(4, 23, 49); color: #fff; font-size: 14px; font-weight: 400; padding: 5px 5px; letter-spacing: 0.6px; }
                .btn-search:hover, .btn-search:focus { background-color: #297ddd; color: #fff }
                .select2-container .select2-selection--single { height: 32px}
                .marginbox { margin: 25px 0 35px}
                .btn-default { border-radius: 20px; font-weight: 400; font-size: 13px;}
                .newtabdesign { margin-top: 25px; }
                .newtabdesign .table { border-spacing: 0 1em}
                .newtabdesign #organization_filter { float: right}
                .newtabdesign div.dataTables_wrapper div.dataTables_info { padding-top: 28px; float: left; color: #041731; font-weight: 600; font-size: 12px}
                .newtabdesign button.dt-button { border-radius: 10px; border: #041731 thin solid; color: #041731; background: none; padding: 9px 25px; font-weight: 600; font-size: 12px; margin: 1px 9px 0 0 }
                .newtabdesign button.dt-button:hover {  color: #fff; background: #041731;  }
                .newtabdesign .dataTables_filter input { background: url('/assets/img/search-bg.jpg') no-repeat 7px center  #F7FAFC; height: 38px !important; border: #F7FAFC thin solid; border-radius:10px; font-size: 14px; padding-left: 0; color: #8898AA; padding-left: 30px; width: 265px !important}
                .tableheadnew { color: #041731; font-weight: 700; font-size: 18px; margin-bottom: -27px;}
                .newtabdesign table.dataTable { margin-top: 20px}
                .newtablesummarydes.table>thead>tr>th { padding: 20px 12px 0px; font-size: 11px; text-transform: none; font-weight: 600; color: #9095A0;}
                .newtablesummarydes.table>tbody>tr>td { padding: 13px 12px; font-size: 12px; font-weight: 600; color: #2B2D4A; position: relative; z-index: 2; border: none; }
                .newtablesummarydes.table>tbody>tr>td strong { font-weight: 700; }
                .newtablesummarydes td:before { content: ""; position: absolute; left: 0; right: 0; background: #f9f9f9; width: 100%; top: 0px; height: 100%; z-index: -1; border-top: #f2f4f4 thin solid; border-bottom: #f2f4f4 thin solid; }
                .newtablesummarydes td:first-child:before { border-radius: 13px 0 0 13px; border: #f2f4f4 thin solid;    border-right: none; }
                .newtablesummarydes td:last-child:before { border-radius: 0 13px 13px 0; border: #f2f4f4 thin solid;    border-left: none; } 
                .newtabdesign  ul li.paginate_button a, .newtabdesign span.ellipsis { padding:0;  color: #2B2D4A; border-radius: 5px; line-height: 30px; height: 30px; width: 30px; text-align: center; margin-bottom: 10px; margin-top: 20px; background: #efefef; font-size:  12px; font-weight: 500; display: inline-block; margin-right: 10px; cursor: pointer }
                .newtabdesign  ul li.paginate_button.active a, .newtabdesign  ul li.paginate_button a:hover { color: #fff; background: #09203a; }
                .newtabdesign .paginate_button.next img { width: 30px;  cursor: pointer}
                .newtabdesign .paginate_button.previous img { width: 30px; margin-right: 10px; cursor: pointer}
                .newtabdesign .paginate_button.previous a, .newtabdesign .paginate_button.next a { background: none !important; border: none !important}
                .newtabdesign .paginate_button.disabled img { opacity: 0.5}
                .newtabdesign .dataTables_wrapper .dataTables_paginate { margin: -20px 0 20px; text-align: right !important}
                .newtabdesign table.dataTable thead .sorting:after, .newtabdesign table.dataTable thead .sorting_asc:after{ bottom: 0 }
            </style>
            
            <div class="col-md-12">
                <div class="border-top-dashed"></div>
            </div>

            <div class="col-md-12" id="searchbox"> 
                <div class="row marginbox">
                    <div class="col-md-2 monthselectnew">
                        <div class="input-daterange input-group">
                            <label>Date</label>
                            <input type="text" class="form-control" id="start-date" placeholder="@lang('app.startDate')" style="border-radius:5px; height:32px;"
                        value="{{ \Carbon\Carbon::parse($fromDate)->format('d-m-Y') }}"/>
                        </div>
                    </div>

                    <div class="col-md-2 monthselectnew">
                        <div class="input-daterange input-group">
                            <label>Location</label>
                            <select class="form-control select2" name="location_id[]" id="location_id" onchange="getsubLocations(this,'sublocations')" multiple style="display: none;width:176px;">
                                @foreach($locations as $location)
                                    <option value="{{$location->id}}">
                                        {{$location->name}}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="col-md-2 monthselectnew">
                        <div class="input-daterange input-group">
                            <label>Sub Location</label>
                            <select class="form-control select2" name="sublocation_id[]" id="sublocation_id" multiple style="display: none;width:176px;">
                                @foreach($subLocations as $subLocation)
                                    <option value="{{$subLocation->id}}">
                                        {{$subLocation->name}}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="col-md-2 monthselectnew">
                        <div class="input-daterange input-group">
                            <label>Department</label>
                            <select class="form-control select2" name="department_id[]" id="department_id" multiple style="display: none;width:176px;">
                                @foreach($departments as $department)
                                    <option value="{{$department->id}}">
                                        {{$department->name}}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="col-md-2 monthselectnew">
                        <div class="input-daterange input-group">
                            <label>Sub Department</label>
                            <select class="form-control select2" name="sub_department_id[]" id="sub_department_id" multiple style="display: none;width:176px;">
                                @foreach($subDepartments as $subDepartment)
                                    <option value="{{$subDepartment->id}}">
                                        {{$subDepartment->name}}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="col-md-2 monthselectnew">
                        <div class="input-daterange input-group">
                            <label>Designation</label>
                            <select class="form-control select2" name="designation_id[]" id="designation_id" multiple style="display: none;width:176px;">
                                @foreach($designations as $designation)
                                    <option value="{{$designation->id}}">
                                        {{$designation->name}}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>

                <div class="row marginbox">
                    <div class="col-md-2 monthselectnew">
                        <div class="input-daterange input-group">
                            <label>Shift</label>
                            <select class="form-control select2" name="shift_id[]" id="shift_id" multiple style="display: none;width:176px;">
                                @foreach($shifts as $shift)
                                    <option value="{{$shift->id}}">
                                        {{$shift->name}}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-2 monthselectnew">
                        <div class="input-daterange input-group">
                            <label>Area</label>
                            <select class="form-control select2" name="area_id[]" id="area_id" multiple style="display: none;width:176px;">
                                @foreach($areas as $area)
                                    <option value="{{$area->id}}">
                                        {{$area->name}}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="col-md-2 monthselectnew">
                        <label>&nbsp;</label><br>
                        <button id="apply-filters" class="btn-search btn"><i class="fa fa-search"></i> @lang('app.search')</button>
                    </div>
                </div>
                
                <div class="border-top-dashed"></div>
            </div>
        </div>
    </div>
@endsection

@push('head-script')
    <link rel="stylesheet" href="/assets/plugins/bower_components/calendar/dist/fullcalendar.css">
    <link rel="stylesheet" href="/assets/plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.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 -->
    <link rel="stylesheet" href="/assets/plugins/bower_components/morrisjs/morris.css">
    <!-- <link href="/assets/css/custom-new.css" rel="stylesheet"> -->
    <!-- <link href="/assets/css/rounded.css" rel="stylesheet"> -->
    
    <style>
        .col-in {padding: 0 20px !important;}
        .fc-event {font-size: 10px !important;}
        .dashboard-settings {padding-bottom: 8px !important;}
        .customChartCss { height: 100% !important; }
        .customChartCss svg { height: 400px; }
        @media (min-width: 769px) {
            #wrapper .panel-wrapper {height: 530px;overflow-y: auto;}
        }
    </style>
@endpush

@section('content')
    <div class="white-box" id="dashboard-content">
             
    </div>

@endsection


@push('footer-script')
<script src="/assets/plugins/bower_components/morrisjs/morris.js"></script>
<script src="/assets/plugins/bower_components/datatables/jquery.dataTables.min.js"></script>
<script src="/assets/js/datatables/dataTables.bootstrap.min.js"></script>
<script src="/assets/js/datatables/dataTables.responsive.min.js"></script>
<script src="/assets/js/datatables/responsive.bootstrap.min.js"></script>
<script src="/assets/js/datatables/dataTables.buttons.min.js"></script>
<!-- <script src="/assets/js/datatables/buttons.server-side.js"></script> -->

{{-- {!! $dataTable->scripts() !!} --}}

<script src="/assets/js/Chart.min.js"></script>
<script src="/assets/js/chart.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/waypoints/lib/jquery.waypoints.js"></script>
<script src="/assets/plugins/bower_components/counterup/jquery.counterup.min.js"></script>

<!--weather icon -->

<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 src="/assets/js/Chart.min.js"></script>
<script src="/assets/js/daterangepicker.js"></script>

<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/responsive.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.0/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.html5.min.js"></script>
<script src="/assets/plugins/bower_components/bootstrap-select/bootstrap-select.min.js"></script>
<script src="/assets/plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script src="/assets/plugins/bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="/assets/js/chart.js"></script>
<script>
    $('#organization_id').change(function(){
        var organization_id = $('#organization_id :selected').val();
        window.location.replace('/{{$alias}}/organizations/sub-organizations/hr-dashboard/'+organization_id+'/update');
    });
    var startDate = '';
    var endDate = '';
    var contractorId = '';

    $(document).ready(function() {
        $("#searchbox").hide(); 
        $(".filterbutton").click(function() {
            $("#searchbox").slideToggle('slow'); 
        });	

        $('#location_id').show();
        $('#location_id').select2();
        $('#sublocation_id').show();
        $('#sublocation_id').select2();
        $('#department_id').show();
        $('#department_id').select2();
        $('#sub_department_id').show();
        $('#sub_department_id').select2();
        $('#designation_id').show();
        $('#designation_id').select2();
        $('#shift_id').show();
        $('#shift_id').select2();
        $('#area_id').show();
        $('#area_id').select2();
    });

    
    function getLatestDate(){
        startDate = $('#start-date').val();
        if (startDate == '') { startDate = null; }
        endDate = $('#end-date').val();
        if (endDate == '') { endDate = null; }
        designationId = $('#designation_id').val();
        departmentId = $('#department_id').val();
        subDepartmentId = $('#sub_department_id').val();
        locationId = $('#location_id').val();
        subLocationId = $('#sublocation_id').val();
        shiftId = $('#shift_id').val();
        areaId = $('#area_id').val();
        contractorId = $('#contractor_id').val();
        if(contractorId == null) { contractorId = ''; }

        startDate = encodeURIComponent(startDate);
        endDate = encodeURIComponent(endDate);
        designationId = encodeURIComponent(designationId);
        departmentId = encodeURIComponent(departmentId);
        subDepartmentId = encodeURIComponent(subDepartmentId);
        locationId = encodeURIComponent(locationId);
        subLocationId = encodeURIComponent(subLocationId);
        shiftId = encodeURIComponent(shiftId);
        areaId = encodeURIComponent(areaId);
        contractorId = encodeURIComponent(contractorId);
        organizationId = encodeURIComponent('{{$organizationIds}}');
    }

    $(function() {
        jQuery('#start-date').datepicker({
            toggleActive: true,
            format: 'dd-mm-yyyy',
            language: 'en',
            autoclose: true
        });
    });
    $('#apply-filters').click(function() {
        getLatestDate();
        loadData();
    })
    
    getLatestDate();
    loadData();

    $('.keep-open .dropdown-menu').on({
        "click":function(e){
        e.stopPropagation();
        }
    });

    function loadData () {
        var url = "{{route('hrDashboard',['alias'=>$alias])}}?startDate=" + startDate + '&endDate=' + endDate+ '&designationId=' + designationId+ '&departmentId=' + departmentId+ '&subDepartmentId=' + subDepartmentId+ '&locationId=' + locationId+ '&subLocationId=' + subLocationId+ '&shiftId=' + shiftId+ '&contractorId=' + contractorId + '&organizationId=' + organizationId+ '&areaId=' + areaId;
        $.easyAjax({
            url: url,
            container: '#dashboard-content',
            type: "GET",
            success: function (response) {

                $('#dashboard-content').html(response.view);
                $('#contractor-filter-btn').click(function () {});
            }
        })
    }

    function getsubLocations(th) {
        var locationId = $('#location_id').val();

        var subLocationId = "";

        var data = {
            location_id: locationId,
            '_token': '{{{csrf_token()}}}'
        }
        $.ajax({
            url: "{{route('getHrSublocation',['alias'=>$alias])}}",
            type: 'POST',
            data: data,
            success: function(data) {
                var selectbox = '';
                if (data) {
                    $.each(data, function(i, item) {
                        selectbox += '<option value="' + i + '">' + item + '</option>';
                    });
                }
                $('#sublocation_id').html(selectbox);
            }
        });  
    }
    
</script>

@endpush