@extends('layouts.app')

@section('content')

<div class="page-content">
    <!-- start page title -->
    <div class="page-title-box">
        <div class="container-fluid">
            <div class="row align-items-center">
                <div class="col-sm-6">
                    <div class="page-title">
                        <h4>Users</h4>
                        <ol class="breadcrumb m-0">
                            <li class="breadcrumb-item"><a href="{{url('/')}}">Home</a></li>                            
                            <li class="breadcrumb-item active">Users</li>
                        </ol>
                    </div>
                </div>
                <!--                <div class="col-sm-6">
                                    <div class="float-end d-none d-sm-block">
                                        <a href="" class="btn btn-success">Add Widget</a>
                                    </div>
                                </div>-->
            </div>
        </div>
    </div>
    <!-- end page title -->    
    <div class="container-fluid">
        <div class="page-content-wrapper">
            <div class="row">

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

                    <div class="card">
                        <div class="card-body">
                            <div class="row" id="datatable_wrapper">
                                <div class="col-md-12">
                                    <div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc;width: 400px;float: right">
                                        <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
                                        <span></span> <b class="caret"></b>
                                    </div>
                                </div>
                                <div class="col-md-12" id="datatable_div">
                                    <div class="table-responsive1" style="margin-top: 10px;"> 
                                        <table id='datatable' class='table table-bordered dt-responsive nowrap' style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                            <thead>
                                                <tr>
                                                    <th>ID</th>
                                                    <th>Device Id</th>
                                                    <th>Full Name</th>
                                                    <th>Latest Email ID</th>
                                                    <th>Device Type</th>                                                    
                                                    <th>Device Name</th>                                                    
                                                    <th>Device Status</th>
                                                    <th>Credits</th>
                                                </tr>
                                            </thead>

                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!--end card-->
                </div> 



            </div>


        </div>


    </div> <!-- container-fluid -->
</div>
<!-- End Page-content -->

</div>
<!-- end main content-->

@endsection


@section('scripts')

