{{ csrf_field() }}
<div class="box box-primary">
    <div class="box-header with-border">
        <h3 class="box-title"></h3>
    </div>
    <input type="hidden" name="section_position" id="section_position" value="{{$section_position}}">
    <input type="hidden" name="region_1_position" id="region_1_position" value="{{$region_1_position}}">
    <input type="hidden" name="region_2_position" id="region_2_position" value="{{$region_2_position}}">
    <div class="box-body">
        <div class="row">
            <div class="col-md-4">
                <div class="form-group">
                    {!! Form::label('title', 'Titolo:') !!} <span id="chars">{{isset($news) ? 100 - strlen($news->title) : 100}} caratteri rimanenti</span>
                    {!! Form::text('title', null, array('class' => 'form-control title', 'maxlength' => 100)) !!}
                </div>                
            </div>

            <div class="col-md-4">
                <div class="form-group">
                    {!! Form::label('title_region_1', 'Titolo regione 1:') !!} <span id="chars_region_1">{{isset($news) ? 100 - strlen($news->title_region_1) : 100}} caratteri rimanenti</span>
                    {!! Form::text('title_region_1', null, array('class' => 'form-control title_region_1', 'maxlength' => 100)) !!}
                </div>                
            </div>
            
            <div class="col-md-4">
                <div class="form-group">
                    {!! Form::label('title_region_2', 'Titolo regione 2:') !!} <span id="chars_region_2">{{isset($news) ? 100 - strlen($news->title_region_2) : 100}} caratteri rimanenti</span>
                    {!! Form::text('title_region_2', null, array('class' => 'form-control title_region_2', 'maxlength' => 100)) !!}
                </div>                
            </div>

        </div>
        <div class="row">
            
            <div class="col-md-4">
                <div class="form-group">
                    {!! Form::label('homepage_position', 'Posizione primo piano:') !!}
                    {!! Form::select('homepage_position', ['' => '', 'slide1' => 'Apertura', 'left1' => 'Slide Sinistra 1', 'left2' => 'Slide Sinistra 2', 'left3' => 'Slide Sinistra 3', 'right1' => 'Slide Destra 1', 'right2' => 'Slide Destra 2', 'right3' => 'Slide Destra 3'], null, ['class' => 'form-control']) !!}
                </div>                
            </div>
            <div class="col-md-8">
                <div class="form-group">
                    {!! Form::label('aaa', 'News attualmente in primo piano:') !!}<br>
                    <ul>
                        {!! @$first !!}
                    </ul>
                </div>
            </div>
        </div>
        <div class="row">
            
            <div class="col-md-4">
                <div class="form-group">
                    {!! Form::label('section_id', 'Sezione:') !!}
                    {!! Form::select('section_id', [''=>''] + $sections, null, ['class' => 'form-control section_id_change']) !!}
                </div>                
            </div>

            <div class="col-md-4">
                <div class="form-group">
                    {!! Form::label('region_1_id', 'Regione 1:') !!}
                    {!! Form::select('region_1_id', [''=>''] + $regions, null, ['class' => 'form-control region_1_id_change']) !!}
                </div>                
            </div>

            <div class="col-md-4">
                <div class="form-group">
                    {!! Form::label('region_2_id', 'Regione 2:') !!}
                    {!! Form::select('region_2_id', [''=>''] + $regions, null, ['class' => 'form-control region_2_id_change']) !!}
                </div>                
            </div>

            
            

        </div>
        <div class="row">
            
            @if(isset($news))
                @if(($news->section_id > 0 && $news->section_position != '') || (!$news->online && $news->section_id > 0))
                    <div class="col-md-4" id="layout_section" style="display:{{(isset($news) && $news->section_position != '') || !isset($news) ? 'block' : 'none'}}">
                    
                    </div>
                @else
                    <div class="col-md-4">
                        {!! isset($news->section) ? $news->section->position($news->id) : ''!!}
                    </div>
                @endif
            @else
                <div class="col-md-4" id="layout_section" style="display:{{(isset($news) && $news->section_position != '') || !isset($news) ? 'block' : 'none'}}">
                        
                </div>
            @endif

            @if(isset($news))
                @if(($news->region_1_id > 0 && $news->region_1_position != '') || (!$news->online && $news->region_1_id > 0))
                    <div class="col-md-4" id="layout_region_1" style="display:{{(isset($news) && $news->region_1_position != '') || !isset($news) ? 'block' : 'none'}}">
                        
                    </div>
                @else
                    <div class="col-md-4">
                        {!! isset($news->region_1) ? $news->region_1->position($news->id) : ''!!}
                    </div>
                @endif    
            @else
                <div class="col-md-4" id="layout_region_1" style="display:{{(isset($news) && $news->region_1_position != '') || !isset($news) ? 'block' : 'none'}}">
                        
                </div>
            @endif

            @if(isset($news))
                @if(($news->region_2_id > 0 && $news->region_2_position != '') || (!$news->online && $news->region_2_id > 0))
                    <div class="col-md-4" id="layout_region_2" style="display:{{(isset($news) && $news->region_2_position != '') || !isset($news) ? 'block' : 'none'}}">
                        
                    </div>
                @else
                    <div class="col-md-4">
                        {!! isset($news->region_2) ? $news->region_2->position($news->id) : ''!!}
                    </div>
                @endif    
            @else
                <div class="col-md-4" id="layout_region_2" style="display:{{(isset($news) && $news->region_2_position != '') || !isset($news) ? 'block' : 'none'}}">
                        
                </div>
            @endif

        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    {!! Form::label('event_id', 'Evento:') !!}
                    {!! Form::select('event_id', [null => ''] + $events, null, ['class' => 'form-control']) !!}
                </div>                
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    {!! Form::label('page_id', 'Pagina WEB:') !!}
                    {!! Form::select('page_id', [null => ''] + $pages, null, ['class' => 'form-control']) !!}
                </div>                
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    {!! Form::label('text_short', 'Testo breve:') !!}
                    {!! Form::text('text_short', null, array('class' => 'form-control', 'maxlength' => '100')) !!}
                </div>                
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    {!! Form::label('date', 'Data:') !!}
                    {!! Form::text('date', isset($news) ? null : date("d/m/Y H:i"), array('class' => 'form-control')) !!}
                </div>                
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="form-group">
                    {!! Form::label('text', 'Testo:') !!}
                    {!! Form::textarea('text', null, array('rows' => 30, 'cols' => 100, 'class' => 'form-control js-editor')) !!}
                </div>                
            </div>
        </div>

        @if(isset($news))
            <div class="row">
                <div class="col-md-4">    
                    <div class="form-group">
                        {!! Form::label('image', 'Immagine principale:') !!}<br>
                        {!! Form::submit('Sostituisci immagine', ['class'=>'btn btn-success', 'name' => 'crop']) !!}
                        @if(false)
                            <div class="custom-file-upload">{!! Form::file('image', null, array('class' => 'form-control')) !!}</div>
                        @endif
                        @if (isset($news) && $news->image != '')
                            <br><img src="/files/news/{{$news->image}}" style="max-width:250px" />
                        @endif
                        @if (isset($_GET["filename"]))
                            <br><img src="/files/news/{{$_GET["filename"]}}" style="max-width:250px" />
                            <input type="hidden" name="filename" value="{{$_GET["filename"]}}">
                        @endif
                    </div>            
                </div>
                <div class="col-md-4">    
                    <div class="form-group">
                        {!! Form::label('image1', 'Immagine 1:') !!}<br>
                        <div class="custom-file-upload">{!! Form::file('image1', null, array('class' => 'form-control')) !!}</div>
                        @if (isset($news) && $news->image1 != '')
                            <br><img src="/files/news/{{$news->image1}}" style="max-width:150px" />
                        @endif
                    </div>            
                </div>
                <div class="col-md-4">    
                    <div class="form-group">
                        {!! Form::label('image2', 'Immagine 2:') !!}<br>
                        <div class="custom-file-upload">{!! Form::file('image2', null, array('class' => 'form-control')) !!}</div>
                        @if (isset($news) && $news->image2 != '')
                            <br><img src="/files/news/{{$news->image2}}" style="max-width:150px" />
                        @endif
                    </div>            
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">    
                    <div class="form-group">
                        {!! Form::label('image3', 'Immagine 3:') !!}<br>
                        <div class="custom-file-upload">{!! Form::file('image3', null, array('class' => 'form-control')) !!}</div>
                        @if (isset($news) && $news->image3 != '')
                            <br><img src="/files/news/{{$news->image3}}" style="max-width:150px" />
                        @endif
                    </div>            
                </div>
                <div class="col-md-4">    
                    <div class="form-group">
                        {!! Form::label('image4', 'Immagine 4:') !!}<br>
                        <div class="custom-file-upload">{!! Form::file('image4', null, array('class' => 'form-control')) !!}</div>
                        @if (isset($news) && $news->image4 != '')
                            <br><img src="/files/news/{{$news->image4}}" style="max-width:150px" />
                        @endif
                    </div>            
                </div>
                <div class="col-md-4">    
                    <div class="form-group">
                        {!! Form::label('image5', 'Immagine 5:') !!}<br>
                        <div class="custom-file-upload">{!! Form::file('image5', null, array('class' => 'form-control')) !!}</div>
                        @if (isset($news) && $news->image5 != '')
                            <br><img src="/files/news/{{$news->image5}}" style="max-width:150px" />
                        @endif
                    </div>            
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        {!! Form::label('video', 'Video:') !!}
                        {!! Form::textarea('video', null, array('rows' => 5, 'cols' => 50, 'class' => 'form-control')) !!}
                    </div>                
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        {!! Form::label('pdf', 'PDF:') !!}
                        <div class="custom-file-upload">{!! Form::file('pdf', null, array('class' => 'form-control')) !!}</div>
                        @if (isset($news) && $news->pdf != '')
                            <br><a href="/files/news/{{$news->pdf}}" target="_blank">Visualizza</a>
                            &nbsp;<input type="checkbox" name="remove_pdf">&nbsp;Rimuovi
                        @endif
                    </div>                
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        {!! Form::label('meta_title', 'Meta - Titolo:') !!}
                        {!! Form::text('meta_title', null, array('class' => 'form-control')) !!}
                    </div>                
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        {!! Form::label('meta_keywords', 'Meta - Parole chiave:') !!}
                        {!! Form::text('meta_keywords', null, array('class' => 'form-control')) !!}
                    </div>                
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        {!! Form::label('meta_description', 'Meta - Descrizione:') !!}
                        {!! Form::textarea('meta_description', null, array('rows' => 5, 'cols' => 50, 'class' => 'form-control')) !!}
                    </div>                
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        {!! Form::label('slug', 'Slug:') !!}
                        {!! Form::text('slug', null, array('class' => 'form-control slug')) !!}
                    </div>                
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="form-group">
                        {!! Form::label('no_social', 'Selezionando questo flag la news NON viene pubblicata su Facebook/Twitter ma solamente sul sito:') !!}<br>
                        {!! Form::checkbox('no_social', 'on', null) !!}
                    </div>                
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="form-group">
                        {!! Form::label('live', 'Live:') !!}<br>
                        {!! Form::checkbox('live', 'on', null) !!}
                    </div>                
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        {!! Form::label('breaking_news', 'Breaking news:') !!}<br>
                        {!! Form::checkbox('breaking_news', 'on', null) !!}
                    </div>                
                </div>
            </div>
        @else

            <input type="hidden" name="slug" class="slug">
            
            <div class="row">
                <div class="col-md-4">    
                    <div class="form-group">
                        {!! Form::label('image', 'Immagine principale:') !!}<br>
                        <div class="custom-file-upload">{!! Form::file('image', null, array('class' => 'form-control')) !!}</div>
                        @if (isset($_GET["filename"]))
                            <br><img src="/files/news/{{$_GET["filename"]}}" style="max-width:250px" />
                            <input type="hidden" name="filename" value="{{$_GET["filename"]}}">
                        @endif
                    </div>            
                </div>
                @if (!isset($_GET["filename"]))
                    <div class="col-md-4">
                        <div class="form-group">
                            {!! Form::label('breaking_news', 'Breaking news:') !!}<br>
                            {!! Form::checkbox('breaking_news', 'on', isset($_GET["filename"]) ? false : true) !!}
                        </div>                
                    </div>
                @endif
            </div>

        @endif
        
    </div>

    <div class="box-footer">

        @if(isset($news))

            @if($news->user_id > 0 && $news->user_id != Auth::user()->id)
                <span style="color:red; font-weight:bold">ATTENZIONE : l'utente {{$news->user->name}} sta modificando questa news</span><br><br>
            @endif

        @endif

        {!! Form::submit($submit_text, ['class'=>'btn btn-success saved', 'name' => 'save']) !!}
        {!! Form::submit('Salva ed esci', ['class'=>'btn btn-success saved', 'name' => 'save_exit']) !!}

        @if(isset($news))

            @if(!$news->online)
                {!! Form::submit('Pubblica', ['class'=>'btn btn-success saved', 'name' => 'publish']) !!}
            @else
                {!! Form::submit('Torna bozza', ['class'=>'btn btn-success saved', 'name' => 'unpublish']) !!}
            @endif
        
        @else

            {!! Form::submit('Pubblica', ['class'=>'btn btn-success saved', 'name' => 'publish']) !!}

        @endif

        {!! link_to_route('news.index', 'Annulla', null, array('class' => 'btn btn-info')) !!}

    </div>
