@extends('backend.layouts.master')

@section('styles')

@endsection

@section('content')
    <div class="content">
        @if ($individual)
            <!-- Edit mode -->
            <div id="individual-dashboard" class="main-content">
                <div class="block justify-between page-header sm:flex">
                    <div>
                        <h3
                            class="text-gray-700 hover:text-gray-900 dark:text-white dark:hover:text-white text-2xl font-medium">
                            {{ $individual->first_name }} {{ $individual->last_name }}</h3>
                    </div>
                    <div>
                        @if (session('status'))
                            @include('backend.crm.individuals.components.alert-status')
                        @endif
                    </div>
                </div>
                <div class="grid grid-cols-12 gap-x-6">
                    <div class="col-span-12 lg:col-span-2">
                        <div class="box">
                            <div class="box-body pt-6">
                                @include('backend.crm.individuals.components.sidebar')
                            </div>
                        </div>
                    </div>
                    <div class="col-span-12 lg:col-span-10">
                        <div class="box border-0 shadow-none mb-0">
                            <div class="box border-0 shadow-none mb-0">
                                <div class="box-header">
                                    <h5 class="box-title leading-none flex"><i
                                            class="ri ri-notification-4-line ltr:mr-2 rtl:ml-2"></i>
                                        IPS
                                    </h5>
                                </div>
                                <div class="box-body">
                                    <div class="col-span-12 lg:col-span-6">
                                        <div class="box">
                                            <div class="box-header">
                                                <h5 class="box-title"> Investicioni_horizont</h5>
                                            </div>
                                            <div class="box-body">
                                                <div class="box-body">
                                                    <div id="investicioni_horizont_slider"></div>
                                                    <input type="hidden" name="investicioni_horizont"
                                                        id="investicioni_horizont_input"
                                                        value="{{ old('investicioni_horizont', $individual->investicioni_horizont ?? '1.0') }}">
                                                </div>
                                            </div>
                                            <div class="max-w my-5 px-5">
                                                <textarea name="investicioni_horizont_text" id="investicioni_horizont_text" class="ti-form-input" rows="3"
                                                    placeholder="Investicioni horizont">{{ old('investicioni_horizont_text', $individual->investicioni_horizont_text ?? '') }}</textarea>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-span-12 lg:col-span-6">
                                        <div class="box">
                                            <div class="box-header">
                                                <h5 class="box-title"> Potreba za likvidnošću</h5>
                                            </div>
                                            <div class="box-body">
                                                <div class="box-body">
                                                    <div id="potreba_za_likvidnoscu_slider"></div>
                                                    <input type="hidden" name="potreba_za_likvidnoscu"
                                                        id="potreba_za_likvidnoscu_input"
                                                        value="{{ old('potreba_za_likvidnoscu', $individual->potreba_za_likvidnoscu ?? '0.5') }}">
                                                </div>

                                            </div>
                                            <div class="max-w my-5 px-5">
                                                <textarea name="potreba_za_likvidnoscu_text" id="Potreba za likvidnošću" class="ti-form-input" rows="3"
                                                    placeholder="potreba_za_likvidnoscu_text">{{ old('potreba_za_likvidnoscu_text', $individual->potreba_za_likvidnoscu_text ?? '') }}</textarea>
                                            </div>
                                        </div>
                                    </div>


                                    <div class="max-w my-5">
                                        <label for="pravne_okolnosti">Pravne i regulatorne okolnosti</label>
                                        <textarea name="pravne_okolnosti" id="pravne_okolnosti" class="ti-form-input" rows="3"
                                            placeholder="pravne i regulatorne okolnosti">{{ old('pravne_okolnosti', $individual->pravne_okolnosti ?? '') }}</textarea>
                                    </div>
                                    <div class="max-w my-5">
                                        <label for="poreske_okolnosti">Poreske okolnosti</label>
                                        <textarea name="poreske_okolnosti" id="poreske_okolnosti" class="ti-form-input" rows="3"
                                            placeholder="poreske okolnosti">{{ old('poreske_okolnosti', $individual->poreske_okolnosti ?? '') }}</textarea>
                                    </div>
                                    <div class="max-w my-5">
                                        <label for="specificne_okolnosti">Specifične okolnosti</label>
                                        <textarea name="specificne_okolnosti" id="specificne_okolnosti" class="ti-form-input" rows="3"
                                            placeholder="specificne okolnosti">{{ old('specificne_okolnosti', $individual->specificne_okolnosti ?? '') }}</textarea>
                                    </div>

                                    <div class="col-span-12 md:col-span-6 xl:!col-span-3">
                                        <div class="box">

                                            <div class="box-body">
                                                @php
                                                    // Determine the selected value: prioritize old input, then database value, else default to '0'
                                                    $selectedStrategija = old(
                                                        'odabir_strategije',
                                                        $individual->odabir_strategije ??
                                                            $individual->suggested_strategy,
                                                    );

                                                    // Define comments for each strategy option
                                                    $strategijaComments = [
                                                        '1' =>
                                                            'Ova investiciona strategija usmerena je na zaštitu kapitala i stabilnost portfolija, sa ciljem minimizacije rizika. Primarno se oslanja na obveznice, čineći ih glavnim stubom strategijske alokacije. Struktura portfolija je uporediva sa benčmarkom sastavljenim od 60% korporativnih obveznica i 40% državnih obveznica, uz vrlo fleksibilne limite alokacije od 0% do 100% za oba tipa obveznica. Takođe, strategija omogućava da štedni depoziti čine do 50% ukupne alokacije, pružajući dodatnu sigurnost.',
                                                        '2' =>
                                                            'Ova strategija kombinuje stabilnost fiksnih prinosa sa potencijalom za rast kroz ulaganje u akcije, pružajući uravnoteženi pristup riziku i prinosu. Struktura portfolija prati benchmark sa 50% akcija (uz limite 0%-75%), 25% korporativnih obveznica (uz limite alokacije od 0%-50%) i 25% državnih obveznica (uz limite 0%--50%). Ova fleksibilnost omogućava portfolio menadžeru da prilagođava alokaciju na osnovu tržišnih uslova, balansirajući sigurnost obveznica sa mogućnostima za kapitalni rast.',
                                                        '3' =>
                                                            'Ova investiciona strategija teži dinamičnom balansu između sigurnosti i rasta, sa fokusom na maksimizaciju prinosa kroz značajnu izloženost akcijama. Struktura portfolija se sastoji od 70% akcija (uz limite 25-100%), 15% korporativnih obveznica (uz limite alokacije 0%-30%) i 15% državnih obveznica (uz limite 0%-30%). Ova strategija omogućava portfolio menadžeru da aktivno upravlja alokacijom, prilagođavajući je prema tržišnim uslovima, dok istovremeno obezbeđuje osnovu za stabilnost kroz ulaganja u obveznice, čime se ostvaruje potencijal za rast kroz veću izloženost akcijama.',
                                                        '4' =>
                                                            'Ova investiciona strategija naglašava fleksibilnost i prilagodljivost, omogućavajući portfolio menadžeru da aktivno reaguju na promene na tržištu i identifikuju nove prilike za rast. Targetirana struktura portfolija sastoji se od  60% akcija velike tržišne kapitalizacije (large-cap stocks, uz limite 0%-80%), 20% akcija male tržišne kapitalizacije (small-cap stocks, uz limite alokacije 0%-40%) i 20% akcija srednje tržišne kapitalizacije (mid-cap stocks, uz limite  0%-40%). Ova dinamična strategija omogućava značajnu izloženost različitim segmentima tržišta, čime se maksimizuje potencijal za prinos dok se istovremeno upravlja rizikom kroz diversifikaciju portfolija.',
                                                        '5' =>
                                                            'Ova investiciona strategija fokusira se na iskorišćavanje tržišnih prilika kroz aktivno ulaganje u akcije različitih tržišnih kapitalizacija, sa ciljem maksimizacije potencijala za rast. Tartetirana struktura portfolija se sastoji od 80% akcija velikih kompanija (growth large-cap stocks, uz limite 0%-80%), 10% akcija malih kompanija (growth small-cap stocks, uz limite alokacije 0%-40%) i 10% akcija srednjih kompanija (growth mid-cap stocks) (uz limite 0%-40%). Proaktivnost ove strategije omogućava portfolio menadžeru da kontinuirano analizira tržišne trendove i identifikuje najperspektivnije kompanije u svim kategorijama tržišne kapitalizacije. Ovaj pristup ne samo da maksimizira potencijal za rast, već i omogućava adaptaciju portfolija na promene u ekonomskom okruženju, čime se dodatno povećava mogućnost ostvarenja iznadprosečnih prinosa.',
                                                        '6' =>
                                                            'Ova investiciona strategija se fokusira na maksimizaciju potencijala za visoke prinose kroz potpunu izloženost akcijama u segmentu rasta, kao i šireg investicionog univerzuma na osnovu veličine kompanija. Struktura portfolija sastoji se od 20% akcija rasta male tržišne kapitalizacije (Growth Small-Cap stocks, uz limite alokacije 0%-50%), 20% akcija rasta srednje tržišne kapitalizacije (Growth Mid-Cap stocks, uz limite 0%-50%) i 60% akcija rasta velike tržišne kapitalizacije (Growth Large-Cap stocks, uz limite 0%-80%). Ova dinamična strategija omogućava investicionim menadžerima da iskoriste prilike za rast u različitim segmentima tržišta, dok istovremeno preuzimaju veći rizik u potrazi za dodatnim prinosima.',
                                                    ];

                                                    // Define color classes for each strategy
                                                    $strategijaColors = [
                                                        '1' => [
                                                            'bg' => 'bg-green-100',
                                                            'border' => 'border-green-300',
                                                            'text' => 'text-green-700',
                                                        ],
                                                        '2' => [
                                                            'bg' => 'bg-green-200',
                                                            'border' => 'border-green-400',
                                                            'text' => 'text-green-700',
                                                        ],
                                                        '3' => [
                                                            'bg' => 'bg-yellow-100',
                                                            'border' => 'border-yellow-300',
                                                            'text' => 'text-yellow-700',
                                                        ],
                                                        '4' => [
                                                            'bg' => 'bg-yellow-200',
                                                            'border' => 'border-yellow-400',
                                                            'text' => 'text-yellow-700',
                                                        ],
                                                        '5' => [
                                                            'bg' => 'bg-orange-100',
                                                            'border' => 'border-orange-300',
                                                            'text' => 'text-orange-700',
                                                        ],
                                                        '6' => [
                                                            'bg' => 'bg-red-100',
                                                            'border' => 'border-red-300',
                                                            'text' => 'text-red-700',
                                                        ],
                                                    ];
                                                @endphp

                                                {{-- Strategy Selection --}}
                                                <div class="flex justify-between items-center">
                                                    <label for="odabir_strategije"
                                                        class="block text-sm font-medium text-gray-700">

                                                        @if (!$individual->odabir_strategije && !$individual->suggested_strategy)
                                                            Izaberi strategiju:
                                                        @endif

                                                        @if (!$individual->odabir_strategije && $individual->suggested_strategy)
                                                            Preporučena strategija:
                                                        @endif

                                                        @if ($individual->odabir_strategije && $individual->suggested_strategy)
                                                            Izabrana strategija:
                                                        @endif
                                                    </label>
                                                    <span class="block  text-sm text-red-500 mb-2 dark:text-red/70">
                                                        <a href="{{ route('individuals.resetStrategy', $individual) }}"
                                                            onclick="return confirm('Da li ste sigurni?')">
                                                            Reset strategije
                                                        </a>
                                                    </span>
                                                </div>

                                                <select
                                                    class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                                                    name="odabir_strategije" id="odabir_strategije">
                                                    <option value="0"
                                                        {{ $selectedStrategija == '0' ? 'selected' : '' }}>
                                                        Izbor strategije
                                                    </option>
                                                    <option value="1"
                                                        {{ $selectedStrategija == '1' ? 'selected' : '' }}>
                                                        Kapitalna sigurnost
                                                    </option>
                                                    <option value="2"
                                                        {{ $selectedStrategija == '2' ? 'selected' : '' }}>
                                                        Kontrolisana stabilnost
                                                    </option>
                                                    <option value="3"
                                                        {{ $selectedStrategija == '3' ? 'selected' : '' }}>
                                                        Uravnoteženi rast
                                                    </option>
                                                    <option value="4"
                                                        {{ $selectedStrategija == '4' ? 'selected' : '' }}>
                                                        Dinamična alokacija
                                                    </option>
                                                    <option value="5"
                                                        {{ $selectedStrategija == '5' ? 'selected' : '' }}>
                                                        Proaktivni rast
                                                    </option>
                                                    <option value="6"
                                                        {{ $selectedStrategija == '6' ? 'selected' : '' }}>
                                                        Dinamični rast
                                                    </option>
                                                </select>

                                                @error('odabir_strategije')
                                                    <div class="mt-1 text-sm text-red-600">
                                                        {{ $message }}
                                                    </div>
                                                @enderror

                                                {{-- Comment Section --}}
                                                @if ($selectedStrategija != '0' && isset($strategijaComments[$selectedStrategija]))
                                                    <div id="strategija-comment"
                                                        class="{{ $strategijaColors[$selectedStrategija]['bg'] }} {{ $strategijaColors[$selectedStrategija]['border'] }} mt-4 p-4 rounded-md {{ $strategijaColors[$selectedStrategija]['text'] }} transition-all duration-300">
                                                        {{ $strategijaComments[$selectedStrategija] }}
                                                    </div>
                                                @else
                                                    <div id="strategija-comment"
                                                        class="mt-4 hidden transition-all duration-300" role="alert"
                                                        aria-live="polite"></div>
                                                @endif


                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                    </div>
                </div>
            </div>
        @endif
    </div>
