@php
    $widgetData = old('data_json', $widget->data_json ?? $defaultData ?? []);
    $widgetConfig = old('config_json', $widget->config_json ?? $defaultConfig ?? []);
@endphp

<div class="card">
    <h3>Basic</h3>

    <div class="field">
        <label>Widget Name</label>
        <input type="text" name="name" value="{{ old('name', $widget->name ?? '') }}" required>
    </div>

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

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

<div class="card">
    <h3>Data</h3>

    <div class="field">
        <label>Series Name</label>
        <input type="text" name="data_json[series][0][name]" value="{{ data_get($widgetData, 'series.0.name', 'Bar') }}">
    </div>

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

<div class="card">
    <h3>Theme</h3>

    <div class="row">
        <div class="field">
            <label>Mode</label>
            <select name="config_json[theme][mode]">
                <option value="light" @selected(data_get($widgetConfig, 'theme.mode') === 'light')>Light</option>
                <option value="dark" @selected(data_get($widgetConfig, 'theme.mode') === 'dark')>Dark</option>
            </select>
        </div>

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

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

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

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

    <div class="field">
        <label>Font Family</label>
        <select name="config_json[chart][fontFamily]">
            <option value="Roboto, sans-serif" @selected(data_get($widgetConfig, 'chart.fontFamily') === 'Roboto, sans-serif')>Roboto</option>
            <option value="Inter, sans-serif" @selected(data_get($widgetConfig, 'chart.fontFamily') === 'Inter, sans-serif')>Inter</option>
            <option value="Arial, sans-serif" @selected(data_get($widgetConfig, 'chart.fontFamily') === 'Arial, sans-serif')>Arial</option>
        </select>
    </div>
</div>

<div class="card">
    <h3>Bar Options</h3>

    <div class="field">
        <label>
            <input type="checkbox" name="config_json[plotOptions][bar][horizontal]" value="1" {{ data_get($widgetConfig, 'plotOptions.bar.horizontal', true) ? 'checked' : '' }}>
            Horizontal
        </label>
    </div>

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

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

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

    <div class="row">
        <div class="field">
            <label>Border Radius Application</label>
            <select name="config_json[plotOptions][bar][borderRadiusApplication]">
                <option value="around" @selected(data_get($widgetConfig, 'plotOptions.bar.borderRadiusApplication') === 'around')>Around</option>
                <option value="end" @selected(data_get($widgetConfig, 'plotOptions.bar.borderRadiusApplication') === 'end')>End</option>
            </select>
        </div>

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

<div class="card">
    <h3>Legend</h3>

    <div class="field">
        <label>
            <input type="checkbox" name="config_json[legend][show]" value="1" {{ data_get($widgetConfig, 'legend.show', true) ? 'checked' : '' }}>
            Show Legend
        </label>
    </div>

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

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

<div class="card">
    <h3>Data Labels</h3>

    <div class="field">
        <label>
            <input type="checkbox" name="config_json[dataLabels][enabled]" value="1" {{ data_get($widgetConfig, 'dataLabels.enabled', true) ? 'checked' : '' }}>
            Show Data Labels
        </label>
    </div>

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

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

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

<div class="card">
    <h3>Axes</h3>

    <div class="row">
        <div class="field">
            <label>X Axis Type</label>
            <select name="config_json[xaxis][type]">
                <option value="category" @selected(data_get($widgetConfig, 'xaxis.type') === 'category')>Category</option>
                <option value="numeric" @selected(data_get($widgetConfig, 'xaxis.type') === 'numeric')>Numeric</option>
                <option value="datetime" @selected(data_get($widgetConfig, 'xaxis.type') === 'datetime')>Datetime</option>
            </select>
        </div>

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

<div class="card">
    <h3>Grid</h3>

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

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

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

<button type="submit">Save Widget</button>