</div>

@section('extra_css')

    <link rel="stylesheet" href="/backend/plugins/daterangepicker/daterangepicker.css">

@stop

@section('extra_js')

    <script src="/backend/plugins/input-mask/jquery.inputmask.js"></script>
    <script src="/backend/plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
    <script src="/backend/plugins/input-mask/jquery.inputmask.extensions.js"></script>

    <script src="/backend/plugins/moment/moment.min.js"></script>
    <script src="/backend/plugins/daterangepicker/daterangepicker.js"></script>

    <script>
        
        $(function () {
            
            $('form').on('submit', function(e){
                if($("#page_id").val() == '')
                {
                    if (!confirm("Attenzione, stai salvando una news senza pagina web, confermi?"))
                    {
                        e.preventDefault();
                    }
                }
                else
                {
                    $(".saved").click(function(){
                        $(".saved").each(function(){
                            $(this).hide();
                        });
                    });
                }
            });

            var layouts = [];
            @foreach($layouts as $i => $l)
                layouts[{{$i}}] = '{{$l}}';
            @endforeach

            $('.js-editor').summernote({
                height: 300,
                lang: 'it-IT' 
            });

            $("[name='date']").daterangepicker({ singleDatePicker: true, timePicker: true, timePicker24Hour: true, locale: { format: 'DD/MM/YYYY HH:mm' }})

            @if(!isset($news))
                $(".title").keyup(function(){
                    var Text = $(this).val();
                    Text = Text.toLowerCase();
                    Text = Text.replace(/[^a-zA-Z0-9]+/g,'-');
                    $(".slug").val(Text);        
                });
            @endif

            $('.title').on("keyup change", function () {

                const max = 100;
                const len = $(this).val().length;
              
                if (len >= max) 
                {
                $('#chars').text("0 caratteri rimanenti");
                } 
                else 
                {
              
                  const char = max - len;
                  $('#chars').text(char + '  caratteri rimanenti');
                }
              });

              $('.title_region_1').on("keyup change", function () {

                const max = 100;
                const len = $(this).val().length;
              
                if (len >= max) 
                {
                $('#chars_region_1').text("0 caratteri rimanenti");
                } 
                else 
                {
              
                  const char = max - len;
                  $('#chars_region_1').text(char + '  caratteri rimanenti');
                }
              });

              $('.title_region_2').on("keyup change", function () {

                const max = 100;
                const len = $(this).val().length;
              
                if (len >= max) 
                {
                $('#chars_region_2').text("0 caratteri rimanenti");
                } 
                else 
                {
              
                  const char = max - len;
                  $('#chars_region_2').text(char + '  caratteri rimanenti');
                }
              });
            
              $(".section_id_change").change(function(){
                var layout = layouts[this.value];
                loadLayoutSection(layout, 'section');
                $("#section_position").val('');
              });

              $(".region_1_id_change").change(function(){
                  if(this.value != "" && this.value == $(".region_2_id_change").val())
                  {
                      alert('Attenzione, la regione selezionata è già associata a REGIONE2');
                      $(".region_1_id_change").val('');
                      loadLayoutSection('', 'region_1');
                      $("#region_1_position").val('');
                  }
                  else
                  {
                    var layout = layouts[this.value];
                    loadLayoutSection(layout, 'region_1');
                    $("#region_1_position").val('');
                  }
              });

              $(".region_2_id_change").change(function(){
                if(this.value != "" && this.value == $(".region_1_id_change").val())
                {
                    alert('Attenzione, la regione selezionata è già associata a REGIONE1');
                    $(".region_2_id_change").val('');
                    loadLayoutSection('', 'region_2');
                    $("#region_2_position").val('');
                }
                else
                {
                    var layout = layouts[this.value];
                    loadLayoutSection(layout, 'region_2');
                    $("#region_2_position").val('');
                }
              });
              
              $(document). on("click", ".btSelect" , function() {
                var where = $(this).attr('data-where');
                $(".boxLayout." + where).attr('style', 'border:1px solid gray; padding:10px;background-color: white !important');
                $(this).parent().attr('style', 'border:1px solid gray; padding:10px;background-color: red !important');
                $("#" + where + "_position").val($(this).attr('data-position'));
              });

            @if(isset($news))
                @if(($news->section_id > 0 && $news->section_position != '') || (!$news->online && $news->section_id > 0))
                    var layout = layouts[{{$news->section_id}}];
                    loadLayoutSection(layout, 'section');
                @endif
                @if(($news->region_1_id > 0 && $news->region_1_position != '') || (!$news->online && $news->region_1_id > 0))
                    var layout = layouts[{{$news->region_1_id}}];
                    loadLayoutSection(layout, 'region_1');
                @endif
                @if(($news->region_2_id > 0 && $news->region_2_position != '') || (!$news->online && $news->region_2_id > 0))
                    var layout = layouts[{{$news->region_2_id}}];
                    loadLayoutSection(layout, 'region_2');
                @endif
            @endif

            @if($section_position != '')
                $( "input[data-where='section'][data-position='{{$section_position}}']" ).parent().attr('style', 'border:1px solid gray; padding:10px;background-color: red !important');
            @endif
            @if($region_1_position != '')
                $( "input[data-where='region_1'][data-position='{{$region_1_position}}']" ).parent().attr('style', 'border:1px solid gray; padding:10px;background-color: red !important');
            @endif
            @if($region_2_position != '')
                $( "input[data-where='region_2'][data-position='{{$region_2_position}}']" ).parent().attr('style', 'border:1px solid gray; padding:10px;background-color: red !important');
            @endif

        });

        function loadLayoutSection(layout, position)
        {

            if (layout != '')
            {

                var html = '<div class="col-md-10" style="margin-left:20px;margin-right:20px">';

                if (layout == 'layout_1')
                {
                    html += '<div class="row"><div class="col-md-12 text-center boxLayout ' + position + '" style="border:1px solid gray; padding:10px;"><input type="button" class="btSelect" data-where="' + position + '" data-position="big" value="SEL."></div></div>';
                    html += '<div class="row">';
                        html += '<div class="col-md-4 text-center boxLayout ' + position + '"  style="border:1px solid gray; padding:10px;"><input type="button" class="btSelect" data-where="' + position + '" data-position="small1" value="SEL."></div>';
                        html += '<div class="col-md-4 text-center boxLayout ' + position + '"  style="border:1px solid gray; padding:10px;"><input type="button" class="btSelect" data-where="' + position + '" data-position="small2" value="SEL."></div>';
                        html += '<div class="col-md-4 text-center boxLayout ' + position + '"  style="border:1px solid gray; padding:10px;"><input type="button" class="btSelect" data-where="' + position + '" data-position="small3" value="SEL."></div>';
                    html += '</div>';
                }
                if (layout == 'layout_2')
                {
                    html += '<div class="row"><div class="col-md-12 text-center boxLayout ' + position + '" style="border:1px solid gray; padding:10px;"><input type="button" class="btSelect" data-where="' + position + '" data-position="big" value="SEL."></div></div>';
                    html += '<div class="row">';
                        html += '<div class="col-md-4 text-center boxLayout ' + position + '"  style="border:1px solid gray; padding:10px;"><input type="button" class="btSelect" data-where="' + position + '" data-position="small1" value="SEL."></div>';
                        html += '<div class="col-md-4 text-center boxLayout ' + position + '"  style="border:1px solid gray; padding:10px;"><input type="button" class="btSelect" data-where="' + position + '" data-position="small2" value="SEL."></div>';
                        html += '<div class="col-md-4 text-center boxLayout ' + position + '"  style="border:1px solid gray; padding:10px;"><input type="button" class="btSelect" data-where="' + position + '" data-position="small3" value="SEL."></div>';
                    html += '</div>';
                }
                if (layout == 'layout_3')
                {
                    html += '<div class="row"><div class="col-md-12 text-center boxLayout ' + position + '" style="border:1px solid gray; padding:10px;"><input type="button" class="btSelect" data-where="' + position + '" data-position="big" value="SEL."></div></div>';
                    html += '<div class="row">';
                        html += '<div class="col-md-6 text-center boxLayout ' + position + '"  style="border:1px solid gray; padding:10px;"><input type="button" class="btSelect" data-where="' + position + '" data-position="small1" value="SEL."></div>';
                        html += '<div class="col-md-6 text-center boxLayout ' + position + '"  style="border:1px solid gray; padding:10px;"><input type="button" class="btSelect" data-where="' + position + '" data-position="small2" value="SEL."></div>';
                    html += '</div>';
                    html += '<div class="row">';
                        html += '<div class="col-md-6 text-center boxLayout ' + position + '"  style="border:1px solid gray; padding:10px;"><input type="button" class="btSelect" data-where="' + position + '" data-position="small3" value="SEL."></div>';
                        html += '<div class="col-md-6 text-center boxLayout ' + position + '"  style="border:1px solid gray; padding:10px;"><input type="button" class="btSelect" data-where="' + position + '" data-position="small4" value="SEL."></div>';
                    html += '</div>';
                }
                if (layout == 'layout_4')
                {
                    html += '<div class="row"><div class="col-md-12 text-center boxLayout ' + position + '" style="border:1px solid gray; padding:10px;"><input type="button" class="btSelect" data-where="' + position + '" data-position="big" value="SEL."></div></div>';
                    html += '<div class="row">';
                        html += '<div class="col-md-6 text-center boxLayout ' + position + '"  style="border:1px solid gray; padding:10px;"><input type="button" class="btSelect" data-where="' + position + '" data-position="small1" value="SEL."></div>';
                        html += '<div class="col-md-6 text-center boxLayout ' + position + '"  style="border:1px solid gray; padding:10px;"><input type="button" class="btSelect" data-where="' + position + '" data-position="small2" value="SEL."></div>';
                    html += '</div>';
                    html += '<div class="row">';
                        html += '<div class="col-md-6 text-center boxLayout ' + position + '"  style="border:1px solid gray; padding:10px;"><input type="button" class="btSelect" data-where="' + position + '" data-position="small3" value="SEL."></div>';
                        html += '<div class="col-md-6 text-center boxLayout ' + position + '"  style="border:1px solid gray; padding:10px;"><input type="button" class="btSelect" data-where="' + position + '" data-position="small4" value="SEL."></div>';
                    html += '</div>';
                    html += '<div class="row">';
                        html += '<div class="col-md-6 text-center boxLayout ' + position + '"  style="border:1px solid gray; padding:10px;"><input type="button" class="btSelect" data-where="' + position + '" data-position="small5" value="SEL."></div>';
                        html += '<div class="col-md-6 text-center boxLayout ' + position + '"  style="border:1px solid gray; padding:10px;"><input type="button" class="btSelect" data-where="' + position + '" data-position="small6" value="SEL."></div>';
                    html += '</div>';
                }
                if (layout == 'layout_5')
                {
                    html += '<div class="row"><div class="col-md-12 text-center boxLayout ' + position + '" style="border:1px solid gray; padding:10px;"><input type="button" class="btSelect" data-where="' + position + '" data-position="big" value="SEL."></div></div>';
                    html += '<div class="row">';
                        html += '<div class="col-md-6 text-center boxLayout ' + position + '"  style="border:1px solid gray; padding:10px;"><input type="button" class="btSelect" data-where="' + position + '" data-position="small1" value="SEL."></div>';
                        html += '<div class="col-md-6 text-center boxLayout ' + position + '"  style="border:1px solid gray; padding:10px;"><input type="button" class="btSelect" data-where="' + position + '" data-position="small2" value="SEL."></div>';
                    html += '</div>';
                    html += '<div class="row">';
                        html += '<div class="col-md-6 text-center boxLayout ' + position + '"  style="border:1px solid gray; padding:10px;"><input type="button" class="btSelect" data-where="' + position + '" data-position="small3" value="SEL."></div>';
                        html += '<div class="col-md-6 text-center boxLayout ' + position + '"  style="border:1px solid gray; padding:10px;"><input type="button" class="btSelect" data-where="' + position + '" data-position="small4" value="SEL."></div>';
                    html += '</div>';
                }
                if (layout == 'layout_6')
                {
                    html += '<div class="row">';
                        html += '<div class="col-md-6 text-center boxLayout ' + position + '" style="border:1px solid gray; padding:10px;"><input type="button" class="btSelect" data-where="' + position + '" data-position="big" value="SEL."></div>';
                        html += '<div class="col-md-6">';
                            html += '<div class="col-md-12 text-center boxLayout ' + position + '"  style="border:1px solid gray; padding:10px;"><input type="button" class="btSelect" data-where="' + position + '" data-position="small1" value="SEL."></div>';
                            html += '<div class="col-md-12 text-center boxLayout ' + position + '"  style="border:1px solid gray; padding:10px;"><input type="button" class="btSelect" data-where="' + position + '" data-position="small2" value="SEL."></div>';
                            html += '<div class="col-md-12 text-center boxLayout ' + position + '"  style="border:1px solid gray; padding:10px;"><input type="button" class="btSelect" data-where="' + position + '" data-position="small3" value="SEL."></div>';
                        html += '</div>';
                    html += '</div>';
                }

                html += "</div>";

                $("#layout_" + position).html(html);
                $("#layout_" + position).show();

            }
            else
            {
                $("#layout_" + position).html('');
            }


        }

    </script>
@stop