@extends('backend-template')

@section('breadcrumbs')
    {!! show_breadcrumbs(['Buttons' => url('profile/button') , $button->title . ' - clicks statistics' => false]) !!}
@stop

<style>
    .active {
        text-decoration: underline;
        font-weight: bold; /* Optional: Make the active year stand out */
    }
</style>

@section('content')
    <div class="col-md-12">
        <h3 class="title">{{$button->title}} - clicks statistics</h3>
        <div class="gap gap-small"></div>
        <div>
            @if (count($availableYears) == 0)
                <strong>There is no data available for this button yet</strong>
            @else
                <strong>Select Year:</strong>
                @foreach($availableYears as $availableYear)
                    <a href="{{ route('button.statistic', ['button_id' => $button->id, 'year' => $availableYear]) }}"
                       class="{{ $year == $availableYear ? 'active' : '' }}">
                        {{ $availableYear }}
                    </a>
                    @if (!$loop->last)
                        |
                    @endif
                @endforeach
            @endif
        </div>
        @foreach ($quarterCharts as $chartId => $data)
            <div id="{{ $chartId }}" style="margin-bottom: 20px;"></div>
            @columnchart($chartId, $chartId)
        @endforeach
    </div>
@stop