@extends('layouts.demo10.builder')

@section('styles')
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('assets/css/dashboard-builder.css') }}">
<style>
    #scrollable_content {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 100%;
    }

    #scrollable_content > main {
        display: flex;
        flex: 1 1 auto;
        height: 100%;
        min-height: 0;
    }

    #scrollable_content > main > .kt-container-fixed {
        display: flex;
        flex: 1 1 auto;
        width: 100%;
        height: 100%;
        min-height: 0;
        padding: 0 !important;
    }

    .dbuilder-shell {
        display: grid;
        width: 100%;
        height: 100%;
        flex: 1 1 auto;
        min-height: 0;
        grid-template-rows: minmax(0, 1fr);
    }

    .dbuilder-view.is-active {
        flex: 1 1 auto;
        height: 100%;
        min-height: 0;
        min-width: 0;
    }

    .dbuilder-workspace {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
        height: 100%;
        min-height: 0;
        min-width: 0;
    }
</style>
@endsection

@section('content')
@can('view.dashboard_builder')
<div class="dbuilder-shell is-widgets-hidden"
    data-dashboard-builder
    data-active-tab="designer"
    data-theme-preview-url="{{ route('theme.default.progress') }}"
    data-widget-store-url="{{ route('widgets.store') }}"
    data-widget-update-url-template="{{ route('widgets.update', ['widget' => '__WIDGET_ID__']) }}"
    data-widget-destroy-url-template="{{ route('widgets.destroy', ['widget' => '__WIDGET_ID__']) }}"
    data-widget-id="{{ request('widget_id') }}">
    <aside class="dbuilder-widget-drawer" data-db-widget-drawer aria-hidden="true">
        <div class="dbuilder-widget-drawer-inner">
            <div class="dbuilder-widget-rail">
                <div class="dbuilder-widget-rail-top">
                    <button class="dbuilder-widget-rail-icon" type="button" data-db-sidebar-tab="data" title="Data">
                        <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                            <ellipse cx="12" cy="5.5" rx="7" ry="3.5"></ellipse>
                            <path d="M5 5.5v6c0 1.9 3.1 3.5 7 3.5s7-1.6 7-3.5v-6"></path>
                            <path d="M5 11.5v6c0 1.9 3.1 3.5 7 3.5s7-1.6 7-3.5v-6"></path>
                        </svg>
                        <span class="dbuilder-widget-rail-label">Data</span>
                    </button>
                    <button class="dbuilder-widget-rail-icon active" type="button" data-db-sidebar-tab="theme" title="Chart Theme">
                        <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                            <path d="M12 3l1.6 4.4L18 9l-4.4 1.6L12 15l-1.6-4.4L6 9l4.4-1.6L12 3z"></path>
                            <path d="M18.5 13l.8 2.2L21.5 16l-2.2.8-.8 2.2-.8-2.2-2.2-.8 2.2-.8.8-2.2z"></path>
                            <path d="M5.5 14l.8 2.2 2.2.8-2.2.8-.8 2.2-.8-2.2-2.2-.8 2.2-.8.8-2.2z"></path>
                        </svg>
                        <span class="dbuilder-widget-rail-label">Chart Theme</span>
                    </button>
                    <button class="dbuilder-widget-rail-icon" type="button" data-db-sidebar-tab="axes" title="Axes / Grid">
                        <i class="ki-filled ki-grid-2"></i>
                        <span class="dbuilder-widget-rail-label">Axes / Grid</span>
                    </button>
                    <button class="dbuilder-widget-rail-icon" type="button" data-db-sidebar-tab="fonts" title="Fonts">
                        <i class="ki-filled ki-text"></i>
                        <span class="dbuilder-widget-rail-label">Fonts</span>
                    </button>
                    <button class="dbuilder-widget-rail-icon" type="button" data-db-sidebar-tab="options" title="Chart Options">
                        <i class="ki-filled ki-setting-2"></i>
                        <span class="dbuilder-widget-rail-label">Chart Options</span>
                    </button>
                    <button class="dbuilder-widget-rail-icon" type="button" data-db-sidebar-tab="fill" title="Chart Fill">
                        <i class="ki-filled ki-color-swatch"></i>
                        <span class="dbuilder-widget-rail-label">Chart Fill</span>
                    </button>
                    <button class="dbuilder-widget-rail-icon" type="button" data-db-sidebar-tab="legend" title="Legend">
                        <i class="ki-filled ki-menu"></i>
                        <span class="dbuilder-widget-rail-label">Legend</span>
                    </button>
                    <button class="dbuilder-widget-rail-icon" type="button" data-db-sidebar-tab="labels" title="Data Labels">
                        <i class="ki-filled ki-tablet-text-down"></i>
                        <span class="dbuilder-widget-rail-label">Data Labels</span>
                    </button>
                </div>
                <div class="dbuilder-widget-rail-bottom">
                    <button class="dbuilder-widget-rail-icon" type="button" title="Help">
                        <i class="ki-filled ki-question-2"></i>
                        <span class="dbuilder-widget-rail-label">Help</span>
                    </button>
                    <button class="dbuilder-widget-rail-icon" type="button" title="Settings">
                        <i class="ki-filled ki-setting-2"></i>
                        <span class="dbuilder-widget-rail-label">Settings</span>
                    </button>
                </div>
            </div>

            <div class="dbuilder-widget-drawer-panel">
                <div class="dbuilder-widget-drawer-head">
                    <div class="flex items-start gap-3 min-w-0">
                        <div class="w-10 h-10 rounded-xl bg-[#eef4ff] text-[#2b63ef] flex items-center justify-center">
                            <i class="ki-filled ki-paint-bucket text-lg"></i>
                        </div>
                        <div class="min-w-0">
                            <h3 class="dbuilder-widget-drawer-title" data-db-widget-sidebar-title>Chart Theme</h3>
                            <div class="dbuilder-widget-drawer-copy" data-db-widget-sidebar-subtitle>Configure the selected widget appearance.</div>
                        </div>
                    </div>
                    <div class="flex items-center gap-2">
                        <button class="dbuilder-action primary" type="button" data-db-save-widget>Save Widget</button>
                        <button class="dbuilder-widget-rail-button" type="button" data-db-sidebar-close aria-label="Close sidebar">
                            <i class="ki-filled ki-arrow-left text-sm"></i>
                        </button>
                    </div>
                </div>

                <div class="dbuilder-widget-drawer-body">
                    <div class="dbuilder-sidebar-panels">
                        <div class="dbuilder-sidebar-panel is-active" data-db-sidebar-panel="theme">
                    <div class="dbuilder-widget-section">
                        <div class="dbuilder-widget-section-label">Mode</div>
                        <div class="dbuilder-mode-switch">
                            <button class="dbuilder-mode-option active" type="button" data-db-widget-mode="light">
                                <i class="ki-filled ki-sun text-xs"></i>
                                <span>Light</span>
                            </button>
                            <button class="dbuilder-mode-option" type="button" data-db-widget-mode="dark">
                                <i class="ki-filled ki-moon text-xs"></i>
                                <span>Dark</span>
                            </button>
                        </div>
                    </div>

                    <div class="dbuilder-widget-section">
                        <div class="dbuilder-widget-section-label">Base Colors</div>
                        <div class="dbuilder-color-row" data-db-color-row="background">
                            <div class="dbuilder-field-label">Background</div>
                            <div class="dbuilder-color-code" data-db-color-label="background">#FFFFFF</div>
                            <button class="dbuilder-color-swatch" type="button" data-db-color-trigger="background" aria-label="Choose background color" style="background:#ffffff;"></button>
                            <input class="dbuilder-color-input" type="color" value="#ffffff" data-db-color-input="background">
                        </div>
                        <div class="dbuilder-color-row" data-db-color-row="text">
                            <div class="dbuilder-field-label">Text Color</div>
                            <div class="dbuilder-color-code" data-db-color-label="text">#282B51</div>
                            <button class="dbuilder-color-swatch" type="button" data-db-color-trigger="text" aria-label="Choose text color" style="background:#282b51;"></button>
                            <input class="dbuilder-color-input" type="color" value="#282b51" data-db-color-input="text">
                        </div>
                    </div>

                        <div class="dbuilder-widget-section">
                        <div class="dbuilder-widget-section-label">Color Palette</div>
                        <div class="dbuilder-choice-list">
                            <label class="dbuilder-choice"><input type="radio" name="dbuilder_palette" value="predefined" checked data-db-palette-mode> Select Predefined</label>
                            <label class="dbuilder-choice"><input type="radio" name="dbuilder_palette" value="custom" data-db-palette-mode> Use Custom Colors</label>
                        </div>
                        <select class="dbuilder-select mt-3" data-db-palette-select>
                            <option value="palette1">palette1 (Default)</option>
                            <option value="palette2">palette2</option>
                            <option value="palette3">palette3</option>
                        </select>
                        <div class="dbuilder-swatches">
                            <button class="dbuilder-swatch" type="button" data-db-palette-swatch="#2b63ef" style="background:#2b63ef;"></button>
                            <button class="dbuilder-swatch" type="button" data-db-palette-swatch="#6b7cff" style="background:#6b7cff;"></button>
                            <button class="dbuilder-swatch" type="button" data-db-palette-swatch="#8b5cf6" style="background:#8b5cf6;"></button>
                            <button class="dbuilder-swatch" type="button" data-db-palette-swatch="#ec4899" style="background:#ec4899;"></button>
                            <button class="dbuilder-swatch" type="button" data-db-color-trigger="palette-custom" style="background:#cbd5e1;color:#64748b;">+</button>
                            <input class="dbuilder-color-input" type="color" value="#cbd5e1" data-db-color-input="palette-custom">
                        </div>
                    </div>

                    <div class="dbuilder-widget-section">
                        <div class="dbuilder-widget-section-label">Drop Shadow</div>
                        <div class="flex items-center justify-between gap-3">
                            <div class="text-xs font-semibold text-slate-600">Enabled</div>
                            <button type="button" class="dbuilder-switch is-active" data-db-shadow-toggle aria-pressed="true">
                                <span class="dbuilder-switch-knob"></span>
                            </button>
                        </div>
                        <div class="mt-4 grid gap-4">
                            <label class="grid gap-2">
                                <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                    <span>Blur</span><span data-db-shadow-value="blur">18px</span>
                                </div>
                                <input class="dbuilder-slider" type="range" min="0" max="40" step="1" value="18" data-db-shadow-control="blur">
                            </label>
                            <label class="grid gap-2">
                                <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                    <span>Offset X</span><span data-db-shadow-value="offsetX">0px</span>
                                </div>
                                <input class="dbuilder-slider" type="range" min="-24" max="24" step="1" value="0" data-db-shadow-control="offsetX">
                            </label>
                            <label class="grid gap-2">
                                <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                    <span>Offset Y</span><span data-db-shadow-value="offsetY">12px</span>
                                </div>
                                <input class="dbuilder-slider" type="range" min="-24" max="24" step="1" value="12" data-db-shadow-control="offsetY">
                            </label>
                            <label class="grid gap-2">
                                <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                    <span>Opacity</span><span data-db-shadow-value="opacity">15%</span>
                                </div>
                                <input class="dbuilder-slider" type="range" min="0" max="100" step="1" value="15" data-db-shadow-control="opacity">
                            </label>
                        </div>
                    </div>

                    <div class="dbuilder-widget-section mb-0">
                        <div class="dbuilder-widget-section-label">Shadow Color</div>
                        <div class="dbuilder-color-row" data-db-color-row="shadow">
                            <div class="dbuilder-field-label">Shadow Color</div>
                            <div class="dbuilder-color-code" data-db-color-label="shadow">#202B51</div>
                            <button class="dbuilder-color-swatch" type="button" data-db-color-trigger="shadow" aria-label="Choose shadow color" style="background:#202b51;"></button>
                            <input class="dbuilder-color-input" type="color" value="#202b51" data-db-color-input="shadow">
                        </div>
                    </div>
                </div>
                        <div class="dbuilder-sidebar-panel" data-db-sidebar-panel="options">
                            <div class="dbuilder-widget-section" data-db-chart-options-section="bar">
                                <div class="dbuilder-widget-section-label">Bar Settings</div>
                                <div class="grid gap-3">
                                    <div class="dbuilder-toggle-row">
                                        <div class="dbuilder-inline-label">Horizontal</div>
                                        <button type="button" class="dbuilder-toggle is-active" data-db-chart-toggle="horizontal" aria-pressed="true">
                                            <span class="dbuilder-toggle-knob"></span>
                                        </button>
                                    </div>
                                    <div class="dbuilder-toggle-row">
                                        <div class="dbuilder-inline-label">Distributed Bars</div>
                                        <button type="button" class="dbuilder-toggle" data-db-chart-toggle="distributed" aria-pressed="false">
                                            <span class="dbuilder-toggle-knob"></span>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <div class="dbuilder-widget-section" data-db-chart-options-section="bar">
                                <div class="dbuilder-widget-section-label">Border Radius</div>
                                <label class="grid gap-2">
                                    <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                        <span>Radius</span><span data-db-chart-value="borderRadius">8px</span>
                                    </div>
                                    <input class="dbuilder-slider" type="range" min="0" max="30" step="1" value="8" data-db-chart-control="borderRadius">
                                </label>
                                <div class="mt-3 grid gap-2">
                                    <div class="dbuilder-inline-label">Border Radius Application</div>
                                    <div class="dbuilder-segmented" data-db-chart-group="radiusApplication">
                                        <button type="button" class="dbuilder-segment" data-db-chart-option="radiusApplication" data-value="around">Around</button>
                                        <button type="button" class="dbuilder-segment active" data-db-chart-option="radiusApplication" data-value="end">End</button>
                                    </div>
                                    <div class="dbuilder-inline-label">Border Radius When Stacked</div>
                                    <div class="dbuilder-segmented" data-db-chart-group="radiusStacked">
                                        <button type="button" class="dbuilder-segment" data-db-chart-option="radiusStacked" data-value="all">All</button>
                                        <button type="button" class="dbuilder-segment active" data-db-chart-option="radiusStacked" data-value="last">Last</button>
                                    </div>
                                </div>
                            </div>

                            <div class="dbuilder-widget-section" data-db-chart-options-section="bar">
                                <div class="dbuilder-widget-section-label">Labels</div>
                                <div class="dbuilder-segmented" data-db-chart-group="labelsPosition">
                                    <button type="button" class="dbuilder-segment" data-db-chart-option="labelsPosition" data-value="top">Top</button>
                                    <button type="button" class="dbuilder-segment active" data-db-chart-option="labelsPosition" data-value="center">Center</button>
                                    <button type="button" class="dbuilder-segment" data-db-chart-option="labelsPosition" data-value="bottom">Bottom</button>
                                </div>
                            </div>

                            <div class="dbuilder-widget-section" data-db-chart-options-section="bar">
                                <div class="dbuilder-widget-section-label">Dimensions</div>
                                <label class="grid gap-2">
                                    <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                        <span>Bar Height</span><span data-db-chart-value="barHeight">48px</span>
                                    </div>
                                    <input class="dbuilder-slider" type="range" min="24" max="96" step="1" value="48" data-db-chart-control="barHeight">
                                </label>
                            </div>

                            <div class="dbuilder-widget-section mb-0" data-db-chart-options-section="bar">
                                <div class="dbuilder-widget-section-label">Background</div>
                                <div class="dbuilder-inline-label">Background Bar Colors</div>
                                <div class="dbuilder-swatch-bar">
                                    <button class="dbuilder-swatch is-active" type="button" data-db-chart-bg-swatch="#e5e7eb" style="background:#e5e7eb;"></button>
                                    <button class="dbuilder-swatch" type="button" data-db-chart-bg-swatch="#cbd5e1" style="background:#cbd5e1;"></button>
                                    <button class="dbuilder-swatch" type="button" data-db-chart-bg-swatch="#dbeafe" style="background:#dbeafe;"></button>
                                    <button class="dbuilder-swatch" type="button" data-db-chart-bg-swatch="#f3e8ff" style="background:#f3e8ff;"></button>
                                    <button class="dbuilder-swatch" type="button" data-db-chart-bg-swatch="#fce7f3" style="background:#fce7f3;"></button>
                                    <button class="dbuilder-swatch" type="button" data-db-color-trigger="chart-background-custom" style="background:#cbd5e1;color:#64748b;">+</button>
                                    <input class="dbuilder-color-input" type="color" value="#cbd5e1" data-db-color-input="chart-background-custom">
                                </div>
                                <label class="grid gap-2 mt-4">
                                    <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                        <span>Opacity</span><span data-db-chart-value="backgroundOpacity">100%</span>
                                    </div>
                                    <input class="dbuilder-slider" type="range" min="0" max="100" step="1" value="100" data-db-chart-control="backgroundOpacity">
                                </label>
                                <label class="grid gap-2 mt-3">
                                    <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                        <span>Radius</span><span data-db-chart-value="backgroundRadius">12px</span>
                                    </div>
                                    <input class="dbuilder-slider" type="range" min="0" max="24" step="1" value="12" data-db-chart-control="backgroundRadius">
                                </label>
                            </div>
                            <div class="dbuilder-widget-section mb-0" data-db-chart-options-section="line" style="display:none;">
                                <div class="dbuilder-widget-section-label">Line Style</div>
                                <div class="dbuilder-control-card dbuilder-chart-pie-card">
                                    <div class="dbuilder-inline-label">Line Style</div>
                                    <div class="dbuilder-segmented mb-4" data-db-line-group="curve">
                                        <button type="button" class="dbuilder-segment" data-db-line-style data-value="smooth">Smooth</button>
                                        <button type="button" class="dbuilder-segment active" data-db-line-style data-value="straight">Straight</button>
                                        <button type="button" class="dbuilder-segment" data-db-line-style data-value="stepline">Stepline</button>
                                    </div>
                                    <label class="grid gap-2">
                                        <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                            <span>Line Width</span><span data-db-line-value="width">1.0</span>
                                        </div>
                                        <input class="dbuilder-slider" type="range" min="1" max="8" step="0.1" value="1" data-db-line-control="width">
                                    </label>
                                    <label class="grid gap-2 mb-0">
                                        <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                            <span>Line Dash Array</span><span data-db-line-value="dashArray">0px</span>
                                        </div>
                                        <input class="dbuilder-slider" type="range" min="0" max="24" step="1" value="0" data-db-line-control="dashArray">
                                    </label>
                                </div>
                            </div>
                            <div class="dbuilder-widget-section mb-0" data-db-chart-options-section="donut" style="display:none;">
                                <div class="dbuilder-widget-section-label">Donut Chart</div>
                                <div class="dbuilder-control-card dbuilder-chart-pie-card">
                                    <label class="grid gap-2">
                                        <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                            <span>Donut Size</span><span data-db-pie-value="donutSize">58%</span>
                                        </div>
                                        <input class="dbuilder-slider" type="range" min="40" max="80" step="1" value="58" data-db-pie-control="donutSize">
                                    </label>
                                    <label class="grid gap-2">
                                        <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                            <span>Donut Left Offset</span><span data-db-pie-value="offsetX">0px</span>
                                        </div>
                                        <input class="dbuilder-slider" type="range" min="-40" max="40" step="1" value="0" data-db-pie-control="offsetX">
                                    </label>
                                    <label class="grid gap-2">
                                        <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                            <span>Donut Top Offset</span><span data-db-pie-value="offsetY">0px</span>
                                        </div>
                                        <input class="dbuilder-slider" type="range" min="-40" max="40" step="1" value="0" data-db-pie-control="offsetY">
                                    </label>
                                    <label class="grid gap-2">
                                        <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                            <span>Custom Scale</span><span data-db-pie-value="customScale">1.0</span>
                                        </div>
                                        <input class="dbuilder-slider" type="range" min="0.5" max="1.5" step="0.05" value="1" data-db-pie-control="customScale">
                                    </label>
                                    <label class="grid gap-2">
                                        <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                            <span>Start Angle</span><span data-db-pie-value="startAngle">0°</span>
                                        </div>
                                        <input class="dbuilder-slider" type="range" min="0" max="360" step="1" value="0" data-db-pie-control="startAngle">
                                    </label>
                                    <label class="grid gap-2">
                                        <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                            <span>End Angle</span><span data-db-pie-value="endAngle">360°</span>
                                        </div>
                                        <input class="dbuilder-slider" type="range" min="0" max="360" step="1" value="360" data-db-pie-control="endAngle">
                                    </label>
                                    <div class="dbuilder-color-row dbuilder-pie-inner-color-row mb-0" data-db-color-row="pie-inner-color">
                                        <div class="dbuilder-field-label">Inner Color</div>
                                        <div class="dbuilder-color-code" data-db-color-label="pie-inner-color">#FFFFFF</div>
                                        <button class="dbuilder-color-swatch" type="button" data-db-color-trigger="pie-inner-color" aria-label="Choose inner color" style="background:#ffffff;"></button>
                                        <input class="dbuilder-color-input" type="color" value="#ffffff" data-db-color-input="pie-inner-color">
                                    </div>
                                </div>
                            </div>
                            <div class="dbuilder-widget-section mb-0" data-db-chart-options-section="pie" style="display:none;">
                                <div class="dbuilder-widget-section-label">Pie Chart</div>
                                <div class="dbuilder-control-card dbuilder-chart-pie-card">
                                    <label class="grid gap-2">
                                        <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                            <span>Pie Left Offset</span><span data-db-pie-value="offsetX">0px</span>
                                        </div>
                                        <input class="dbuilder-slider" type="range" min="-40" max="40" step="1" value="0" data-db-pie-control="offsetX">
                                    </label>
                                    <label class="grid gap-2">
                                        <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                            <span>Pie Top Offset</span><span data-db-pie-value="offsetY">0px</span>
                                        </div>
                                        <input class="dbuilder-slider" type="range" min="-40" max="40" step="1" value="0" data-db-pie-control="offsetY">
                                    </label>
                                    <label class="grid gap-2">
                                        <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                            <span>Custom Scale</span><span data-db-pie-value="customScale">1.0</span>
                                        </div>
                                        <input class="dbuilder-slider" type="range" min="0.5" max="1.5" step="0.05" value="1" data-db-pie-control="customScale">
                                    </label>
                                    <label class="grid gap-2">
                                        <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                            <span>Start Angle</span><span data-db-pie-value="startAngle">0°</span>
                                        </div>
                                        <input class="dbuilder-slider" type="range" min="0" max="360" step="1" value="0" data-db-pie-control="startAngle">
                                    </label>
                                    <label class="grid gap-2">
                                        <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                            <span>End Angle</span><span data-db-pie-value="endAngle">360°</span>
                                        </div>
                                        <input class="dbuilder-slider" type="range" min="0" max="360" step="1" value="360" data-db-pie-control="endAngle">
                                    </label>
                                    <label class="grid gap-2 mb-0">
                                        <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                            <span>DataLabels Offset</span><span data-db-pie-value="dataLabelsOffset">0</span>
                                        </div>
                                        <input class="dbuilder-slider" type="range" min="-40" max="40" step="1" value="0" data-db-pie-control="dataLabelsOffset">
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="dbuilder-sidebar-panel" data-db-sidebar-panel="data">
                            <div class="dbuilder-widget-section mb-0">
                                <div class="dbuilder-widget-section-label">Data</div>
                                <div class="dbuilder-small-copy">Use this section for widget-level metadata and data wiring.</div>
                                <label class="dbuilder-field mt-3">
                                    <span>Widget Name</span>
                                    <input class="dbuilder-input" id="save-chart-button" type="text" value="{{ $activeWidget->name ?? "" }}" data-db-widget-name-input>
                                    {{-- <input class="dbuilder-input" type="text" value="Bar Chart Widget" data-db-widget-name-input> --}}
                                </label>
                            </div>
                        </div>
                        <div class="dbuilder-sidebar-panel" data-db-sidebar-panel="axes">
                            <div class="dbuilder-control-empty" data-db-axis-empty>
                                <div class="dbuilder-control-card">
                                    <div class="dbuilder-control-title">No Axis / Grid for this chart!</div>
                                </div>
                            </div>
                            <div class="dbuilder-control-stack" data-db-axis-controls>
                                <div class="dbuilder-control-card">
                                        <div class="dbuilder-label-header">
                                            <div class="dbuilder-label-head">
                                                <div class="dbuilder-label-icon">
                                                    <i class="ki-filled ki-grid-2 text-xs"></i>
                                                </div>
                                                <div class="min-w-0">
                                                    <div class="dbuilder-control-title">X Axis</div>
                                                    <div class="dbuilder-control-copy">Configure categories, labels, and title.</div>
                                                </div>
                                            </div>
                                        <div class="dbuilder-label-state">
                                            <span>Type</span>
                                            <span data-db-axis-value="type">CATEGORY</span>
                                        </div>
                                    </div>
                                    <div class="dbuilder-control-grid">
                                        <label class="grid gap-2">
                                            <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                                <span>Type</span>
                                                <span class="dbuilder-control-note">Category</span>
                                            </div>
                                            <select class="dbuilder-select" data-db-axis-control="type">
                                                <option value="category" selected>Category</option>
                                                <option value="value">Value</option>
                                                <option value="datetime">Date</option>
                                            </select>
                                        </label>
                                        {{-- <div class="dbuilder-toggle-row">
                                            <div class="dbuilder-control-label">Show</div>
                                            <button type="button" class="dbuilder-toggle is-active" data-db-axis-toggle="xAxis.show" aria-pressed="true">
                                                <span class="dbuilder-toggle-knob"></span>
                                            </button>
                                        </div> --}}
                                        <div class="dbuilder-toggle-row">
                                            <div class="dbuilder-control-label">Show Labels</div>
                                            <button type="button" class="dbuilder-toggle is-active" data-db-axis-toggle="xAxis.labelsShow" aria-pressed="true">
                                                <span class="dbuilder-toggle-knob"></span>
                                            </button>
                                        </div>
                                        <label class="grid gap-2">
                                            <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                                <span>Rotate</span><span data-db-axis-value="rotate">0deg</span>
                                            </div>
                                            <input class="dbuilder-slider" type="range" min="-90" max="90" step="5" value="0" data-db-axis-control="rotate">
                                        </label>
                                        {{-- <label class="grid gap-2">
                                            <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                                <span>Categories</span><span class="dbuilder-control-note">Comma separated</span>
                                            </div>
                                            <textarea class="dbuilder-textarea" rows="3" placeholder="Item 1, Item 2, Item 3, Item 4" data-db-axis-control="categories">Item 1, Item 2, Item 3, Item 4</textarea>
                                        </label> --}}
                                        <label class="grid gap-2">
                                            <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                                <span>Title Text</span><span class="dbuilder-control-note">X-axis title</span>
                                            </div>
                                            <input class="dbuilder-input" type="text" value="" placeholder="Enter X-axis title" data-db-axis-control="titleX">
                                        </label>
                                    </div>
                                </div>

                                <div class="dbuilder-control-card">
                                    <div class="dbuilder-label-header">
                                        <div class="dbuilder-label-head">
                                            <div class="dbuilder-label-icon">
                                                <i class="ki-filled ki-chart-column text-xs"></i>
                                            </div>
                                            <div class="min-w-0">
                                                <div class="dbuilder-control-title">Y Axis Settings</div>
                                                <div class="dbuilder-control-copy">Y-Axis 1</div>
                                            </div>
                                        </div>
                                        <div class="dbuilder-label-state">
                                            <span>Show</span>
                                            <span data-db-axis-value="tickAmount">5</span>
                                        </div>
                                    </div>
                                    <div class="dbuilder-control-grid">
                                        <div class="dbuilder-toggle-row">
                                            <div class="dbuilder-control-label">Show</div>
                                            <button type="button" class="dbuilder-toggle is-active" data-db-axis-toggle="yAxis.show" aria-pressed="true">
                                                <span class="dbuilder-toggle-knob"></span>
                                            </button>
                                        </div>
                                        <div class="dbuilder-toggle-row">
                                            <div class="dbuilder-control-label">Opposite</div>
                                            <button type="button" class="dbuilder-toggle" data-db-axis-toggle="yAxis.opposite" aria-pressed="false">
                                                <span class="dbuilder-toggle-knob"></span>
                                            </button>
                                        </div>
                                        <div class="dbuilder-toggle-row">
                                            <div class="dbuilder-control-label">Reversed</div>
                                            <button type="button" class="dbuilder-toggle" data-db-axis-toggle="yAxis.reversed" aria-pressed="false">
                                                <span class="dbuilder-toggle-knob"></span>
                                            </button>
                                        </div>
                                        <div class="dbuilder-toggle-row">
                                            <div class="dbuilder-control-label">Show Labels</div>
                                            <button type="button" class="dbuilder-toggle is-active" data-db-axis-toggle="yAxis.labelsShow" aria-pressed="true">
                                                <span class="dbuilder-toggle-knob"></span>
                                            </button>
                                        </div>
                                        <div class="dbuilder-control-split">
                                            <label class="grid gap-2">
                                                <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                                    <span>Lowest Val.</span>
                                                    <span class="dbuilder-control-note">Min</span>
                                                </div>
                                                <input class="dbuilder-input" type="text" value="min" placeholder="min" data-db-axis-control="min">
                                            </label>
                                            <label class="grid gap-2">
                                                <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                                    <span>Highest Val.</span>
                                                    <span class="dbuilder-control-note">Max</span>
                                                </div>
                                                <input class="dbuilder-input" type="text" value="max" placeholder="max" data-db-axis-control="max">
                                            </label>
                                        </div>
                                        <label class="grid gap-2">
                                            <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                                <span>Tick Amount</span><span data-db-axis-value="tickAmount">5</span>
                                            </div>
                                            <input class="dbuilder-slider" type="range" min="2" max="8" step="1" value="5" data-db-axis-control="tickAmount">
                                        </label>
                                        <label class="grid gap-2">
                                            <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                                <span>Title Text</span><span class="dbuilder-control-note">Y-axis title</span>
                                            </div>
                                            <input class="dbuilder-input" type="text" value="" placeholder="Enter Y-axis title" data-db-axis-control="titleY">
                                        </label>
                                    </div>
                                </div>

                                <div class="dbuilder-control-card mb-0">
                                    <div class="dbuilder-label-header">
                                        <div class="dbuilder-label-head">
                                            <div class="dbuilder-label-icon">
                                                <i class="ki-filled ki-grid-3 text-xs"></i>
                                            </div>
                                            <div class="min-w-0">
                                                <div class="dbuilder-control-title">Grid Lines</div>
                                                <div class="dbuilder-control-copy">Grid lines and separation.</div>
                                            </div>
                                        </div>
                                        <div class="dbuilder-label-state">
                                            <span>Grid</span>
                                            <span data-db-axis-value="gridDash">0px</span>
                                        </div>
                                    </div>
                                    <div class="dbuilder-toggle-row">
                                        <div class="dbuilder-control-label">Show</div>
                                        <button type="button" class="dbuilder-toggle is-active" data-db-axis-toggle="grid.show" aria-pressed="true">
                                            <span class="dbuilder-toggle-knob"></span>
                                        </button>
                                    </div>
                                    <div class="dbuilder-control-grid">
                                        <label class="dbuilder-color-row" data-db-color-row="axis-grid-custom">
                                            <div class="dbuilder-field-label">Gridline Color</div>
                                            <div class="dbuilder-color-code" data-db-color-label="axis-grid-custom">#E5E7EB</div>
                                            <button class="dbuilder-color-swatch" type="button" data-db-color-trigger="axis-grid-custom" aria-label="Choose grid color" style="background:#e5e7eb;"></button>
                                            <input class="dbuilder-color-input" type="color" value="#e5e7eb" data-db-color-input="axis-grid-custom">
                                        </label>
                                        <label class="grid gap-2">
                                            <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                                <span>Line Dash</span><span data-db-axis-value="gridDash">0px</span>
                                            </div>
                                            <input class="dbuilder-slider" type="range" min="0" max="24" step="1" value="0" data-db-axis-control="gridDashArray">
                                        </label>
                                    </div>
                                </div>

                                <div class="dbuilder-control-card">
                                    <div class="dbuilder-label-header">
                                        <div class="dbuilder-label-head">
                                            <div class="dbuilder-label-icon">
                                                <i class="ki-filled ki-text text-xs"></i>
                                            </div>
                                            <div class="min-w-0">
                                                <div class="dbuilder-control-title">Labels</div>
                                                <div class="dbuilder-control-copy">Style axis labels and offsets.</div>
                                            </div>
                                        </div>
                                        <div class="dbuilder-label-state">
                                            <span>Show</span>
                                            <span data-db-axis-value="yLabelsFontSize">12px</span>
                                        </div>
                                    </div>
                                    <div class="dbuilder-control-grid">
                                        <div class="dbuilder-toggle-row">
                                            <div class="dbuilder-control-label">Show</div>
                                            <button type="button" class="dbuilder-toggle is-active" data-db-axis-toggle="yAxis.labelsShow" aria-pressed="true">
                                                <span class="dbuilder-toggle-knob"></span>
                                            </button>
                                        </div>
                                        <label class="dbuilder-color-row" data-db-color-row="axis-y-labels">
                                            <div class="dbuilder-field-label">Labels Color</div>
                                            <div class="dbuilder-color-code" data-db-color-label="axis-y-labels">#111827</div>
                                            <button class="dbuilder-color-swatch" type="button" data-db-color-trigger="axis-y-labels" aria-label="Choose labels color" style="background:#111827;"></button>
                                            <input class="dbuilder-color-input" type="color" value="#111827" data-db-color-input="axis-y-labels">
                                        </label>
                                        <label class="grid gap-2">
                                            <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                                <span>Font Size</span><span data-db-axis-value="yLabelsFontSize">12px</span>
                                            </div>
                                            <input class="dbuilder-slider" type="range" min="8" max="24" step="1" value="12" data-db-axis-control="yLabelsFontSize">
                                        </label>
                                        <div class="dbuilder-inline-label">Font Weight</div>
                                        <div class="dbuilder-segmented" data-db-axis-group="yLabelsFontWeight">
                                            <button type="button" class="dbuilder-segment" data-db-axis-control="yLabelsFontWeight" data-value="400">400</button>
                                            <button type="button" class="dbuilder-segment" data-db-axis-control="yLabelsFontWeight" data-value="500">500</button>
                                            <button type="button" class="dbuilder-segment active" data-db-axis-control="yLabelsFontWeight" data-value="600">600</button>
                                            <button type="button" class="dbuilder-segment" data-db-axis-control="yLabelsFontWeight" data-value="700">700</button>
                                        </div>
                                        <label class="grid gap-2">
                                            <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                                <span>Label Left Offset</span><span data-db-axis-value="yLabelsOffsetX">0px</span>
                                            </div>
                                            <input class="dbuilder-slider" type="range" min="-40" max="40" step="1" value="0" data-db-axis-control="yLabelsOffsetX">
                                        </label>
                                        <label class="grid gap-2">
                                            <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                                <span>Label Top Offset</span><span data-db-axis-value="yLabelsOffsetY">0px</span>
                                            </div>
                                            <input class="dbuilder-slider" type="range" min="-40" max="40" step="1" value="0" data-db-axis-control="yLabelsOffsetY">
                                        </label>
                                    </div>
                                </div>

                                <div class="dbuilder-control-card">
                                    <div class="dbuilder-label-header">
                                        <div class="dbuilder-label-head">
                                            <div class="dbuilder-label-icon">
                                                <i class="ki-filled ki-abstract-25 text-xs"></i>
                                            </div>
                                            <div class="min-w-0">
                                                <div class="dbuilder-control-title">Title</div>
                                                <div class="dbuilder-control-copy">Axis title styling and position.</div>
                                            </div>
                                        </div>
                                        <div class="dbuilder-label-state">
                                            <span>Title</span>
                                            <span data-db-axis-value="yTitleFontSize">14px</span>
                                        </div>
                                    </div>
                                    <div class="dbuilder-control-grid">
                                        <label class="grid gap-2">
                                            <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                                <span>Title Text</span><span class="dbuilder-control-note">Enter Y-axis Title</span>
                                            </div>
                                            <input class="dbuilder-input" type="text" value="" placeholder="Enter Y-axis Title" data-db-axis-control="titleY">
                                        </label>
                                        <label class="dbuilder-color-row" data-db-color-row="axis-y-title">
                                            <div class="dbuilder-field-label">Title Color</div>
                                            <div class="dbuilder-color-code" data-db-color-label="axis-y-title">#111827</div>
                                            <button class="dbuilder-color-swatch" type="button" data-db-color-trigger="axis-y-title" aria-label="Choose axis title color" style="background:#111827;"></button>
                                            <input class="dbuilder-color-input" type="color" value="#111827" data-db-color-input="axis-y-title">
                                        </label>
                                        <label class="grid gap-2">
                                            <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                                <span>Title Font Size</span><span data-db-axis-value="yTitleFontSize">14px</span>
                                            </div>
                                            <input class="dbuilder-slider" type="range" min="8" max="28" step="1" value="14" data-db-axis-control="yTitleFontSize">
                                        </label>
                                        <div class="dbuilder-inline-label">Font Weight</div>
                                        <div class="dbuilder-segmented" data-db-axis-group="yTitleFontWeight">
                                            <button type="button" class="dbuilder-segment" data-db-axis-control="yTitleFontWeight" data-value="400">400</button>
                                            <button type="button" class="dbuilder-segment" data-db-axis-control="yTitleFontWeight" data-value="500">500</button>
                                            <button type="button" class="dbuilder-segment" data-db-axis-control="yTitleFontWeight" data-value="600">600</button>
                                            <button type="button" class="dbuilder-segment active" data-db-axis-control="yTitleFontWeight" data-value="700">700</button>
                                        </div>
                                        <label class="grid gap-2">
                                            <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                                <span>Title Left Offset</span><span data-db-axis-value="yTitleOffsetX">0px</span>
                                            </div>
                                            <input class="dbuilder-slider" type="range" min="-40" max="40" step="1" value="0" data-db-axis-control="yTitleOffsetX">
                                        </label>
                                        <label class="grid gap-2">
                                            <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                                <span>Title Top Offset</span><span data-db-axis-value="yTitleOffsetY">0px</span>
                                            </div>
                                            <input class="dbuilder-slider" type="range" min="-40" max="40" step="1" value="0" data-db-axis-control="yTitleOffsetY">
                                        </label>
                                    </div>
                                </div>

                                <div class="dbuilder-control-card">
                                    <div class="dbuilder-label-header">
                                        <div class="dbuilder-label-head">
                                            <div class="dbuilder-label-icon">
                                                <i class="ki-filled ki-disconnect text-xs"></i>
                                            </div>
                                            <div class="min-w-0">
                                                <div class="dbuilder-control-title">Axis Ticks</div>
                                                <div class="dbuilder-control-copy">Tick marks and tick placement.</div>
                                            </div>
                                        </div>
                                        <div class="dbuilder-label-state">
                                            <span>Ticks</span>
                                            <span data-db-axis-value="ticksWidth">1px</span>
                                        </div>
                                    </div>
                                    <div class="dbuilder-control-grid">
                                        <div class="dbuilder-toggle-row">
                                            <div class="dbuilder-control-label">Show</div>
                                            <button type="button" class="dbuilder-toggle is-active" data-db-axis-toggle="ticks.show" aria-pressed="true">
                                                <span class="dbuilder-toggle-knob"></span>
                                            </button>
                                        </div>
                                        <label class="dbuilder-color-row" data-db-color-row="axis-ticks">
                                            <div class="dbuilder-field-label">Ticks Color</div>
                                            <div class="dbuilder-color-code" data-db-color-label="axis-ticks">#CBD5E1</div>
                                            <button class="dbuilder-color-swatch" type="button" data-db-color-trigger="axis-ticks" aria-label="Choose ticks color" style="background:#cbd5e1;"></button>
                                            <input class="dbuilder-color-input" type="color" value="#cbd5e1" data-db-color-input="axis-ticks">
                                        </label>
                                        <label class="grid gap-2">
                                            <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                                <span>Width</span><span data-db-axis-value="ticksWidth">1px</span>
                                            </div>
                                            <input class="dbuilder-slider" type="range" min="1" max="4" step="1" value="1" data-db-axis-control="ticksWidth">
                                        </label>
                                        <label class="grid gap-2">
                                            <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                                <span>Left Offset</span><span data-db-axis-value="ticksOffsetX">0px</span>
                                            </div>
                                            <input class="dbuilder-slider" type="range" min="-24" max="24" step="1" value="0" data-db-axis-control="ticksOffsetX">
                                        </label>
                                        <label class="grid gap-2">
                                            <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                                <span>Top Offset</span><span data-db-axis-value="ticksOffsetY">0px</span>
                                            </div>
                                            <input class="dbuilder-slider" type="range" min="-24" max="24" step="1" value="0" data-db-axis-control="ticksOffsetY">
                                        </label>
                                    </div>
                                </div>

                                <div class="dbuilder-control-card">
                                    <div class="dbuilder-label-header">
                                        <div class="dbuilder-label-head">
                                            <div class="dbuilder-label-icon">
                                                <i class="ki-filled ki-grid-3 text-xs"></i>
                                            </div>
                                            <div class="min-w-0">
                                                <div class="dbuilder-control-title">Axis Border</div>
                                                <div class="dbuilder-control-copy">Axis border width and offsets.</div>
                                            </div>
                                        </div>
                                        <div class="dbuilder-label-state">
                                            <span>Border</span>
                                            <span data-db-axis-value="borderWidth">1px</span>
                                        </div>
                                    </div>
                                    <div class="dbuilder-control-grid">
                                        <div class="dbuilder-toggle-row">
                                            <div class="dbuilder-control-label">Show</div>
                                            <button type="button" class="dbuilder-toggle is-active" data-db-axis-toggle="border.show" aria-pressed="true">
                                                <span class="dbuilder-toggle-knob"></span>
                                            </button>
                                        </div>
                                        <label class="dbuilder-color-row" data-db-color-row="axis-border">
                                            <div class="dbuilder-field-label">Border Color</div>
                                            <div class="dbuilder-color-code" data-db-color-label="axis-border">#CBD5E1</div>
                                            <button class="dbuilder-color-swatch" type="button" data-db-color-trigger="axis-border" aria-label="Choose border color" style="background:#cbd5e1;"></button>
                                            <input class="dbuilder-color-input" type="color" value="#cbd5e1" data-db-color-input="axis-border">
                                        </label>
                                        <label class="grid gap-2">
                                            <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                                <span>Width</span><span data-db-axis-value="borderWidth">1px</span>
                                            </div>
                                            <input class="dbuilder-slider" type="range" min="1" max="4" step="1" value="1" data-db-axis-control="borderWidth">
                                        </label>
                                        <label class="grid gap-2">
                                            <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                                <span>Left Offset</span><span data-db-axis-value="borderOffsetX">0px</span>
                                            </div>
                                            <input class="dbuilder-slider" type="range" min="-24" max="24" step="1" value="0" data-db-axis-control="borderOffsetX">
                                        </label>
                                        <label class="grid gap-2">
                                            <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                                <span>Top Offset</span><span data-db-axis-value="borderOffsetY">0px</span>
                                            </div>
                                            <input class="dbuilder-slider" type="range" min="-24" max="24" step="1" value="0" data-db-axis-control="borderOffsetY">
                                        </label>
                                    </div>
                                </div>

                                <div class="dbuilder-control-card mb-0">
                                    <div class="dbuilder-label-header">
                                        <div class="dbuilder-label-head">
                                            <div class="dbuilder-label-icon">
                                                <i class="ki-filled ki-grid-2 text-xs"></i>
                                            </div>
                                            <div class="min-w-0">
                                                <div class="dbuilder-control-title">Grid Lines</div>
                                                <div class="dbuilder-control-copy">Grid placement, row/column colors, and axis lines.</div>
                                            </div>
                                        </div>
                                        <div class="dbuilder-label-state">
                                            <span>Grid</span>
                                            <span data-db-axis-value="gridPlacement">Back</span>
                                        </div>
                                    </div>
                                    <div class="dbuilder-control-grid">
                                        <div class="dbuilder-toggle-row">
                                            <div class="dbuilder-control-label">Show</div>
                                            <button type="button" class="dbuilder-toggle is-active" data-db-axis-toggle="grid.show" aria-pressed="true">
                                                <span class="dbuilder-toggle-knob"></span>
                                            </button>
                                        </div>
                                        <label class="grid gap-2">
                                            <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                                <span>Grid Placement</span><span data-db-axis-value="gridPlacement">Back</span>
                                            </div>
                                            <select class="dbuilder-select" data-db-axis-control="gridPlacement">
                                                <option value="back">Back</option>
                                                <option value="front">Front</option>
                                            </select>
                                        </label>
                                        <label class="grid gap-2">
                                            <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                                <span>Line Dash</span><span data-db-axis-value="gridDashArray">0px</span>
                                            </div>
                                            <input class="dbuilder-slider" type="range" min="0" max="24" step="1" value="0" data-db-axis-control="gridDashArray">
                                        </label>
                                        <label class="dbuilder-color-row" data-db-color-row="axis-grid">
                                            <div class="dbuilder-field-label">Gridline Color</div>
                                            <div class="dbuilder-color-code" data-db-color-label="axis-grid">#E5E7EB</div>
                                            <button class="dbuilder-color-swatch" type="button" data-db-color-trigger="axis-grid-custom" aria-label="Choose gridline color" style="background:#e5e7eb;"></button>
                                            <input class="dbuilder-color-input" type="color" value="#e5e7eb" data-db-color-input="axis-grid-custom">
                                        </label>
                                        <div class="dbuilder-inline-label">Grid Row Colors</div>
                                        <div class="dbuilder-swatch-bar">
                                            <button class="dbuilder-swatch is-active" type="button" data-db-axis-grid-row-swatch="#f1f5f9" style="background:#f1f5f9;" aria-label="Use grid row color #f1f5f9"></button>
                                            <button class="dbuilder-swatch" type="button" data-db-axis-grid-row-swatch="#e2e8f0" style="background:#e2e8f0;" aria-label="Use grid row color #e2e8f0"></button>
                                            <button class="dbuilder-swatch" type="button" data-db-axis-grid-row-swatch="#dbeafe" style="background:#dbeafe;" aria-label="Use grid row color #dbeafe"></button>
                                            <button class="dbuilder-swatch" type="button" data-db-axis-grid-row-swatch="#ffffff" style="background:#ffffff;" aria-label="Use grid row color #ffffff"></button>
                                            <button class="dbuilder-swatch" type="button" data-db-color-trigger="axis-grid-row" style="background:#cbd5e1;color:#64748b;" aria-label="Choose grid row color">+</button>
                                            <input class="dbuilder-color-input" type="color" value="#f1f5f9" data-db-color-input="axis-grid-row">
                                        </div>
                                        <label class="grid gap-2">
                                            <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                                <span>Grid Row Opacity</span><span data-db-axis-value="gridRowOpacity">0.5</span>
                                            </div>
                                            <input class="dbuilder-slider" type="range" min="0" max="1" step="0.1" value="0.5" data-db-axis-control="gridRowOpacity">
                                        </label>
                                        <div class="dbuilder-inline-label">Grid Column Colors</div>
                                        <div class="dbuilder-swatch-bar">
                                            <button class="dbuilder-swatch is-active" type="button" data-db-axis-grid-column-swatch="#eef2ff" style="background:#eef2ff;" aria-label="Use grid column color #eef2ff"></button>
                                            <button class="dbuilder-swatch" type="button" data-db-axis-grid-column-swatch="#e0e7ff" style="background:#e0e7ff;" aria-label="Use grid column color #e0e7ff"></button>
                                            <button class="dbuilder-swatch" type="button" data-db-axis-grid-column-swatch="#f3e8ff" style="background:#f3e8ff;" aria-label="Use grid column color #f3e8ff"></button>
                                            <button class="dbuilder-swatch" type="button" data-db-axis-grid-column-swatch="#ffffff" style="background:#ffffff;" aria-label="Use grid column color #ffffff"></button>
                                            <button class="dbuilder-swatch" type="button" data-db-color-trigger="axis-grid-column" style="background:#cbd5e1;color:#64748b;" aria-label="Choose grid column color">+</button>
                                            <input class="dbuilder-color-input" type="color" value="#eef2ff" data-db-color-input="axis-grid-column">
                                        </div>
                                        <label class="grid gap-2">
                                            <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                                <span>Grid Column Opacity</span><span data-db-axis-value="gridColumnOpacity">0.5</span>
                                            </div>
                                            <input class="dbuilder-slider" type="range" min="0" max="1" step="0.1" value="0.5" data-db-axis-control="gridColumnOpacity">
                                        </label>
                                        <div class="dbuilder-toggle-row">
                                            <div class="dbuilder-control-label">Show X-Axis Line</div>
                                            <button type="button" class="dbuilder-toggle" data-db-axis-toggle="grid.showXAxisLine" aria-pressed="false">
                                                <span class="dbuilder-toggle-knob"></span>
                                            </button>
                                        </div>
                                        <div class="dbuilder-toggle-row">
                                            <div class="dbuilder-control-label">Show Y-Axis Line</div>
                                            <button type="button" class="dbuilder-toggle is-active" data-db-axis-toggle="grid.showYAxisLine" aria-pressed="true">
                                                <span class="dbuilder-toggle-knob"></span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="dbuilder-sidebar-panel" data-db-sidebar-panel="fonts">
                            <div class="dbuilder-control-stack">
                                <div class="dbuilder-control-card mb-0">
                                    <div class="dbuilder-label-header">
                                        <div class="dbuilder-label-head">
                                            <div class="dbuilder-label-icon">
                                                <i class="ki-filled ki-text text-xs"></i>
                                            </div>
                                            <div class="min-w-0">
                                                <div class="dbuilder-control-title">Fonts Configuration</div>
                                                <div class="dbuilder-control-copy">Set the chart title and label font family.</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="dbuilder-control-grid">
                                        <label class="grid gap-2">
                                            <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                                <span>Title Font</span><span class="dbuilder-control-note">Select a family</span>
                                            </div>
                                            <select class="dbuilder-select" data-db-font-control="titleFont">
                                                <option value="Manrope" selected>Manrope</option>
                                                <option value="Inter">Inter</option>
                                                <option value="Poppins">Poppins</option>
                                                <option value="Roboto">Roboto</option>
                                                <option value="Montserrat">Montserrat</option>
                                                <option value="Open Sans">Open Sans</option>
                                            </select>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="dbuilder-sidebar-panel" data-db-sidebar-panel="fill">
                            <div class="dbuilder-control-stack">
                                <div class="dbuilder-control-card">
                                    <div class="dbuilder-label-header">
                                        <div class="dbuilder-label-head">
                                            <div class="dbuilder-label-icon">
                                                <i class="ki-filled ki-color-swatch text-xs"></i>
                                            </div>
                                            <div class="min-w-0">
                                                <div class="dbuilder-control-title">Chart Fill</div>
                                                <div class="dbuilder-control-copy">Configure fill style, opacity, and stroke treatment.</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="dbuilder-label-state">
                                        <span>Fill</span>
                                        <span data-db-fill-state>Solid</span>
                                    </div>
                                    <div class="dbuilder-control-grid">
                                        <div class="dbuilder-inline-label">Fill</div>
                                        <div class="dbuilder-segmented" data-db-fill-group="type" style="grid-template-columns:repeat(3,minmax(0,1fr));">
                                            <button type="button" class="dbuilder-segment active" data-db-fill-type data-value="solid">Solid</button>
                                            <button type="button" class="dbuilder-segment" data-db-fill-type data-value="gradient">Gradient</button>
                                            <button type="button" class="dbuilder-segment" data-db-fill-type data-value="pattern">Pattern</button>
                                        </div>
                                        <label class="grid gap-2">
                                            <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                                <span>Opacity</span><span data-db-fill-value="opacity">80%</span>
                                            </div>
                                            <input class="dbuilder-slider" type="range" min="0" max="100" step="1" value="80" data-db-fill-control="opacity">
                                        </label>
                                    </div>
                                </div>

                                <div class="dbuilder-control-card">
                                    <div class="dbuilder-control-title">Stroke / Outline</div>
                                    <div class="dbuilder-toggle-row">
                                        <div class="dbuilder-control-label">Show</div>
                                        <button type="button" class="dbuilder-toggle" data-db-fill-stroke-toggle aria-pressed="false">
                                            <span class="dbuilder-toggle-knob"></span>
                                        </button>
                                    </div>
                                    <div class="dbuilder-label-state">
                                        <span>Stroke</span>
                                        <span data-db-fill-stroke-state>Disabled</span>
                                    </div>
                                    <div class="dbuilder-control-grid">
                                        <div class="dbuilder-inline-label">Line Colors</div>
                                        <div class="dbuilder-label-swatch-grid">
                                            <button class="dbuilder-swatch is-active" type="button" data-db-fill-swatch data-value="#2b63ef" style="background:#2b63ef;" aria-label="Use stroke color #2b63ef"></button>
                                            <button class="dbuilder-swatch" type="button" data-db-fill-swatch data-value="#2563eb" style="background:#2563eb;" aria-label="Use stroke color #2563eb"></button>
                                            <button class="dbuilder-swatch" type="button" data-db-fill-swatch data-value="#8b5cf6" style="background:#8b5cf6;" aria-label="Use stroke color #8b5cf6"></button>
                                            <button class="dbuilder-swatch" type="button" data-db-fill-swatch data-value="#ef4444" style="background:#ef4444;" aria-label="Use stroke color #ef4444"></button>
                                            <button class="dbuilder-swatch" type="button" data-db-color-trigger="chart-fill-custom" style="background:#eef2ff;color:#2b63ef;" aria-label="Choose custom fill stroke color">+</button>
                                            <button class="dbuilder-swatch" type="button" data-db-fill-reset aria-label="Reset fill stroke color"><i class="ki-filled ki-trash text-xs"></i></button>
                                        </div>
                                        <label class="dbuilder-color-row" data-db-color-row="chart-fill-custom">
                                            <div class="dbuilder-field-label">Custom Color</div>
                                            <div class="dbuilder-color-code" data-db-color-label="chart-fill-custom">#2B63EF</div>
                                            <button class="dbuilder-color-swatch" type="button" data-db-color-trigger="chart-fill-custom" aria-label="Choose custom stroke color" style="background:#2b63ef;"></button>
                                            <input class="dbuilder-color-input" type="color" value="#2b63ef" data-db-color-input="chart-fill-custom">
                                        </label>
                                    </div>
                                </div>

                                <div class="dbuilder-control-card mb-0">
                                    <label class="grid gap-2">
                                        <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                            <span>Line Width</span><span data-db-fill-value="strokeWidth">2.5px</span>
                                        </div>
                                        <input class="dbuilder-slider" type="range" min="0" max="8" step="0.5" value="2.5" data-db-fill-control="strokeWidth">
                                    </label>
                                    <div class="grid gap-2">
                                        <div class="dbuilder-inline-label">Line Cap</div>
                                        <div class="dbuilder-segmented" data-db-fill-group="lineCap">
                                            <button type="button" class="dbuilder-segment active" data-db-fill-linecap data-value="round">Round</button>
                                            <button type="button" class="dbuilder-segment" data-db-fill-linecap data-value="butt">Butt</button>
                                            <button type="button" class="dbuilder-segment" data-db-fill-linecap data-value="square">Square</button>
                                        </div>
                                    </div>
                                    <label class="grid gap-2">
                                        <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                            <span>Line Dash Array</span><span data-db-fill-value="strokeDash">0px</span>
                                        </div>
                                        <input class="dbuilder-slider" type="range" min="0" max="24" step="1" value="0" data-db-fill-control="strokeDash">
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="dbuilder-sidebar-panel" data-db-sidebar-panel="legend">
                            <div class="dbuilder-control-stack">
                                <div class="dbuilder-control-card">
                                    <div class="dbuilder-label-header">
                                        <div class="dbuilder-label-head">
                                            <div class="dbuilder-label-icon">
                                                <i class="ki-filled ki-menu text-xs"></i>
                                                </div>
                                            <div class="min-w-0">
                                                <div class="dbuilder-control-title">Legend</div>
                                                <div class="dbuilder-control-copy">Configure placement, spacing, and typography.</div>
                                            </div>
                                        </div>
                                        <button type="button" class="dbuilder-toggle is-active" data-db-legend-toggle aria-pressed="true" aria-label="Toggle legend">
                                            <span class="dbuilder-toggle-knob"></span>
                                        </button>
                                    </div>
                                    <div class="dbuilder-label-state">
                                        <span>Show</span>
                                        <span data-db-legend-state>Enabled</span>
                                    </div>
                                    <div class="grid gap-3">
                                        <div class="dbuilder-toggle-row">
                                            <div class="dbuilder-control-label">Show for Single Series</div>
                                            <button type="button" class="dbuilder-toggle" data-db-legend-single-toggle aria-pressed="false">
                                                <span class="dbuilder-toggle-knob"></span>
                                            </button>
                                        </div>
                                        <div class="dbuilder-toggle-row">
                                            <div class="dbuilder-control-label">Floating Legend</div>
                                            <button type="button" class="dbuilder-toggle" data-db-legend-floating-toggle aria-pressed="false">
                                                <span class="dbuilder-toggle-knob"></span>
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                <div class="dbuilder-control-card">
                                    <div class="dbuilder-control-title">Positions</div>
                                    <div class="dbuilder-segmented" data-db-legend-group="position" style="grid-template-columns:repeat(2,minmax(0,1fr));">
                                        <button type="button" class="dbuilder-segment" data-db-legend-position data-value="top">Top</button>
                                        <button type="button" class="dbuilder-segment active" data-db-legend-position data-value="bottom">Bottom</button>
                                        <button type="button" class="dbuilder-segment" data-db-legend-position data-value="left">Left</button>
                                        <button type="button" class="dbuilder-segment" data-db-legend-position data-value="right">Right</button>
                                    </div>
                                </div>

                                <div class="dbuilder-control-card">
                                    <div class="dbuilder-control-title">Alignment</div>
                                    <div class="dbuilder-segmented" data-db-legend-group="align">
                                        <button type="button" class="dbuilder-segment" data-db-legend-align data-value="left">Left</button>
                                        <button type="button" class="dbuilder-segment active" data-db-legend-align data-value="center">Center</button>
                                        <button type="button" class="dbuilder-segment" data-db-legend-align data-value="right">Right</button>
                                    </div>
                                </div>

                                <div class="dbuilder-control-card">
                                    <div class="dbuilder-control-title">Offsets</div>
                                    <label class="grid gap-2">
                                        <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                            <span>Left Offset</span><span data-db-legend-value="offsetX">0px</span>
                                        </div>
                                        <input class="dbuilder-slider" type="range" min="-40" max="40" step="1" value="0" data-db-legend-control="offsetX">
                                    </label>
                                    <label class="grid gap-2">
                                        <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                            <span>Top Offset</span><span data-db-legend-value="offsetY">12px</span>
                                        </div>
                                        <input class="dbuilder-slider" type="range" min="-40" max="40" step="1" value="12" data-db-legend-control="offsetY">
                                    </label>
                                </div>

                                <div class="dbuilder-control-card">
                                    <div class="dbuilder-control-title">Spacing</div>
                                    <label class="grid gap-2">
                                        <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                            <span>Legend Horizontal Spacing</span><span data-db-legend-value="horizontalSpacing">12px</span>
                                        </div>
                                        <input class="dbuilder-slider" type="range" min="0" max="40" step="1" value="12" data-db-legend-control="horizontalSpacing">
                                    </label>
                                    <label class="grid gap-2">
                                        <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                            <span>Legend Vertical Spacing</span><span data-db-legend-value="verticalSpacing">8px</span>
                                        </div>
                                        <input class="dbuilder-slider" type="range" min="0" max="40" step="1" value="8" data-db-legend-control="verticalSpacing">
                                    </label>
                                </div>

                                <div class="dbuilder-control-card mb-0">
                                    <div class="dbuilder-control-title">Typography</div>
                                    <label class="grid gap-2">
                                        <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                            <span>Font Size</span><span data-db-legend-value="fontSize">12px</span>
                                        </div>
                                        <input class="dbuilder-slider" type="range" min="8" max="24" step="1" value="12" data-db-legend-control="fontSize">
                                    </label>
                                    <label class="grid gap-2">
                                        <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                            <span>Font Weight</span><span data-db-legend-value="fontWeight">Semi-Bold</span>
                                        </div>
                                        <input class="dbuilder-slider" type="range" min="400" max="700" step="100" value="600" data-db-legend-control="fontWeight">
                                    </label>
                                </div>

                                <div class="dbuilder-control-card mb-0" data-db-legend-marker-section style="display:none;">
                                    <div class="dbuilder-control-title">Markers</div>
                                    <label class="grid gap-2">
                                        <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                            <span>Marker Size</span><span data-db-legend-marker-value="size">8px</span>
                                        </div>
                                        <input class="dbuilder-slider" type="range" min="4" max="16" step="1" value="8" data-db-legend-marker-control="size">
                                    </label>
                                    <label class="grid gap-2">
                                        <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                            <span>Marker Border Width</span><span data-db-legend-marker-value="borderWidth">1px</span>
                                        </div>
                                        <input class="dbuilder-slider" type="range" min="0" max="4" step="1" value="1" data-db-legend-marker-control="borderWidth">
                                    </label>
                                    <div class="dbuilder-inline-label">Marker Shape</div>
                                    <div class="dbuilder-segmented dbuilder-legend-marker-group" data-db-legend-group="markerShape">
                                        <button type="button" class="dbuilder-segment dbuilder-legend-marker-shape" data-db-legend-marker-shape data-value="circle" aria-pressed="true" aria-label="Circle marker">
                                            <span class="dbuilder-legend-marker-icon is-circle"></span>
                                        </button>
                                        <button type="button" class="dbuilder-segment dbuilder-legend-marker-shape" data-db-legend-marker-shape data-value="square" aria-pressed="false" aria-label="Square marker">
                                            <span class="dbuilder-legend-marker-icon is-square"></span>
                                        </button>
                                        <button type="button" class="dbuilder-segment dbuilder-legend-marker-shape" data-db-legend-marker-shape data-value="diamond" aria-pressed="false" aria-label="Diamond marker">
                                            <span class="dbuilder-legend-marker-icon is-diamond"></span>
                                        </button>
                                        <button type="button" class="dbuilder-segment dbuilder-legend-marker-shape" data-db-legend-marker-shape data-value="triangle" aria-pressed="false" aria-label="Triangle marker">
                                            <span class="dbuilder-legend-marker-icon is-triangle"></span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="dbuilder-sidebar-panel" data-db-sidebar-panel="labels">
                            <div class="dbuilder-control-stack">
                                <div class="dbuilder-control-card">
                                    <div class="dbuilder-label-header">
                                        <div class="dbuilder-label-head">
                                            <div class="dbuilder-label-icon">
                                                <i class="ki-filled ki-tablet-text-down text-xs"></i>
                                            </div>
                                            <div class="min-w-0">
                                                <div class="dbuilder-control-title">Data Labels</div>
                                                <div class="dbuilder-control-copy">Control label visibility, style, and placement.</div>
                                            </div>
                                        </div>
                                        <button type="button" class="dbuilder-toggle is-active" data-db-label-toggle aria-pressed="true" aria-label="Toggle data labels">
                                            <span class="dbuilder-toggle-knob"></span>
                                        </button>
                                    </div>
                                    <div class="dbuilder-label-state">
                                        <span>Show</span>
                                        <span data-db-label-state>Enabled</span>
                                    </div>
                                    <div class="dbuilder-control-grid">
                                        <label class="grid gap-2">
                                            <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                                <span>Labels Left Offset</span><span data-db-label-value="offsetX">25px</span>
                                            </div>
                                            <input class="dbuilder-slider" type="range" min="-40" max="40" step="1" value="25" data-db-label-control="offsetX">
                                        </label>
                                        <label class="grid gap-2">
                                            <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                                <span>Labels Top Offset</span><span data-db-label-value="offsetY">10px</span>
                                            </div>
                                            <input class="dbuilder-slider" type="range" min="-40" max="40" step="1" value="10" data-db-label-control="offsetY">
                                        </label>
                                        <label class="grid gap-2">
                                            <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                                <span>Font Size</span><span data-db-label-value="fontSize">12px</span>
                                            </div>
                                            <input class="dbuilder-slider" type="range" min="8" max="24" step="1" value="12" data-db-label-control="fontSize">
                                        </label>
                                        <div class="grid gap-2">
                                            <div class="flex items-center justify-between">
                                                <div class="dbuilder-inline-label">Font Weight</div>
                                                <div class="dbuilder-control-note" data-db-label-value="fontWeight">Semi-Bold</div>
                                            </div>
                                            <div class="dbuilder-segmented" data-db-label-group="fontWeight">
                                                <button type="button" class="dbuilder-segment" data-db-label-weight="400" data-value="400">Reg</button>
                                                <button type="button" class="dbuilder-segment" data-db-label-weight="500" data-value="500">Med</button>
                                                <button type="button" class="dbuilder-segment active" data-db-label-weight="600" data-value="600">Semi</button>
                                                <button type="button" class="dbuilder-segment" data-db-label-weight="700" data-value="700">Bold</button>
                                            </div>
                                        </div>
                                        <div class="grid gap-2">
                                            <div class="dbuilder-inline-label">Colors</div>
                                            <div class="dbuilder-label-swatch-grid">
                                                <button class="dbuilder-swatch is-active" type="button" data-db-label-swatch="text" data-value="#ffffff" style="background:#ffffff;" aria-label="Use label color #ffffff"></button>
                                                <button class="dbuilder-swatch" type="button" data-db-label-swatch="text" data-value="#2563eb" style="background:#2563eb;" aria-label="Use label color #2563eb"></button>
                                                <button class="dbuilder-swatch" type="button" data-db-label-swatch="text" data-value="#8b5cf6" style="background:#8b5cf6;" aria-label="Use label color #8b5cf6"></button>
                                                <button class="dbuilder-swatch" type="button" data-db-label-swatch="text" data-value="#ec4899" style="background:#ec4899;" aria-label="Use label color #ec4899"></button>
                                                <button class="dbuilder-swatch" type="button" data-db-color-trigger="data-labels" style="background:#eef2ff;color:#2b63ef;" aria-label="Choose custom label color">+</button>
                                            </div>
                                            <label class="dbuilder-color-row" data-db-color-row="data-labels">
                                                <div class="dbuilder-field-label">Custom Color</div>
                                                <div class="dbuilder-color-code" data-db-color-label="data-labels">#FFFFFF</div>
                                                <button class="dbuilder-color-swatch" type="button" data-db-color-trigger="data-labels" aria-label="Choose data labels color" style="background:#ffffff;"></button>
                                                <input class="dbuilder-color-input" type="color" value="#ffffff" data-db-color-input="data-labels">
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <details class="dbuilder-label-accordion" open>
                                    <summary class="dbuilder-label-accordion-summary">
                                        <span>Background</span>
                                        <span class="dbuilder-label-accordion-chevron">
                                            <i class="ki-filled ki-down text-[11px]"></i>
                                        </span>
                                    </summary>
                                    <div class="dbuilder-label-accordion-body">
                                        <div class="dbuilder-label-swatch-grid">
                                            <button class="dbuilder-swatch is-active" type="button" data-db-label-swatch="background" data-value="#ffffff" style="background:#ffffff;" aria-label="Use label background #ffffff"></button>
                                            <button class="dbuilder-swatch" type="button" data-db-label-swatch="background" data-value="#eff6ff" style="background:#eff6ff;" aria-label="Use label background #eff6ff"></button>
                                            <button class="dbuilder-swatch" type="button" data-db-label-swatch="background" data-value="#ede9fe" style="background:#ede9fe;" aria-label="Use label background #ede9fe"></button>
                                            <button class="dbuilder-swatch" type="button" data-db-label-swatch="background" data-value="#fce7f3" style="background:#fce7f3;" aria-label="Use label background #fce7f3"></button>
                                            <button class="dbuilder-swatch" type="button" data-db-color-trigger="data-label-background" style="background:#eef2ff;color:#2b63ef;" aria-label="Choose custom label background">+</button>
                                        </div>
                                        <label class="dbuilder-color-row" data-db-color-row="data-label-background">
                                            <div class="dbuilder-field-label">Background</div>
                                            <div class="dbuilder-color-code" data-db-color-label="data-label-background">#FFFFFF</div>
                                            <button class="dbuilder-color-swatch" type="button" data-db-color-trigger="data-label-background" aria-label="Choose label background color" style="background:#ffffff;"></button>
                                            <input class="dbuilder-color-input" type="color" value="#ffffff" data-db-color-input="data-label-background">
                                        </label>
                                        <label class="grid gap-2">
                                            <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                                <span>Opacity</span><span data-db-label-value="backgroundOpacity">0%</span>
                                            </div>
                                        <input class="dbuilder-slider" type="range" min="0" max="100" step="1" value="0" data-db-label-control="backgroundOpacity">
                                        </label>
                                    </div>
                                </details>

                                <div class="dbuilder-control-card mb-0">
                                    <div class="dbuilder-control-title">Text Drop Shadow</div>
                                    <label class="grid gap-2">
                                        <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                            <span>Blur</span><span data-db-label-value="shadowBlur">25px</span>
                                        </div>
                                        <input class="dbuilder-slider" type="range" min="0" max="40" step="1" value="25" data-db-label-control="shadowBlur">
                                    </label>
                                    <label class="grid gap-2">
                                        <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                            <span>Offset X</span><span data-db-label-value="shadowOffsetX">10px</span>
                                        </div>
                                        <input class="dbuilder-slider" type="range" min="-24" max="24" step="1" value="10" data-db-label-control="shadowOffsetX">
                                    </label>
                                    <label class="grid gap-2">
                                        <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                            <span>Offset Y</span><span data-db-label-value="shadowOffsetY">12px</span>
                                        </div>
                                        <input class="dbuilder-slider" type="range" min="-24" max="24" step="1" value="12" data-db-label-control="shadowOffsetY">
                                    </label>
                                    <label class="grid gap-2">
                                        <div class="flex items-center justify-between text-[11px] font-semibold text-slate-500">
                                            <span>Shadow Opacity</span><span data-db-label-value="shadowOpacity">12%</span>
                                        </div>
                                        <input class="dbuilder-slider" type="range" min="0" max="100" step="1" value="12" data-db-label-control="shadowOpacity">
                                    </label>
                                    <div class="dbuilder-color-row mb-0" data-db-color-row="data-label-shadow">
                                        <div class="dbuilder-field-label">Shadow Color</div>
                                        <div class="dbuilder-color-code" data-db-color-label="data-label-shadow">#202B51</div>
                                        <label class="dbuilder-color-swatch" data-db-color-trigger="data-label-shadow" for="data-label-shadow-input" aria-label="Choose label shadow color" style="background:#202b51;"></label>
                                        <input id="data-label-shadow-input" class="dbuilder-color-input" type="color" value="#202b51" data-db-color-input="data-label-shadow">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </aside>

    <div class="dbuilder-view is-active px-3 py-2" data-db-panel="designer">
        <div class="dbuilder-workspace">
            <section class="dbuilder-canvas">
                <div class="dbuilder-canvas-head">
                    <div class="dbuilder-canvas-head-copy">
                        <div class="dbuilder-canvas-title">
                            <i class="ki-filled ki-element-11 text-sm text-primary"></i>
                            <span>Dashboard Canvas</span>
                        </div>
                        <div class="dbuilder-canvas-hint">Drag chart cards from the right panel, or reorder charts here.</div>
                    </div>
                    <div class="dbuilder-canvas-actions">
                        <button class="dbuilder-mini" type="button" data-db-preview>
                            <i class="ki-filled ki-element-11 text-xs"></i>
                            <span>Preview</span>
                        </button>
                        <button class="dbuilder-mini danger" type="button" data-db-clear>
                            <i class="ki-filled ki-trash text-xs"></i>
                            <span>Clear All</span>
                        </button>
                    </div>
                </div>

                <div class="dbuilder-canvas-body">
                    <div class="dbuilder-canvas-stage is-empty" data-db-canvas-stage>
                        <div class="dbuilder-canvas-empty" data-db-canvas-empty>
                            <div class="dbuilder-empty">
                                <span class="dbuilder-empty-badge">
                                    <i class="ki-filled ki-plus text-xl"></i>
                                </span>
                                <div>
                                    <h2>Drop Widgets Here</h2>
                                    <p>Click Add First Widget to open the widget tray, then drag a widget into this canvas.</p>
                                </div>
                                <div class="dbuilder-empty-actions">
                                    <button class="dbuilder-action primary dbuilder-empty-cta" type="button" data-db-show-widgets-panel>
                                        Add First Widget
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section class="dbuilder-panel dbuilder-widgets" style="height:100vh;">
                <div class="dbuilder-panel-head">
                    <div>
                        <h2 class="dbuilder-panel-title">Add Widgets</h2>
                        <div class="dbuilder-panel-copy">Pick a widget to place it on the canvas.</div>
                    </div>
                </div>

                <div class="dbuilder-panel-body">
                    <label class="dbuilder-search">
                        <i class="ki-filled ki-magnifier text-sm"></i>
                        <input type="text" placeholder="Search widgets..." data-db-widget-search autocomplete="off">
                    </label>
                    <div class="dbuilder-search-empty" data-db-search-empty>Type to filter widgets in this panel.</div>

                    <div class="dbuilder-group" data-db-widget-group>
                        <div class="dbuilder-group-label">Common</div>
                        <div class="dbuilder-grid">
                            <div class="dbuilder-widget" data-db-widget data-widget-name="KPI Card">
                                <span class="dbuilder-widget-icon"><i class="ki-filled ki-chart-simple-2 text-xs"></i></span>
                                <span class="dbuilder-widget-name">KPI Card</span>
                            </div>
                            <div class="dbuilder-widget" data-db-widget data-widget-name="Data Table">
                                <span class="dbuilder-widget-icon" style="background:#ecfdf3;color:#12b76a;"><i class="ki-filled ki-tablet-text-down text-xs"></i></span>
                                <span class="dbuilder-widget-name">Data Table</span>
                            </div>
                            <!-- <div class="dbuilder-widget" data-db-widget data-widget-name="Filter Box">
                                <span class="dbuilder-widget-icon" style="background:#f4ebff;color:#7c3aed;"><i class="ki-filled ki-filter text-xs"></i></span>
                                <span class="dbuilder-widget-name">Filter Box</span>
                            </div> -->
                        </div>
                    </div>

                    <div class="dbuilder-group" data-db-widget-group>
                        <div class="dbuilder-group-label">Charts</div>
                        <div class="dbuilder-grid">
                            <div class="dbuilder-widget" data-db-widget data-widget-name="Bar Chart">
                                <span class="dbuilder-widget-icon"><i class="ki-filled ki-bar-chart text-xs"></i></span>
                                <span class="dbuilder-widget-name">Bar Chart</span>
                            </div>
                            <div class="dbuilder-widget" data-db-widget data-widget-name="Line Chart">
                                <span class="dbuilder-widget-icon"><i class="ki-filled ki-chart-line-up text-xs"></i></span>
                                <span class="dbuilder-widget-name">Line Chart</span>
                            </div>
                            <div class="dbuilder-widget" data-db-widget data-widget-name="Donut Chart">
                                <span class="dbuilder-widget-icon"><i class="ki-filled ki-chart-simple-3 text-xs"></i></span>
                                <span class="dbuilder-widget-name">Donut Chart</span>
                            </div>
                            <!-- <div class="dbuilder-widget" data-db-widget data-widget-name="Area Chart">
                                <span class="dbuilder-widget-icon"><i class="ki-filled ki-chart-line-up-2 text-xs"></i></span>
                                <span class="dbuilder-widget-name">Area Chart</span>
                            </div> -->
                            <!-- <div class="dbuilder-widget" data-db-widget data-widget-name="Funnel Chart">
                                <span class="dbuilder-widget-icon"><i class="ki-filled ki-filter text-xs"></i></span>
                                <span class="dbuilder-widget-name">Funnel</span>
                            </div> -->
                            <!-- <div class="dbuilder-widget" data-db-widget data-widget-name="Slope Chart">
                                <span class="dbuilder-widget-icon"><i class="ki-filled ki-chart-line-up text-xs"></i></span>
                                <span class="dbuilder-widget-name">Slope</span>
                            </div> -->
                            <div class="dbuilder-widget" data-db-widget data-widget-name="Pie Chart">
                                <span class="dbuilder-widget-icon"><i class="ki-filled ki-chart-simple-3 text-xs"></i></span>
                                <span class="dbuilder-widget-name">Pie</span>
                            </div>
                            <!-- <div class="dbuilder-widget" data-db-widget data-widget-name="Range Column Chart">
                                <span class="dbuilder-widget-icon"><i class="ki-filled ki-chart-column text-xs"></i></span>
                                <span class="dbuilder-widget-name">Range Column</span>
                            </div>
                            <div class="dbuilder-widget" data-db-widget data-widget-name="Time Line Chart">
                                <span class="dbuilder-widget-icon"><i class="ki-filled ki-chart-line-star text-xs"></i></span>
                                <span class="dbuilder-widget-name">Time Line</span>
                            </div>
                            <div class="dbuilder-widget" data-db-widget data-widget-name="Polar Area Chart">
                                <span class="dbuilder-widget-icon"><i class="ki-filled ki-chart-simple-2 text-xs"></i></span>
                                <span class="dbuilder-widget-name">Polar Area</span>
                            </div>
                            <div class="dbuilder-widget" data-db-widget data-widget-name="Radar Chart">
                                <span class="dbuilder-widget-icon"><i class="ki-filled ki-chart-simple-2 text-xs"></i></span>
                                <span class="dbuilder-widget-name">Radar</span>
                            </div>
                            <div class="dbuilder-widget" data-db-widget data-widget-name="Heatmap Chart">
                                <span class="dbuilder-widget-icon"><i class="ki-filled ki-chart-column text-xs"></i></span>
                                <span class="dbuilder-widget-name">Heatmap</span>
                            </div>
                            <div class="dbuilder-widget" data-db-widget data-widget-name="Tree Map Chart">
                                <span class="dbuilder-widget-icon"><i class="ki-filled ki-chart-column text-xs"></i></span>
                                <span class="dbuilder-widget-name">Tree Map</span>
                            </div>
                            <div class="dbuilder-widget" data-db-widget data-widget-name="Scatter Chart">
                                <span class="dbuilder-widget-icon"><i class="ki-filled ki-chart-line-up text-xs"></i></span>
                                <span class="dbuilder-widget-name">Scatter</span>
                            </div>
                            <div class="dbuilder-widget" data-db-widget data-widget-name="Bubble Chart">
                                <span class="dbuilder-widget-icon"><i class="ki-filled ki-chart-simple-2 text-xs"></i></span>
                                <span class="dbuilder-widget-name">Bubble</span>
                            </div>
                            <div class="dbuilder-widget" data-db-widget data-widget-name="Radialbar Chart">
                                <span class="dbuilder-widget-icon"><i class="ki-filled ki-chart-simple-3 text-xs"></i></span>
                                <span class="dbuilder-widget-name">Radialbar</span>
                            </div> -->
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>
<script>
    {{-- All widgets for the right-side picker panel --}}
    window.dashboardWidgets = @json($widgets);

    {{-- Only the active widget loaded into the canvas --}}
    window.activeWidget = @json($activeWidget ?? null);
    const canEditWidget = @json(auth()->user()->can('edit.dashboard_builder'));
    const canDeleteWidget = @json(auth()->user()->can('delete.dashboard_builder'));
</script>
@endcan
@endsection

@section('scripts')
@vite('resources/js/pages/dashboard-builder.js')
@endsection