@extends('layouts.app_widget')

@section('topbar_actions')
    {{-- Dropdown: chart type select kar ke create karo --}}
    <div style="position:relative; display:inline-block;">
        <button class="btn" onclick="this.nextElementSibling.classList.toggle('open')"
                type="button">+ Create Widget ▾</button>
        <div id="typeMenu" style="display:none; position:absolute; right:0; top:44px; background:#fff; border:1px solid #e5e7eb; border-radius:10px; min-width:160px; box-shadow:0 4px 20px rgba(0,0,0,.1); z-index:99;">
            <a href="{{ route('widgets.create', ['type' => 'bar']) }}"
               style="display:block; padding:10px 14px; font-size:14px; color:#111827; text-decoration:none; border-radius:10px 10px 0 0;"
               onmouseover="this.style.background='#f3f4f6'" onmouseout="this.style.background='#fff'">
                📊 Bar Chart
            </a>
            <a href="{{ route('widgets.create', ['type' => 'pie']) }}"
               style="display:block; padding:10px 14px; font-size:14px; color:#111827; text-decoration:none; border-radius:0 0 10px 10px;"
               onmouseover="this.style.background='#f3f4f6'" onmouseout="this.style.background='#fff'">
                🥧 Pie Chart
            </a>
        </div>
    </div>
    <script>
        document.addEventListener('click', function(e) {
            const menu = document.getElementById('typeMenu');
            if (menu && !e.target.closest('[onclick]') && !menu.contains(e.target)) menu.style.display = 'none';
        });
        document.querySelector('[onclick]')?.addEventListener('click', function() {
            const m = this.nextElementSibling;
            m.style.display = m.style.display === 'none' ? 'block' : 'none';
        });
    </script>
@endsection

@section('content')
<div style="max-width:1100px; margin:0 auto;">
    <h1 style="margin:0 0 16px 0;">Widgets</h1>

    @if($widgets->isEmpty())
        <div style="background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:40px; text-align:center; color:#6b7280;">
            No widgets yet.
            <a href="{{ route('widgets.create', ['type'=>'bar']) }}" style="color:#2563eb; font-weight:600;">Create your first widget →</a>
        </div>
    @else
        <div style="display:grid; gap:14px;">
            @foreach($widgets as $widget)
                <div style="background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:18px; display:flex; align-items:center; justify-content:space-between; gap:16px;">
                    <div style="flex:1; min-width:0;">
                        <div style="display:flex; align-items:center; gap:8px; margin-bottom:4px;">
                            <span style="font-size:18px;">{{ $widget->chart_type === 'pie' ? '🥧' : '📊' }}</span>
                            <h3 style="margin:0; font-size:16px;">{{ $widget->name }}</h3>
                        </div>
                        <div style="display:flex; gap:12px; font-size:13px; color:#6b7280;">
                            <span>Type: <strong>{{ strtoupper($widget->chart_type) }}</strong></span>
                            <span>Status: <strong style="color:{{ $widget->status ? '#16a34a':'#dc2626' }}">{{ $widget->status ? 'Active':'Inactive' }}</strong></span>
                            <span>Created: {{ $widget->created_at->format('d M Y') }}</span>
                        </div>
                    </div>
                    <div style="display:flex; gap:8px; flex-shrink:0;">
                        <a href="{{ route('widgets.show', $widget) }}" class="btn btn-secondary">View</a>
                        <a href="{{ route('widgets.edit', $widget) }}" class="btn btn-secondary">Edit</a>
                        <form action="{{ route('widgets.destroy', $widget) }}" method="POST"
                              onsubmit="return confirm('Delete \'{{ addslashes($widget->name) }}\'? This cannot be undone.')">
                            @csrf @method('DELETE')
                            <button type="submit" class="btn" style="background:#dc2626; border-color:#dc2626;">Delete</button>
                        </form>
                    </div>
                </div>
            @endforeach
        </div>
    @endif
</div>
@endsection