{{--
  Title: Doughnut
  Description: Doughnut block
  Category: formatting
  Icon: columns
  Keywords: doughnut
  Mode: edit
  Align: left
  PostTypes: post
  SupportsAlign: full
  SupportsMode: true
  SupportsMultiple: true
  EnqueueStyle:
  EnqueueScript:
  EnqueueAssets:
--}}

@php
    $colors = ["#362B6E", "#547095", "#80CFCD", "#88EFFA", "#CFCFCF", "#5B4AB4", "#006EFF", "#469C99", "#000000"];

    $title = get_field('title');
    $description = strip_tags(get_field('description'),'<a><br><strong>');
    $subscript = get_field('subscript');

    $dataGroup = get_field('data_group');
@endphp

<div class="block-doughnut" data-js="doughnut">
    @if ($title)
        <div class="block-doughnut__title">
            <div class="p p--strong">{!! $title!!}</div>
        </div>
    @endif
    @if ($description)
        <div class="block-doughnut__description" id="block-doughnut__description">
            <div class="p">{!! $description !!}</div>
        </div>
    @endif

    <ul class="block-doughnut__tab" data-js="doughnut__tabs" aria-describedby="block-doughnut__description">
        @foreach ($dataGroup as $index => $tab)
            <li class="block-doughnut__tab-item-wrapper">
                <div class="block-doughnut__tab-item {{ $tab['is_active'] ? 'block-doughnut__tab-item--current' : '' }} {{ $loop -> last ? 'block-doughnut__tab-item--last' : ''}}" data-tab="{{ $index + 1 }}" role="button" tabindex="0">
                    <span class="p p--strong">{{ $tab['tab_label'] }}</span>
                </div>
            </li>
        @endforeach
    </ul>

    <div class="block-doughnut__items" data-js="doughnut__items-wrapper">
        @foreach ($dataGroup as $index => $tab)
            <div class="block-doughnut__item" data-js="doughnut__item" data-item="{{ $index + 1 }}">
                @php
                    $title = $tab['title'];
                    $caption = $tab['caption'];

                    $values = array_map(function($value) {
                        return number_format((float)$value['value'], 1, '.', '');
                    }, $tab['values']);

                    $labels = array_map(function($value) {
                        return strip_tags($value['label']);
                    }, $tab['values']);
                @endphp

                @if ($title)
                    <div class="block-doughnut__subtitle">
                        <p class="p">{{ $title }}</p>
                    </div>
                @endif

                <div class="block-doughnut__data">
                    <div class="block-doughnut__canvas-wrapper">
                        <canvas
                            data-js="doughnut__canvas"
                            data-chart-values='[{{ implode(', ', $values) }}]'
                            data-chart-labels='["{{ implode('", "', $labels) }}"]'
                            data-chart-colors='["{{ implode('", "', $colors) }}"]'>
                        </canvas>
                        <div class="block-doughnut__canvas-highlighted">
                            <div class="block-doughnut__canvas-highlighted-label">
                                <div class="p" data-js="doughnut-highlighted-label"></div>
                            </div>
                            <div class="block-doughnut__canvas-highlighted-value">
                                <div class="title-3" data-js="doughnut-highlighted-value"></div>
                            </div>
                        </div>
                    </div>

                    <ul class="block-doughnut__legend" tabindex="0" data-js="doughnut__legend">
                        @foreach ($labels as $index => $label)
                            <li class="block-doughnut__legend-single" data-js="doughnut__legend-sigle">
                                <div class="block-doughnut__legend-single-icon">
                                    @include('partials.doughnut-circle-icon', ["color" => $colors[$index]])
                                </div>
                                <div class="block-doughnut__legend-single-content">
                                    <div class="block-doughnut__legend-single-label">
                                        <span class="p">{{ $label }}</span>
                                    </div>
                                    <div class="block-doughnut__legend-single-value">
                                        <span class="p p--strong">{{ $values[$index] }}%</span>
                                    </div>
                                </div>
                            </li>
                        @endforeach
                    </ul>
                </div>
                @if ($caption)
                    <div class="block-doughnut__caption">
                        <div class="caption-2">{!! $caption !!}</div>
                    </div>
                @endif
            </div>
        @endforeach {{-- END TAB CONTENT --}}
    </div>

    @if ($subscript)
        <div class="block-doughnut__info">
            <div class="caption-2">{!! $subscript !!}</div>
        </div>
    @endif
</div>