@extends('layouts.app')

@section('title', 'Home')
@section('home', 'm-menu__item--active')

@push('styles')
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
@endpush

@section('content')
    <section class="content-header mb-4">
        <div class="row">
            <div class="col">
                <h1>Report by cluster</h1>
            </div>
            <div class="col-auto">
                <a href="{{ route('modules.app-management.report.export-cluster', ['cluster_id' => request('cluster_id') ,'type' => 'xlsx']) }}">
                    <i class="fa fa-file-pdf-o fa-2x" aria-hidden="true"></i>
                    Download report in Excel
                </a>
            </div>
        </div>
    </section>

    <section class="">

        <div class="row">
            <div class="col-lg-5 col-md-12">
                <form action="" method="GET">
                    <div class="input-group">
                        <div class="input-group mb-3">
                            <input id="daterange" class="form-control" type="text" name="daterange" value="{{ request('daterange') }}" placeholder="Select date range" style="height: 100%;">
                            <select name="cluster_id" id="cluster_id" class="form-control" style="min-width: 180px;">
                                <option value="">CHOOSE CLUSTER</option>
                                @foreach(get_cluster(['id', 'display_name']) as $row)
                                    <option {{ set_selected($row->id, request('cluster_id')) }} value="{{ $row->id }}">{{ $row->display_name }}</option>
                                @endforeach
                            </select>
                            <select class="form-control" name="status">
                                <option value="">ALL STATUS</option>
                                <option {{ set_selected('0', request('status')) }} value="0">PROCESSING</option>
                                <option {{ set_selected('1', request('status')) }} value="1">ON REVIEW</option>
                                <option {{ set_selected('2', request('status')) }} value="2">APPROVED</option>
                                <option {{ set_selected('3', request('status')) }} value="3">REJECTED</option>
                            </select>
                            <div class="input-group-append">
                                <button class="btn btn-success" type="submit">Search</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        @include('chart.demographic')

        <div class="row" id="dashboardContent">
            <div class="col-md-6">
                <div class="card card-body">
                    <div id="chart1"></div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card card-body">
                    <div id="chart2"></div>
                </div>
            </div>
        </div>

    </section>

@endsection

@push('styles')
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
@endpush

@push('cdn_script')
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js" integrity="sha256-c9vxcXyAG4paArQG3xk6DjyW/9aHxai2ef9RpMWO44A=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js" integrity="sha256-gJWdmuCRBovJMD9D/TVdo4TIK8u5Sti11764sZT1DhI=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <script>
        $(function() {
            $('#daterange').daterangepicker({
                opens: 'left',
                timePicker: true,
                autoUpdateInput: false,
                locale: {
                    format: 'YYYY-MM-DD HH:mm:ss',
                    cancelLabel: 'Clear',
                }
            }, function(start, end, label) {
                console.log("A new date selection was made: " + start.format('YYYY-MM-DD HH:mm:ss') + ' to ' + end.format('YYYY-MM-DD HH:mm:ss'));
            });

            $('#daterange').on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('YYYY-MM-DD HH:mm:ss') + ' - ' + picker.endDate.format('YYYY-MM-DD HH:mm:ss'));
            });

            $('#daterange').on('cancel.daterangepicker', function(ev, picker) {
                $(this).val('');
            });
        });


        var chart1 = new ApexCharts(document.querySelector("#chart1"), {
            title: {
                text: 'Total Applicant'
            },
            series: [{
                name: '',
                data: {!! $overall->pluck('total')->toJson() !!}
            }],
            chart: {
                type: 'bar',
                height: 300
            },
            dataLabels: {
                enabled: false
            },
            xaxis: {
                categories: {!! $overall->pluck('label')->toJson() !!},
            }
        });
        chart1.render();


        var chart = new ApexCharts(document.querySelector("#chart2"), {
            series: {!! $overall->pluck('total')->toJson() !!},
            labels: {!! $overall->pluck('label')->toJson() !!},
            chart: {
                type: 'pie',
                height: 330
            },
            legend: {
                show: true,
                position: 'left',
            }
        });
        chart.render();


        $('#downloadPDF').click(function () {
            domtoimage.toPng(document.getElementById('dashboardContent'))
                .then(function (blob) {
                    var pdf = new jsPDF('l', 'pt', [$('#dashboardContent').width(), $('#dashboardContent').height()]);
                    pdf.addImage(blob, 'PNG', 0, 0, $('#dashboardContent').width(), $('#dashboardContent').height());
                    pdf.save("dashboard.pdf");
                })
                .catch(function (error) {
                    console.error('oops, something went wrong!', error);
                });;
        });

        function onChangeCluster(event) {
            var req = $.get('/modules/app-management/ipr-list', {cluster_id: event.target.value || ''});
            req.done(function (data) {
                var option = '<option value="">All IPR</option>';
                $.each(data, function (index, value) {
                    option += `<option value="${value.id}">${value.display_name}</option>`;
                });
                $('#ipr_id').html(option);
            })
        }
    </script>
@endpush