@endsection

@section('scripts')
    <script src="{{ asset('build/backend/assets/libs/echarts/echarts.min.js') }}"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Initialize Sunburst Chart #2
            (function initSunburst2() {
                const el2 = document.getElementById('sunburst2');
                if (!el2) return;

                const myChart2 = echarts.init(el2, null, { renderer: 'svg', useDirtyRect: false });

                const option2 = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}: {c}'
                    },
                    series: {
                        type: 'sunburst',
                        radius: [0, '90%'],
                        label: { rotate: 'radial' },
                        data: [
                            {
                                name: 'Basic Expenses',
                                value: {{ $individual->lastActiveResult->results_nda['BasicExpenses']['total'] }},
                                itemStyle: { color: '#fac858' },
                                children: [
                                    {
                                        name: 'stanovanje',
                                        value: {{ $individual->lastActiveResult->results_nda['BasicExpenses']['breakdown'][0]['total'] }},
                                        itemStyle: { color: '#fac858cc' }
                                    },
                                    {
                                        name: 'prevoz',
                                        value: {{ $individual->lastActiveResult->results_nda['BasicExpenses']['breakdown'][1]['total'] }},
                                        itemStyle: { color: '#fac858cc' }
                                    },
                                    {
                                        name: 'hrana',
                                        value: {{ $individual->lastActiveResult->results_nda['BasicExpenses']['breakdown'][2]['total'] }},
                                        itemStyle: { color: '#fac858cc' }
                                    },
                                    {
                                        name: 'osiguranje',
                                        value: {{ $individual->lastActiveResult->results_nda['BasicExpenses']['breakdown'][3]['total'] }},
                                        itemStyle: { color: '#fac858cc' }
                                    }
                                ]
                            },
                            {
                                name: 'Savings',
                                value: {{ $individual->lastActiveResult->results_nda['NetIncome'] }},
                                itemStyle: { color: '#9fe080' }
                            },
                            {
                                name: 'Discretionary Expenses',
                                value: {{ $individual->lastActiveResult->results_nda['DiscretionaryExpenses']['total'] }},
                                itemStyle: { color: '#ff9a9a' },
                                children: [
                                    {
                                        name: 'obrazovanje',
                                        value: {{ $individual->lastActiveResult->results_nda['DiscretionaryExpenses']['breakdown'][0]['total'] }},
                                        itemStyle: { color: '#ff9a9acc' }
                                    },
                                    {
                                        name: 'zabava',
                                        value: {{ $individual->lastActiveResult->results_nda['DiscretionaryExpenses']['breakdown'][1]['total'] }},
                                        itemStyle: { color: '#ff9a9acc' }
                                    },
                                    {
                                        name: 'drugi troškovi',
                                        value: {{ $individual->lastActiveResult->results_nda['DiscretionaryExpenses']['breakdown'][2]['total'] }},
                                        itemStyle: { color: '#ff9a9acc' }
                                    }
                                ]
                            }
                        ]
                    }
                };

                myChart2.setOption(option2);
                window.addEventListener('resize', () => myChart2.resize());
            })();
        });
    </script>

@endsection