@extends('admin::curd.index')
@section('heading')
@stop

@section('title')
    <img src="{!! URL::to('img/report/analytics.png') !!}"> &nbsp;{!! ucwords('Reports') !!}
@stop

@section('breadcrumb')
@stop

@section('entry')

@stop

@section('tools')
@stop


@section('content')
    <div class="box-body">
        <div class="nav-tabs-custom">

            <ul class="nav nav-tabs primary">


                <li class="active"><a href="" class="active"> User Tracking - Live</a></li>
            </ul>

            <div class="tab-content">

                <div class="tab-pane active clearfix" id="details">

                    {!! Form::horizondal_open()->id('userTrackingReportForm')->secure()->method('POST')->files('true')->enctype('multipart/form-data') !!}
                    <div class="col-md-5 col-lg-5">
                        {!! Form::select('search[user_id]')->options(['' => 'All'])->id('user_id')->addGroupClass('form-group-sm')->label('Select User') !!}
                    </div>
                    <div class="col-md-5 col-lg-5">
                        {!! Form::select('search[sublocation_id]')->id('sublocation_id')->options([])->label(trans('assets::asset.label.sublocation_id'))->placeholder(trans('assets::asset.placeholder.sublocation_id'))->addGroupClass('form-group-sm') !!}
                    </div>
                    <div class="col-md-5 col-lg-5">
                        <div class="form-group form-group-sm">
                            <label for="primary_view" class="control-label col-lg-3 col-md-6 col-sm-6">
                                Date
                            </label>
                            <div class="col-lg-5 col-md-3 col-sm-3">

                                {!! Form::date('search[created_at][0]')->id('created_at_from')->addClass('datepick')->addGroupClass('form-group-sm')->placeholder('From')->raw() !!}
                            </div>

                            <div class="col-lg-4 col-md-3 col-sm-3 m-l-0">
                                {!! Form::date('search[created_at][1]')->id('created_at_to')->addClass('datepick')->addGroupClass('form-group-sm')->placeholder('To')->raw() !!}
                            </div>
                        </div>
                    </div>
                    <div class="col-md-5 col-lg-5">
                    </div>
                    
                    <div class="col-md-2 col-lg-2" style="margin-top:-25px;">
                        <div class="m-b-20">
                            <i class="fa fa-file-excel-o" style="color:#000;"></i>&nbsp;
                            <a id="download_csv" class="headpicture" href="#">Download Csv</a>
                        </div>
                        <div class="m-b-20">
                            <i class="fa fa-refresh" style="color:#000;"></i>&nbsp;
                            <a id="resetnow" class="headpicture" style="cursor:pointer;">Reset Filter</a>
                        </div>
                    </div>
                    <div class="col-md-10 col-lg-10">
                        <button type="button" id="gobutton" class="btn btn-success btn-sm" style="width:100%">Search</button>
                    </div>
                    {!! Form::close() !!}
                </div>
            </div>
        </div>
    </div>

    <div class="nav-tabs-custom">
        <ul class="nav nav-tabs primary">
            <li class="active"><a href="#tab-full-data" data-toggle="tab">User Tracking Details</a></li>
        </ul>

        <div class="tab-content table-responsive">
            <div class="tab-pane " id="tab-graph">
                <div class="table-wrapper" style="margin-left: auto; margin-right: auto;overflow-x: auto;">
                    <table width="100%" align="center" cellpadding="0" cellspacing="0" id="table_1"
                        class="form_table table table-striped">
                        <tr>
                            <td colspan="2">
                                <table width="100%" bgcolor="#FFF" border="0" cellpadding="0" cellspacing="0"
                                    style="padding:8px 0 0 0;">
                                    <tr>

                                    </tr>
                                    <tr>

                                    </tr>
                                    <tr>
                                        <td height="10" class="form_fields_table">&nbsp;</td>
                                        <td width="15%" height="10" colspan="-4" class="form_fields_table">&nbsp;
                                        </td>
                                        <td width="71%" height="10" colspan="-4" class="form_fields_table">&nbsp;
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="3" class="form_fields_table" style="padding:10px;">
                                            <div id="chart_span" style="min-width: 400px; height: 350px; margin: 0 auto">
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="tab-pane" id="tab-summary">
                <div class="table-wrapper" style="margin-left: auto; margin-right: auto;overflow-x: auto;">
                    <table width="100%" id="data_summary" border="0" align="center"
                        class="table table-striped display datatable data-table" cellpadding="0" cellspacing="0">
                    </table>
                </div>
            </div>
            <div class="tab-pane active" id="tab-full-data">
                <table id="full_listings" class="table table-striped data-table" width="100%">
                    <thead class="list_head">
                        <th> User</th>
                        <th> Block</th>
                        <th> Section</th>
                        <th> Location</th>
                        <th> Sublocation </th>
                        <th> Mac Address </th>
                        <th> Asset </th>
                        <th> Created At </th>
                        <th style="width:150px;">Company</th>
                        <th> Division</th>
                    </thead>

                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="save-report">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h3 class="modal-title">Save Report</h3>
                    <div class="popup_description">Type the name and save report for future use.</div>
                </div>
                <div class="modal-body" style="height:110px;">
                    <div class="form-horizontal">

                        <div class="col-md-12 col-lg-12 m-t-20">
                            {!! Form::horizontal_open()->id('report_save')->method('POST')->files('true')->action(trans_url('admin/save_report')) !!}

                            {!! Form::hidden('screen')->forceValue('assets/request') !!}

                            {!! Form::text('name')->placeholder('Enter Name')->label('Report Name')->required() !!}

                            {!! Form::close() !!}
                        </div>
                    </div>
                    <div id="resultofsave" class="searchoptiontext"> </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="save-repot" name="Saverep" value="Send"
                        data-dismiss="modal">Save</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="show_report">
        <div class="modal-dialog">
            <div class="modal-content" style="max-width:400px;">
                <div class="modal-header header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Recent Saved Searches</h4>
                </div>
                <div class="modal-body" style="height:210px; overflow-y: auto;">

                    <div id="saved-reports"></div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" name="Closerep" data-dismiss="modal">Close</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

