@extends('adminlte::page')

@section('title', 'Merchant Analytics')

@section('content')
<style>


    .dataTables_length{
        display: inline-flex;
        width:55%;
    }


    .dt-buttons {
        display: inline-flex;
        width:20%;
    }
</style>
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Merchant Analytics</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Home</a></li>
                    <li class="breadcrumb-item active">Merchant Analytics</li>
                </ol>
            </div>
        </div>
    </div>
</section>

<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header px-1">
                        <div class="col-md-12">
                            <div class="align-items-center">
                                Merchant Analytics
                            </div>
                        </div>
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body">
                        <div class="row">
                            <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
                                <x-adminlte-info-box :iconTheme="'primary'" :class="'border'" :icon="'fas fa-phone-alt'" :title="'Phone Clicks'" :text="$phoneCount" :url="route('admin.users.index')" :urlText="'More Info'"></x-adminlte-info-box>
                            </div>
                            <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
                                <x-adminlte-info-box :iconTheme="'dark'" :class="'border'" :icon="'fas fa-globe'" :title="'Website Clicks'" :text="$webCount" :url="route('admin.users.index')" :urlText="'More Info'"></x-adminlte-info-box>
                            </div>
                            <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
                                <x-adminlte-info-box :iconTheme="'purple'" :class="'border'" :icon="'fab fa-facebook'" :title="'Facebook Clicks'" :text="$facebookCount" :url="route('admin.category.index')" :urlText="'More Info'"></x-adminlte-info-box>
                            </div>
                            {{-- <div class="clearfix visible-sm-block"></div> --}}
                        </div>

                            <div class="col-lg-12 col-md-12 p-0">
                                <div class="input-group">
                                    <div class="input-group-prepend yellow__gradient btn__effect">
                                        <i class="fa fa-calendar input-group-text"></i>
                                    </div>
                                    <div class="form-control" id="dateRangePicker">Over All Analytics</div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="card-body">
                                    <canvas id="myChart" width="400" height="200"></canvas>
                                </div>
                            </div>

                            <div class="row">
                                <div class="table-responsive">
                                    <table id="analytics" class="table table-bordered table-hover" style="width: 100%;">
                                        <thead>
                                            <tr>
                                                <th>Title</th>
                                                <th>Banner Views</th>
                                                <th>Paid Listing Views</th>
                                                <th>Regular Listing Views</th>
                                                <th>Phone Click</th>
                                                <th>Web Click</th>
                                                <th>Facebook Click</th>
                                                <th>Slug</th>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('js')

    <script>
            var myChart = '';
            let url = '{{ route("admin.vendor.ajax.analytics", $userId) }}';
            var startDate = '';
            var endDate = '';

            $(document).ready(function() {

                var start = moment('{{ $OverAllMinDate}}', 'YYYY-MM-DD');
                var end = moment('{{ $OverAllMaxDate}}', 'YYYY-MM-DD');

                function cb(start, end) {

                    if (start._isValid && end._isValid) {
                        if (start.format('YYYY-MM-DD') == '{{ $OverAllMinDate}}' && end.format('YYYY-MM-DD') == '{{ $OverAllMaxDate}}')
                            $('#dateRangePicker').html("Over All Analytics");
                        else
                            $('#dateRangePicker').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
                    } else {
                        $('#dateRangePicker').html("Over All Analytics");
                    }
                }

                $('#dateRangePicker').daterangepicker({
                    startDate: start,
                    endDate: end,
                    autoUpdateInput: false,
                    maxDate: moment(),
                    ranges: {
                        'Today': [moment(), moment()],
                        'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                        'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                        'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                        'This Month': [moment().startOf('month'), moment().endOf('month')],
                        'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],

                    },

                }, cb);

                $('#dateRangePicker').on('apply.daterangepicker', function(ev, picker) {

                    if (picker.startDate._isValid && picker.endDate._isValid) {
                        startDate = picker.startDate.format('YYYY-MM-DD');
                        endDate = picker.endDate.format('YYYY-MM-DD');
                        table.draw( 'page' );
                    }

                    getAnalyticsByListing( startDate, endDate );


                });



                getAnalyticsByListing();
                renderDataTable();
            });

            $(document).on('click', 'td.details-control', function() {
                let tr = $(this).parent('tr');
                let row = table.row(tr);
                let id = tr.attr("data-id");
                let url = "{{ route('admin.vendor.ajax.analytics.users', ':id' )}}"
                url = url.replace(':id', id);

                if(row.child() && row.child.isShown()) {
                    row.child.hide();
                } else if(!row.child()) {

                let Html = ` <table id="analytics-sub-${id}" class="table table-bordered table-hover" style="width: 100%;">
                                        <thead>
                                            <tr>
                                                <th>User Full Name</th>
                                                <th>Phone No</th>
                                                <th>Email</th>
                                                <th>Phone Click</th>
                                                <th>Web Click</th>
                                                <th>Facebook Click</th>
                                                
                                            </tr>
                                        </thead>
                                    </table>`;

                                    row.child($(Html)).show();
                                    table2 =  $('#analytics-sub-'+id+'').DataTable({
                                            processing: true,
                                            serverSide: true,
                                            bDestroy: true,
                                            ajax: {
                                                url : url,
                                                type: 'POST',
                                                data : function(d) {
                                                    return $.extend( {}, d, {
                                                        "_token": '{{ csrf_token() }}'
                                                    });
                                                }
                                            },
                                            columns: [
                                                {data: 'full_name', name: 'full_name'},
                                                {data: 'phone_no', name: 'phone_no'},
                                                {data: 'email', name: 'email'},
                                                {data: 'phone_click', name: 'phone_click'},
                                                {data: 'web_click', name: 'web_click'},
                                                {data: 'facebook_click', name: 'facebook_click'},

                                            ]

                                        });
                } else {
                    row.child.show();
                }

            });

            function getAnalyticsByListing(startDate="",endDate="")
            {
                $.ajax({
                    method: 'POST',
                    url: url,
                    data: { "_token": "{{ csrf_token() }}", "start_date" : startDate, "end_date" : endDate },
                    success: function(data) {


                        if(myChart != '')
                            myChart.destroy();

                        let ctx = document.getElementById('myChart').getContext('2d');
                        myChart = new Chart(ctx, {
                            type: 'bar',
                            data: {
                                labels: data.analytics_title,
                                datasets: [{
                                    label: '# Views',
                                    data: data.analytics_count,

                                    borderWidth: 2,
                                    fill : false
                                }]
                            },
                            options: {
                                scales: {
                                    y: {
                                        beginAtZero: true
                                    }
                                }
                            }
                        });


                    },
                    error: function(error) {
                    }
                });

            }

            function renderDataTable()
            {
                table =  $('#analytics').DataTable({
                    processing: true,
                    serverSide: true,
                    bDestroy: true,
                    ajax: {
                        url : url,
                        type: 'POST',
                        data : function(d) {
                            return $.extend( {}, d, {

                                "_token": '{{ csrf_token() }}',
                                "request_type" : 'data_table',
                                "start_date" : startDate,
                                "end_date" : endDate
                            });
                        }
                    },
                    createdRow: function( row, data, dataIndex ) {
                        $(row).attr( 'data-id', data['id'] );
                        $(row).css('cursor','pointer');
                        $(row).find("td").each(function() {
                            $(this).addClass('details-control')
                        });
                    },
                    // columnDefs: [
                    //     {   "className" : '' },
                    // ],
                    columns: [
                        {data: 'title', name: 'title'},
                        {
                            data: 'banner_views',
                            name: 'banner_views',
                            orderable: false,
                            searchable: false
                        },
                        {
                            data: 'paid_listing_views',
                            name: 'paid_listing_views',
                            orderable: false,
                            searchable: false
                        },
                        {
                            data: 'regular_views',
                            name: 'regular_views',
                            orderable: false,
                            searchable: false
                        },
                        {
                            data: 'phone_click',
                            name: 'phone_click',
                            orderable: false,
                            searchable: false
                        },
                        {
                            data: 'web_click',
                            name: 'web_click',
                            orderable: false,
                            searchable: false
                        },
                        {
                            data: 'facebook_click',
                            name: 'facebook_click',
                            orderable: false,
                            searchable: false
                        },
                        {
                            data: 'slug',
                            name: 'slug',
                            orderable: false,
                            searchable: false
                        },

                    ]
                });
            }
    </script>
@endsection