@extends('dashboard.dashboard_layouts.dashboard_master')

@section('admin_dashboard_title')
Poll analytic
@endsection

@section('admin_dashboard_css')
<script src="https://www.google.com/jsapi"></script>
    <style>
        .pie-chart {
            width: 600px;
            height: 400px;
            margin: 0 auto;
        }
        .text-center{
            text-align: center;
        }
    </style>
@endsection

@section('admin_dashboard_content')

<!-- breadcrumb -->
<div class="breadcrumb-header justify-content-between">
    <nav class="breadcrumb-4 p-2 px-3">
        <ol class="breadcrumb breadcrumb-style1">
            <li class="breadcrumb-item">
                <a href="{{ route('dashboard') }}">Dashboard</a>
            </li>
            <li class="breadcrumb-item">
                <a href="/poll/detail/{{$polling_id}}">{{ucwords($PollingQuestion->polling_list->polling_name)}}</a>
            </li>
            <li class="breadcrumb-item active">Polling Analytics</li>
        </ol>

    </nav>
</div>
<!-- breadcrumb -->


<!-- row -->
<div class="row row-sm" id="divdata">
    <div class="col-sm-8">
        <h2>Question: {{ucwords($PollingQuestion->question)}}</h2>
        <input type="hidden" value="{{$PollingQuestion->question}}" id="question_name">
        <input type="hidden" value="{{$PollingQuestion->created_at->format('M d, Y')}}" id="question_date">
        <input type="hidden" value="{{$PollingQuestion->polling_list->polling_name}}" id="polling_name">
        <input type="hidden" value="{{$polling_id}}" id="polling_id">
        <input type="hidden" value="{{$question_id}}" id="question_id">

    </div>
    @if(count($value_array) > 0)
    <div class="col-sm-4 text-end">
    <button class="btn custom-button mb-1" id="pdfDownload"> <i class=" fa fa-spinner fa-spin fa-pulse" style="display:none"></i>  Download PDF</button>

    </div>
    @endif

    <div class="col-lg-7">
        <div class="card">
            <div class="card-header bg-transparent pd-b-0 pd-t-20 bd-b-0">
                <div class="d-flex justify-content-between">
                    <h4 class="card-title mb-0">Count wise stats
                    </h4>

                </div>
            </div>
            @if(count($value_array) > 0)
            <div class="card-body">
                <div class="total-revenue">
                    @if($PollingQuestion->input == "ranking")
                        @foreach($name_of_responce_values as $key => $response)
                        <div>
                            <h4>{{ (isset($top_rating_array[$response])) ? $top_rating_array[$response] : 0 }}</h4>
                            <label><span class="bg-primary"></span>{{ucwords($response)}}</label>
                        </div>
                        @endforeach
                    @else
                        @foreach($name_of_responce_values as $key => $response)
                            <div>
                                <h4>{{$value_array[$key]}}</h4>
                                <label><span class="bg-primary"></span>{{ucwords($response)}}</label>
                            </div>
                        @endforeach
                    @endif

                </div>

                <a href="" id="downloadfile" fileName=""></a>
                <div id="bar-here" class="sales-bar mt-4"></div>

            </div>
            @else
            <div class="card-body">
                <div class="sales-bar mt-4 text-danger" style=" text-align: center;">No Poll Question Submited!</div>
            </div>
            @endif

        </div>

    </div>
    <div class="col-lg-5">
        <div class="card">
            <div class="card-body">
                <div class="main-content-label mg-b-5">
                </div>
                <h4 class="card-title mb-0">Percentage wise stats</h4>

                @if(count($value_array) > 0)
                <div class="ht-200 ht-sm-300" id="chartDiv" ></div>
                @else
                    <div class="ht-200 text-danger" style="margin-top: 18px; text-align: center;">No Poll Question Submited!</div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection

@section('admin_dashboard_script')
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

<script>
    $(document).ready(function (e) {
        var chart_1 = null;
        var chart_2 = null;

        //first bar chart start
        var options = {
            series: [{
                data: ,
            }],
            chart: {
                type: 'bar',
                height: 350,
                /////////////
            },
            plotOptions: {
                bar: {
                    borderRadius: 4,
                    horizontal: true,
                }
            },
            dataLabels: {
                enabled: false
            },
            xaxis: {
                categories: null            }
        };

        var chart = new ApexCharts(document.querySelector("#bar-here"), options);
        chart.render().then(() => {
            window.setTimeout(function() {
                chart.dataURI().then(({ imgURI, blob }) => {
                    chart_1 = imgURI;
                })
            }, 2000)
        });
        //first bar chart end


        // apex cahrt 2 start
        var optionss = {
            series: ,
            chart: {
                width: 380,
                type: 'pie',
            },
            labels: null,
            dataLabels: {
                style: {
                fontSize: '14px',
                textAlign: 'center',
                textAnchor: 'middle'
                },
                offsetX: 0,
                offsetY: 0
            }
        };

        var chart2 = new ApexCharts(document.querySelector("#chartDiv"), optionss);
        chart2.render().then(() => {
            window.setTimeout(function() {
                chart2.dataURI().then(({ imgURI, blob }) => {
                    chart_2 = imgURI;
                })
            }, 2000)
        });
        // apex cahrt 2 ends

        $(document).on('click','#downloadfile',function (e){
            e.preventDefault();  //stop the browser from following
            var fileUrl = $(this).attr('href');

            fetch(fileUrl)
                .then(resp => resp.blob())
                .then(blob => {
                    const url = window.URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.style.display = 'none';
                    a.href = url;
                    // the filename you want
                    a.download = $(this).attr('fileName');
                    document.body.appendChild(a);
                    a.click();
                    window.URL.revokeObjectURL(url);
                    deleteFile()
                })
        });

        function deleteFile(){
            var file=$("#downloadfile").attr('fileName');
            $.ajax({
                url: '/api/poll/delete/file/',
                type: "post",
                data:{file:file},
                dataType: "JSON",
                success: function (response) {
                    console.log(response)
                },
                error: function (error) {

                },
                async: false
            });
        }

        // Generate PDF
        $(document).on('click','#pdfDownload',function(e){

            var question= $("#question_name").val();
            var pollingname=$("#polling_name").val();
            var question_date=$("#question_date").val();
            var polling_id= $("#polling_id").val();
            var question_id= $("#question_id").val();

            $.ajax({
                url: "/api/poll/Genereate/Pdf",
                type: "POST",
                data:{
                    chart1: chart_1,
                    chart2: chart_2,
                    question:question,
                    pollingname:pollingname,
                    question_date:question_date,
                    question_id:question_id,
                    polling_id:polling_id
                },
                dataType: "json",
                beforeSend: function() {
                    $("#pdfDownload").attr('disabled', true);
                    $(".fa-spin").css('display', 'inline-block');
                },
                complete: function() {
                    $("#pdfDownload").attr('disabled', false);
                    $(".fa-spin").css('display', 'none');
                },
                success: function(response) {
                    if(response["status"]=="success"){
                        $("#downloadfile").attr('href','{{ $appUrl }}'+response["filename"]);
                        $("#downloadfile").attr('fileName',response['filename']);
                        $("#downloadfile").click();
                    }
                },
                error: function(error){
                    console.log(error)
                }
            });

        });

    });
</script>
@endsection