@extends('app') @section('page-title') 
    <div class="row bg-title">

        <!-- .page title -->
        <div class="col-lg-8 col-md-5 col-sm-6 col-xs-12">
            <h4 class="page-title"><i class="icon-people"></i> {{$organization->name}}
            </h4>
        </div>
        <!-- /.page title -->
        <!-- .breadcrumb -->
        <div class="col-lg-4 col-sm-6 col-md-7 col-xs-12 text-right">
            <a href="javascript:void()" class="btn btn-default filterbutton"><i class="fa fa-filter"></i> Filter</a>
        </div>
        <!-- /.breadcrumb -->
    </div>
@endsection @push('head-script')
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="/assets/plugins/bower_components/bootstrap-select/bootstrap-select.min.css">
<!-- <link rel="stylesheet" href="/assets/plugins/bower_components/custom-select/custom-select.css"> -->
<link rel="stylesheet" href="/assets/plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css"> 
<link rel="stylesheet" href="/assets/css/daterangepicker.css">@endpush @section('content')



@section('content')
<div class="row">
<form action="{{ route('attendance-time-summary',['slug'=>$alias]) }}" method="POST">
    <input type="hidden" name="_token" value="{{ csrf_token() }}" />
    <input type="hidden" id="filename" value="{{$organization->name}} Time & Attendance Summary">
    <input type="hidden" id="organization_name" value="{{$organization->name}}">
    
    <div class="white-box">
            <div class="row">
                
            <style>
                .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 newtabdesign">
                    <p class="tableheadnew">Attendance Time Summary Details</p>
                    <table class="table newtablesummarydes" id="organization">
                        <thead>
                            <th>S No.</th>
                            <th>Attendance date</th>
                            <th>In Time</th>
                            <th>Out Time</th>
                            <th>Leave</th>
                            <th>Holiday</th>
                            <th>Working hours</th>
                            <th>Overtime hours</th>
                        </thead>
                        <tbody>
                            @foreach($dataArr as $value)
                            <tr>
                                <td>{{ $loop->iteration }}</td>
                                <td>{{$value['attendance_date']}}</td>
                                <td>{{$value['in_time']}}</td>
                                <td>{{$value['out_time']}}</td>
                                <td>{{$value['leave']}}</td>
                                <td>{{$value['holiday']}}</td>
                                <td>{{$value['working_hour']}}</td>
                                <td>{{$value['overtime_hours']}}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
    </div>
</form>
</div>
@endsection

@endsection @push('footer-script')
<script src="/assets/plugins/bower_components/datatables/jquery.dataTables.min.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/moment.min.js"></script>
<script src="/assets/js/daterangepicker.js"></script>
<script>

var subLocations = $('#sublocation_selected_id').val();

$(document).ready(function() {
    $('#date_range').daterangepicker({
        timePicker: false,
        locale: {
        format: 'MM/DD/YYYY'
        }
    })

    if ($('#location_id').val()) {
        getsubLocations();
    }

    $('#organization').DataTable({ 
        language: { search: "" },
            dom: 'fBitp',
        buttons: [
            { 
                extend: 'excel',
                filename: '{{$organization->name}} Time & Attendance Summary, {{Auth::user()->name}} - {{ date("d-m-Y H-i-s") }}',
                title: '{{$organization->name}} Time & Attendance Summary',
                text: 'Export to Excel'
            },
            { 
                extend: 'pdf',
                filename: '{{$organization->name}} Time & Attendance Summary, {{Auth::user()->name}} - {{ date("d-m-Y H-i-s") }}',
                title: '{{$organization->name}} Time & Attendance Summary',
                text: 'Export to PDF',
                orientation : 'landscape',
                customize: function(doc) {
                    doc['footer']=(function() {
                        return {
                            columns: [
                                {
                                    alignment: 'center',
                                    text: ['Downloaded by: ', { text: '{{Auth::user()->name}}' }, ' on {{ date("d-m-Y") }} at {{ date("g:i A") }}']
                                }
                            ],
                            margin: 10
                        }
                    }); 
                },
            }
        ],
        "language": {
            search: '', searchPlaceholder: "Search...",
        "paginate": {
            "previous": "<img src='/assets/img/prevnew.png' />",
            "next": "<img src='/assets/img/nextnew.png' />"
        }
        },
        'olanguage': { 'sSearch': '', 'sSearchPlaceholder': "Search" },
        "ordering": true,
        "info":     true, 
        }); 

    });

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

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

        var data = {
            location_id: locationId,
            '_token': '{{{csrf_token()}}}'
        }
        $.ajax({
            url: '/{{$alias}}/location/sub-locations',
            type: 'POST',
            data: data,
            success: function(data) {
                var selectbox = '';
                if (data) {
                    selectbox = '<label for="sub_location_id">Sub Location</label>';
                    selectbox += '<div class="form-label-group"><select name="sub_location_id[]" class="form-control select2" id="sub_location_id" multiple>';
                    $.each(data, function(i, item) {
                        if (subLocations.includes(i)) {
                            selectbox += '<option value="' + i + '" selected="selected">' + item + '</option>';
                        } else {
                            selectbox += '<option value="' + i + '">' + item + '</option>';
                        }
                    });
                    selectbox += '</select></div>';
                }
                $('#sub_location_id').html(selectbox);
                $("#sub_location_id").select2({
                    multiple: true
                });
            }
        });
        
    }
    
    function getEmployeeByType (employee_type) {
        var url = "{{route('employees-by-type',['alias'=>$alias])}}?employee_type=" + employee_type;
        $.easyAjax({
            url: url,
            type: "GET",
            success: function (data) {
                op = '';
                for (var i = 0; i < data.length; i++){
                    op += '<option value="'+data[i].id+'">'+data[i].name+'('+data[i].employee_code+')</option>';
                }
                $('#employee_id').html(op);
            }
        });

    }


</script>
 
 


@endpush