@extends('adminlte::page')

@section('title', 'Obtención de Token')

@section('content_header')
    <h1>Obtención de Token</h1>
@stop

@section('content')
    <div class="row">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-body">
                    <div class="p-4">
                        <div class="row">
                        {{-- Create input for user --}}
                            <div class="col-6">
                                User Name:
                                <input type="text" id="username" name="username" placeholder="Usuario" class="form-control" value="admin">
                                {{-- Create input for password --}}
                            </div>
                            <div class="col-6">
                                Password:
                                <input type="text" id="password" name="password" placeholder="Password" class="form-control" value="sample">
                                {{-- Create input for password --}}
                            </div>

                        </div>
                        <br>
                        <div class="row">
                            <div class="col-12">
                                <button type="button" class="btn btn-success"  id="getToken">Obtener Token</button>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-12">
                                <code class="" id="coderesponse"></code>
                                <br>
                                Token:
                                <textarea id="vertoken" class="form-control" rows="6" style="font-size: 90%"></textarea>
                                Date validate:
                                <input type="text" id="date" name="password" placeholder="" class="form-control" readonly>

                            </div>
                        </div>
                        <div class="row pt-4">
                            <div class="col-2">
                                <br>
                                <button type="button" class="btn btn-success"  id="getSystems">Obtener Sistemas</button>
                            </div>
                            <div class="col-6">
                                Systems
                                <select id="systemslist" class="form-control">
                                </select>
                            </div>
                            <div class="col-3">
                                <br>
                                <button type="button" class="btn btn-info btn-block"  id="setSystem">Establecer Sistema</button>
                            </div>
                        </div>
                    </div>
            </div>
            </div>
        </div>

    </div>
@stop

@section('css')

@stop

@section('js')
<script>
$(document).ready(function() {
    $("#getToken").click(function(){
        let url = "{{route('simulator.gettoken')}}";
        let username = $("#username").val();
        let password = $("#password").val();
        $.post(url,{username: username,password: password},function(data) {
            $("#coderesponse").html("Response: "+JSON.stringify(data,null,2));
                if(data.status ==true){
                    $("#vertoken").val(data.token);
                    $("#date").val(data.expires_at);
                } else {
                    $("#vertoken").val(data.token);
                    $("#date").val(data.expires_at);
                    alert(data.message);
                }
            }
        , 'json');
    });
    $("#getSystems").click(function(){
        let url = "{{route('simulator.getsystems')}}";
        $.get(url,{},function(data) {
                if(data.status ==true){
                    $("#systemslist").empty();
                    $.each(data.data, function( index, value ) {
                        $("#systemslist").append('<option value="'+value.id_siat_system+'" modality="'+value.modality+'">'+value.name+'</option>');
                    });
                } else {
                    alert(data.message);
                }
            }
        , 'json');
    });
    $("#setSystem").click(function(){
        let url = "{{route('simulator.setsystem')}}";
        let id_siat_system = $("#systemslist").val();
        let modality = $("#systemslist option:selected").attr('modality');
        $.post(url,{id_siat_system: id_siat_system,modality:modality},function(data) {
                if(data.status ==true){
                    alert(data.message);
                } else {
                    alert(data.message);
                }
            }
        , 'json');
    });
});
</script>
@stop