@extends('admin.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('page_breadcrumb_icon') <i class="ki-duotone ki-home fs-3 text-gray-500 me-n1"></i> @endsection

@section('page_breadcrumb_item', 'Customer Analytics')

@section('page_breadcrumb_item2', 'Customer Analytics')

@section('content')

    <div class="row">

        <div class="col-md-6">
            <div class="card-body">
                <h5 class="card-title">@lang('admin.Filter by Property')</h5>
                <select name="property" id="property"
                        class="form-select  multiselect-dropdown" data-control ="select2"
                        onchange="setProperty() ; filter()">
                    <option selected>@lang('admin.Select Property')</option>
                    @foreach ($properties as $property)
                        <option value="{{$property->id}}">{{ $property->name }}</option>
                    @endforeach
                </select>
            </div>
        </div>


        <div class="col-md-2">
            <div class="card-body">
                <h5 class="card-title">@lang('admin.Other 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('admin.customer_analytics.paginated_data')
        </div>

    </div>
    @push('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('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('admin.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('customeranalytics.fetch') }}",
                        method: "POST",
                        data: {
                            _token: _token,
                            page: page,
                            property: property,
                            status: status,
                            dates: dates,
                        },
                        success: function (data) {
                            $('#display_data').html(data);
                        }
                    });
                }
            });
        </script>
    @endpush

@endsection