@extends('frontend.layouts.app-proposal')

@section('header-scripts')

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.min.js"></script>

@endsection

@section('content')

    <div class="main_slide_prop">
        <div class="full_container">
            <h2 style="padding-bottom: 30px;">Risk Profiler</h2>
        </div>
    </div>

    <div class="prop_main details_main risk_profile_prop5 main_ind_risk_prof_4c risk_profiles1">
        <div class="col-md-3 prop_back"></div>

        <div class="col-md-6 for_prop_main clients_detail_prop2 for_prop_main profile_main_prop5 risk_main_profiles1">

            <h2 style="padding: 0;">Risk Profile</h2>


            <div class="form_yes_ind_risk_4c" id="form_yes_ind_risk_4c" style="display: block; margin-top: 40px;">

                <div class="individ_risk_4c">
                    @if($risk_profiles->count())

                        <!-- ['range_start', '<=', $score],
                ['range_end', '>=', $score]-->
                        <div class="col-lg-5 left_col_prop5 left_col_propfiles1">

                            @if($score > 0 && $score <= 49)
                                {{ Html::image('images/degrees.png', 'alt', ['id' => 'degree_img_0', 'class' => 'degree_img'])  }}
                            @else
                                {{ Html::image('images/degrees.png', 'alt', ['id' => 'degree_img_0', 'class' => 'degree_img', 'style' => 'display: none;'])  }}
                            @endif

                            @if($score >= 50 && $score <= 69)
                                {{ Html::image('images/degrees2.png', 'alt', ['id' => 'degree_img_1', 'class' => 'degree_img'])  }}
                            @else
                                {{ Html::image('images/degrees2.png', 'alt', ['id' => 'degree_img_1', 'class' => 'degree_img', 'style' => 'display: none;'])  }}
                            @endif

                            @if($score >= 70 && $score <= 89)
                                {{ Html::image('images/degrees3.png', 'alt', ['id' => 'degree_img_2', 'class' => 'degree_img'])  }}
                            @else
                                {{ Html::image('images/degrees3.png', 'alt', ['id' => 'degree_img_2', 'class' => 'degree_img', 'style' => 'display: none;'])  }}
                            @endif

                            @if($score >= 90)
                                {{ Html::image('images/degrees4.png', 'alt', ['id' => 'degree_img_3', 'class' => 'degree_img'])  }}
                            @else
                                {{ Html::image('images/degrees4.png', 'alt', ['id' => 'degree_img_3', 'class' => 'degree_img', 'style' => 'display: none;'])  }}
                            @endif

                            <ul id="degree_list">
                                @for($i = $risk_profiles->count() - 1; $i >= 0; $i--)
                                    <li data-risk-id="" data-degree=""
                                        class="active">
                                        {{ $risk_profiles[$i]->title }}
                                    </li>
                                @endfor
                            </ul>
                        </div>
                        <div class="col-lg-7 right_col_prop5 right_col_propfiles1">

                            <!-- DEGREE 1 -->
                                                        @foreach($risk_profiles as $key => $item)
                                <div id="degree_" class="degree_block" style="display:block">
                                    <div class="risk_overview">
                                                                            </div>
                                    <div class="analytics_prop5 analytics_profiles1" id="to_canvas_{{ $item->id }}">

                                        <canvas id="chart_{{ $key }}"></canvas>

                                        <ul>
                                                                                                                                </ul>
                                    </div>
                                </div>

                            @endforeach

                            
                            <a class="button_back" href="