@extends('layouts.app_widget')

@section('topbar_actions')
    <a class="btn btn-secondary" href="{{ route('pie-chart.index') }}">Pie Widgets</a>
    <a class="btn" href="{{ route('pie-chart.edit', $widget->id) }}">Edit</a>
@endsection

@section('content')
    <div style="max-width: 1200px; margin: 0 auto; display:grid; gap:16px;">
        <div>
            <h1 style="margin:0;">{{ $widget->name }}</h1>
            <div style="color:#6b7280; margin-top:4px;">Saved pie chart preview</div>
        </div>

        <div style="background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:20px;">
            <div id="pie-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('#pie-chart'), options);
    chart.render();
</script>
@endsection