@extends('base')

@section('css-assets')
<link href="{{ asset('/css/vendor/yasqe.min.css')}}" rel='stylesheet' type='text/css'>
<link href="{{ asset('/css/vendor/yasr.min.css')}}" rel='stylesheet' type='text/css'>
@parent
@endsection


@section('nav')
<ul class="nav navbar-nav">
    <li><a href="{{ route('sparql_form') }}">Client SPARQL</a></li>
</ul>
@endsection

@section('js-assets')
@parent
    <script src="{{ asset('/js/vendor/yasqe.bundled.min.js') }}"></script>
    <script src="{{ asset('/js/sparqlclient.js') }}"></script>
    <script>
    $(function() {
        initSparqlEditor();
        // var yasqe = YASQE.fromTextArea($('#query').get(0), {
        //     sparql: {
        //         showQueryButton: false,
        //         //endpoint: "{{ route('sparql_proxy') }}",
        //         //requestMethod: "GET",
        //         //acceptHeaderGraph: "application/rdf+json,/;q=0.9"
        //         //acceptHeaderGraph: "text/turtle,/;q=0.9",
        //         //acceptHeaderSelect: "application/x-turtle,/;q=0.9",
        //     }
        // });
        // // var yasr = YASR($('#results').get(0), {
        // //     getUsedPrefixes: yasqe.getPrefixesFromQuery,
        // //     useGoogleCharts: false,
        // //     outputPlugins: ["table", "error", "boolean", "rawResponse", "pivot"],
        // // });
        // // yasqe.options.sparql.callbacks.complete = yasr.setResponse;
    });
    </script>
@endsection

@section('content')
<div class="row">
    <div class="col-md-12">
        <form action="{{ route('sparql_query') }}" method="get" id="query-form">
            <fieldset>
                <div class="form-group row">
                    <div class="col-md-12">
                    <label for="query">Requête</label><br />
                    <textarea rows="18" cols="80" name="query" id="query" class="form-control">select distinct ?Concept where {[] a ?Concept} LIMIT 100</textarea>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col-md-2">
                        <label for="format" class="n control-label">Format du résultat</label>
                        <select name="format" id="format" class="form-control">
                            <option value="text/html" selected="selected">HTML</option>
                        </select>
                    </div>
                    <div class="form-group col-md-2">
                        <label for="timeout" class="n control-label">Timeout</label>
                        <input name="timeout" id="timeout" class="form-control" type="text" value="0" />
                        <span class=" help-block"> milliseconds <i>(values less than 1000 are ignored)</i></span>
                    </div>
                    <div class="form-group col-md-2">
                        <label for="limit" class="n control-label">Limite</label>
                        <div class="input-group">
                            <input name="limit" id="limit" class="form-control" type="text" value="0" />
                            <div class="input-group-btn">
                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button>
                                <ul id="limits-choices" class="dropdown-menu dropdown-menu-right">
                                    <li><a href="#">0</a></li>
                                    <li><a href="#">100</a></li>
                                    <li><a href="#">200</a></li>
                                    <li><a href="#">500</a></li>
                                </ul>
                            </div>
                        </div>
                        <span class=" help-block"> résultats/pages <i>(0 = tous sur une seule page)</i></span>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-md-12">
                    <input id="submit-query-form" type="submit" class="btn btn-primary" value="Lancer la requête"/>
                    <input type="reset" class="btn" value="URL de la requête" id="get-query-url"/>
                    <input type="reset" class="btn" value="Nouvelle requête" id="reset-query"/>
                    </div>
                </div>
            </fieldset>
        </form>
    </div>
</div>

<div class="row">
    <div id="results" class="col-md-12">
</div>
@endsection