@extends('layouts.app_widget')

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

@section('styles')
<style>
    .builder-shell { max-width:1500px; margin:0 auto; display:grid; grid-template-columns:360px 1fr; gap:16px; align-items:start; }
    .sidebar { background:#fff; border:1px solid #e5e7eb; border-radius:16px; overflow:hidden; position:sticky; top:16px; height:calc(100vh - 110px); display:flex; flex-direction:column; }
    .sidebar-head { padding:16px; border-bottom:1px solid #e5e7eb; }
    .sidebar-title { font-size:18px; font-weight:700; margin:0 0 6px 0; }
    .sidebar-subtitle { margin:0; font-size:13px; color:#6b7280; }
    .accordion-list { overflow:auto; padding:10px; }
    .panel { border:1px solid #e5e7eb; border-radius:12px; margin-bottom:10px; background:#fff; }
    .panel-header { width:100%; border:0; background:#fff; display:flex; align-items:center; justify-content:space-between; padding:14px; font-size:14px; font-weight:700; cursor:pointer; }
    .panel-body { padding:0 14px 14px 14px; border-top:1px solid #f1f5f9; }
    .panel.collapsed .panel-body { display:none; }
    .preview-area { display:grid; gap:16px; }
    .canvas-card, .json-card { background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:16px; }
    .canvas-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
    .canvas-title { margin:0; font-size:18px; font-weight:700; }
    .canvas-subtitle { color:#6b7280; font-size:13px; margin-top:4px; }
    .chart-stage { background:#fff; border:1px dashed #d1d5db; border-radius:16px; padding:20px; min-height:420px; display:flex; align-items:center; justify-content:center; }
    #chartPreview { width:100%; }
    .field { margin-bottom:12px; }
    .field label { display:block; font-size:12px; font-weight:700; margin-bottom:6px; color:#374151; }
    .field input, .field select { width:100%; min-height:38px; border:1px solid #d1d5db; border-radius:10px; padding:8px 10px; background:#fff; }
    .grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
    .check { display:flex; align-items:center; gap:8px; font-size:14px; margin-bottom:10px; }
    .check input { width:auto; min-height:auto; }
    .table-grid { display:grid; grid-template-columns:1fr 100px; gap:10px; margin-bottom:10px; align-items:end; }
    .mini-title { font-size:12px; font-weight:700; color:#6b7280; margin:0 0 10px 0; text-transform:uppercase; letter-spacing:.04em; }
    pre { background:#0f172a; color:#e2e8f0; border-radius:12px; padding:14px; overflow:auto; font-size:12px; }
    @media (max-width:1100px) { .builder-shell { grid-template-columns:1fr; } .sidebar { position:static; height:auto; } }
</style>
@endsection

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

<div class="builder-shell">
    <form id="widgetForm" class="sidebar" action="{{ $formAction }}" method="POST">
        @csrf
        @if($widget) @method('PUT') @endif
        <input type="hidden" name="chart_type" value="pie">
        <input type="hidden" name="data_source_type" value="manual">

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

        <div class="accordion-list">

            {{-- BASIC --}}
            <div class="panel">
                <button type="button" class="panel-header">Basic <span>▾</span></button>
                <div class="panel-body">
                    <div class="field">
                        <label>Widget Name</label>
                        <input type="text" name="name" id="name" value="{{ $initialName }}">
                    </div>
                    <div class="field">
                        <label>Chart Height</label>
                        <input type="number" name="config_json[chart][height]" id="chart_height" value="{{ data_get($initialConfig, 'chart.height', 380) }}">
                    </div>
                </div>
            </div>

            {{-- DATA --}}
            <div class="panel">
                <button type="button" class="panel-header">Slices / Data <span>▾</span></button>
                <div class="panel-body">
                    <p class="mini-title">Slice Labels & Values</p>
                    @for($i = 0; $i < 6; $i++)
                        <div class="table-grid">
                            <div class="field">
                                <label>Label {{ $i + 1 }}</label>
                                <input type="text"
                                       class="label-input"
                                       name="data_json[labels][{{ $i }}]"
                                       value="{{ data_get($initialData, "labels.$i", 'Slice ' . ($i+1)) }}">
                            </div>
                            <div class="field">
                                <label>Value</label>
                                <input type="number"
                                       step="any" min="0"
                                       class="value-input"
                                       name="data_json[series][{{ $i }}]"
                                       value="{{ data_get($initialData, "series.$i", ($i === 0 ? 40 : ($i === 1 ? 30 : ($i === 2 ? 20 : ($i === 3 ? 10 : 0))))) }}">
                            </div>
                        </div>
                    @endfor
                </div>
            </div>

            {{-- THEME --}}
            <div class="panel">
                <button type="button" class="panel-header">Theme <span>▾</span></button>
                <div class="panel-body">
                    <div class="grid-2">
                        <div class="field">
                            <label>Mode</label>
                            <select name="config_json[theme][mode]" id="theme_mode">
                                <option value="light" @selected(data_get($initialConfig,'theme.mode','light')==='light')>Light</option>
                                <option value="dark"  @selected(data_get($initialConfig,'theme.mode')==='dark')>Dark</option>
                            </select>
                        </div>
                        <div class="field">
                            <label>Palette</label>
                            <select name="config_json[theme][palette]" id="theme_palette">
                                @foreach(['palette1','palette2','palette3','palette4','palette5','palette6','palette7','palette8','palette9','palette10'] as $p)
                                    <option value="{{ $p }}" @selected(data_get($initialConfig,'theme.palette','palette1')===$p)>{{ $p }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="grid-2">
                        <div class="field">
                            <label>Background</label>
                            <input type="color" name="config_json[chart][background]" id="chart_background" value="{{ data_get($initialConfig,'chart.background','#ffffff') }}">
                        </div>
                        <div class="field">
                            <label>Text Color</label>
                            <input type="color" name="config_json[chart][foreColor]" id="chart_foreColor" value="{{ data_get($initialConfig,'chart.foreColor','#111827') }}">
                        </div>
                    </div>
                </div>
            </div>

            {{-- STROKE --}}
            <div class="panel">
                <button type="button" class="panel-header">Stroke / Border <span>▾</span></button>
                <div class="panel-body">
                    <div class="grid-2">
                        <div class="field">
                            <label>Stroke Width</label>
                            <input type="number" name="config_json[stroke][width]" id="stroke_width" value="{{ data_get($initialConfig,'stroke.width',2) }}">
                        </div>
                        <div class="field">
                            <label>Stroke Color</label>
                            <input type="color" name="config_json[stroke][colors][0]" id="stroke_color" value="{{ data_get($initialConfig,'stroke.colors.0','#ffffff') }}">
                        </div>
                    </div>
                </div>
            </div>

            {{-- LEGEND --}}
            <div class="panel">
                <button type="button" class="panel-header">Legend <span>▾</span></button>
                <div class="panel-body">
                    <label class="check">
                        <input type="checkbox" name="config_json[legend][show]" id="legend_show" value="1"
                            {{ data_get($initialConfig,'legend.show',true) ? 'checked' : '' }}>
                        Show Legend
                    </label>
                    <div class="grid-2">
                        <div class="field">
                            <label>Position</label>
                            <select name="config_json[legend][position]" id="legend_position">
                                <option value="top"    @selected(data_get($initialConfig,'legend.position')==='top')>Top</option>
                                <option value="bottom" @selected(data_get($initialConfig,'legend.position','bottom')==='bottom')>Bottom</option>
                                <option value="left"   @selected(data_get($initialConfig,'legend.position')==='left')>Left</option>
                                <option value="right"  @selected(data_get($initialConfig,'legend.position')==='right')>Right</option>
                            </select>
                        </div>
                        <div class="field">
                            <label>Align</label>
                            <select name="config_json[legend][horizontalAlign]" id="legend_horizontalAlign">
                                <option value="left"   @selected(data_get($initialConfig,'legend.horizontalAlign')==='left')>Left</option>
                                <option value="center" @selected(data_get($initialConfig,'legend.horizontalAlign','center')==='center')>Center</option>
                                <option value="right"  @selected(data_get($initialConfig,'legend.horizontalAlign')==='right')>Right</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            {{-- DATA LABELS --}}
            <div class="panel">
                <button type="button" class="panel-header">Data Labels <span>▾</span></button>
                <div class="panel-body">
                    <label class="check">
                        <input type="checkbox" name="config_json[dataLabels][enabled]" id="dataLabels_enabled" value="1"
                            {{ data_get($initialConfig,'dataLabels.enabled',true) ? 'checked' : '' }}>
                        Show Data Labels
                    </label>
                    <div class="grid-2">
                        <div class="field">
                            <label>Font Size</label>
                            <input type="text" name="config_json[dataLabels][style][fontSize]" id="dataLabels_fontSize"
                                value="{{ data_get($initialConfig,'dataLabels.style.fontSize','13px') }}">
                        </div>
                        <div class="field">
                            <label>Font Weight</label>
                            <input type="number" name="config_json[dataLabels][style][fontWeight]" id="dataLabels_fontWeight"
                                value="{{ data_get($initialConfig,'dataLabels.style.fontWeight',600) }}">
                        </div>
                    </div>
                    <div class="field">
                        <label>Label Color</label>
                        <input type="color" name="config_json[dataLabels][style][colors][0]" id="dataLabels_color"
                            value="{{ data_get($initialConfig,'dataLabels.style.colors.0','#ffffff') }}">
                    </div>
                </div>
            </div>

            {{-- PIE OPTIONS --}}
            <div class="panel">
                <button type="button" class="panel-header">Pie Options <span>▾</span></button>
                <div class="panel-body">
                    <div class="grid-2">
                        <div class="field">
                            <label>Start Angle</label>
                            <input type="number" name="config_json[plotOptions][pie][startAngle]" id="pie_startAngle"
                                value="{{ data_get($initialConfig,'plotOptions.pie.startAngle',0) }}">
                        </div>
                        <div class="field">
                            <label>End Angle</label>
                            <input type="number" name="config_json[plotOptions][pie][endAngle]" id="pie_endAngle"
                                value="{{ data_get($initialConfig,'plotOptions.pie.endAngle',360) }}">
                        </div>
                    </div>
                    <div class="field">
                        <label>Custom Scale (0.1 – 2)</label>
                        <input type="number" step="0.1" min="0.1" max="2"
                            name="config_json[plotOptions][pie][customScale]" id="pie_customScale"
                            value="{{ data_get($initialConfig,'plotOptions.pie.customScale',1) }}">
                    </div>
                    <label class="check">
                        <input type="checkbox" name="config_json[plotOptions][pie][expandOnClick]" id="pie_expandOnClick" value="1"
                            {{ data_get($initialConfig,'plotOptions.pie.expandOnClick',true) ? 'checked' : '' }}>
                        Expand Slice on Click
                    </label>
                </div>
            </div>

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

        </div>
    </form>

    {{-- PREVIEW --}}
    <div class="preview-area">
        <div class="canvas-card">
            <div class="canvas-toolbar">
                <div>
                    <h2 class="canvas-title" id="previewTitle">{{ $initialName }}</h2>
                    <div class="canvas-subtitle">Live ApexCharts preview</div>
                </div>
            </div>
            <div class="chart-stage">
                <div id="chartPreview"></div>
            </div>
        </div>
        <div class="json-card">
            <h3 style="margin-top:0;">Current Payload</h3>
            <pre id="jsonPreview"></pre>
        </div>
    </div>
</div>
@endsection

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

    document.querySelectorAll('.panel').forEach((panel, index) => {
        if (index > 1) panel.classList.add('collapsed');
        panel.querySelector('.panel-header').addEventListener('click', () => panel.classList.toggle('collapsed'));
    });

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

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

    function buildPayload() {
        const labels = getLabels();
        const values = getValues();
        return {
            name: val('name', 'Pie Chart'),
            chart_type: 'pie',
            data_source_type: 'manual',
            data_json: { labels, series: values },
            config_json: {
                chart: {
                    type: 'pie',
                    height: Number(val('chart_height', 380)),
                    background: val('chart_background', '#ffffff'),
                    foreColor:  val('chart_foreColor', '#111827'),
                    fontFamily: val('chart_fontFamily', 'Roboto, sans-serif'),
                    toolbar: { show: false },
                    dropShadow: { enabled: false }
                },
                theme: { mode: val('theme_mode','light'), palette: val('theme_palette','palette1') },
                stroke: { show: true, width: Number(val('stroke_width', 2)), colors: [val('stroke_color','#ffffff')] },
                fill: { opacity: 1, type: 'solid' },
                legend: {
                    show: chk('legend_show', true),
                    position: val('legend_position','bottom'),
                    horizontalAlign: val('legend_horizontalAlign','center'),
                },
                dataLabels: {
                    enabled: chk('dataLabels_enabled', true),
                    style: {
                        fontSize: val('dataLabels_fontSize','13px'),
                        fontWeight: Number(val('dataLabels_fontWeight', 600)),
                        colors: [val('dataLabels_color','#ffffff')]
                    },
                    dropShadow: { enabled: false }
                },
                plotOptions: {
                    pie: {
                        startAngle:    Number(val('pie_startAngle', 0)),
                        endAngle:      Number(val('pie_endAngle', 360)),
                        expandOnClick: chk('pie_expandOnClick', true),
                        customScale:   Number(val('pie_customScale', 1)),
                        dataLabels:    { offset: 0, minAngleToShowLabel: 10 },
                        donut:         { size: '0%', background: 'transparent' },
                    }
                },
                tooltip: { enabled: true }
            }
        };
    }

    function buildApexOptions(payload) {
        return {
            chart:       payload.config_json.chart,
            theme:       payload.config_json.theme,
            series:      payload.data_json.series,      // flat array for pie
            labels:      payload.data_json.labels,      // slice labels
            stroke:      payload.config_json.stroke,
            fill:        payload.config_json.fill,
            legend:      payload.config_json.legend,
            dataLabels:  payload.config_json.dataLabels,
            plotOptions: payload.config_json.plotOptions,
            tooltip:     payload.config_json.tooltip,
        };
    }

    let chart = null;

    function renderPreview() {
        const payload = buildPayload();
        const options = buildApexOptions(payload);
        previewTitle.textContent = payload.name || 'Pie Chart';
        jsonPreview.textContent  = JSON.stringify(payload, null, 2);
        if (chart) chart.destroy();
        chart = new ApexCharts(chartEl, options);
        chart.render();
    }

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

    renderPreview();
</script>
@endsection