@props(['title', 'icon' => null, 'route', 'items' => []])

<div
    x-data="{ data: null, error: false }"
    x-init="
                        fetch({{ json_encode($route) }})
                            .then(res => {
                                if (!res.ok) { throw new Error('Network'); }
                                return res.json();
                            })
                            .then(response => {
                                data = (response && 'data' in response) ? response.data : response;
                            })
                            .catch(() => { error = true; })
                    "
    {{ $attributes->merge(['class' => 'bg-white overflow-hidden shadow rounded-lg p-5']) }}
>
    <h4 class="text-lg font-bold mb-4 text-gray-700">
        @if($icon)
            {!! e($icon) !!}
        @endif {{ $title }}
    </h4>

    <ul class="text-sm text-gray-800 space-y-2 max-h-64 overflow-y-auto pr-2">
        @foreach($items as $item)
            @php
                $label = $item['label'] ?? '';
                $key = $item['key'] ?? '';
                $css = $item['class'] ?? 'text-blue-600';
                $prefix = $item['prefix'] ?? null;
                $borderClass = $item['border'] ?? 'border-b';
            @endphp

            <li class="flex justify-between {{ $borderClass }} pb-1">
                <span>{{ $label }}</span>

                <span class="{{ $css }} font-semibold">
                                    <span x-show="!error && data === null">
                                        <svg class="animate-spin h-4 w-4 inline-block mr-1 text-gray-500"
                                             xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                             aria-hidden="true">
                                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
                                                    stroke-width="4"></circle>
                                            <path class="opacity-75" fill="currentColor"
                                                  d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
                                        </svg>
                                    </span>

                                    @if($prefix !== null)
                        <span x-show="!error && data !== null"
                              x-text="{{ json_encode($prefix) }} + ( (data && data['{{ $key }}'] !== undefined) ? data['{{ $key }}'] : '-' )">
                                        </span>
                    @else
                        <span x-show="!error && data !== null"
                              x-text="(data && data['{{ $key }}'] !== undefined) ? data['{{ $key }}'] : '-'">
                                        </span>
                    @endif

                                    <span x-show="error">Error</span>
                                </span>
            </li>
        @endforeach
    </ul>
</div>