@extends('owner.layouts.master')
@push('stylesheets')
    <link rel="stylesheet" href="/vendor/jquery-ui-1.12.1/jquery-ui.css">
@endpush
@section('page_title', __('admin.:name List' , ['name' =>  __('admin.Customer Analytics')]))

@section('page_heading', __('admin.:name List' , ['name' =>  __('admin.Customer Analytics')]))

@section('page_text', __('admin.Manage list of :name' , ['name' =>  __('admin.Customers')]))

@section('content')

    <div class="row">


        <div class="col-md-2">
            <div class="card-body">
                <h5 class="card-title">@lang('admin.Filters')</h5>
                <div class="form-check">
                    <input type="checkbox" class="form-check-input" id="status" onchange="setStatus() ; filter()">
                    <label class="form-check-label" for="status">@lang('admin.Inactive Only')</label>
                </div>
            </div>
        </div>

        <div class="col-md-4">

            <div class="card-body">
                <h5 class="card-title">@lang('admin.Filter By Login Date')</h5>
                <button class="btn btn-primary" id="reportrange" class="betweendates" onclick="setDates()">
                    <i class="fa fa-calendar pr-1"></i>
                    <span id="date">@lang('admin.Select Time Filter')</span>
                    <i class="fa pl-1 fa-caret-down"></i>
                </button>
                <button class="btn btn-primary" onclick="filter()">@lang('admin.Filter by Date')</button>
            </div>
        </div>


    </div>


    <div class="main-card mb-3 card">
        <div class="card-body" id="display_data">


            @include('owner.customer_analytics.paginated_data')


        </div>

    </div>
    @push('script')
    <script type="text/javascript" src="{{ asset('assets\js\datatables.js') }}"></script>
        <script src="/vendor/jquery-ui-1.12.1/jquery-ui.js"></script>

        <script type="text/javascript">
            let property = null;
            let status = 0;
            let dates = null;

            function setProperty() {
                property = document.getElementById("property").value;

            }

            function setStatus() {
                if (document.getElementById("status").checked == true) {
                    status = 1;
                } else {
                    status = 0;
                }
            }

            function setDates() {
                $("#date").on('DOMSubtreeModified', function () {
                    dates = document.getElementById("date").innerHTML;

                });
            }

            function filter() {
                let _token = $("input[name=_token]").val();
                $.ajax({
                    url: "{{ route('owner.customeranalytics.fetch') }}",
                    method: "POST",
                    data: {
                        _token: _token,
                        property: property,
                        status: status,
                        dates: dates,
                    },
                    success: function (data) {
                        $('#display_data').html(data);
                        $('#myTable').DataTable();
                    }
                });
            }

            function exportData() {
                let _token = $("input[name=_token]").val();
                $.ajax({

                    url: "{{ route('owner.customeranalytics.export-csv') }}",
                    method: "POST",
                    data: {
                        _token: _token,
                        property: property,
                        status: status,
                        dates: dates,
                    },

                    success: function (data) {
                        // Downloads the filtered data
                        let blob = new Blob([data]);
                        let link = document.createElement('a');
                        link.href = window.URL.createObjectURL(blob);
                        link.download = "report.csv";
                        link.click();
                    }

                });
            }

            function reset() {
                dates = null;
                property = null;
                status = null;
                filter();
            }

            function updateCurrentProfiles(data) {
                objectData = data;
            }

            $(document).ready(function () {

                $('#myTable').DataTable();

                function fetch_data(page) {
                    let _token = $("input[name=_token]").val();
                    $.ajax({
                        url: "{{ route('owner.customeranalytics.fetch') }}",
                        method: "POST",
                        data: {
                            _token: _token,
                            page: page,
                            property: property,
                            status: status,
                            dates: dates,
                        },
                        success: function (data) {
                            $('#display_data').html(data);
                        }
                    });
                }


            });
            // Export to CSV
            function download_table_as_csv(table_id) {
                // Select rows from table_id
                let rows = document.querySelectorAll('table#' + table_id + ' tr');
                // Construct csv
                let csv = [];
                for (let i = 0; i < rows.length; i++) {
                    let row = [], cols = rows[i].querySelectorAll('td, th');
                    for (let j = 0; j < cols.length; j++) {
                        // Clean innertext to remove multiple spaces and jumpline (break csv)
                        let data = cols[j].innerText.replace(/(\r\n|\n|\r)/gm, '').replace(/(\s\s)/gm, ' ')
                        // Escape double-quote with double-double-quote (see https://stackoverflow.com/questions/17808511/properly-escape-a-double-quote-in-csv)
                        data = data.replace(/"/g, '""');
                        // Push escaped string
                        row.push('"' + data + '"');
                    }
                    csv.push(row.join(','));
                }
                let csv_string = csv.join('\n');
                // Download it
                let filename = 'export_' + table_id + '_' + new Date().toLocaleDateString() + '.csv';
                let link = document.createElement('a');
                link.style.display = 'none';
                link.setAttribute('target', '_blank');
                link.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(csv_string));
                link.setAttribute('download', filename);
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            }
        </script>
    @endpush
@endsection