@extends('layouts.master')

@section('headers')
    @endsection

@section('scripts')
    {!! Html::script('js/spin.js') !!}
    {!! Html::script('js/loadingScreen.js') !!}
    {!! Html::script('js/bootstrap-tabcollapse.js') !!}
    {!! Html::script('js/nouislider.min.js') !!}
    {!! Html::script('js/searchByCarbonType.js') !!}
    <script>
        $(document).ready(function () {

            // DEPENDENCY: https://github.com/flatlogic/bootstrap-tabcollapse
            $('.content-tabs').tabCollapse();

            // initialize tab function
            $('.nav-tabs a').click(function (e) {
                e.preventDefault();
                $(this).tab('show');
            });

        });
    </script>
@endsection

@section('estilos')
    {!! Html::style('//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css') !!}
    {!! Html::style('css/nouislider.min.css') !!}

    
@endsection
@section('mainContainer')

    <section class="container main-container">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-10 col-md-offset-1">
                <div class="row">
                    <div class="col-xs-12 text-center">
                        <h4><b>{!! trans('applicationResource.form.busquedas.tiposCarbono') !!}</b></h4>
                    </div>
                </div>
                <hr class="invisible"></hr>

                @if ($errors->has('range'))
                    <div class="row">
                        <div class="col-xs-12 text-center">
                            <h4 class="help-block">
                                <strong style="color: red;">{!! trans('applicationResource.errors.requeridos') !!}</strong>
                            </h4>
                        </div>
                    </div>
                @endif
                        <!--MENÚ CONFIGURACIÓN-->
                                        <div id="tab-container" data-easytabs="true" class="row">
                        <ul class="nav nav-tabs content-tabs" role="tablist">
                            @foreach($menus as $title=>$options)
                                <li><a class="text-capitalize" data-toggle="tab" href="#tabs1-{!! $title !!}"><strong>{!! trans('applicationResource.type.'.$title) !!}</strong></a></li>
                            @endforeach
                        </ul>
                        <div id="sliderMenu" class="tab-content">
                            @foreach($menus as $title=>$options)
                                                                <div id="tabs1-{!! $title !!}" class="tab-pane fade">
                                    <div class="row panel-body" id="menu{!! $index !!}">
                                        @foreach($options as $option=>$label)
                                            <div class="col-xs-2">
                                                <input type="checkbox" value="{!! $option !!}"><label>&nbsp;&nbsp;{!! $label !!}</label>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <div>
                        <form id="queryForm" action="{!! url('search/byCarbonType') !!}" method="POST" onsubmit="showLoading()">
                            {!! csrf_field() !!}
                        </form>
                    </div>
                <div class="row" class="col-xs-10 col-xs-offset-1">
                        <div id="containerTarget"></div>
                </div>
                <form id="sliderForm" class="form-group row" method="POST" action="{!! url("search/byCarbonType") !!}">
                    {!! csrf_field() !!}
                </form>

                <hr class="invisible">
                <div class="row">
                    <div class="col-xs-12 text-center">
                        <button id="btnSearch" class="btn btn-danger">{!! trans('applicationResource.form.buscar') !!}</button>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection