@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 IPR</h1>
            </div>
            <div class="col-auto">
                @if($ipr)
                    <a href="{{ route('modules.app-management.report.export', ['ipr_id' => $ipr->id ,'type' => 'xlsx']) }}">
                        <i class="fa fa-file-pdf-o fa-2x" aria-hidden="true"></i>
                        Download report in Excel
                    </a>
                @endif
            </div>
        </div>
    </section>

    <section class="">

        <div class="row">
            <div class="col-lg-7 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="ipr_id" id="ipr_id" class="form-control">
                                <option value="">CHOOSE IPR</option>
                                @foreach(get_ipr(['id', 'display_name']) as $row)
                                    <option {{ set_selected($row->id, request('ipr_id')) }} value="{{ $row->id }}">{{ $row->display_name }}</option>
                                @endforeach
                            </select>
                            <select class="form-control" name="status" id="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>

        <div class="mb-3" id="dashboardContent">

        @if($ipr)
                <div class="row">
                    <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>

                @include('chart.demographic_ipr')

                @push('scripts')
                    <script>
                        var chart1 = new ApexCharts(document.querySelector("#chart1"), {
                            title: {
                                text: '{{ $ipr->display_name }}'
                            },
                            series: [{
                                name: '',
                                data: {!! $topStatusIPR->pluck('total')->toJson() !!}
                            }],
                            chart: {
                                type: 'bar',
                                height: 300
                            },
                            plotOptions: {
                                bar: {
                                    horizontal: true,
                                }
                            },
                            dataLabels: {
                                enabled: false
                            },
                            xaxis: {
                                categories: {!! $topStatusIPR->pluck('label')->toJson() !!},
                            }
                        });
                        chart1.render();

                        var chart = new ApexCharts(document.querySelector("#chart2"), {
                            series: {!! $topStatusIPR->pluck('total')->toJson() !!},
                            labels: {!! $topStatusIPR->pluck('label')->toJson() !!},
                            chart: {
                                type: 'pie',
                                height: 330
                            },
                            legend: {
                                show: true,
                                position: 'left',
                            }
                        });
                        chart.render();
                    </script>
                @endpush
        @else
            <div class="alert alert-info" role="alert">
                Please choose IPR and search to show chart
            </div>
        @endif

        </div>

    </section>

@endsection

@push('styles')
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <style>.ct-label {font-size: 15px;}</style>
@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('');
            });
        });

        $('#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