@extends('layouts.app_widget')

@section('topbar_actions')
    <a href="{{ route('widgets.index') }}" class="btn btn-secondary">← Back to List</a>
    <a href="{{ route('widgets.edit', $widget) }}" class="btn">Edit Widget</a>

    <form action="{{ route('widgets.destroy', $widget) }}" method="POST" style="display:inline;"
          onsubmit="return confirm('Delete this widget? This cannot be undone.')">
        @csrf
        @method('DELETE')
        <button type="submit" class="btn" style="background:#dc2626; border-color:#dc2626;">Delete</button>
    </form>
@endsection

@section('styles')
<style>
    .show-shell {
        max-width: 1200px;
        margin: 0 auto;
        display: grid;
        gap: 16px;
    }
    .attr-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 12px;
    }
    .attr-card {
        background: #f8fafc;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        padding: 12px 14px;
    }
    .attr-label {
        font-size: 11px;
        font-weight: 700;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: .05em;
        margin-bottom: 4px;
    }
    .attr-value {
        font-size: 15px;
        font-weight: 600;
        color: #111827;
        word-break: break-all;
    }
    .section-card {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 16px;
        padding: 20px;
    }
    .section-title {
        font-size: 16px;
        font-weight: 700;
        margin: 0 0 14px 0;
        padding-bottom: 10px;
        border-bottom: 1px solid #f1f5f9;
    }
    .data-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #f1f5f9;
        font-size: 14px;
    }
    .data-row:last-child { border-bottom: none; }
    .badge {
        display: inline-block;
        padding: 2px 10px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 600;
    }
    .badge-green { background: #dcfce7; color: #166534; }
    .badge-red   { background: #fee2e2; color: #991b1b; }
    .badge-blue  { background: #dbeafe; color: #1e40af; }
</style>
@endsection

@section('content')
@php
    $cfg  = $widget->config_json  ?? [];
    $data = $widget->data_json    ?? [];
    $categories = $data['categories'] ?? [];
    $series     = $data['series'][0]  ?? [];
    $values     = $series['data']     ?? [];
@endphp

<div class="show-shell">

    {{-- Header --}}
    <div>
        <h1 style="margin:0; font-size:24px;">{{ $widget->name }}</h1>
        <div style="color:#6b7280; margin-top:4px; font-size:14px;">
            Widget #{{ $widget->id }} &middot; Created {{ $widget->created_at->format('d M Y, H:i') }}
        </div>
    </div>

    {{-- Basic Attributes --}}
    <div class="section-card">
        <p class="section-title">Basic Attributes</p>
        <div class="attr-grid">
            <div class="attr-card">
                <div class="attr-label">Widget Name</div>
                <div class="attr-value">{{ $widget->name }}</div>
            </div>
            <div class="attr-card">
                <div class="attr-label">Chart Type</div>
                <div class="attr-value">{{ strtoupper($widget->chart_type) }}</div>
            </div>
            <div class="attr-card">
                <div class="attr-label">Data Source</div>
                <div class="attr-value">{{ $widget->data_source_type }}</div>
            </div>
            <div class="attr-card">
                <div class="attr-label">Status</div>
                <div class="attr-value">
                    <span class="badge {{ $widget->status ? 'badge-green' : 'badge-red' }}">
                        {{ $widget->status ? 'Active' : 'Inactive' }}
                    </span>
                </div>
            </div>
            <div class="attr-card">
                <div class="attr-label">Chart Height</div>
                <div class="attr-value">{{ data_get($cfg, 'chart.height', '—') }}px</div>
            </div>
            <div class="attr-card">
                <div class="attr-label">Font Family</div>
                <div class="attr-value" style="font-size:13px;">{{ data_get($cfg, 'chart.fontFamily', '—') }}</div>
            </div>
        </div>
    </div>

    {{-- Theme & Style Attributes --}}
    <div class="section-card">
        <p class="section-title">Theme & Style</p>
        <div class="attr-grid">
            <div class="attr-card">
                <div class="attr-label">Theme Mode</div>
                <div class="attr-value">{{ ucfirst(data_get($cfg, 'theme.mode', '—')) }}</div>
            </div>
            <div class="attr-card">
                <div class="attr-label">Palette</div>
                <div class="attr-value">{{ data_get($cfg, 'theme.palette', '—') }}</div>
            </div>
            <div class="attr-card">
                <div class="attr-label">Background</div>
                <div class="attr-value" style="display:flex; align-items:center; gap:8px;">
                    @if(data_get($cfg,'chart.background'))
                        <span style="display:inline-block; width:18px; height:18px; border-radius:4px; border:1px solid #e5e7eb; background:{{ data_get($cfg,'chart.background') }};"></span>
                    @endif
                    {{ data_get($cfg, 'chart.background', '—') }}
                </div>
            </div>
            <div class="attr-card">
                <div class="attr-label">Text (Fore) Color</div>
                <div class="attr-value" style="display:flex; align-items:center; gap:8px;">
                    @if(data_get($cfg,'chart.foreColor'))
                        <span style="display:inline-block; width:18px; height:18px; border-radius:4px; border:1px solid #e5e7eb; background:{{ data_get($cfg,'chart.foreColor') }};"></span>
                    @endif
                    {{ data_get($cfg, 'chart.foreColor', '—') }}
                </div>
            </div>
            <div class="attr-card">
                <div class="attr-label">Main Bar Color</div>
                <div class="attr-value" style="display:flex; align-items:center; gap:8px;">
                    @if(data_get($cfg,'colors.0'))
                        <span style="display:inline-block; width:18px; height:18px; border-radius:4px; border:1px solid #e5e7eb; background:{{ data_get($cfg,'colors.0') }};"></span>
                    @endif
                    {{ data_get($cfg, 'colors.0', '—') }}
                </div>
            </div>
            <div class="attr-card">
                <div class="attr-label">Fill Type</div>
                <div class="attr-value">{{ ucfirst(data_get($cfg, 'fill.type', '—')) }}</div>
            </div>
            <div class="attr-card">
                <div class="attr-label">Fill Opacity</div>
                <div class="attr-value">{{ data_get($cfg, 'fill.opacity', '—') }}</div>
            </div>
        </div>
    </div>

    {{-- Bar Options --}}
    <div class="section-card">
        <p class="section-title">Bar Options</p>
        <div class="attr-grid">
            <div class="attr-card">
                <div class="attr-label">Horizontal</div>
                <div class="attr-value">
                    <span class="badge {{ data_get($cfg,'plotOptions.bar.horizontal') ? 'badge-blue' : 'badge-red' }}">
                        {{ data_get($cfg,'plotOptions.bar.horizontal') ? 'Yes' : 'No' }}
                    </span>
                </div>
            </div>
            <div class="attr-card">
                <div class="attr-label">Distributed</div>
                <div class="attr-value">
                    <span class="badge {{ data_get($cfg,'plotOptions.bar.distributed') ? 'badge-blue' : 'badge-red' }}">
                        {{ data_get($cfg,'plotOptions.bar.distributed') ? 'Yes' : 'No' }}
                    </span>
                </div>
            </div>
            <div class="attr-card">
                <div class="attr-label">Border Radius</div>
                <div class="attr-value">{{ data_get($cfg, 'plotOptions.bar.borderRadius', '—') }}</div>
            </div>
            <div class="attr-card">
                <div class="attr-label">Bar Height</div>
                <div class="attr-value">{{ data_get($cfg, 'plotOptions.bar.barHeight', '—') }}</div>
            </div>
            <div class="attr-card">
                <div class="attr-label">Radius Application</div>
                <div class="attr-value">{{ ucfirst(data_get($cfg, 'plotOptions.bar.borderRadiusApplication', '—')) }}</div>
            </div>
            <div class="attr-card">
                <div class="attr-label">Label Position</div>
                <div class="attr-value">{{ ucfirst(data_get($cfg, 'plotOptions.bar.dataLabels.position', '—')) }}</div>
            </div>
        </div>
    </div>

    {{-- Axes & Grid --}}
    <div class="section-card">
        <p class="section-title">Axes & Grid</p>
        <div class="attr-grid">
            <div class="attr-card">
                <div class="attr-label">X Axis Type</div>
                <div class="attr-value">{{ ucfirst(data_get($cfg, 'xaxis.type', '—')) }}</div>
            </div>
            <div class="attr-card">
                <div class="attr-label">Y Tick Amount</div>
                <div class="attr-value">{{ data_get($cfg, 'yaxis.tickAmount', '—') }}</div>
            </div>
            <div class="attr-card">
                <div class="attr-label">Show Grid</div>
                <div class="attr-value">
                    <span class="badge {{ data_get($cfg,'grid.show') ? 'badge-blue' : 'badge-red' }}">
                        {{ data_get($cfg,'grid.show') ? 'Yes' : 'No' }}
                    </span>
                </div>
            </div>
            <div class="attr-card">
                <div class="attr-label">Grid Position</div>
                <div class="attr-value">{{ ucfirst(data_get($cfg, 'grid.position', '—')) }}</div>
            </div>
            <div class="attr-card">
                <div class="attr-label">Grid Border Color</div>
                <div class="attr-value" style="display:flex; align-items:center; gap:8px;">
                    @if(data_get($cfg,'grid.borderColor'))
                        <span style="display:inline-block; width:18px; height:18px; border-radius:4px; border:1px solid #e5e7eb; background:{{ data_get($cfg,'grid.borderColor') }};"></span>
                    @endif
                    {{ data_get($cfg, 'grid.borderColor', '—') }}
                </div>
            </div>
        </div>
    </div>

    {{-- Data (Categories & Values) --}}
    <div class="section-card">
        <p class="section-title">Data — Series: "{{ $series['name'] ?? '—' }}"</p>
        @if(count($categories) > 0)
            <div style="overflow-x:auto;">
                <table style="width:100%; border-collapse:collapse; font-size:14px;">
                    <thead>
                        <tr style="background:#f8fafc;">
                            <th style="text-align:left; padding:8px 12px; border-bottom:2px solid #e5e7eb;">#</th>
                            <th style="text-align:left; padding:8px 12px; border-bottom:2px solid #e5e7eb;">Category</th>
                            <th style="text-align:right; padding:8px 12px; border-bottom:2px solid #e5e7eb;">Value</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($categories as $i => $cat)
                            <tr style="{{ $loop->even ? 'background:#f8fafc;' : '' }}">
                                <td style="padding:8px 12px; border-bottom:1px solid #f1f5f9; color:#6b7280;">{{ $i + 1 }}</td>
                                <td style="padding:8px 12px; border-bottom:1px solid #f1f5f9; font-weight:500;">{{ $cat }}</td>
                                <td style="padding:8px 12px; border-bottom:1px solid #f1f5f9; text-align:right; font-weight:600; color:#2563eb;">
                                    {{ $values[$i] ?? '—' }}
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <p style="color:#6b7280; margin:0;">No data rows saved.</p>
        @endif
    </div>

    {{-- Legend & Data Labels --}}
    <div style="display:grid; grid-template-columns:1fr 1fr; gap:16px;">
        <div class="section-card">
            <p class="section-title">Legend</p>
            <div class="data-row"><span>Show Legend</span> <span class="badge {{ data_get($cfg,'legend.show') ? 'badge-blue':'badge-red' }}">{{ data_get($cfg,'legend.show') ? 'Yes':'No' }}</span></div>
            <div class="data-row"><span>Position</span>     <span>{{ ucfirst(data_get($cfg,'legend.position','—')) }}</span></div>
            <div class="data-row"><span>Align</span>        <span>{{ ucfirst(data_get($cfg,'legend.horizontalAlign','—')) }}</span></div>
        </div>
        <div class="section-card">
            <p class="section-title">Data Labels</p>
            <div class="data-row"><span>Show Labels</span>  <span class="badge {{ data_get($cfg,'dataLabels.enabled') ? 'badge-blue':'badge-red' }}">{{ data_get($cfg,'dataLabels.enabled') ? 'Yes':'No' }}</span></div>
            <div class="data-row"><span>Font Size</span>    <span>{{ data_get($cfg,'dataLabels.style.fontSize','—') }}</span></div>
            <div class="data-row"><span>Font Weight</span>  <span>{{ data_get($cfg,'dataLabels.style.fontWeight','—') }}</span></div>
            <div class="data-row">
                <span>Label Color</span>
                <span style="display:flex; align-items:center; gap:6px;">
                    @if(data_get($cfg,'dataLabels.style.colors.0'))
                        <span style="display:inline-block; width:14px; height:14px; border-radius:3px; border:1px solid #e5e7eb; background:{{ data_get($cfg,'dataLabels.style.colors.0') }};"></span>
                    @endif
                    {{ data_get($cfg,'dataLabels.style.colors.0','—') }}
                </span>
            </div>
        </div>
    </div>

    {{-- Chart Preview --}}
    <div class="section-card">
        <p class="section-title">Chart Preview</p>
        <div id="chartPreview"></div>
    </div>

</div>
@endsection

@section('scripts')
<script>
    const options = @json($options);
    const chart = new ApexCharts(document.querySelector('#chartPreview'), options);
    chart.render();
</script>
@endsection