@props([
    'icon' => '',
    'icon_color' => 'var(--primary-color)',
    'name' => '',
    'number' => '',
    'details' => [],
    'details_classes' => 'mt-2',
    'class' => '',
    'see_more' => false,
])

<div class="card bg-body hoverable card-xl-stretch">
    <div class="card-body home-box">
        <div class="d-flex justify-content-between">
            <div class="fw-bold text-gray-400">{{ $name }}</div>

            <span style="color:{{ $icon_color }};" class="{{ $icon }}"></span>
        </div>


        <div class="@if ($see_more) see-more see-more-statistics @endif">
            @foreach ($details as $row)
                <div class="d-flex fs-6 fw-bold align-items-center {{ $details_classes }}">
                    <div class="bullet w-8px h-6px rounded-2 bg-{{ $row['color'] }} me-3"></div>
                    <div class="text-gray-500 flex-grow-1 me-4">
                        {{ $row['name'] }} @isset($row['percentage'])
                            ({{ $row['percentage'] }} %)
                        @endisset
                    </div>
                    <div class="fw-boldest text-gray-700 text-xxl-end {{ $row['class'] ?? '' }}">
                        {{ $row['number'] }}
                    </div>
                </div>
            @endforeach
        </div>

        @if ($see_more)
            <a class="d-flex justify-content-end mt-3" onclick="see_more_statistics(this);">{{ __('See more') }}</a>
        @endif
    </div>
</div>

@push('scripts')
    <script>
        function see_more_statistics(value) {

            if ($(value).siblings('.see-more').hasClass('see-more-statistics')) {
                $(value).text('{{ __('See less') }}');
            } else {
                $(value).text('{{ __('See more') }}');
            }
            $(value).siblings('.see-more').toggleClass('see-more-statistics');
        }
    </script>
@endpush