@extends('admin.layout.master')
@section('statistics', 'active')
@section('contant')
@php use Carbon\Carbon; @endphp
    <div class="content-body">
        <!-- Line Chart -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Simple Line Chart</h4>
                        <a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
                        <div class="heading-elements">
                            <ul class="list-inline mb-0">
                                <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                                <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                                <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                                <li><a data-action="close"><i class="ft-x"></i></a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-content collapse show">
                        <div class="card-body">
                            <div id="line-chart"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{-- column chart  --}}
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        {{-- <h4 class="card-title">Column Chart</h4> --}}
                        <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                        <div class="heading-elements">
                            <ul class="list-inline mb-0">
                                <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                                <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                                <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                                <li><a data-action="close"><i class="ft-x"></i></a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-content collapse show">
                        <div class="card-body">
                            <canvas id="column-chart" height="400"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{-- column chart  --}}
        <div class="row mb-2">
            <div class="col-md-12">
                <select id="dayselect" name="dayselect" class="form-control border-info">
                    <option value="120" selected>Select</option>
                    <option value="30">Last 30 Days</option>
                    <option value="20">Last 20 Days</option>
                    <option value="10">Last 10 Days</option>
                </select>
            </div>
        </div>
        <div class="row mb-2">
            <div class="col-md-3">
                <h4 class="d-inline font-weight-bold">Handicap Score</h4>
                <div class="badge badge-info">
                    @php
                        if (!empty($all_problems) && $all_problems->where('status','!=','pending')->count() > 0) {
                            $Accuracy = number_format(($all_problems->where('status', 'correct')->count() * 100) / $all_problems->where('status','!=','pending')->count(),2);
                        } else {
                            $Accuracy = 0;
                        }
                    @endphp
                    @php
                        $level = $all_handicap
                            ->where('bottom_range', '<=', $Accuracy)
                            ->where('top_range', '>', $Accuracy)
                            ->first();
                    @endphp
                    @if ($level)
                        {{ $level->title }}
                    @else
                        Not Available
                    @endif
                </div>
            </div>
            <div class="offset-md-2 col-md-3">
                <h4 class="d-inline">Accuracy</h4>
                <div class="badge badge-info">
                    @php
                        if (!empty($all_problems) && $all_problems->where('status','!=','pending')->count() > 0) {
                            $Accuracy = number_format(($all_problems->where('status', 'correct')->count() * 100) / $all_problems->where('status','!=','pending')->count(),2);
                        } else {
                            $Accuracy = 0;
                        }
                    @endphp

                    {{ $Accuracy . '%' }}
                </div>
            </div>
            <div class="offset-md-1 col-md-3">
                <h4 class="d-inline">Answers</h4>
                <div class="badge badge-info">
                    {{ $all_problems->count() }}
                </div>
            </div>
        </div>
        {{-- handicap level --}}
        <section class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-head">
                        <div class="card-header">
                            <h4 class="card-title">Handicap levels</h4>
                            <a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
                            {{-- <div class="heading-elements">
                                <a href="/admin/createUser" class="btn btn-info text-white btn-sm" type="button"><i
                                        class="ft-plus white"></i></a>
                            </div> --}}
                        </div>
                    </div>
                    <div class="card-content">
                        <div class="card-body">
                            <!-- Task List table -->
                            <div class="table-responsive">
                                <table id="handicap-level"
                                    class="table table-white-space table-bordered row-grouping display no-wrap icheck table-middle">
                                    <thead>
                                        <tr>
                                            <th>Level</th>
                                            <th>Accuracy</th>
                                            <th>User</th>
                                            {{-- <th># 30d</th> --}}
                                            <th>$ 30d</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($all_handicap as $item)
                                            @php
                                                $rangeStart = $item->bottom_range;
                                                $rangeEnd = $item->top_range;
                                                $filtered_events = array_filter($per_arr, function ($var) use ($rangeStart, $rangeEnd) {
                                                    $evtime = $var['percentage'];
                                                    return $evtime <= $rangeEnd && $evtime >= $rangeStart;
                                                });
                                                // dd($filtered_events);
                                            @endphp

                                            <tr>
                                                <td class="font-weight-bold text-info">{{ $item->title }}</td>
                                                <td>{{ $item->bottom_range . '%' }} - {{ $item->top_range . '%' }}</td>
                                                <td>{{ count($filtered_events) }}</td>
                                                <td>{{ $item->monthly_income }}$</td>
                                                {{-- <td>{{$item->monthly_income / 100 * 10}}</td> --}}
                                            </tr>
                                        @endforeach
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <th>Level</th>
                                            <th>Accuracy</th>
                                            <th>User</th>
                                            <th>$ 30d</th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        {{-- handicap level --}}

        <section class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-head">
                        <div class="card-header">
                            <h4 class="card-title">All Question Answer Count</h4>
                            <a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
                            {{-- <div class="heading-elements">
                                <a href="/admin/createUser" class="btn btn-info text-white btn-sm" type="button"><i
                                        class="ft-plus white"></i></a>
                            </div> --}}
                        </div>
                    </div>
                    <div class="card-content">
                        <div class="card-body">
                            <!-- Task List table -->
                            <div class="table-responsive">
                                <table id="donation-history"
                                    class="table table-white-space table-bordered row-grouping display no-wrap icheck table-middle">
                                    <thead>
                                        <tr>
                                            <th>Creaded Date</th>
                                            <th>Title</th>
                                            <th>#Votes</th>
                                            <th>A#1</th>
                                            <th>A#2</th>
                                             {{-- <th>A#3</th>
                                            <th>A#4</th>
                                             <th>A#5</th>
                                            <th>A#6</th>
                                             <th>A#7</th>
                                            <th>A#8</th> --}}
                                            <th>Status</th>
                                            <th>%Complete</th>
                                            {{-- <th></th> --}}
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($mcq_anwser_count as $mcq_anwser_item)
                                            {{-- @foreach ($item->problemResult as $date)  --}}
                                            <tr>
                                                <td class="font-weight-bold text-info">
                                                    {{$mcq_anwser_item->created_at}}
                                                </td>
                                                <td class="font-weight-bold text-info">

                                                    {{ $mcq_anwser_item->title }} <br>

                                                </td>
                                                <td>
                                                    {{ $mcq_anwser_item->problemResult->count() }}
                                                </td>
                                                <td>
                                                        {{$mcq_anwser_item->problemResult->where('answer_number',1)->count()}}
                                                </td>
                                                <td>
                                                    {{$mcq_anwser_item->problemResult->where('answer_number',2)->count()}}

                                                </td>
                                                {{-- <td>
                                                    {{$mcq_anwser_item->problemResult->where('answer_number',3)->count()}}
                                                </td>
                                                <td>
                                                    {{$mcq_anwser_item->problemResult->where('answer_number',4)->count()}}

                                                </td>
                                                    <td>
                                                    {{$mcq_anwser_item->problemResult->where('answer_number',5)->count()}}
                                                </td>
                                                <td>
                                                    {{$mcq_anwser_item->problemResult->where('answer_number',6)->count()}}

                                                </td>
                                                    <td>
                                                    {{$mcq_anwser_item->problemResult->where('answer_number',7)->count()}}
                                                </td>
                                                <td>
                                                    {{$mcq_anwser_item->problemResult->where('answer_number',8)->count()}}

                                                </td> --}}
                                                <td>
                                                    {{-- @if($mcq_anwser_item->problemResult->count() >= $mcq_anwser_item->max_total || $mcq_anwser_item->end_date <= Carbon::now() || $mcq_anwser_item->is_active=='0')
                                                        Closed
                                                    @else
                                                        Opened  
                                                    @endif --}}

                                                     @if($mcq_anwser_item->is_active=='0' || $mcq_anwser_item->end_date <= Carbon::now())
                                                        Closed
                                                    @else
                                                        Opened  
                                                    @endif

                                                </td>
                                                <td>
                                                    {{number_format($mcq_anwser_item->problemResult->count() * 100/$mcq_anwser_item->max_total).'%'}}
                                                </td>
                                            </tr>
                                        @endforeach
                                        {{-- @endforeach --}}
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <th>Creaded Date</th>
                                            <th>Title</th>
                                            <th>#Votes</th>
                                            <th>A#1</th>
                                            <th>A#2</th>
                                             {{-- <th>A#3</th>
                                            <th>A#4</th>
                                             <th>A#5</th>
                                            <th>A#6</th>
                                             <th>A#7</th>
                                            <th>A#8</th> --}}
                                            <th>Status</th>
                                            <th>%Complete</th>
                                            {{-- <th></th> --}}
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        {{-- Donation History --}}
        <section class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-head">
                        <div class="card-header">
                            <h4 class="card-title">History</h4>
                            <a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
                            {{-- <div class="heading-elements">
                                <a href="/admin/createUser" class="btn btn-info text-white btn-sm" type="button"><i
                                        class="ft-plus white"></i></a>
                            </div> --}}
                        </div>
                    </div>
                    <div class="card-content">
                        <div class="card-body">
                            <!-- Task List table -->
                            <div class="table-responsive">
                                <table id="donation-history"
                                    class="table table-white-space table-bordered row-grouping display no-wrap icheck table-middle">
                                    <thead>
                                        <tr>
                                            <th>Date</th>
                                            <th>Title</th>
                                            <th>Status</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($all_problems as $item)
                                            {{-- @foreach ($item->problemResult as $date)  --}}
                                            <tr>

                                                <td class="font-weight-bold text-info">

                                                    {{ $item->created_at->format('Y-m-d') }} <br>

                                                </td>

                                                <td>
                                                    @if (!empty($item->mcqs))
                                                        {{ $item->mcqs->title }}
                                                    @endif
                                                </td>
                                                @if ($item->status == 'correct')
                                                    <td class="text-success">{{ $item->status }}</td>
                                                @else
                                                    <td class="text-danger">{{ $item->status }}</td>
                                                @endif
                                                <td><a href="{{ route('admin.historydetail', ['id' => $item->id]) }}"
                                                        class="btn btn-info">Details</a>
                                                </td>
                                            </tr>
                                        @endforeach
                                        {{-- @endforeach --}}
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <th>Date</th>
                                            <th>Title</th>
                                            <th>Status</th>
                                            <th></th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        {{-- Donation History --}}

        <!--Display None -->
        <div class="row match-height d-none">
            <div class="col-xl-8 col-lg-12">
                <div class="card">
                    <div class="card-content ">
                        <div id="cost-revenue" class="height-250 position-relative"></div>
                    </div>
                    <div class="card-footer">
                        <div class="row mt-1">
                            <div class="col-3 text-center">
                                <h6 class="text-muted">Total Products</h6>
                                <h2 class="block font-weight-normal">18.6 k</h2>
                                <div class="progress progress-sm mt-1 mb-0 box-shadow-2">
                                    <div class="progress-bar bg-gradient-x-info" role="progressbar" style="width: 70%"
                                        aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                            </div>
                            <div class="col-3 text-center">
                                <h6 class="text-muted">Total Sales</h6>
                                <h2 class="block font-weight-normal">64.54 M</h2>
                                <div class="progress progress-sm mt-1 mb-0 box-shadow-2">
                                    <div class="progress-bar bg-gradient-x-warning" role="progressbar" style="width: 60%"
                                        aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                            </div>
                            <div class="col-3 text-center">
                                <h6 class="text-muted">Total Cost</h6>
                                <h2 class="block font-weight-normal">24.38 B</h2>
                                <div class="progress progress-sm mt-1 mb-0 box-shadow-2">
                                    <div class="progress-bar bg-gradient-x-danger" role="progressbar" style="width: 40%"
                                        aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                            </div>
                            <div class="col-3 text-center">
                                <h6 class="text-muted">Total Revenue</h6>
                                <h2 class="block font-weight-normal">36.72 M</h2>
                                <div class="progress progress-sm mt-1 mb-0 box-shadow-2">
                                    <div class="progress-bar bg-gradient-x-success" role="progressbar" style="width: 90%"
                                        aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-4 col-lg-12">
                <div class="card">
                    <div class="card-content">
                        <div class="card-body sales-growth-chart">
                            <div id="monthly-sales" class="height-250"></div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <div class="chart-title mb-1 text-center">
                            <h6>Total monthly Sales.</h6>
                        </div>
                        <div class="chart-stats text-center">
                            <a href="#" class="btn btn-sm btn-danger box-shadow-2 mr-1">Statistics <i
                                    class="ft-bar-chart"></i></a>
                            <span class="text-muted">for the last year.</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--Display None -->
    </div>
@endsection
@push('script')
    <script>
         $(document).ready(function() {

            var lineChart = c3.generate({
                bindto: '#line-chart',
                size: { height: 400 },
                point: {
                    r: 4
                },
                color: {
                    pattern: ['#673AB7', '#E91E63']
                },
                data: {
                    
                    columns: [
                    //  ['data1', 30, 200, 100, 400, 150, 250],
                      ['data2', 50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50]
                    ]
                },
                grid: {
                    y: {
                        show: true,
                        stroke: '#ff0'
                    }
                }
            });


            $(".menu-toggle").on('click', function() {
                lineChart.resize();
            });
            function linegraph(per_arr){
                var data={columns:per_arr};
                lineChart.load(data); 
                 /*lineChart.load({
                    
                    columns: [
                        ['data1',10,20,30,40,99,100,50,60,70,85,80,65]
                    ]
                 }); 
                 */
            }
            $.ajax({
                //url:'delete-estimate/'+id,
                url: "{{ url('admin/statisticGraph') }}",
                type: 'GET',
                success: function(response) {
                    linegraph(response.per_arr)
                    //statisticGraph(response.day_arr, response.per_arr)
                    //console.log(response);
                    //$('#ownerid'+id).remove();
                }

            });
        });
       /* function statisticGraph(days, percentage) {
            //Get the context of the Chart canvas element we want to select
            var ctx = $("#column-chart");

            // Chart Options
            var chartOptions = {
                // Elements options apply to all of the options unless overridden in a dataset
                // In this case, we are setting the border of each bar to be 2px wide and green
                elements: {
                    rectangle: {
                        borderWidth: 2,
                        borderColor: 'rgb(0, 255, 0)',
                        borderSkipped: 'bottom'
                    }
                },
                responsive: true,
                maintainAspectRatio: false,
                responsiveAnimationDuration: 500,
                legend: {
                    position: 'top',
                },
                scales: {
                    xAxes: [{
                        display: true,
                        gridLines: {
                            color: "#f3f3f3",
                            drawTicks: false,
                        },
                        scaleLabel: {
                            display: true,
                        }
                    }],
                    yAxes: [{
                        display: true,
                        gridLines: {
                            color: "#f3f3f3",
                            drawTicks: false,
                        },
                        scaleLabel: {
                            display: true,
                        }
                    }]
                },
                title: {
                    display: true,
                    text: 'Chart.js Bar Chart'
                }
            };

            // Chart Data
            var chartData = {
                labels: days,
                datasets: [{
                    label: "My First dataset",
                    data: percentage,
                    backgroundColor: "#1E9FF2",
                    hoverBackgroundColor: "rgba(22,211,154,.9)",
                    borderColor: "transparent"
                }]
            };

            var config = {
                type: 'bar',

                // Chart Options
                options: chartOptions,

                data: chartData
            };

            // Create the chart
            var lineChart = new Chart(ctx, config);
        }
        $(document).ready(function() {


            $.ajax({
                //url:'delete-estimate/'+id,
                url: "{{ url('admin/statisticGraph') }}",
                type: 'GET',
                success: function(response) {
                    statisticGraph(response.day_arr, response.per_arr)
                    //console.log(response);
                    //$('#ownerid'+id).remove();
                }

            });

            $(document).on("change", "#dayselect", function() {
                note = $(this).val();

                $.ajax({
                    //url:'delete-estimate/'+id,
                    url: "{{ url('admin/statisticGraphfilter') }}/" + note,
                    type: 'GET',
                    success: function(response) {
                        statisticGraph(response.day_arr, response.per_arr)
                        //console.log(response);
                        //$('#ownerid'+id).remove();
                    }

                });

            });
        });*/
    </script>
@endpush