@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.update', [$individual, $ips]) }}" method="POST">
                                @csrf
                                @method('PUT')
                                <div class="box-header flex justify-between">

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

                                    <div class="flex items-center">

                                        @if ($ips->pdf_link)
                                            <!-- Delete PDF link -->
                                            <a href="{{ route('crm.ips_pdf.delete', [$individual, $ips]) }}"
                                                class="inline-flex items-center px-3 py-1 badge rounded-sm bg-danger/10 text-red-500 hover:bg-danger hover:text-white">
                                                Obriši PDF
                                            </a>
                                        @else
                                            <button type="submit"
                                                class="inline-flex items-center px-3 py-1 text-xs rounded-sm bg-green-100 text-green-500 hover:bg-green-500 hover:text-white">{{ __('forms.Update') }}</button>
                                            <!-- Create PDF link -->
                                             @if(!is_null($ips->odabir_strategije))
                                            <a href="{{ route('crm.ips_pdf.create', [$individual, $ips]) }}"
                                                class="inline-flex items-center px-3 py-1 badge rounded-sm bg-secondary/10 hover:bg-secondary text-secondary hover:text-white">
                                                Kreiraj PDFa
                                            </a>
                                            @endif
                                        @endif

 
                                    </div>
                                </div>
                                <div class="box-body">

                                    @if($ips->pdf_link)


                                    <iframe src="{{ Storage::disk('public')->url($ips->pdf_link). '?v=' . time() }}"
                                        style="border: none;" width="100%" height="600">
                                    </iframe>

                                    @else
                                        @include('backend.amc.ips.text')
                                    @endif

                                    
                                </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 ...',
          '2': 'Ova strategija kombinuje stabilnost fiksnih prinosa ...',
          '3': 'Ova investiciona strategija teži dinamičnom balansu ...',
          '4': 'Ova investiciona strategija naglašava fleksibilnost ...',
          '5': 'Ova investiciona strategija fokusira se na iskorišćavanje ...',
          '6': 'Ova investiciona strategija se fokusira na maksimizaciju ...',
      };

      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