@extends('backend.layouts.master')


@section('styles')
    <!-- RANGESLIDER CSS -->
    <link rel="stylesheet" href="{{ asset('build/backend/assets/libs/nouislider/nouislider.min.css') }}">
    <style>

        /*Height*/
        .noUi-horizontal {
            height: 8px;
        }

        .noUi-horizontal .noUi-handle {
            top: -5px !important;
        }

        .noUi-horizontal .noUi-handle-lower .noUi-tooltip {
            top: 14px;
            left: 50%;
            border: transparent;
            background: transparent;
        }

        .noUi-horizontal .noUi-handle {
            border-style: solid;
            border-color: rgb(90 102 241);
            height: 16px;
            width: 16px;
            right: -8px;
            /* half the width */
        }

        .noUi-handle:after,
        .noUi-handle:before,
        .noUi-handle:after,
        .noUi-handle:after {
            display: none
        }

        p {
            line-height: 1.5;
            font-size: 11px;
            text-align: justify;
            margin-bottom: 12px
        }

        ul>li {
            line-height: 1.5;
            font-size: 11px;
            text-align: justify;
            margin-bottom: 6px
        }

        .pagebreak {
            break-after: page
        }
    </style>
@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">
                            <form action="{{ route('crm.ips.store', $individual) }}" method="POST">
                                @csrf
                                <div class="box-header flex justify-between">

                                    <span class="ti-btn text-xs py-1 font-semibold">IPS</span>

                                    <div class="flex items-center">
                                        <button type="submit"
                                    class="badge rounded-sm bg-success/10 text-success hover:bg-success hover:text-white">{{ __('forms.Save') }}</button>
                                    </div>
                                </div>
                                <div class="box-body">
                                    @include('backend.amc.ips.text')
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </div>
@endsection

@section('scripts')
<!-- noUiSlider JS -->
    <script src="{{ asset('build/backend/assets/libs/nouislider/nouislider.min.js') }}"></script>

<script>
  (function() {
      "use strict";

      // Helper to format the slider values
      function formatValue(value) {
          return parseFloat(value).toFixed(2);
      }

      /**
       * ------------------------
       * 1) Investicioni Horizont
       * ------------------------
       */
      const investicioniSlider = document.getElementById("investicioni_horizont_slider");
      const investicioniInput  = document.getElementById("investicioni_horizont_input");
      const horizonValue       = parseFloat(investicioniInput.value);

      noUiSlider.create(investicioniSlider, {
          start: isNaN(horizonValue) ? 1 : horizonValue,
          step: 0.5,
          connect: [true, false],
          range: { min: 0, max: 2 },
          pips: {
              mode: "values",
              values: [0, 0.5, 1.0, 1.5, 2],
              density: 4,
              format: {
                  to:   (val) => formatValue(val),
                  from: (val) => parseFloat(val),
              }
          },
      });

      investicioniSlider.noUiSlider.on("update", (values, handle) => {
          investicioniInput.value = values[handle];
      });

      investicioniSlider.noUiSlider.on("change", (values, handle) => {
          const value = parseFloat(values[handle]);
          if (value < 0)  investicioniSlider.noUiSlider.set(0);
          if (value > 2)  investicioniSlider.noUiSlider.set(2);
      });


      /**
       * --------------------------------
       * 2) Potreba za likvidnošću
       * --------------------------------
       */
      const likvidnoscuSlider = document.getElementById("potreba_za_likvidnoscu_slider");
      const likvidnoscuInput  = document.getElementById("potreba_za_likvidnoscu_input");
      const likvidnoscuValue  = parseFloat(likvidnoscuInput.value);

      // Map numeric values to string labels for pips
      function getLabelForValue(value) {
          switch (value) {
              case 0:    return "Veoma niska";
              case 0.25: return "Niska";
              case 0.5:  return "Umerena";
              case 0.75: return "Visoka";
              case 1:    return "Veoma visoka";
              default:   return formatValue(value);
          }
      }

      noUiSlider.create(likvidnoscuSlider, {
          start: isNaN(likvidnoscuValue) ? 0.5 : likvidnoscuValue,
          step: 0.25,
          connect: [true, false],
          range: { min: 0, max: 1 },
          pips: {
              mode: "values",
              values: [0, 0.25, 0.5, 0.75, 1],
              density: 4,
              format: {
                  to: (val) => getLabelForValue(val),
                  from: (val) => {
                      // If the slider calls 'from' with a numeric string:
                      if (!isNaN(val)) {
                          return parseFloat(val);
                      }
                      // Otherwise match the label back to numeric
                      switch (val) {
                          case "Veoma niska":   return 0;
                          case "Niska":         return 0.25;
                          case "Umerena":       return 0.5;
                          case "Visoka":        return 0.75;
                          case "Veoma visoka":  return 1;
                          default:              return 0.5;
                      }
                  }
              }
          },
      });

      likvidnoscuSlider.noUiSlider.on("update", (values, handle) => {
          likvidnoscuInput.value = values[handle];
      });

      likvidnoscuSlider.noUiSlider.on("change", (values, handle) => {
          const value = parseFloat(values[handle]);
          if (value < 0)  likvidnoscuSlider.noUiSlider.set(0);
          if (value > 1)  likvidnoscuSlider.noUiSlider.set(1);
      });
  })();
