@extends("la.layouts.app")

@section("contentheader_title", "RAW Queries")
@section("htmlheader_title", "RAW Queries")

@section("main-content")
    <style>
        #query{
            width: 100%;
            resize: none;
            height: 200px;
        }
        #exec{
            padding: 5px;
            border-radius: 3px;
            background-color: #00a157;
            color: #FFF;
            font-size: 20px;
            width: 100px;
            border: none;
            margin-bottom: 1em;
        }
        .box-success{
            overflow: auto;
        }
    </style>
    <div class="box box-success">
        <div class="box-body">
    <div>
        <textarea id="query"></textarea>
        <button class="fr btn btn-primary" id="exec">Run</button>
    </div>

    <div class="box box-success" style="display: none;" id="resultQuery">
        <!--<div class="box-header"></div>-->
        <div class="box-body" id="example1">
            <table id="example1" class="table table-bordered">
            </table>
        </div>
    </div>
        </div>
    </div>
@endsection

@push('styles')
<!-- <link rel="stylesheet" type="text/css" href="{{ asset('la-assets/plugins/datatables/datatables.min.css') }}"/> -->
@endpush

@push('scripts')
<!-- <script src="{{ asset('la-assets/plugins/datatables/datatables.min.js') }}"></script> -->
<script>
    function Search(){
        var query = $('#query').val();

        if(query != null && query != "") {
            var variable = new XMLHttpRequest;
            variable.open('GET', "{{ url(config('laraadmin.adminRoute') . '/rawqueries_dt_ajax') }}?query=" + query, false);
            variable.send(null);
            $('#example1').html(variable.response);
        }else{
            $('#example1').html("Por favor, escriba la sentencia SQL a ejecutar");
        }
        $('#resultQuery').css('display', 'block');
    }

    $('#exec').on('click', function(){
        Search();
    });
</script>
@endpush