@extends('layouts.app-hr')
@section('content')
    <?php Fun::lang()?>
    @php
        $from_date      = @$_GET['from_date'];
        $to_date        = @$_GET['to_date'];
        $emp_id         = @$_GET['emp_id'];
    @endphp
    <div class="page">
        <div class=container-fluid>
            <div class="top-content">
                <div class="row">
                    <div class="col-sm-12 col-xs-12 form-group">
                        <div class="title-add">
                            <div class="pull-left">
                                <h3>{{__('administrator.report')}} {{__('administrator.attend_by_employee')}}</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="top-content">
                <div class="row">
                    <div class="col-sm-12 col-xs-12 form-group paddin-0">
                        <div>
                            <div class="col-sm-4">
                                <div class="form-group">
                                    @php
                                        $user = App\User::pluck('name', 'id');
                                    @endphp
                                    <strong for="">{{__('administrator.employee')}}</strong>
                                    {!! Form::select('emp_id',$user, null , ['placeholder' => __('administrator.please_select'), 'class' => 'form-control select2','autocomplete' => 'off','']) !!}
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <strong for="">{{__('administrator.month')}}</strong>
                                    {!! Form::text('month', null, array('placeholder' => __('administrator.month'),'class' => 'form-control month_year','autocomplete' => 'off')) !!}
                                </div>
                            </div>
                            <div class=" col-sm-12">
                                <button class=" button_success pull-right" type="button" onclick="tableToExcel('tblData', 'attend by employee')"><i class="fa fa-file-excel-o"></i> {{__('administrator.excel')}}</button>
                                <button class=" button_info pull-right print-data" type="button" ><i class="fa fa-print "></i> {{__('administrator.print')}}</button>
                                <button class=" button_primary pull-right btn_search" type="button"><i class="fa fa-search"></i> {{__('administrator.search')}}</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 show-report" style="height: 768px; width: 100%; background-color: #ffffff; padding: 20px; -webkit-box-shadow: 0px 6px 26px -6px rgba(0,0,0,0.48);
                        -moz-box-shadow: 0px 6px 26px -6px rgba(0,0,0,0.48);
                        box-shadow: 0px 6px 26px -6px rgba(0,0,0,0.48); border-radius: 5px;overflow: scroll;">

                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
<script type="text/javascript">
    $(document).ready(function () {
        $('.print-data').on('click',function () {
            printDiv();
        });

        $('.btn_search').on('click', function(e){
            e.preventDefault();

            var emp_id          = $('[name="emp_id"]').val();
            var month           = $('[name="month"]').val();

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            if(emp_id != '' && month != '')
            {
                $.ajax({
                    url: "{{route('get-report-att-by-employee')}}",
                    type: 'POST',
                    async: false,
                    dataType: 'html',
                    data: {
                        emp_id: emp_id,
                        month: month

                    },
                    success: function (d) {
                        $('.show-report').html(d);
                    },
                    error: function (d) {
                        $.alert('Something Wrong!');
                    }
                });
            }
            else{
                $.alert('Please Select Employee and Month!');
            }
        });
    });

    function printDiv()
    {

        var divToPrint=document.getElementById('DivIdToPrint');

        var newWin=window.open('','Print-Window');

        newWin.document.open();

        newWin.document.write('<html>' +
            '<head>' +
            '<style>\n' +
            '    .table-data\n' +
            '    {\n' +
            '        width:100%;\n' +
            '    }\n' +
            '\n' +
            '    .table-data,.table-data  th, .table-data  td\n' +
            '    {\n' +
            '        border-collapse:collapse;\n' +
            '        border: 1px solid #a8a8a8;\n' +
            '    }\n' +
            '\n' +
            '    .table-data  th\n' +
            '    {\n' +
            '        text-align: center;\n' +
            '        padding: 5px;\n' +
            '    }\n' +
            '\n' +
            '    .table-data  td\n' +
            '    {\n' +
            '        padding: 5px;\n' +
            '    }\n' +
            '\n' +
            '    .table-data  tbody > tr:nth-child(odd)\n' +
            '    {\n' +
            '       background-color: #f4f4f4;\n' +
            '        color: #606060;\n' +
            '    }\n' +
            '</style>' +
            '</head>'+
            '<body onload="window.print()">'+divToPrint.innerHTML+'</body>' +
            '</html>');

        newWin.document.close();

        setTimeout(function(){newWin.close();},10);

    }

</script>
<script type="text/javascript">
    var tableToExcel = (function() {
      var uri = 'data:application/vnd.ms-excel;base64,'
        , template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--><meta http-equiv="content-type" content="text/plain; charset=UTF-8"/></head><body><table>{table}</table></body></html>'
        , base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }
        , format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) }
      return function(table, name) {
        if (!table.nodeType) table = document.getElementById(table)
        var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
        window.location.href = uri + base64(format(template, ctx))
      }
    })()
</script>
@stop