@stop


<script type="text/javascript">
    var chart;
    let isResetting = false;
    
    $(document).ready(function() {
        $('input[type="date"]').pickadate({
            format: 'dd mmm, yyyy',
            formatSubmit: 'yyyy-mm-dd',
            hiddenSuffix: '',
            selectMonths: true,
            selectYears: true,
            max:new Date(),
            min: new Date(2000, 0, 1)    
        }).prop('type', 'text');

        var today = new Date();
        var fromPicker = $('#created_at_from').pickadate('picker');
        var toPicker = $('#created_at_to').pickadate('picker');

        // Default values
        fromPicker.set('select', today);
        toPicker.set('select', today);
        $('#report_type').change(function() {
            if ($(this).val() == 'History') {
                $('#date-filter').show();
                $('#optional').hide();
            } else {
                $('#date-filter').hide();
                $('#optional').show();

            }
        });
        $("#user_id").select2({
                ajax: {
                    url: "{{ trans_url('admin/user/select2/user') }}",
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            q: params.term,
                            page: params.page
                        };
                    },
                    processResults: function(data, params) {

                    params.page = params.page || 1;
                    return {
                        results: [
                            {
                                id: '', 
                                text: 'All'
                            },
                            ...data.items.map(function(obj) {
                            return {
                                id: obj.id,
                                text: obj.name
                            };
                        }),
                    ],
                        // results: data.items,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: true
            },
        });
        $("#sublocation_id").select2({
            ajax: {
                url: "{{ trans_url('admin/location/sub_location/select2/location') }}",
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    return {
                        q: params.term,
                        companyId: $('#company_id').val(),
                        divisionId: $('#division_id').val(),
                        blockId: $('#block_id').val(),
                        sectionId: $('#section_id').val(),
                        locationId: $('#location_id').val(),
                        page: params.page
                    };
                },
                processResults: function(data, params) {

                    params.page = params.page || 1;

                    let results = [];

                    // Add "All" only on first page
                    if (params.page === 1) {
                        results.push({ id: '', name: 'All' });
                    }

                    // Add all returned items
                    results = results.concat(data.items);

                    return {
                        results: results, // <-- correct return
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: false,
            },

            escapeMarkup: function(markup) { return markup; },

            initSelection: function(element, callback) {
                callback({
                    id: "{{ @$asset->sublocation_id }}",
                    name: "{{ @$asset->sublocation->name }}"
                });
            },

            templateResult: formatRepo3,
            templateSelection: formatRepo3Selection
        });

        function formatRepo3(repo) {
            if (repo.loading) return repo.name;
            var markup = "<div class='select2-result-repository clearfix'>" +
                "<div class='select2-result'><span>" + repo.name + "</span></div>";

            return markup;
        }
        function formatRepo3Selection(repo) {
            return repo.name ? repo.name : repo.text;
        }
        $('#created_at_from, #created_at_to').on('change', function () {
            if (isResetting) {
                return;
            }
            let from = $('#created_at_from').val();
            let to   = $('#created_at_to').val();
            let user_id = $('#user_id').val();
            let sublocation_id = $('#sublocation_id').val();
            if (!from || !to || from === to) {
                return;
            }
            if(user_id || sublocation_id)
            {
                return;
            }
            // -----------------------------------------
            // SET FIRST REAL USER (skip "All")
            // -----------------------------------------
            $.ajax({
                url: "{{ trans_url('admin/user/select2/user') }}",
                data: { q: '', page: 1 },
                dataType: 'json',
                success: function (data) {

                    // Skip "All" which is the first fake entry
                    if (data.items.length > 0) {

                        // First actual user object
                        let first = data.items[0];

                        // Set as selected
                        let option = new Option(first.name, first.id, true, true);
                        $('#user_id').empty().append(option).trigger('change');
                    }
                }
            });


            // -----------------------------------------
            // SET FIRST REAL SUBLOCATION (skip "All")
            // -----------------------------------------
            $.ajax({
                url: "{{ trans_url('admin/location/sub_location/select2/location') }}",
                data: {
                    q: '',
                    page: 1,
                    companyId: $('#company_id').val(),
                    divisionId: $('#division_id').val(),
                    blockId: $('#block_id').val(),
                    sectionId: $('#section_id').val(),
                    locationId: $('#location_id').val(),
                },
                dataType: 'json',
                success: function (data) {

                    // Skip "All" because it's added manually
                    if (data.items.length > 0) {

                        let first = data.items[0];

                        let option = new Option(first.name, first.id, true, true);
                        $('#sublocation_id').empty().append(option).trigger('change');
                    }
                }
            });

        });
        $('#download_csv').click(function() {
            var filter = $("#userTrackingReportForm").serialize();
            $('#download_csv').attr('href', "{{ URL::to('admin/assets/user/tracking/report/graph/csv') }}" +
                "/" + filter);
            $('#download_csv').attr("target", "_blank");
        });

        $('#resetnow').click(function() {
            isResetting = true;
            fromPicker.set('select', today);
            toPicker.set('select', today);
            $('#user_id').val('').trigger('change'); 
            $('#user_id').empty().append(new Option('All', '', true, true)).trigger('change');
            $('#sublocation_id').val('').trigger('change');
            $('#sublocation_id').empty().append(new Option('All', '', true, true)).trigger('change');
            var filter = $("#userTrackingReportForm").serialize();          
            $('#group_by_label').html('');
            oTable.api().draw();
            isResetting = false;
        });


        oTable = $('#full_listings').dataTable({
            "bProcessing": true,
            "sDom": 'R<>rt<ilp><"clear">',
            "bServerSide": true,
            "sAjaxSource": '{!! trans_url('admin') !!}/assets/user/tracking/report',
            "fnServerData": function(sSource, aoData, fnCallback) {

                $('#full_listings .search_bar input, #full_listings .search_bar select').each(
                    function() {
                        aoData.push({
                            'name': $(this).attr('name'),
                            'value': $(this).val()
                        });
                    }
                );
                $('#userTrackingReportForm select, #userTrackingReportForm input').each(
                    function() {
                        if ($(this).val() == null || $(this).val() == '') {
                            return;
                        }

                        aoData.push({
                            'name': $(this).attr('name'),
                            'value': $(this).val()
                        });
                    }
                );

                app.dataTable(aoData);
                $.ajax({
                    'dataType': 'json',
                    'data': aoData,
                    'type': 'GET',
                    'url': sSource,
                    'success': fnCallback
                });
            },

            "columns": [
                {
                    data: 'user_id'
                },
                {
                    data: 'block_id'
                },
                {
                    data: 'section_id'
                },
                {
                    data: 'location_id'
                },
                {
                    data: 'sublocation_id'
                },
                {
                    data: 'mac_address'
                },
                {
                    data: 'asset_id'
                },
                {
                    data: 'created_at'
                },
                {
                    data: 'company_id'
                },
                {
                    data: 'division_id'
                },
            ],

            "pageLength": 25,
            "order": [
                [0, "desc"]
            ],
        });


        $(document.body).on('click', "#gobutton", function(e) {
            e.preventDefault();
            var filter = $("#userTrackingReportForm").serialize();
            var filter_label = '';
            var comma = '';
            $("#userTrackingReportForm select, #userTrackingReportForm input").each(function() {
                if ($(this).val() != '' || $(this).val() != null) {
                    filter_label += comma + ' ' + $('#' + $(this).attr('id') + ' :selected')
                        .text();
                    comma = ',';
                }
            });
            $('#full_listings .search_bar').find("." + $(this).attr('id')).prop('disabled', true);
            oTable.api().draw();
        });
    });
</script>

<style type="text/css">
    .header {
        background: #3c8dbc;
        color: white;
    }
</style>