@extends('base')
@section('content')

    <h3 class="vl-h3 mt-4">Welcome, Muhammad hamza</h3>
    <h1 class="mt-3">Dashboard- Inclusion Analytics</h1>
    <div class="row my-4">
        <div class="col-10 btn-toolbar">
            <div class="position-relative">
                <label class="vl-h3">Currently Viewing</label>
                <select name="project_id" class="btn btn-secondary dropdown-toggle bg-white btn_dropdown project-dropdown-field ms-3" id="dropdownMenuButton1">
                    @if($getProjectById)
                        <option value="" hidden>@foreach($getProjectById as $getProjectByIds) {{$getProjectByIds->project_name}} @endforeach</option>
                    @else
                        <option value="" hidden>Select Project</option>
                    @endif
                    @foreach($getProject as $getProjects)
                        <option id="projects_option" value="{{$getProjects->id}}">{{$getProjects->project_name}}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="col-2 text-end">
            <a href="/new-audit">
                <button class="btn btn-primary vl-btn-small">
                    <span style="font-size: 18px;">+</span> Add New Audit
                </button>
            </a>
        </div>
    </div>
    <h2>Analytics</h2>
    <div class="row px-2">
        <div class="col-8">
            <div class="row">
                <div class="col-6 my-3 px-0">
                    <div class="row  analytics-card p-3 mx-1">
                        <div class="col-8">
                            <p># of Audits Taken</p>
                        </div>
                        <div class="text-center">
                            <div id="slider1" class="rslider mx-auto my-4"></div>
                            <p style="">Score</p>
                        </div>
                        <div class="col-12">
                            <div class="text-end">
                                <a href="/audits"><button class="btn vl-btn">Explore</button></a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-6 my-3 px-0">
                    <div class="row  analytics-card p-3 mx-1">
                        <div class="col-8">
                            <p>Completion Rate</p>
                        </div>
                        <div class="text-center">
                            <div id="slider3" class="rslider mx-auto my-4"></div>
                            <p style="">Score</p>
                        </div>
                        <div class="col-12">
                            <div class="text-end">
                                <a href="/audits"><button class="btn vl-btn explore-btn">Explore</button></a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-6 my-3 px-0">
                    <div class="row  analytics-card p-3 mx-1">
                        <div class="col-8">
                            <p>Learning Engagement</p>
                        </div>
                        <div class="text-center">
                            <div id="slider4" class="rslider mx-auto my-4"></div>
                            <p style="">Score</p>
                        </div>
                        <div class="col-12">
                            <div class="text-end">
                                <a href="/audits"><button class="btn vl-btn explore-btn">Explore</button></a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-6 my-3 px-0">
                    <div class="row  analytics-card p-3 mx-1">
                        <div class="col-8">
                            <p>Issue by tag</p>
                        </div>
                        <div class="text-center">
                            <div id="slider5" class="rslider mx-auto my-4"></div>
                            <p style="">Score</p>
                        </div>
                        <div class="btn-toolbar justify-content-end">
                            <div class="dropdown">
                                <select class="btn btn-secondary dropdown-toggle bg-white btn_dropdown vl-drowdown-field-small" type="button" id="dropdownMenuButtonTag">
                                    @foreach($getTags as $getTag)
                                        <option id="tags_option" value="{{$getTag->id}}">{{$getTag->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-4 my-3">
            <div class="row">
                <div class="row graph-card p-3 mx-1" style="height: 392px;">
                    <div class="col-12 d-flex justify-content-between flex-column">
                        <div class="d-flex justify-content-between" style="align-items:center">
                            <p class="mb-0" style="color:#778796;">Audit Score</p>
                            <div class="dropdown">
                            </div>
                        </div>
                        <div class="text-center my-auto">
                            <div id="slider2" class="rslider mx-auto my-4"></div>
                            <p style="">Score</p>
                        </div>
                        <br>
                        <div class="d-flex justify-content-between" style="margin-left:20px;">
                            <h4 style="color:#778796;">Improvement since last audit:
                                @if($lastAudit && $secondLastAudit)
                                    @if($lastAudit->total_score > $secondLastAudit->total_score)
                                        <img src="{{asset('images/green-arrow.png')}}" style="width:37px;height:37px;">
                                    @else
                                        <img src="{{asset('images/red-arrow.svg')}}" style="width:37px;height:37px;">
                                    @endif
                                @endif
                            </h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="row mt-3 px-2">
        <div class="col-12 px-0">
            <div class="row graph-card p-3 mx-1">
                <div class="col-12">
                    <h3 class="vl-h3 fw-bold" style="color:#384B5C;">Overview of Issues</h3>
                    <canvas id="chartdiv" width="400" height="400"></canvas>
                    {{--                    <div id="chartdiv" style="height: 280px!important;width:280px!important;"></div>--}}
                </div>
                <div class="col-6" style="display: none;">
                    <table class="table">
                        <thead>
                        <tr>
                            <th scope="col" colspan="2">Subject Legend</th>
                            <th scope="col">
                                <!-- Default switch -->
                                <input type="checkbox" id="switch" /><label id="label_checkbox" for="switch">Toggle</label>
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($getTags as $getTag)
                            <tr>
                                <th>{{$getTag->name}} :</th>
                                <td><img src="{{secure_asset('images/color1.svg')}}"></td>
                                <td> <input type="checkbox" name="checkbox1" id="switch2" /><label id="label_checkbox" for="switch2">Toggle</label></td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>


    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <link href="https://cdn.jsdelivr.net/npm/round-slider@1.6.1/dist/roundslider.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/round-slider@1.6.1/dist/roundslider.min.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/index.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/radar.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $('#dropdownMenuButton1').change(function(){
                var getValue = $("#dropdownMenuButton1 option:selected").val();
                window.history.replaceState(null, null, '/home?project='+getValue+'');
                location.reload()
            });

            $('#dropdownMenuButtonTag').change(function(){
                var getValue = $("#dropdownMenuButton1 option:selected").val();
                var getTag   = $("#dropdownMenuButtonTag option:selected").val();
                window.history.replaceState(null, null, '/home?project={{app('request')->input('project')}}&&tag='+getTag+'');
                location.reload()
            });

        });

        $("#slider1").roundSlider({
            sliderType: "min-range",
            readOnly: true,
            rangeColor: "#1890FF",
            borderColor: "#1890FF",
            animation: true,
            circleShape: "full",
            radius: 120,
            value: {{count($getAuditCount)}},
        });

        $("#slider2").roundSlider({
            sliderType: "min-range",
            readOnly: true,
            rangeColor: "#1890FF",
            borderColor: "#1890FF",
            animation: true,
            circleShape: "half-top",
            radius: 120,
            value: @if($sum != '0'){{$totalPercentage}}@else 0 @endif
        });

        $("#slider3").roundSlider({
            sliderType: "min-range",
            readOnly: true,
            rangeColor: "#1890FF",
            borderColor: "#1890FF",
            animation: true,
            circleShape: "full",
            radius: 120,
            value: @if($auditCount != 0){{$totalCompletionRatePercentage}}@else 0 @endif,
        });

        $("#slider4").roundSlider({
            sliderType: "min-range",
            readOnly: true,
            rangeColor: "#1890FF",
            borderColor: "#1890FF",
            animation: true,
            circleShape: "full",
            radius: 120,
            value: @if($auditCount != 0){{$totalExplainCount}}@else 0 @endif
        });

        $("#slider5").roundSlider({
            sliderType: "min-range",
            readOnly: true,
            rangeColor: "#1890FF",
            borderColor: "#1890FF",
            animation: true,
            circleShape: "full",
            radius: 120,
            value: {{count($getIssuesByTags)}},
        });

        $('.rs-edit').css({"margin-top": "-44.75px", "font-size": "400%","margin-left": "-48.2656px", "color": "#1890FF","font-weight": "700"});


        var getTagsName = null;
        var issueByCompaniesGraph = null;
        var company = null;

        var color = ["rgba(230, 97, 95, 0.3)","rgba(34, 145, 71, 0.3)","rgba(143, 95, 255, 0.3)","rgba(255, 99, 71, 0.3)","rgba(240, 9, 147, 0.3)","rgba(240, 206, 150, 0.3)","rgba(143, 95, 71, 0.3)"];

        counter = 0;
        var chartData = new Array();
        for (const  element of issueByCompaniesGraph) {
            var dAr = Array();
            for (const elements of element) {
                dAr.push(elements);

            }
            chartData.push({data:dAr,label: company[counter].name ,backgroundColor: color[counter],borderColor: color[counter]});
            counter++
        }

        var data = {
            labels: getTagsName,
            datasets: chartData
        };

        var ct = document.getElementById("chartdiv");
        var options = {

        };
        var myRadarChart = new Chart(ct, {
            type: 'radar',
            data: data,
            options: {
                plugins: {
                    tooltips: {
                        mode: 'label'
                    },
                    legend: {
                        display: true,
                        position: "bottom",
                    }
                }
            }

        });



    </script>

@endsection