@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> Employee Directory
            <!-- <span class="text-info b-l p-l-10 m-l-5"></span> <span class="font-12 text-muted m-l-5"> @lang('modules.dashboard.totalClients')</span> -->
        </h4>
    </div>
    <!-- /.page title -->
    <!-- .breadcrumb -->

    <!-- /.breadcrumb -->
</div>
<style>
    .user-bg {
        width: 467px;
        height: 331px;
    }
</style>
@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"> @endpush @section('content')

<div class="row">



    <div class="col-xs-12">

        <div class="white-box">

            <div class="row dashboard-stats front-dashboard mb-15">


            </div>

            <div class="table-responsive">

                <div class="row">
                    <div class="col-md-12">
                        <table class="table table-bordered" id="organization">
                            <thead>
                                <th></th>
                                <th></th>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- .row -->

@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="/assets/plugins/bower_components/custom-select/custom-select.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="https://cdn.datatables.net/buttons/1.7.0/js/dataTables.buttons.min.js"></script>
<!-- <script src="/assets/js/datatables/buttons.server-side.js"></script> -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.print.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>

<script>
    $(document).ready(function() {
       $('#organization').DataTable({
            language:{
                "infoFiltered":""
            },
            "processing": true,
            "serverSide": true,

            "ajax": {
                "url": "{!! route('employee.all',['alias'=>$alias]) !!}",
                "dataType": "json",
                "type": "POST",
                "data": {
                    _token: "{{csrf_token()}}"
                    
                }
            },
            "columns": [{
                "data": "id",
                "orderable": false,
            }, {
                "data": "id",
                "orderable": false,
                render: function(data, type, row, meta) {

                    data = "";
                    if (type === "display") {

                        if (!row.designation) {
                            row.designation = {
                                name: ""
                            }
                        }
                        if (!row.department) {
                            row.department = {
                                name: ""
                            }
                        }

                        let name_split = row.name.split(" ");
                        let firstName = name_split[0];
                        let lastName = "";
                        if (name_split.length > 1) {
                            lastName = row.name.split(" ")[1];
                        }

                        let lat = 0;
                        let long = 0;

                        if (row.location) {
                            lat = row.location.geo_latitude;
                            long = row.location.geo_longitude;
                        }

                        let vcard = "BEGIN:VCARD\n" +
                            "VERSION:3.0\n" +
                            "N:" + lastName + ";" + firstName + "\n" +
                            "FN:" + row.name + "\n" +
                            "TEL;TYPE=home:" + row.mobile + "\n" +
                            "EMAIL;TYPE=internet,home:" + row.email + "\n" +
                            "ORG:{!! $alias !!}\n" +
                            "GEO:" + lat + ";" + long + "\n" +
                            "BDAY:" + row.dob + "\n" +
                            "ROLE:Employee\n" +
                            "DEPT:" + row.department.name + "\n" +
                            "DES:" + row.designation.name + "\n" +
                            "END:VCARD";

                        // let qrcode = "Name: " + row.name;
                        // qrcode += " Designation: " + row.designation.name;
                        // qrcode += " Department: " + row.department.name;
                        // qrcode += " Phone: " + row.phone;
                        // qrcode += " Email: " + row.email;
                        // qrcode += " uuid: " + row.id;


                        data = "<img style='height: 370px;' id='qrcode-" + meta.row + "' src=''/><canvas id='c-qrcode-" + meta.row + "'  data-qr='" + vcard + "'></canvas>";
                    }

                    return data;

                }
            }],
            "columnDefs": [{
                "targets": -2,
                "data": null,
                render: function(data, type, row) {
                    if (type === "display") {

                        var img = "";
                        if(row.profile_image_url && row.profile_image_url.length>0){
                            img = row.profile_image_url;
                        }
                        if (!row.designation) {
                            row.designation = {
                                name: ""
                            }
                        }
                        if (!row.department) {
                            row.department = {
                                name: ""
                            }
                        }
                        data = '<div class="card col-sm-12">' +
                            '<div class="user-bg">' +
                            '<img src="' + img + '" onerror="this.src=\'/assets/img/default-profile-3.png\'" alt="user" width="100%">'

                        +
                        ' <div class="overlay-box">' +
                        '<div class="user-content">' +
                        '<a href="javascript:void(0)">' +
                        '<img src="' + img + '" onerror="this.src=\'/assets/img/default-profile-3.png\'" alt="user" class="thumb-lg img-circle">' +
                            '</a>' +
                            '<h4 class="text-white">' + row.name + '</h4>' +
                            '<h5 class="text-white">' + row.email + '</h5>' +
                            '<h5 class="text-white">' + row.mobile + '</h5>' +
                            '<p class="text-white">' + row.designation.name + ', ' + row.department.name + '</p>' +
                            '<p class="text-white">'+row.organization.name+'</p>' +
                            '<a href="/{!! $alias !!}/employee/' + row.id + '" class="btn btn-success">Profile</a>' +
                            '</div>'; +
                        '</div>' +
                        '</div>' +
                        '</div>'
                    }

                    return data;
                }
            }],

        });

        $('#organization').on('draw.dt', function() {
            $('canvas').each(function(index) {
                let _qr = $(this).attr('data-qr');

                var qr = new QRious({
                    element: $(this),
                    value: _qr,
                    background: '#fff',
                    backgroundAlpha: 0.8,
                    foreground: '#206eb0',
                    foregroundAlpha: 0.8,
                    level: 'H',
                    padding: 0,
                    size: 370
                });
                console.log($("#qrcode-" + index));
                //qr.canvas.parentNode.appendChild(qr.image);
                $("#qrcode-" + index).attr('src', qr.image.src);
                $("#c-qrcode-" + index).remove();
            })
        });
    });
</script>

@endpush