@extends('layouts.app_widget')

@section('content')
    <div style="max-width: 1200px; margin: 0 auto; display:grid; gap:16px;">
        <div style="display:flex; justify-content:space-between; align-items:center;">
            <div>
                <h1 style="margin:0;">{{ $widget->name }}</h1>
                <div style="color:#6b7280; margin-top:4px;">Saved widget preview</div>
            </div>
            <a class="btn btn-secondary" href="{{ route('widgets.edit', $widget) }}">Edit</a>
        </div>

        <div style="background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:20px;">
            <div id="bar-chart"></div>
        </div>

        <div style="display:grid; grid-template-columns:1fr 1fr; gap:16px;">
            <div style="background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:16px;">
                <h3 style="margin-top:0;">Data JSON</h3>
                <pre>{{ json_encode($widget->data_json, JSON_PRETTY_PRINT) }}</pre>
            </div>

            <div style="background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:16px;">
                <h3 style="margin-top:0;">Config JSON</h3>
                <pre>{{ json_encode($widget->config_json, JSON_PRETTY_PRINT) }}</pre>
            </div>
        </div>
    </div>
@endsection

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