<script type="text/javascript">
    pma_token = '<?= $_SESSION[' PMA_token ']; ?>';
    url_query = '<?= $url_query; ?>';
</script>
<!-- Display Chart options -->
<div id="div_view_options">
    <form method="post" id="tblchartform" action="tbl_chart.php" class="ajax">
        <?= \PMA\libraries\URL::getHiddenInputs($url_params); ?>
        <fieldset>
            <legend>
                <?= __('Display chart'); ?>
            </legend>
            <div class="chartOption">
                <div class="formelement">
                    <input type="radio" name="chartType" value="bar" id="radio_bar" />
                    <label for ="radio_bar"><?= _pgettext('Chart type', 'Bar') ?></label>
                </div>
                <div class="formelement">
                    <input type="radio" name="chartType" value="column" id="radio_column" />
                    <label for ="radio_column"><?= _pgettext('Chart type', 'Column') ?></label>
                </div>
                <div class="formelement">
                    <input type="radio" name="chartType" value="line" id="radio_line" checked="checked" />
                    <label for ="radio_line"><?= _pgettext('Chart type', 'Line') ?></label>
                </div>
                <div class="formelement">
                    <input type="radio" name="chartType" value="spline" id="radio_spline" />
                    <label for ="radio_spline"><?= _pgettext('Chart type', 'Spline') ?></label>
                </div>
                <div class="formelement">
                    <input type="radio" name="chartType" value="area" id="radio_area" />
                    <label for ="radio_area"><?= _pgettext('Chart type', 'Area') ?></label>
                </div>
                <span class="span_pie" style="display:none;">
                    <input type="radio" name="chartType" value="pie" id="radio_pie" />
                    <label for ="radio_pie"><?= _pgettext('Chart type', 'Pie') ?></label>
                </span>
                <span class="span_timeline" style="display:none;">
                    <input type="radio" name="chartType" value="timeline" id="radio_timeline" />
                    <label for ="radio_timeline"><?= _pgettext('Chart type', 'Timeline') ?></label>
                </span>
                <span class="span_scatter" style="display:none;">
                <input type="radio" name="chartType" value="scatter" id="radio_scatter" />
                <label for ="radio_scatter"><?= _pgettext('Chart type', 'Scatter') ?></label>
                </span>
                <br /><br />
                <span class="barStacked" style="display:none;">
                    <input type="checkbox" name="barStacked" value="1" id="checkbox_barStacked" />
                    <label for ="checkbox_barStacked"><?= __('Stacked') ?></label>
                </span>
                <br /><br />
                <label for ="chartTitle"><?= __('Chart title:') ?></label>
                <input type="text" name="chartTitle" id="chartTitle" />
            </div>
            <?php $xaxis = null; ?>
            <div class="chartOption">
                <label for="select_chartXAxis"><?= __('X-Axis:'); ?></label>
                <select name="chartXAxis" id="select_chartXAxis">
                    <?php foreach ($keys as $idx => $key) : ?>
                        <?php if ($xaxis === null) : ?>
                            <?php $xaxis = $idx; ?>
                        <?php endif; ?>
                        <?php if ($xaxis === $idx) : ?>
                            <option value="<?= htmlspecialchars($idx); ?>" selected="selected"><?= htmlspecialchars($key); ?></option>
                        <?php else : ?>
                            <option value="<?= htmlspecialchars($idx); ?>"><?= htmlspecialchars($key); ?></option>
                        <?php endif; ?>
                    <?php endforeach; ?>
                </select>
                <br />
                <label for="select_chartSeries">
                    <?= __('Series:'); ?>
                </label>
                <select name="chartSeries" id="select_chartSeries" multiple="multiple">
                    <?php foreach ($keys as $idx => $key) : ?>
                        <?php if (in_array($fields_meta[$idx]->type, $numeric_types)) : ?>
                            <?php if ($idx == $xaxis && $numeric_column_count > 1) : ?>
                                <option value="<?= htmlspecialchars($idx); ?>"><?= htmlspecialchars($key); ?></option>
                            <?php else : ?>
                                <option value="<?= htmlspecialchars($idx); ?>" selected="selected"><?= htmlspecialchars($key); ?></option>
                            <?php endif; ?>
                        <?php endif; ?>
                    <?php endforeach;?>
                </select>
                <input type="hidden" name="dateTimeCols" value="
                    <?php $date_time_types = array('date', 'datetime', 'timestamp'); ?>
                    <?php foreach ($keys as $idx => $key): ?>
                        <?php if (in_array($fields_meta[$idx]->type, $date_time_types)): ?>
                            <?= $idx , ' ' ?>
                        <?php endif; ?>
                    <?php endforeach; ?>"
                />
                <input type="hidden" name="numericCols" value="
                    <?php foreach ($keys as $idx => $key): ?>
                        <?php if (in_array($fields_meta[$idx]->type, $numeric_types)): ?>
                            <?= $idx , ' ' ?>
                        <?php endif; ?>
                    <?php endforeach; ?>"
                />
            </div>
            <div class="chartOption">
                <label for="xaxis_panel">
                    <?= __('X-Axis label:'); ?>
                </label>
                <input style="margin-top:0;" type="text" name="xaxis_label" id="xaxis_label" value="<?= (($xaxis == -1) ? __('X Values') : htmlspecialchars($keys[$xaxis])); ?>" />
                <br />
                <label for="yaxis_label">
                    <?= __('Y-Axis label:'); ?>
                </label>
                <input type="text" name="yaxis_label" id="yaxis_label" value="<?= __('Y Values'); ?>" />
                <br />
            </div>
            <p style="clear:both;">&nbsp;</p>
            <div>
                <input type="checkbox" id="chkAlternative" name="chkAlternative" value="alternativeFormat" />
                <label for="chkAlternative"><?= __('Series names are in a column'); ?></label>
                <br />
                <label for="select_seriesColumn">
                    <?= __('Series column:'); ?>
                </label>
                <select name="chartSeriesColumn" id="select_seriesColumn" disabled>
                    <?php foreach ($keys as $idx => $key) : ?>
                        <option value="<?= htmlspecialchars($idx) ?>"
                            <?php if ($idx == 1): ?>
                                selected="selected"
                            <?php endif; ?>
                            <?php $seriesColumn = $idx; ?>">
                                <?= htmlspecialchars($key); ?>
                        </option>
                    <?php endforeach; ?>
                </select>
                <label for="select_valueColumn">
                    <?= __('Value Column:'); ?>
                </label>
                <select name="chartValueColumn" id="select_valueColumn" disabled>
                    <?php $selected = false;
                    foreach ($keys as $idx => $key) : ?>
                        <?php if (in_array($fields_meta[$idx]->type, $numeric_types)) : ?>
                            <?php if (! $selected && $idx != $xaxis && $idx != $seriesColumn) : ?>
                                <option value="<?= htmlspecialchars($idx); ?>" selected="selected"><?= htmlspecialchars($key); $selected = true; ?></option>
                            <?php else: ?>
                                <option value="<?= htmlspecialchars($idx); ?>"><?= htmlspecialchars($key); ?></option>
                            <?php endif; ?>
                        <?php endif; ?>
                    <?php endforeach; ?>
                </select>
            </div>
            <?= PMA\libraries\Util::getStartAndNumberOfRowsPanel($sql_query); ?>
            <p style="clear:both;">&nbsp;</p>
            <div id="resizer" style="width:600px; height:400px;">
                <div style="position: absolute; right: 10px; top: 10px; cursor: pointer; z-index: 1000;">
                    <a class="disableAjax" id="saveChart" href="#" download="chart.png">
                        <?= PMA\libraries\Util::getImage('b_saveimage', __('Save chart as image')); ?>
                    </a>
                </div>
                <div id="querychart" dir="ltr">
                </div>
            </div>
        </fieldset>
    </form>
</div>
