@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>Risk Profiler</h2>
            <ul>
                <li>
                    <div class="number">1</div>
                    <h3>Client Details</h3>
                </li>
                <li>
                    <div class="number">2</div>
                    <h3>Amount</h3>
                </li>
                <li>
                    <div class="number active_number">3</div>
                    <h3>Risk Profile</h3>
                </li>
                <li>
                    <div class="number">4</div>
                    <h3>Investment Solution</h3>
                </li>
                <li>
                    <div class="number">5</div>
                    <h3>Stock Broker & Advisor Fee</h3>
                </li>
            </ul>
        </div>
        <div class="for_procent">
            <div class="orange" style="width: 60%"></div>
            <div class="procent">60%</div>
        </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: 30px;">

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

                        <div class="col-lg-5 left_col_prop5 left_col_propfiles1">

                            {{ Html::image('images/degrees4.png', 'alt', ['id' => 'degree_img_4', 'degree_key' => '4', 'class' => 'degree_img'])  }}
                            <ul id="degree_list_portfolio">
                                @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

                            
                            <div class="alert alert-danger" style="display: none;" id="step_error"></div>

                            <a href="