<script>

    $(document).ready(function () {

        start_date = moment("Jan 01, 2019").format('MMMM D, YYYY');
//        start_date = moment().format('MMMM D, YYYY');
        end_date = moment().format('MMMM D, YYYY');
        days = 0;

//        action_url = "{{url('/')}}/users/list?start_date=" + start_date + "&end_date=" + end_date;
        action_url = "{{url('/')}}/users/list";

        var table = $('#datatable').DataTable({
            'processing': true,
            'serverSide': true,
            'serverMethod': 'GET',
            "deferLoading": 0,
            searchDelay: 350,
            //    responsive: true,
            "oLanguage": {
                "sInfoFiltered": "",
                sProcessing: "<h4 class=card-title text-info'>Loading. Please wait...</h4>"
            },
            "iDisplayLength": 10,

            'ajax': {
                'url': action_url,
                error: function (xhr, error, code)
                {
                    console.log(xhr);
                    console.log(code);
                    heading = "";
                    msg = 'Error: ' + code + ', Please contact to admin!';
                    icon = "error";
                    time = 5000;
                    position = "";
                    //  general_toast(heading, msg, icon, time, position);
                }
            },
            "order": [[0, "desc"]],
            'columns': [
                {data: 'id', "visible": false},
                {data: 'guestId',
                    render: function (data, type, row, meta) {
                        link = "{{url('/')}}/users/details/" + row['id'];
                        var url1 = /(^|&lt;|\s)(www\..+?\..+?)(\s|&gt;|$)/g, url2 = /(^|&lt;|\s)(((https?|ftp):\/\/|mailto:).+?)(\s|&gt;|$)/g;
                        if (data.length >= 50) {
                            var html = $.trim(data);
                            if (html) {
                                html = html.replace(url1, '$1<a style="color:blue; text-decoration:underline;" target="_blank"  href="http://$2">$2</a>$3').replace(url2, '$1<a style="color:blue; text-decoration:underline;" target="_blank"  href="$2"><img src="$2" style="height:100px !important;width:100px !important;"></a>$5');
                            }
                            if (!html) {
                                html = "N/A";
                            }
                            return "<div style='white-space: normal !important; width: 300px;'><a href=" + link + ">" + html + "</a></div>";

//                            if (data) {
//                                return '<a href="' + link + '">' + data + '</a>';
//                            } else {
//                                return "N/A";
//                            }
                        } else {
                            return '<a href="' + link + '">' + data + '</a>';
                        }
                    }
                },
                {
                    data: 'firstName',
                    render: function (data, type, row, meta) {
                        link = action_url + "/users/details" + row['id'];
                        if (data) {
                            var lastName = (row['lastName']) ? row['lastName'] : "";
                            return row['firstName'] + " " + lastName;
                        } else {
                            return "N/A";
                        }
                    }
                },
                {
                    data: 'email',

                    render: function (data, type, row, meta) {
                        if (data) {
                            return data;
                        } else {
                            return "N/A";
                        }
                    }
                },
                {
                    data: 'deviceType',
                    render: function (data, type, row, meta) {

                        if (data) {
                            return  data;
                        } else {
                            return "N/A";
                        }
                    }
                },
                {
                    data: 'device_information',

                    render: function (data, type, row, meta) {

                        data = $.parseJSON(data);
                        if (data[1]) {
                            return  data[1].deviceName;

                        } else {
                            return "N/A";
                        }
                    }
                },
                {
                    data: 'status',

                    render: function (data, type, row, meta) {
                        var html = '';
                        if (data) {
                            if (data == 1) {
                                html = "<h5 class='badge rounded-pill bg-primary' style='max-height:30px;'>Active</h5>";
                            } else if (data == 2) {
                                html = "<h5 class='badge rounded-pill bg-danger'>Inactive</h5>";
                            } else {
                                html = "N/A";
                            }
                            return html;
                        } else {
                            return "N/A";
                        }
                    }
                },
                {
                    data: 'credits',

                    render: function (data, type, row, meta) {
                        if (data) {
                            return "₵ " + data;
                        } else {
                            return "₵ 0";
                        }
                    }
                }
            ]
        });


// Call datatables, and return the API to the variable for use in our code
// Binds datatables to all elements with a class of datatable
        var dtable = $("#datatable").dataTable().api();

// Grab the datatables input box and alter how it is bound to events
        $(".dataTables_filter input")
                .unbind() // Unbind previous default bindings
                .bind("input", function (e) { // Bind our desired behavior
                    // If the length is 3 or more characters, or the user pressed ENTER, search
                    if (this.value.length >= 4 || e.keyCode == 13) {
                        // Call the API search function
                        dtable.search(this.value).draw();
                    }
                    // Ensure we clear the search if they backspace far enough
                    if (this.value == "") {
                        dtable.search("").draw();
                    }
                    return;
                });


        var search_text = "";
        $('#start_date').val(start_date);
        $('#end_date').val(end_date);
        $('#reportrange span').html(start_date + ' - ' + end_date);

//        var start = moment();
        var start = moment("Jan 01, 2019");
        var end = moment();

        function cb(start, end) {
            start_date = start.format('MMMM D, YYYY');
            end_date = end.format('MMMM D, YYYY');
            $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
            $('#start_date').val(start_date);
            $('#end_date').val(end_date);
            current_active = $('.view_type').attr('current_active');
            if (current_active == "chart") {
                users_chart(start_date, end_date);
            }
            user_type = $("#user_type :selected").val();
            url = action_url + "?start_date=" + start_date + "&end_date=" + end_date + "&timezone=" + search_text + "&user_type=" + user_type;
            table.ajax.url(url);
            table.draw();
        }

        $('#reportrange').daterangepicker({
            startDate: start,
            endDate: end,
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'Last 15 Days': [moment().subtract(15, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'Last 90 Days': [moment().subtract(90, 'days'), moment()],
                'All Time Data': [moment("Jan 01, 2019"), moment()]
            }
        }, cb);
    }
    );
//   cb(start, end); 
    $('.dataTables_filter label input').addClass('form-control');
    $('.dataTables_filter label input').css({'width': '500px', 'display': 'inline-block'});
</script>
@endsection