@extends('layouts.app')

@section('content')
    <link rel="stylesheet" type="text/css" href="{{ asset('enadmin/css/chartist-plugin-tooltip.css') }}" />
    <style type="text/css">
        .section-title a {
            font-size: 30px;
            margin: 0 10px;
        }

        .section-title a.disabled{
            color: lightgrey;
            pointer-events: none;
        }
    </style>

    <section class="page-header row">
        <h2> Analytics Summary Report </h2>
        <ol class="breadcrumb">
            <li><a href="{{ url('') }}"> Dashboard </a></li>
            <li class="active"> Analytics Summary Report </li>
        </ol>
    </section>

    <div class="page-content row">
        <div class="page-content-wrapper no-margin">
            <div class="sbox">
                <div class="sbox-content">
                    <form id="reportForm" action="{{ route('analytics.summary_report') }}" method="GET">
                        <div class="row">
                            <div class="col-md-2">
                                <label for="range"> Range </label>
                                <br>
                                <input type="text" name="range" id="range" placeholder="Select Range" required>
                            </div>

                            <div class="col-md-2" style="width: 20%">
                                <label for="country"> Country </label>
                                <br>
                                <select name="country" id="country" class="select2">
                                    <option value="">Select Country</option>
                                </select>
                            </div>

                            <div class="col-md-2">
                                <label for="user_type"> User Type </label>
                                <br>
                                <select name="user_type" id="user_type" class="select2">
                                    @foreach(\App\Utils\AnalyticsReportUserTypes::getTypesWithNames() as $userType => $userTypeName)
                                        <option value="{{ $userType }}" @if(isset($selectedUserType) && $selectedUserType == $userType) selected @endif>
                                            {{ $userTypeName }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            
                            <button type="submit" class="btn btn-primary m">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        @if ($reportData)
            <div class="page-content-wrapper no-margin">
                <div class="sbox">
                    <div class="sbox-content">
                        <div id="summary_report_data" class="ct-chart ct-major-twelfth"></div>
                    </div>
                </div>
            </div>
        @endif
    </div>

    <script type="text/javascript" src="{{ asset('enadmin/js/plugins/chartist-plugin-tooltip.min.js') }}"></script>
    <script type="text/javascript">
        moment.updateLocale('en', {
            week: {
                dow : 6 // Make Start of Week Saturday
            }
        });

        $('#range').daterangepicker({
            @if(isset($selectedStartDate) && isset($selectedEndDate))
                    startDate: '{{ $selectedStartDate }}',
                    endDate: '{{ $selectedEndDate }}',
            @endif
            showDropdowns: true,
            showCustomRangeLabel: true,
            alwaysShowCalendars: true,
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'Last Week': [moment().subtract(1, 'week').startOf('week'), moment().subtract(1, 'week').endOf('week')],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                'Last Year': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')]
            },
            locale: {
                format: 'YYYY/MM/DD'
            }
        });

        $('#country').select2({
            data: <?php echo json_encode($countries) ?>,
            allowClear: true,
            placeholder: 'Select Country'
        });

        @if (isset($selectedCountry) && $selectedCountry)
            $('#country').val('{{ $selectedCountry }}');
        @endif

        @if ($reportData)
        new Chartist.Bar('#summary_report_data', {
            labels:  <?php echo json_encode(array_keys($reportData))?> ,
            series: [
                <?php echo json_encode(array_values($reportData))?>
            ]
        }, {
            plugins: [
                Chartist.plugins.tooltip()
            ],
        }, {
            stackBars: true,
            axisY: {
                labelInterpolationFnc: function (value) {
                    return value;
                }
            }
        }).on('draw', function(data) {
            if(data.type === 'bar') {
                data.element.attr({
                    style: 'stroke-width: 30px'
                });
            }
        });
        @endif
    </script>
@stop