<html>
    <div class="form-check-inline p-2 w-100" style=' border: #1b1e21 1px solid; font-family: Calibri,serif;background-image: url("{{URL::asset('/resources/images/bg-top1.png')}}"); background-repeat:no-repeat; background-size: 7px 100%; border-radius: 3px;'>
        <form id="form_ovladani" class="w-100 m-auto">
            <div class="row w100">
                <div class="col-9">
                    <div class="row ml-2 w-100">
                        <div class="col-5">
                            <label for="{{$id_stanice}}" style="font-weight: bold;">Veličina:</label><select class=" ml-1 pl-1" id="{{$id_stanice}}" name="velicina" >
                            @foreach($data as $id => $dataVizitky)
                                @if($dataVizitky['sloupec_velicina']!=='aktualizace')
                                    @if(isset($dataVizitky['nazev']))
                                        <option value="{{$dataVizitky['nazev']}}_{{$dataVizitky['sloupec_velicina']}}_{{$dataVizitky['jednotka']}}">{{$dataVizitky['nazev']}} ({{$dataVizitky['jednotka']}})</option>
                                    @else
                                        <option value="{{$dataVizitky['sloupec_velicina']}}">{{$dataVizitky['sloupec_velicina']}}</option>
                                    @endif
                                @endif
                            @endforeach
                            </select>
                        </div>
                        <div class="col-6">
                            <label for="cetnost" style="font-weight: bold;">Průměr za období: </label><select class=" ml-1 pl-1" id="cetnost" name="cetnost">
                                <option value="vsechny">Všechny</option>
                                <option value="hour">Hodina</option>
                                <option value="day" selected>Den</option>
                                <option value="week">Týden</option>
                                <option value="month">Měsíc</option>
                            </select>
                        </div>
                    </div>
                    <div class="row ml-2 w-100">
                        <div class="col-5">
                            <label style="font-weight: bold;" for="start_date">datum od: </label><input class=" ml-1 pl-1" type="date" id="start_date" name="start_date" min="2020-03-01">
                        </div>
                        <div class="col-6">
                            <label style="font-weight: bold;" for="end_date">datum do:</label><input class=" ml-1 pl-1" type="date" id="end_date" name="end_date" value="{{date('Y-m-d')}}">
                        </div>
                    </div>
                </div>
                <div class="col-3 m-auto">
                    <a  id="form_ovladani_btn" class="btn m-auto" style="width: 150px; height: 37px; background-color: darkorange; border: 0 darkorange; font-size: 20px; font-family: Calibri,serif; color: whitesmoke; border-radius: 5px; text-align: center; line-height: 111%;">Zobrazit</a>
                </div>
            </div>

        </form>
    </div>

    <script type="application/javascript">
        $(document).ready(function ajaxRequest()
        {
            var id = {{$id_stanice}};
            $('#form_ovladani_btn').on("click", function ()
            {
                var form = $('#form_ovladani').serializeArray();

                $.ajax({
                    url: '/dataModalOvladani',
                    type: 'POST',
                    dataType : 'json',
                    data : {id : id,
                        form: form},
                    success: function(data)
                    {
                        $('#containerDataGraf').empty();
                        Highcharts.chart('containerDataGraf', data);
                    }
                });
            })
        });
    </script>
</html>