</script>


<!-- Script for dynamic comment display -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
      const strategijeSelect = document.getElementById('odabir_strategije');
      const commentDiv = document.getElementById('strategija-comment');

      const 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, tokom normalnih tržišnih okolnosti, 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. Prilikom nastupajućih tržišnih šokova, strategijska alokacija može biti konzervativnija od priložene. Nivo aktivnosti priložene strategije može se okarakterisati kao polu-aktivan.',
          '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, tokom normalnih tržišnih okolnosti, prati benčmark 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. Prilikom nastupajućih tržišnih šokova, strategijska alokacija može biti konzervativnija od priložene. Nivo aktivnosti priložene strategije može se okarakterisati kao polu-aktivan.',
          '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, tokom normalnih tržišnih okolnosti, sastoji se 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. Prilikom nastupajućih tržišnih šokova, strategijska alokacija može biti konzervativnija od priložene. Nivo aktivnosti priložene strategije može se okarakterisati kao polu-aktivan.',
          '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, tokom normalnih tržišnih okolnosti, 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. Prilikom nastupajućih tržišnih šokova, strategijska alokacija može biti konzervativnija od priložene. Nivo aktivnosti priložene strategije može se okarakterisati kao aktivan.',
          '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. Targetirana struktura portfolija, tokom normalnih tržišnih okolnosti, sastoji se 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%).<br><br>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. Prilikom nastupajućih tržišnih šokova, strategijska alokacija može biti konzervativnija od priložene. Nivo aktivnosti priložene strategije može se okarakterisati kao aktivan.',
          '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, tokom normalnih tržišnih okolnosti, 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. Prilikom nastupajućih tržišnih šokova, strategijska alokacija može biti konzervativnija od priložene. Nivo aktivnosti priložene strategije može se okarakterisati kao aktivan.',
      };

      const strategijaColors = {
          '1': { bg: 'bg-green-100 mt-4 p-4 rounded-md', border: 'border-green-300', text: 'text-green-700' },
          '2': { bg: 'bg-green-200 mt-4 p-4 rounded-md', border: 'border-green-400', text: 'text-green-700' },
          '3': { bg: 'bg-yellow-100 mt-4 p-4 rounded-md', border: 'border-yellow-300', text: 'text-yellow-700' },
          '4': { bg: 'bg-yellow-200 mt-4 p-4 rounded-md', border: 'border-yellow-400', text: 'text-yellow-700' },
          '5': { bg: 'bg-orange-100 mt-4 p-4 rounded-md', border: 'border-orange-300', text: 'text-orange-700' },
          '6': { bg: 'bg-red-100 mt-4 p-4 rounded-md', border: 'border-red-300', text: 'text-red-700' },
      };

      strategijeSelect.addEventListener('change', function() {
          const selectedValue = this.value;

          // Remove existing color classes
          const allBgClasses = [
              'bg-green-100 mt-4 p-4 rounded-md',
              'bg-green-200 mt-4 p-4 rounded-md',
              'bg-yellow-100 mt-4 p-4 rounded-md',
              'bg-yellow-200 mt-4 p-4 rounded-md',
              'bg-orange-100 mt-4 p-4 rounded-md',
              'bg-red-100 mt-4 p-4 rounded-md'
          ];
          const allBorderClasses = [
              'border-green-300',
              'border-green-400',
              'border-yellow-300',
              'border-yellow-400',
              'border-orange-300',
              'border-red-300'
          ];
          const allTextClasses = [
              'text-green-700',
              'text-yellow-700',
              'text-orange-700',
              'text-red-700'
          ];

          commentDiv.classList.remove(...allBgClasses, ...allBorderClasses, ...allTextClasses);

          if (selectedValue in strategijaComments) {
              // Update comment text
              commentDiv.textContent = strategijaComments[selectedValue];

              // Ensure visible
              commentDiv.classList.remove('hidden');

              // Add new color classes
              commentDiv.classList.add(
                  strategijaColors[selectedValue]['bg'],
                  strategijaColors[selectedValue]['border'],
                  strategijaColors[selectedValue]['text']
              );
          } else {
              commentDiv.textContent = '';
              commentDiv.classList.add('hidden');
          }
      });
  });
</script>

@endsection