{{--
非同期ウィジェットコンテナ

使用例:
@include('admin.widgets.async-widget-container', [
    'widgetClass' => 'UserStatsWidget',
    'widgetId' => 'user-stats-1',
    'containerClass' => 'col-md-6'
])
--}}

@php
    $widgetId = $widgetId ?? 'widget-' . uniqid();
    $containerClass = $containerClass ?? 'col-12';
    $widgetTitle = $widgetTitle ?? '';
@endphp

<div class="{{ $containerClass }}">
    <div class="widget-container" 
         data-async-widget="{{ $widgetClass }}" 
         data-widget-id="{{ $widgetId }}">
        
        @if($widgetTitle)
            <div class="widget-header">
                <h4>{{ $widgetTitle }}</h4>
            </div>
        @endif
        
        {{-- 初期ローディング状態 --}}
        <div class="widget-loading">
            <div class="loading-spinner">
                <div class="spinner"></div>
            </div>
            <div class="loading-text">
                ウィジェットを読み込み中...
            </div>
        </div>
    </div>
</div>

@push('styles')
    <link href="{{ asset('css/admin/async-widgets.css') }}" rel="stylesheet">
@endpush

@push('scripts')
    <script src="{{ asset('js/admin/async-widget-loader.js') }}"></script>
@endpush