{{--@TODO fix this to use spatie for validation--}}


<div class="row">
    <div class="col-sm-auto">
        <div class="row h-100"  >
            <div class="col my-auto ">
                <div class="container h-100">
                    <canvas id="scatterChartPreview"  style="border: 1px solid grey" width="200" height="200"></canvas>
                </div>
            </div>
        </div>
    </div>
    <div class="col" id="chart-tab-panels">
        <nav>
            <div class="nav nav-tabs" role="tablist">
                <a class="nav-item nav-link active" id="scatter-nav-home-tab" data-toggle="tab" href="#chart-data" role="tab"
                   aria-controls="chart-data" aria-selected="true">Data</a>
                <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#chart-labels" role="tab"
                   aria-controls="chart-labels" aria-selected="false">Options</a>
            </div>
        </nav>
        <div class="tab-content" id="tab-content">
            <div class="container tab-pane fade show active" role="tabpanel" id="scatter-chart-data"
                 style="min-height: 400px; border: 1px solid; overflow: auto; ">
                <div class="row" style="padding: 10px; ">
                    <div class="col-sm">
                        <div class="row ">
                            <div class="col">
                                <div class="row">
                                    <div>Colour by:<br/>
                                        <input data-width="100px" onchange="changeDataColour(this)"
                                               data-onstyle="warning" data-offstyle="info" type="checkbox"
                                               id="chart_colour1" checked data-toggle="toggle" data-on="Category"
                                               data-off="Dataset"></div>
{{--                                    <table id="scatter_chart_data_table" class="table table-bordered">--}}
{{--                                        <tbody>--}}
{{--                                        <tr style="padding-left: 5px">--}}
{{--                                            <td>--}}
{{--                                            <td class="label-cell" data-row="0" data-col="1">--}}
{{--                                                <div class="row no-gutters">--}}
{{--                                                    <div data-row="0" data-col="1"--}}
{{--                                                         class="input-group chart-colorpicker colorpicker-dataset  col-sm-3">--}}
{{--                                                        <input data-type="colour" type="text"--}}
{{--                                                               class="form-control input-lg"--}}
{{--                                                               style="display: none" value="#337AB7"/>--}}
{{--                                                        <span class="input-group-append">--}}
{{--                                                        <span class="input-group-text colorpicker-input-addon">--}}
{{--                                                            <i></i></span>--}}
{{--                                                    </span>--}}
{{--                                                    </div>--}}
{{--                                                    <input class="col" data-row="0" data-col="1" type="text"--}}
{{--                                                           value="Dataset 1">--}}
{{--                                                </div>--}}
{{--                                            </td>--}}
{{--                                        </tr>--}}
{{--                                        <tr>--}}
{{--                                            <td class="label-cell" data-row="1" data-col="0">--}}
{{--                                                <div class="row no-gutters">--}}
{{--                                                    <div data-row="1" data-col="0"--}}
{{--                                                         class=" input-group chart-colorpicker colorpicker-category col">--}}
{{--                                                        <input data-type="colour" type="text"--}}
{{--                                                               class="form-control input-lg"--}}
{{--                                                               style="display: none" value="#337AB7"/>--}}
{{--                                                        <span class="input-group-append">--}}
{{--                                                        <span class="input-group-text colorpicker-input-addon">--}}
{{--                                                            <i></i></span>--}}
{{--                                                    </span>--}}
{{--                                                    </div>--}}
{{--                                                    <input class="col" data-row="1" data-col="0" type="text"--}}
{{--                                                           value="Category 1">--}}
{{--                                                </div>--}}
{{--                                            </td>--}}
{{--                                            <td data-row="1" data-col="1" data-type="number">--}}
{{--                                                <input data-row="1" data-col="1" type="text" value="5">--}}
{{--                                            </td>--}}
{{--                                        </tr>--}}
{{--                                        <tr>--}}
{{--                                            <td class="label-cell">--}}
{{--                                                <div class="row no-gutters">--}}
{{--                                                    <div data-row="2" data-col="0"--}}
{{--                                                         class="input-group chart-colorpicker colorpicker-category col">--}}
{{--                                                        <input type="text" data-type="colour"--}}
{{--                                                               class="form-control input-lg"--}}
{{--                                                               style="display: none" value="#5CB85C"/>--}}
{{--                                                        <span class="input-group-append">--}}
{{--                                                        <span class="input-group-text colorpicker-input-addon">--}}
{{--                                                            <i></i></span>--}}
{{--                                                    </span>--}}
{{--                                                    </div>--}}
{{--                                                    <input class="col" data-row="2" data-col="0" type="text"--}}
{{--                                                           value="Category 2">--}}
{{--                                                </div>--}}
{{--                                            </td>--}}
{{--                                            <td><input data-row="2" data-col="1" data-type="number" type="text"--}}
{{--                                                       value="10">--}}
{{--                                            </td>--}}
{{--                                        </tr>--}}
{{--                                        </tbody>--}}
{{--                                    </table>--}}
                                </div>
                            </div>
                            <div class="col-sm" style="padding: 0px">
                                <div class="btn-group btn-group-sm" role="group" aria-label="dataset">
                                    <button class="btn btn-sm btn-outline-primary" onclick="addDataCol()">dataset<i
                                            class="fas fa-plus"></i>
                                    </button>
                                    <button class="btn btn-sm btn-outline-primary" onclick="removeDataCol()"><i
                                            class="fas fa-minus"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="btn-group btn-group-sm" role="group" aria-label="category">
                                <button class="btn btn-sm btn-outline-primary" onclick="addDataRow()">category<i
                                        class="fas fa-plus"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-primary" onclick="removeDataRow()"><i
                                        class="fas fa-minus"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade p-1" id="chart-labels" style="min-height: 400px; border: 1px solid;" role="tabpanel">

                    <div class="form-group row">
                        <div class="col-sm-12">
                            <label for="scatter_chart_title">Title</label>
                        </div>
                        <div class="col-sm-12">
                            <input id="scatter_chart_title" class="form-control" style="width: 100%"
                                   placeholder="Chart title"></input>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-sm-12">
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input" id="scatter_chart_legend">
                            <label class="form-check-label" for="scatter_chart_legend">Show legend</label>
                        </div>
                        </div>
                    </div>
                <div class="form-group row">
                    <div class="col-sm-12">
                        <label for=scatter_chart_legend">Legend position</label>
                        <select class="form-control" id="scatter_chart_legend-position">
                            <option value="top">Top</option>
                            <option value="left">Left</option>
                            <option value="bottom">Bottom</option>
                            <option value="right">Right</option>

                        </select>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-sm-12">
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input" id="scatter_chart_gridlines">
                            <label class="form-check-label" for="scatter_chart_gridlines">Show gridlines</label>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

</div>


<div class="form-group">

    <button class="btn btn-outline-success" onclick="scattercharttosvg()">Insert</button>
</div>