@extends('layouts.app_widget')

@section('topbar_actions')
    <button type="button" class="btn btn-secondary" onclick="window.history.back()">Back</button>
    <button type="button" class="btn" onclick="document.getElementById('widgetForm').submit()">
        {{ $widget ? 'Update Widget' : 'Save Widget' }}
    </button>
@endsection

@section('styles')
<style>
    .builder-shell {
        max-width: 1500px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 360px 1fr;
        gap: 16px;
        align-items: start;
    }

    .sidebar {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 16px;
        overflow: hidden;
        position: sticky;
        top: 16px;
        height: calc(100vh - 110px);
        display: flex;
        flex-direction: column;
    }

    .sidebar-head {
        padding: 16px;
        border-bottom: 1px solid #e5e7eb;
    }

    .sidebar-title {
        font-size: 18px;
        font-weight: 700;
        margin: 0 0 6px 0;
    }

    .sidebar-subtitle {
        margin: 0;
        font-size: 13px;
        color: #6b7280;
    }

    .accordion-list {
        overflow: auto;
        padding: 10px;
    }

    .panel {
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        margin-bottom: 10px;
        background: #fff;
    }

    .panel-header {
        width: 100%;
        border: 0;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 14px;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
    }

    .panel-body {
        padding: 0 14px 14px 14px;
        border-top: 1px solid #f1f5f9;
    }

    .panel.collapsed .panel-body {
        display: none;
    }

    .preview-area {
        display: grid;
        gap: 16px;
    }

    .canvas-card,
    .json-card {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 16px;
        padding: 16px;
    }

    .canvas-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 14px;
    }

    .canvas-title {
        margin: 0;
        font-size: 18px;
        font-weight: 700;
    }

    .canvas-subtitle {
        color: #6b7280;
        font-size: 13px;
        margin-top: 4px;
    }

    .chart-stage {
        background: #fff;
        border: 1px dashed #d1d5db;
        border-radius: 16px;
        padding: 20px;
        min-height: 520px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #chartPreview {
        width: 100%;
    }

    .field {
        margin-bottom: 12px;
    }

    .field label {
        display: block;
        font-size: 12px;
        font-weight: 700;
        margin-bottom: 6px;
        color: #374151;
    }

    .field input,
    .field select,
    .field textarea {
        width: 100%;
        min-height: 38px;
        border: 1px solid #d1d5db;
        border-radius: 10px;
        padding: 8px 10px;
        background: #fff;
    }

    .field textarea {
        min-height: 80px;
        resize: vertical;
    }

    .grid-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .check {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        margin-bottom: 10px;
    }

    .check input {
        width: auto;
        min-height: auto;
    }

    .table-grid {
        display: grid;
        grid-template-columns: 1fr 120px;
        gap: 10px;
        margin-bottom: 10px;
        align-items: end;
    }

    .mini-title {
        font-size: 12px;
        font-weight: 700;
        color: #6b7280;
        margin: 0 0 10px 0;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    pre {
        background: #0f172a;
        color: #e2e8f0;
        border-radius: 12px;
        padding: 14px;
        overflow: auto;
        font-size: 12px;
    }

    @media (max-width: 1100px) {
        .builder-shell {
            grid-template-columns: 1fr;
        }

        .sidebar {
            position: static;
            height: auto;
        }
    }
</style>
@endsection

@section('content')
@php
    $formAction = $widget ? route('widgets.update', $widget) : route('widgets.store');
    $formMethod = $widget ? 'PUT' : 'POST';
    $initialName = old('name', $widget->name ?? 'Revenue Bar Chart');
    $initialData = old('data_json', $defaultData ?? []);
    $initialConfig = old('config_json', $defaultConfig ?? []);
@endphp

<div class="builder-shell">
    <form id="widgetForm" class="sidebar" action="{{ $formAction }}" method="POST">
        @csrf
        @if($widget)
            @method('PUT')
        @endif

        <input type="hidden" name="chart_type" value="bar">
        <input type="hidden" name="data_source_type" value="manual">

        <div class="sidebar-head">
            <h1 class="sidebar-title">{{ $widget ? 'Edit Bar Chart' : 'Create Bar Chart' }}</h1>
            <p class="sidebar-subtitle">Apex-style widget builder with live preview</p>
        </div>

        <div class="accordion-list">

            <div class="panel">
                <button type="button" class="panel-header">Basic <span>▾</span></button>
                <div class="panel-body">
                    <div class="field">
                        <label>Widget Name</label>
                        <input type="text" name="name" id="name" value="{{ $initialName }}">
                    </div>

                    <div class="field">
                        <label>Chart Height</label>
                        <input type="number" name="config_json[chart][height]" id="chart_height" value="{{ data_get($initialConfig, 'chart.height', 380) }}">
                    </div>
                </div>
            </div>

            <div class="panel">
                <button type="button" class="panel-header">Data <span>▾</span></button>
                <div class="panel-body">
                    <div class="field">
                        <label>Series Name</label>
                        <input type="text" name="data_json[series][0][name]" id="series_name" value="{{ data_get($initialData, 'series.0.name', 'Bar') }}">
                    </div>

                    <p class="mini-title">Categories & Values</p>

                    @for($i = 0; $i < 6; $i++)
                        <div class="table-grid">
                            <div class="field">
                                <label>Category {{ $i + 1 }}</label>
                                <input type="text"
                                       class="category-input"
                                       name="data_json[categories][{{ $i }}]"
                                       value="{{ data_get($initialData, "categories.$i", 'Item '.($i+1)) }}">
                            </div>
                            <div class="field">
                                <label>Value</label>
                                <input type="number"
                                       step="any"
                                       class="value-input"
                                       name="data_json[series][0][data][{{ $i }}]"
                                       value="{{ data_get($initialData, "series.0.data.$i", ($i+1)*10) }}">
                            </div>
                        </div>
                    @endfor
                </div>
            </div>

            <div class="panel">
                <button type="button" class="panel-header">Chart Theme <span>▾</span></button>
                <div class="panel-body">
                    <div class="grid-2">
                        <div class="field">
                            <label>Mode</label>
                            <select name="config_json[theme][mode]" id="theme_mode">
                                <option value="light" @selected(data_get($initialConfig, 'theme.mode', 'light') === 'light')>Light</option>
                                <option value="dark" @selected(data_get($initialConfig, 'theme.mode') === 'dark')>Dark</option>
                            </select>
                        </div>

                        <div class="field">
                            <label>Palette</label>
                            <select name="config_json[theme][palette]" id="theme_palette">
                                <option value="palette1" @selected(data_get($initialConfig, 'theme.palette', 'palette1') === 'palette1')>palette1</option>
                                <option value="palette2" @selected(data_get($initialConfig, 'theme.palette') === 'palette2')>palette2</option>
                                <option value="palette3" @selected(data_get($initialConfig, 'theme.palette') === 'palette3')>palette3</option>
                                <option value="palette4" @selected(data_get($initialConfig, 'theme.palette') === 'palette4')>palette4</option>
                                <option value="palette5" @selected(data_get($initialConfig, 'theme.palette') === 'palette5')>palette5</option>
                            </select>
                        </div>
                    </div>

                    <div class="grid-2">
                        <div class="field">
                            <label>Chart Background</label>
                            <input type="color" name="config_json[chart][background]" id="chart_background" value="{{ data_get($initialConfig, 'chart.background', '#ffffff') }}">
                        </div>

                        <div class="field">
                            <label>Text Color</label>
                            <input type="color" name="config_json[chart][foreColor]" id="chart_foreColor" value="{{ data_get($initialConfig, 'chart.foreColor', '#111827') }}">
                        </div>
                    </div>

                    <div class="field">
                        <label>Main Bar Color</label>
                        <input type="color" name="config_json[colors][0]" id="main_color" value="{{ data_get($initialConfig, 'colors.0', '#3b82f6') }}">
                    </div>

                    <p class="mini-title">Drop Shadow</p>

                    <label class="check">
                        <input type="checkbox" name="config_json[chart][dropShadow][enabled]" id="shadow_enabled" value="1" {{ data_get($initialConfig, 'chart.dropShadow.enabled', false) ? 'checked' : '' }}>
                        Enable chart shadow
                    </label>

                    <div class="grid-2">
                        <div class="field">
                            <label>Blur</label>
                            <input type="number" name="config_json[chart][dropShadow][blur]" id="shadow_blur" value="{{ data_get($initialConfig, 'chart.dropShadow.blur', 4) }}">
                        </div>
                        <div class="field">
                            <label>Opacity</label>
                            <input type="number" step="0.1" min="0" max="1" name="config_json[chart][dropShadow][opacity]" id="shadow_opacity" value="{{ data_get($initialConfig, 'chart.dropShadow.opacity', 0.2) }}">
                        </div>
                    </div>
                </div>
            </div>

            <div class="panel">
                <button type="button" class="panel-header">Axes / Grid <span>▾</span></button>
                <div class="panel-body">
                    <div class="grid-2">
                        <div class="field">
                            <label>X Axis Type</label>
                            <select name="config_json[xaxis][type]" id="xaxis_type">
                                <option value="category" @selected(data_get($initialConfig, 'xaxis.type', 'category') === 'category')>Category</option>
                                <option value="numeric" @selected(data_get($initialConfig, 'xaxis.type') === 'numeric')>Numeric</option>
                                <option value="datetime" @selected(data_get($initialConfig, 'xaxis.type') === 'datetime')>Datetime</option>
                            </select>
                        </div>

                        <div class="field">
                            <label>Y Tick Amount</label>
                            <input type="number" name="config_json[yaxis][tickAmount]" id="yaxis_tickAmount" value="{{ data_get($initialConfig, 'yaxis.tickAmount', 4) }}">
                        </div>
                    </div>

                    <div class="grid-2">
                        <div class="field">
                            <label>X Axis Label Color</label>
                            <input type="color" name="config_json[xaxis][labels][style][colors][0]" id="xaxis_label_color" value="{{ data_get($initialConfig, 'xaxis.labels.style.colors.0', '#111827') }}">
                        </div>

                        <div class="field">
                            <label>Y Axis Label Color</label>
                            <input type="color" name="config_json[yaxis][labels][style][colors][0]" id="yaxis_label_color" value="{{ data_get($initialConfig, 'yaxis.labels.style.colors.0', '#111827') }}">
                        </div>
                    </div>

                    <label class="check">
                        <input type="checkbox" name="config_json[grid][show]" id="grid_show" value="1" {{ data_get($initialConfig, 'grid.show', true) ? 'checked' : '' }}>
                        Show Grid
                    </label>

                    <div class="grid-2">
                        <div class="field">
                            <label>Grid Position</label>
                            <select name="config_json[grid][position]" id="grid_position">
                                <option value="front" @selected(data_get($initialConfig, 'grid.position') === 'front')>Front</option>
                                <option value="back" @selected(data_get($initialConfig, 'grid.position', 'back') === 'back')>Back</option>
                            </select>
                        </div>

                        <div class="field">
                            <label>Grid Border Color</label>
                            <input type="color" name="config_json[grid][borderColor]" id="grid_borderColor" value="{{ data_get($initialConfig, 'grid.borderColor', '#cbd5e1') }}">
                        </div>
                    </div>
                </div>
            </div>

            <div class="panel">
                <button type="button" class="panel-header">Fonts <span>▾</span></button>
                <div class="panel-body">
                    <div class="field">
                        <label>Font Family</label>
                        <select name="config_json[chart][fontFamily]" id="chart_fontFamily">
                            <option value="Roboto, sans-serif" @selected(data_get($initialConfig, 'chart.fontFamily', 'Roboto, sans-serif') === 'Roboto, sans-serif')>Roboto</option>
                            <option value="Inter, sans-serif" @selected(data_get($initialConfig, 'chart.fontFamily') === 'Inter, sans-serif')>Inter</option>
                            <option value="Arial, sans-serif" @selected(data_get($initialConfig, 'chart.fontFamily') === 'Arial, sans-serif')>Arial</option>
                            <option value="Poppins, sans-serif" @selected(data_get($initialConfig, 'chart.fontFamily') === 'Poppins, sans-serif')>Poppins</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="panel">
                <button type="button" class="panel-header">Chart Options <span>▾</span></button>
                <div class="panel-body">
                    <label class="check">
                        <input type="checkbox" name="config_json[plotOptions][bar][horizontal]" id="bar_horizontal" value="1" {{ data_get($initialConfig, 'plotOptions.bar.horizontal', true) ? 'checked' : '' }}>
                        Horizontal
                    </label>

                    <label class="check">
                        <input type="checkbox" name="config_json[plotOptions][bar][distributed]" id="bar_distributed" value="1" {{ data_get($initialConfig, 'plotOptions.bar.distributed', false) ? 'checked' : '' }}>
                        Distributed
                    </label>

                    <div class="grid-2">
                        <div class="field">
                            <label>Border Radius</label>
                            <input type="number" name="config_json[plotOptions][bar][borderRadius]" id="bar_borderRadius" value="{{ data_get($initialConfig, 'plotOptions.bar.borderRadius', 8) }}">
                        </div>

                        <div class="field">
                            <label>Bar Height</label>
                            <input type="text" name="config_json[plotOptions][bar][barHeight]" id="bar_height" value="{{ data_get($initialConfig, 'plotOptions.bar.barHeight', '70%') }}">
                        </div>
                    </div>

                    <div class="grid-2">
                        <div class="field">
                            <label>Radius Application</label>
                            <select name="config_json[plotOptions][bar][borderRadiusApplication]" id="bar_borderRadiusApplication">
                                <option value="around" @selected(data_get($initialConfig, 'plotOptions.bar.borderRadiusApplication') === 'around')>Around</option>
                                <option value="end" @selected(data_get($initialConfig, 'plotOptions.bar.borderRadiusApplication', 'end') === 'end')>End</option>
                            </select>
                        </div>

                        <div class="field">
                            <label>Label Position</label>
                            <select name="config_json[plotOptions][bar][dataLabels][position]" id="bar_label_position">
                                <option value="top" @selected(data_get($initialConfig, 'plotOptions.bar.dataLabels.position') === 'top')>Top</option>
                                <option value="center" @selected(data_get($initialConfig, 'plotOptions.bar.dataLabels.position', 'center') === 'center')>Center</option>
                                <option value="bottom" @selected(data_get($initialConfig, 'plotOptions.bar.dataLabels.position') === 'bottom')>Bottom</option>
                            </select>
                        </div>
                    </div>

                    <div class="field">
                        <label>Background Bar Color</label>
                        <input type="color" name="config_json[plotOptions][bar][colors][backgroundBarColors][0]" id="background_bar_color" value="{{ data_get($initialConfig, 'plotOptions.bar.colors.backgroundBarColors.0', '#e5e7eb') }}">
                    </div>
                </div>
            </div>

            <div class="panel">
                <button type="button" class="panel-header">Chart Fill <span>▾</span></button>
                <div class="panel-body">
                    <div class="grid-2">
                        <div class="field">
                            <label>Fill Opacity</label>
                            <input type="number" step="0.1" min="0" max="1" name="config_json[fill][opacity]" id="fill_opacity" value="{{ data_get($initialConfig, 'fill.opacity', 1) }}">
                        </div>

                        <div class="field">
                            <label>Fill Type</label>
                            <select name="config_json[fill][type]" id="fill_type">
                                <option value="solid" @selected(data_get($initialConfig, 'fill.type', 'solid') === 'solid')>Solid</option>
                                <option value="gradient" @selected(data_get($initialConfig, 'fill.type') === 'gradient')>Gradient</option>
                                <option value="pattern" @selected(data_get($initialConfig, 'fill.type') === 'pattern')>Pattern</option>
                            </select>
                        </div>
                    </div>

                    <label class="check">
                        <input type="checkbox" name="config_json[stroke][show]" id="stroke_show" value="1" {{ data_get($initialConfig, 'stroke.show', false) ? 'checked' : '' }}>
                        Show Stroke
                    </label>

                    <div class="grid-2">
                        <div class="field">
                            <label>Stroke Color</label>
                            <input type="color" name="config_json[stroke][colors][0]" id="stroke_color" value="{{ data_get($initialConfig, 'stroke.colors.0', '#111827') }}">
                        </div>

                        <div class="field">
                            <label>Stroke Width</label>
                            <input type="number" name="config_json[stroke][width]" id="stroke_width" value="{{ data_get($initialConfig, 'stroke.width', 1) }}">
                        </div>
                    </div>
                </div>
            </div>

            <div class="panel">
                <button type="button" class="panel-header">Legend <span>▾</span></button>
                <div class="panel-body">
                    <label class="check">
                        <input type="checkbox" name="config_json[legend][show]" id="legend_show" value="1" {{ data_get($initialConfig, 'legend.show', true) ? 'checked' : '' }}>
                        Show Legend
                    </label>

                    <div class="grid-2">
                        <div class="field">
                            <label>Position</label>
                            <select name="config_json[legend][position]" id="legend_position">
                                <option value="top" @selected(data_get($initialConfig, 'legend.position') === 'top')>Top</option>
                                <option value="bottom" @selected(data_get($initialConfig, 'legend.position', 'bottom') === 'bottom')>Bottom</option>
                                <option value="left" @selected(data_get($initialConfig, 'legend.position') === 'left')>Left</option>
                                <option value="right" @selected(data_get($initialConfig, 'legend.position') === 'right')>Right</option>
                            </select>
                        </div>

                        <div class="field">
                            <label>Align</label>
                            <select name="config_json[legend][horizontalAlign]" id="legend_horizontalAlign">
                                <option value="left" @selected(data_get($initialConfig, 'legend.horizontalAlign') === 'left')>Left</option>
                                <option value="center" @selected(data_get($initialConfig, 'legend.horizontalAlign', 'center') === 'center')>Center</option>
                                <option value="right" @selected(data_get($initialConfig, 'legend.horizontalAlign') === 'right')>Right</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <div class="panel">
                <button type="button" class="panel-header">Datalabels / Markers <span>▾</span></button>
                <div class="panel-body">
                    <label class="check">
                        <input type="checkbox" name="config_json[dataLabels][enabled]" id="dataLabels_enabled" value="1" {{ data_get($initialConfig, 'dataLabels.enabled', true) ? 'checked' : '' }}>
                        Show Data Labels
                    </label>

                    <div class="grid-2">
                        <div class="field">
                            <label>Font Size</label>
                            <input type="text" name="config_json[dataLabels][style][fontSize]" id="dataLabels_fontSize" value="{{ data_get($initialConfig, 'dataLabels.style.fontSize', '12px') }}">
                        </div>

                        <div class="field">
                            <label>Font Weight</label>
                            <input type="number" name="config_json[dataLabels][style][fontWeight]" id="dataLabels_fontWeight" value="{{ data_get($initialConfig, 'dataLabels.style.fontWeight', 600) }}">
                        </div>
                    </div>

                    <div class="field">
                        <label>Label Color</label>
                        <input type="color" name="config_json[dataLabels][style][colors][0]" id="dataLabels_color" value="{{ data_get($initialConfig, 'dataLabels.style.colors.0', '#ffffff') }}">
                    </div>
                </div>
            </div>

        </div>
    </form>

    <div class="preview-area">
        <div class="canvas-card">
            <div class="canvas-toolbar">
                <div>
                    <h2 class="canvas-title" id="previewTitle">{{ $initialName }}</h2>
                    <div class="canvas-subtitle">Live ApexCharts preview</div>
                </div>
            </div>

            <div class="chart-stage">
                <div id="chartPreview"></div>
            </div>
        </div>

        <div class="json-card">
            <h3 style="margin-top:0;">Current Payload</h3>
            <pre id="jsonPreview"></pre>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    const form = document.getElementById('widgetForm');
    const previewTitle = document.getElementById('previewTitle');
    const jsonPreview = document.getElementById('jsonPreview');
    const chartEl = document.querySelector('#chartPreview');

    document.querySelectorAll('.panel').forEach((panel, index) => {
        if (index > 1) {
            panel.classList.add('collapsed');
        }

        panel.querySelector('.panel-header').addEventListener('click', () => {
            panel.classList.toggle('collapsed');
        });
    });

    function getValue(id, fallback = '') {
        const el = document.getElementById(id);
        return el ? el.value : fallback;
    }

    function getChecked(id, fallback = false) {
        const el = document.getElementById(id);
        return el ? el.checked : fallback;
    }

    function getCategories() {
        return Array.from(document.querySelectorAll('.category-input'))
            .map(el => el.value)
            .filter(v => v !== '');
    }

    function getValues() {
        return Array.from(document.querySelectorAll('.value-input'))
            .map(el => el.value === '' ? null : Number(el.value))
            .filter(v => v !== null);
    }

    function buildPayload() {
        const categories = getCategories();
        const values = getValues();

        return {
            name: getValue('name', 'Revenue Bar Chart'),
            chart_type: 'bar',
            data_source_type: 'manual',
            data_json: {
                categories: categories,
                series: [
                    {
                        name: getValue('series_name', 'Bar'),
                        data: values
                    }
                ]
            },
            config_json: {
                chart: {
                    type: 'bar',
                    height: Number(getValue('chart_height', 380)),
                    background: getValue('chart_background', '#ffffff'),
                    foreColor: getValue('chart_foreColor', '#111827'),
                    fontFamily: getValue('chart_fontFamily', 'Roboto, sans-serif'),
                    toolbar: {
                        show: false
                    },
                    dropShadow: {
                        enabled: getChecked('shadow_enabled', false),
                        top: 2,
                        left: 2,
                        blur: Number(getValue('shadow_blur', 4)),
                        color: '#000000',
                        opacity: Number(getValue('shadow_opacity', 0.2))
                    }
                },
                theme: {
                    mode: getValue('theme_mode', 'light'),
                    palette: getValue('theme_palette', 'palette1')
                },
                colors: [
                    getValue('main_color', '#3b82f6')
                ],
                plotOptions: {
                    bar: {
                        horizontal: getChecked('bar_horizontal', true),
                        distributed: getChecked('bar_distributed', false),
                        borderRadius: Number(getValue('bar_borderRadius', 8)),
                        borderRadiusApplication: getValue('bar_borderRadiusApplication', 'end'),
                        borderRadiusWhenStacked: 'last',
                        barHeight: getValue('bar_height', '70%'),
                        dataLabels: {
                            position: getValue('bar_label_position', 'center')
                        },
                        colors: {
                            backgroundBarColors: [
                                getValue('background_bar_color', '#e5e7eb')
                            ],
                            backgroundBarOpacity: 1,
                            backgroundBarRadius: 0
                        }
                    }
                },
                fill: {
                    opacity: Number(getValue('fill_opacity', 1)),
                    type: getValue('fill_type', 'solid')
                },
                stroke: {
                    show: getChecked('stroke_show', false),
                    colors: [
                        getValue('stroke_color', '#111827')
                    ],
                    width: Number(getValue('stroke_width', 1)),
                    lineCap: 'butt',
                    dashArray: 0
                },
                legend: {
                    show: getChecked('legend_show', true),
                    showForSingleSeries: false,
                    floating: false,
                    position: getValue('legend_position', 'bottom'),
                    horizontalAlign: getValue('legend_horizontalAlign', 'center'),
                    offsetX: 0,
                    offsetY: 0,
                    fontSize: '12px',
                    fontWeight: 400,
                    itemMargin: {
                        horizontal: 8,
                        vertical: 4
                    },
                    markers: {
                        width: 10,
                        height: 10,
                        radius: 10,
                        offsetX: 0,
                        offsetY: 0
                    }
                },
                dataLabels: {
                    enabled: getChecked('dataLabels_enabled', true),
                    offsetX: 0,
                    offsetY: 0,
                    style: {
                        fontSize: getValue('dataLabels_fontSize', '12px'),
                        fontWeight: Number(getValue('dataLabels_fontWeight', 600)),
                        colors: [
                            getValue('dataLabels_color', '#ffffff')
                        ]
                    },
                    background: {
                        enabled: false
                    },
                    dropShadow: {
                        enabled: false,
                        blur: 2,
                        left: 1,
                        top: 1,
                        color: '#000000',
                        opacity: 0.25
                    }
                },
                xaxis: {
                    type: getValue('xaxis_type', 'category'),
                    position: 'bottom',
                    labels: {
                        show: true,
                        offsetX: 0,
                        offsetY: 0,
                        style: {
                            colors: [getValue('xaxis_label_color', '#111827')],
                            fontSize: '12px',
                            fontWeight: 400
                        }
                    },
                    title: {
                        text: '',
                        offsetX: 0,
                        offsetY: 0,
                        style: {
                            color: '#111827',
                            fontSize: '12px',
                            fontWeight: 400
                        }
                    },
                    axisTicks: {
                        show: true,
                        color: '#94a3b8',
                        height: 6,
                        offsetX: 0,
                        offsetY: 0
                    },
                    axisBorder: {
                        show: true,
                        color: '#94a3b8',
                        height: 1,
                        offsetX: 0,
                        offsetY: 0
                    }
                },
                yaxis: {
                    show: true,
                    opposite: false,
                    reversed: false,
                    min: null,
                    max: null,
                    tickAmount: Number(getValue('yaxis_tickAmount', 4)),
                    labels: {
                        show: true,
                        offsetX: 0,
                        offsetY: 0,
                        style: {
                            colors: [getValue('yaxis_label_color', '#111827')],
                            fontSize: '12px',
                            fontWeight: 400
                        }
                    },
                    title: {
                        text: '',
                        offsetX: 0,
                        offsetY: 0,
                        style: {
                            color: '#111827',
                            fontSize: '12px',
                            fontWeight: 400
                        }
                    },
                    axisTicks: {
                        show: true,
                        color: '#94a3b8',
                        width: 6,
                        offsetX: 0,
                        offsetY: 0
                    },
                    axisBorder: {
                        show: true,
                        color: '#94a3b8',
                        width: 1,
                        offsetX: 0,
                        offsetY: 0
                    }
                },
                grid: {
                    show: getChecked('grid_show', true),
                    position: getValue('grid_position', 'back'),
                    borderColor: getValue('grid_borderColor', '#cbd5e1'),
                    strokeDashArray: 0,
                    row: {
                        colors: [],
                        opacity: 0.5
                    },
                    column: {
                        colors: [],
                        opacity: 0.5
                    },
                    xaxis: {
                        lines: {
                            show: false
                        }
                    },
                    yaxis: {
                        lines: {
                            show: true
                        }
                    }
                }
            }
        };
    }

    function buildApexOptions(payload) {
        return {
            chart: payload.config_json.chart,
            theme: payload.config_json.theme,
            series: payload.data_json.series,
            colors: payload.config_json.colors,
            plotOptions: payload.config_json.plotOptions,
            fill: payload.config_json.fill,
            stroke: payload.config_json.stroke,
            legend: payload.config_json.legend,
            dataLabels: payload.config_json.dataLabels,
            xaxis: {
                ...payload.config_json.xaxis,
                categories: payload.data_json.categories
            },
            yaxis: payload.config_json.yaxis,
            grid: payload.config_json.grid
        };
    }

    let chart = null;

    function renderPreview() {
        const payload = buildPayload();
        const options = buildApexOptions(payload);

        previewTitle.textContent = payload.name || 'Untitled Chart';
        jsonPreview.textContent = JSON.stringify(payload, null, 2);

        if (chart) {
            chart.destroy();
        }

        chart = new ApexCharts(chartEl, options);
        chart.render();
    }

    form.querySelectorAll('input, select, textarea').forEach(el => {
        el.addEventListener('input', renderPreview);
        el.addEventListener('change', renderPreview);
    });

    renderPreview();
</script>
@endsection