@extends('layouts.master')

@section('headers')
    @endsection

@section('scripts')
    {{ Html::script('js/spin.js') }}
    {{ Html::script('js/loadingScreen.js') }}
    {{ Html::script('js/loadFamilies.js') }}
    {{ Html::script('jsme/jsme.nocache.js') }}
    <script type="text/javascript">
        var jsme;
        var stereo = true;
        function switchStereo() {
            stereo ? jsme.options('nostereo') : jsme.options('stereo');
            stereo ? text = 'OFF' : text = 'ON';
            $('#stereoButton').html(text);
            stereo = !stereo;
        }

        function submitForm() {
            $('#smileCode').val(jsme.smiles());
            $('#jmeCode').val(jsme.jmeFile());
        }

    </script>
    <script type="text/javascript">
        function jsmeOnLoad() {
            jsme = new JSApplet.JSME("jmeVentana", {
                 "options" : "newlook,canonize,number,marker"
            });
        }
        ;
    </script>
@endsection
@section('mainContainer')
    <section class="container main-container">
        <div class="row">

                <div class="row">
                    <div class="col-xs-12 text-center">
                        <h4><b>{!! trans('applicationResource.form.busquedas.subestructura') !!}</b></h4><br>
                    </div>
                </div>

                @if ($errors->has('emptyError'))
                    <div class="row">
                        <div class="col-xs-12">
                            <h4 class="help-block">
                                <strong style="color: red;">{!! trans('applicationResource.errors.requeridos') !!}</strong>
                            </h4>
                        </div>
                    </div>
                @endif

                            <!-- Ventana del script para "pintar" las estructuras, se puede modificar el tamaño -->
                    <div class="col-xs-12 col-sm-6 col-md-5 text-center">
                        <div class="jmeEditor" name="JME" id="jmeVentana">
                        </div>
                    </div>

                <div class="col-xs-12 col-sm-6 col-md-6 text-center">
                    <form class="form-horizontal" role="form" method="POST"
                          action="{{ url('search/bySubstructure') }}"
                          onsubmit="showLoading()">
                        {!! csrf_field() !!}
                                <!-- Campo hidden para guardar el código SMILE generado por la estructura-->
                        <input type="hidden" name="smileCode" id="smileCode">
                        <!--Campo hidden para guardar el código JME generado por la estructura -->
                        <input type="hidden" name="jmeCode" id="jmeCode">

                        <div class="form-group row text-center">
                            <label>{!! trans('applicationResource.form.estereoquimica') !!}
                            </label>
                            <button class="btn btn-md btn-danger" onclick="switchStereo()" id="stereoButton"
                                    type="button">
                                ON
                            </button>
                        </div>

                        <hr class="invisible">

                        <div class="row">
                        	<div class="col-xs-10 col-xs-offset-1 col-sm-10 col-sm-offset-1 col-md-12 ">

                                <div class="form-group row">
                                    <!--FAMILIA, TIPO, GRUPO-->

                                    @include('search.familiesPartial')

                                </div>

                        	</div>
                        </div>

                        <hr class="invisible">
                                <!-- ENVIAR -->
                        <div class="form-group">
                            <div class="col-xs-12 col-md-offset-1">
                                <button class="btn btn-md btn-danger" onclick="submitForm()" type="submit" name="submitBtn"
                                        value="submitBtn">{!! trans('applicationResource.form.buscar') !!}
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
        </div>
    </section>
@endsection