@extends('admin.layouts.app')
@section('title')
    Edit Website Request
@endsection
@section('css')
    <style>
        /*table{*/
        /*    border: 1px solid #eee;*/
        /*}*/
        /*table td{*/
        /*    border: 1px solid #eee;*/
        /*}*/
        .mycont {
            margin: 10px;
            width: 40px;
            height: 40px;
            position: relative;
            /*float: left;*/
        }
        #progresswrapper {
            clear:both;
            display: inline-block;
            padding-top: 10px;
        }
        #progresswrapper h5 {
            font-weight: 800;
        }
    </style>
@endsection

@section('contents')
    <div class="container-fluid">
        <!-- Start Page Content -->
        <!-- Start Page Content -->
        <div class="row flex-column">
            <div class="card">
                <div class="card-title">
                    <h4>Edit Request</h4>
                    <span class="nav pull-right panel_toolbox">
                        <a class="btn btn-primary" href="{{ route('admin.request') }}">
                            <i class="fa fa-arrow-back"></i>Back
                        </a>
                    </span>
                </div>
            </div>
        </div>
        <!-- /# row -->
        <!-- /# row -->
        <div class="row flex-column">
            <div class="col-10 col-md-10">
                <div class="card">
                    <div class="card-body">
                        <div class="">
                            <div class="col-12 text-center">
                                <strong>Issues</strong>
                            </div>
                            <table class="display nowrap table table-hover table-striped table-bordered" cellspacing="0" width="100%">
                                <thead>
                                <tr>
                                    <td></td>
                                    <th>Scores</th>
                                    <td></td>
                                </tr>
                                <tr>
                                    <th>Name</th>
                                    <th>Score</th>
                                    <th>Google recommended score</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>performance</td>
                                    <td>
                                        <div id="progresswrapper">
                                            <div id="mycont{{ $desktop_performance_score }}" class="mycont"></div>
                                        </div>
                                    </td>
                                    <td>90</td>
                                </tr>
                                <tr>
                                    <td>Accessibility</td>
                                    <td>
                                        <div id="progresswrapper">
                                            <div id="mycont{{ $desktop_accessibility_score }}" class="mycont"></div>
                                        </div>
                                    </td>
                                    <td>90</td>
                                </tr>
                                <tr>
                                    <td>Best Practices</td>
                                    <td>
                                        <div id="progresswrapper">
                                            <div id="mycont{{ $desktop_best_practices_score }}" class="mycont"></div>
                                        </div>
                                    </td>
                                    <td>90</td>
                                </tr>
                                <tr>
                                    <td>SEO</td>
                                    <td>
                                        <div id="progresswrapper">
                                            <div id="mycont{{ $desktop_seo_score }}" class="mycont"></div>
                                        </div>
                                    </td>
                                    <td>90</td>
                                </tr>
                                <tr>
                                    <td>PWA</td>
                                    <td>
                                        <div id="progresswrapper">
                                            <div id="mycont{{ $desktop_pwa_score }}" class="mycont"></div>
                                        </div>
                                    </td>
                                    <td>90</td>
                                </tr>
                                </tbody>
                            </table>
                            <div class="col-12 text-center">
                                <strong>Issues</strong>
                            </div>
                            <table class="display nowrap table table-hover table-striped table-bordered" cellspacing="0" width="100%">
                                <thead>
                                <tr>
                                    <th>S/N</th>
                                    <th>Issue(<i class='fa fa-exclamation-triangle text-danger'></i>)</th>
                                </tr>
                                </thead>
                                <tbody>
                                @php
                                    $i = 1;
                                @endphp
                                @foreach($issues as $issue)
                                    <tr>
                                        <td>{{ $i++ }}</td>
                                        <td class="text-danger">{!! \Illuminate\Support\Str::words(strip_tags($issue),'') !!}</td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>

                    </div>
                </div>
            </div>
            <!-- /# column -->
        </div>
        <!-- /# row -->

        <!-- End PAge Content -->
    </div>
@endsection

@section('js')
    <script>
        var desktop_performance_score_id = document.getElementById("mycont{{ $desktop_performance_score }}");
        var desktop_accessibility_score_id = document.getElementById("mycont{{ $desktop_accessibility_score }}");
        var desktop_best_practices_score_id = document.getElementById("mycont{{ $desktop_best_practices_score }}");
        var desktop_seo_score_id = document.getElementById("mycont{{ $desktop_seo_score }}");
        var desktop_pwa_score_id = document.getElementById("mycont{{ $desktop_pwa_score }}");
        if(desktop_performance_score_id){
            //alert('it exists');
            getScoreVal({{ $desktop_performance_score }});
        }
        if(desktop_accessibility_score_id){
            getScoreVal({{ $desktop_accessibility_score }});
        }
        if(desktop_best_practices_score_id){
            getScoreVal({{ $desktop_best_practices_score }});
        }
        if(desktop_seo_score_id){
            getScoreVal({{ $desktop_seo_score }});
        }
        if(desktop_pwa_score_id){
            getScoreVal({{ $desktop_pwa_score }});
        }

        function getScoreVal(scoreVal) {
            var scorePercent = scoreVal/100;
            var bar = new ProgressBar.Circle('#mycont'+scoreVal, {
                color: '#aaa',
                // This has to be the same size as the maximum width to
                // prevent clipping
                strokeWidth: 4,
                trailWidth: 1,
                easing: 'easeInOut',
                duration: 1400,
                text: {
                    autoStyleContainer: false
                },
                from: { color: '#F40505', width: 5 },
                to: { color: '#12D81B', width: 5 },
                // Set default step function for all animate calls
                step: function(state, circle) {
                    circle.path.setAttribute('stroke', state.color);
                    circle.path.setAttribute('stroke-width', state.width);

                    var value = Math.round(circle.value() * 100);
                    if (value === 0) {
                        circle.setText('');
                    } else {
                        circle.setText(value);
                    }

                }
            });
            bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
            bar.text.style.fontSize = '1rem';

            bar.animate(scorePercent);  // Number from 0.0 to 1.0
        }
    </script>
@endsection