@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>

    <style>
        canvas {
            max-height: 350px;
            max-width: 600px;
            min-height: 300px;
        }
    </style>
@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">3</div>
                    <h3>Select Risk Profile</h3>
                </li>
                <li>
                    <div class="number active_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: 80%"></div>
            <div class="procent">80%</div>
        </div>
    </div>

    
    @if(!empty($solution))
        <div class="prop_main solution_main">
            <div class="container">
                <div class="solution_head">
                    <h4>Investment Solution</h4>
                    <h2>{{ $solution->title }}</h2>
                    <div class="line_solution"></div>
                    <p>
                        {!!  $solution->overview !!}
                    </p>
                </div>
            </div>
            <div class="col-lg-1"></div>
            <div class="col-lg-3 left_inf_solution">
                {!! $solution->description !!}
            </div>
            <div class="col-lg-4 analytics_profiles1" id="s_chart">

                <div class="solution_chart">

                    @if(!empty($risk_profile))
                        <canvas id="chart_solution"></canvas>
                    @endif

                    
                </div>

                <div class="labels">
                    
                    @if(is_array($allocations))
                        <ul class="label_items">
                            @foreach($allocations as $key => $item)
                                <li>
                                    <span class="color_box" style="background-color: {{ $colors[$key] }}"></span>
                                    <span class="label_value">{{ $item['title'] . ' ' . $item['percentage'] . ' %' }}</span>
                                </li>
                            @endforeach
                        </ul>
                    @endif
                </div>

            </div>
            <div class="col-lg-2 holdings_solution">
                <h3>Top 5 Holdings</h3>
                <div class="line_solution"></div>
                <ul class="top_holdings">
                    @if($solution->holding->count())
                        @foreach($solution->holding as $item)
                            <li>
                                <span class="holding_percentage">{{ floor($item->percentage) . ' %' }}</span>
                                {{ Html::image('images/uploads/' . $item->image) }}
                            </li>
                        @endforeach
                    @endif
                </ul>
            </div>
            <div class="col-lg-2"></div>
            <div class="container btns_solution">
                                <a href="