{{ csrf_field() }}

{{-- Handle filename parameter properly --}}
@if (request()->has('filename'))
    <input type="hidden" name="filename" value="{{ request()->get('filename') }}">
@endif

<div class="box box-primary">
    <div class="box-header with-border">
        <h3 class="box-title">{{ isset($news) ? 'Modifica News' : 'Crea News' }}</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">
        {{-- Title Row --}}
        <div class="row">
            <div class="col-md-4">
                <div class="form-group">
                    <label for="title">Titolo:</label>
                    <span id="chars">{{ isset($news) ? 100 - strlen($news->title ?? '') : 100 }} caratteri rimanenti</span>
                    <input type="text" name="title" id="title" class="form-control title" maxlength="100"
                           value="{{ old('title', $news->title ?? '') }}" required>
                    @error('title')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
            </div>

            <div class="col-md-4">
                <div class="form-group">
                    <label for="title_region_1">Titolo regione 1:</label>
                    <span id="chars_region_1">{{ isset($news) ? 100 - strlen($news->title_region_1 ?? '') : 100 }} caratteri rimanenti</span>
                    <input type="text" name="title_region_1" id="title_region_1" class="form-control title_region_1" maxlength="100"
                           value="{{ old('title_region_1', $news->title_region_1 ?? '') }}">
                </div>
            </div>

            <div class="col-md-4">
                <div class="form-group">
                    <label for="title_region_2">Titolo regione 2:</label>
                    <span id="chars_region_2">{{ isset($news) ? 100 - strlen($news->title_region_2 ?? '') : 100 }} caratteri rimanenti</span>
                    <input type="text" name="title_region_2" id="title_region_2" class="form-control title_region_2" maxlength="100"
                           value="{{ old('title_region_2', $news->title_region_2 ?? '') }}">
                </div>
            </div>
        </div>

        {{-- Homepage Position Row --}}
        <div class="row">
            <div class="col-md-4">
                <div class="form-group">
                    <label for="homepage_position">Posizione primo piano:</label>
                    <select name="homepage_position" id="homepage_position" class="form-control">
                        <option value=""></option>
                        <option value="slide1" {{ old('homepage_position', $news->homepage_position ?? '') == 'slide1' ? 'selected' : '' }}>Apertura</option>
                        <option value="left1" {{ old('homepage_position', $news->homepage_position ?? '') == 'left1' ? 'selected' : '' }}>Slide Sinistra 1</option>
                        <option value="left2" {{ old('homepage_position', $news->homepage_position ?? '') == 'left2' ? 'selected' : '' }}>Slide Sinistra 2</option>
                        <option value="left3" {{ old('homepage_position', $news->homepage_position ?? '') == 'left3' ? 'selected' : '' }}>Slide Sinistra 3</option>
                        <option value="right1" {{ old('homepage_position', $news->homepage_position ?? '') == 'right1' ? 'selected' : '' }}>Slide Destra 1</option>
                        <option value="right2" {{ old('homepage_position', $news->homepage_position ?? '') == 'right2' ? 'selected' : '' }}>Slide Destra 2</option>
                        <option value="right3" {{ old('homepage_position', $news->homepage_position ?? '') == 'right3' ? 'selected' : '' }}>Slide Destra 3</option>
                    </select>
                </div>
            </div>
            <div class="col-md-8">
                <div class="form-group">
                    <label>News attualmente in primo piano:</label><br>
                    <ul>
                        {!! @$first !!}
                    </ul>
                </div>
            </div>
        </div>

        {{-- Sections Row --}}
        <div class="row">
            <div class="col-md-4">
                <div class="form-group">
                    <label for="section_id">Sezione:</label>
                    <select name="section_id" id="section_id" class="form-control section_id_change">
                        <option value=""></option>
                        @foreach($sections as $key => $value)
                            <option value="{{ $key }}" {{ old('section_id', $news->section_id ?? '') == $key ? 'selected' : '' }}>{{ $value }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="col-md-4">
                <div class="form-group">
                    <label for="region_1_id">Regione 1:</label>
                    <select name="region_1_id" id="region_1_id" class="form-control region_1_id_change">
                        <option value=""></option>
                        @foreach($regions as $key => $value)
                            <option value="{{ $key }}" {{ old('region_1_id', $news->region_1_id ?? '') == $key ? 'selected' : '' }}>{{ $value }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="col-md-4">
                <div class="form-group">
                    <label for="region_2_id">Regione 2:</label>
                    <select name="region_2_id" id="region_2_id" class="form-control region_2_id_change">
                        <option value=""></option>
                        @foreach($regions as $key => $value)
                            <option value="{{ $key }}" {{ old('region_2_id', $news->region_2_id ?? '') == $key ? 'selected' : '' }}>{{ $value }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>

        {{-- Layout Sections Row --}}
        <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>

        {{-- Event and Page Row --}}
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="event_id">Evento:</label>
                    <select name="event_id" id="event_id" class="form-control">
                        <option value=""></option>
                        @foreach($events as $key => $value)
                            <option value="{{ $key }}" {{ old('event_id', $news->event_id ?? '') == $key ? 'selected' : '' }}>{{ $value }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label for="page_id">Pagina WEB:</label>
                    <select name="page_id" id="page_id" class="form-control">
                        <option value=""></option>
                        @foreach($pages as $key => $value)
                            <option value="{{ $key }}" {{ old('page_id', $news->page_id ?? '') == $key ? 'selected' : '' }}>{{ $value }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>

        {{-- Short Text and Date Row --}}
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="text_short">Testo breve:</label>
                    <input type="text" name="text_short" id="text_short" class="form-control" maxlength="100"
                           value="{{ old('text_short', $news->text_short ?? '') }}">
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label for="date">Data:</label>
                    <input type="text" name="date" id="date" class="form-control"
                           value="{{ old('date', isset($news) ? $news->date : date('d/m/Y H:i')) }}">
                </div>
            </div>
        </div>

        {{-- Main Text Row --}}
        <div class="row">
            <div class="col-md-12">
                <div class="form-group">
                    <label for="text">Testo:</label>
                    <textarea name="text" id="text" rows="30" cols="100" class="form-control js-editor">{{ old('text', $news->text ?? '') }}</textarea>
                </div>
            </div>
        </div>

        {{-- Images Section --}}
        @if(isset($news))
            <div class="row">
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="image">Immagine principale:</label><br>
                        <button type="submit" class="btn btn-success" name="crop" value="1">Sostituisci immagine</button>
                        @if (isset($news) && $news->image != '')
                            <br><img src="/files/news/{{ $news->image }}" style="max-width:250px" />
                        @endif
                        @if (request()->has('filename'))
                            <br><img src="/files/news/{{ request()->get('filename') }}" style="max-width:250px" />
                            <div class="alert alert-success mt-2">
                                <small>Nuova immagine caricata. Salva per confermare.</small>
                            </div>
                        @endif
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="image1">Immagine 1:</label><br>
                        <div class="custom-file-upload">
                            <input type="file" name="image1" id="image1" class="form-control" accept="image/*">
                        </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">
                        <label for="image2">Immagine 2:</label><br>
                        <div class="custom-file-upload">
                            <input type="file" name="image2" id="image2" class="form-control" accept="image/*">
                        </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">
                        <label for="image3">Immagine 3:</label><br>
                        <div class="custom-file-upload">
                            <input type="file" name="image3" id="image3" class="form-control" accept="image/*">
                        </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">
                        <label for="image4">Immagine 4:</label><br>
                        <div class="custom-file-upload">
                            <input type="file" name="image4" id="image4" class="form-control" accept="image/*">
                        </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">
                        <label for="image5">Immagine 5:</label><br>
                        <div class="custom-file-upload">
                            <input type="file" name="image5" id="image5" class="form-control" accept="image/*">
                        </div>
                        @if (isset($news) && $news->image5 != '')
                            <br><img src="/files/news/{{ $news->image5 }}" style="max-width:150px" />
                        @endif
                    </div>
                </div>
            </div>

            {{-- Video and PDF Row --}}
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="video">Video:</label>
                        <textarea name="video" id="video" rows="5" cols="50" class="form-control">{{ old('video', $news->video ?? '') }}</textarea>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="pdf">PDF:</label>
                        <div class="custom-file-upload">
                            <input type="file" name="pdf" id="pdf" class="form-control" accept=".pdf">
                        </div>
                        @if (isset($news) && $news->pdf != '')
                            <br><a href="/files/news/{{ $news->pdf }}" target="_blank">Visualizza</a>
                            &nbsp;<input type="checkbox" name="remove_pdf" value="1">&nbsp;Rimuovi
                        @endif
                    </div>
                </div>
            </div>

            {{-- SEO Meta Fields --}}
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="meta_title">Meta - Titolo:</label>
                        <input type="text" name="meta_title" id="meta_title" class="form-control"
                               value="{{ old('meta_title', $news->meta_title ?? '') }}">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="meta_keywords">Meta - Parole chiave:</label>
                        <input type="text" name="meta_keywords" id="meta_keywords" class="form-control"
                               value="{{ old('meta_keywords', $news->meta_keywords ?? '') }}">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="meta_description">Meta - Descrizione:</label>
                        <textarea name="meta_description" id="meta_description" rows="5" cols="50" class="form-control">{{ old('meta_description', $news->meta_description ?? '') }}</textarea>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="slug">Slug:</label>
                        <input type="text" name="slug" id="slug" class="form-control slug"
                               value="{{ old('slug', $news->slug ?? '') }}">
                        <small class="form-text text-muted">URL amichevole per SEO</small>
                    </div>
                </div>
            </div>

            {{-- Options --}}
            <div class="row">
                <div class="col-md-12">
                    <div class="form-group">
                        <label>Selezionando questo flag la news NON viene pubblicata su Facebook/Twitter ma solamente sul sito:</label><br>
                        <input type="checkbox" name="no_social" value="on" {{ old('no_social', $news->no_social ?? '') == 'on' ? 'checked' : '' }}>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="live">Live:</label><br>
                        <input type="checkbox" name="live" value="on" {{ old('live', $news->live ?? '') == 'on' ? 'checked' : '' }}>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="breaking_news">Breaking news:</label><br>
                        <input type="checkbox" name="breaking_news" value="on" {{ old('breaking_news', $news->breaking_news ?? '') == 'on' ? 'checked' : '' }}>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="homepage">Homepage:</label><br>
                        <input type="checkbox" name="homepage" value="on" {{ old('homepage', $news->homepage ?? '') == 'on' ? 'checked' : '' }}>
                    </div>
                </div>
            </div>
        @else
            {{-- Create Form Images --}}
            <input type="hidden" name="slug" class="slug">

            <div class="row">
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="image">Immagine principale:</label><br>
                        <div class="custom-file-upload">
                            <input type="file" name="image" id="image" class="form-control" accept="image/*">
                        </div>
                        @if (request()->has('filename'))
                            <br><img src="/files/news/{{ request()->get('filename') }}" style="max-width:250px" />
                            <div class="alert alert-success mt-2">
                                <small>Immagine caricata. Salva per confermare.</small>
                            </div>
                        @endif
                    </div>
                </div>
                @if (!request()->has('filename'))
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="breaking_news">Breaking news:</label><br>
                            <input type="checkbox" name="breaking_news" value="on" {{ !request()->has('filename') ? 'checked' : '' }}>
                        </div>
                    </div>
                @endif
            </div>
        @endif
    </div>

    {{-- Form Footer --}}
    <div class="box-footer">
        @if(isset($news) && $news->user_id > 0 && $news->user_id != Auth::user()->id)
            <div class="alert alert-warning">
                <span style="color:red; font-weight:bold">ATTENZIONE: l'utente {{ $news->user->name }} sta modificando questa news</span>
            </div>
        @endif

        <button type="submit" class="btn btn-success saved" name="save" value="1">{{ $submit_text ?? 'Salva' }}</button>
        <button type="submit" class="btn btn-success saved" name="save_exit" value="1">Salva ed esci</button>

        @if(isset($news))
            @if(!$news->online)
                <button type="submit" class="btn btn-primary saved" name="publish" value="1">Pubblica</button>
            @else
                <button type="submit" class="btn btn-warning saved" name="unpublish" value="1">Torna bozza</button>
            @endif
        @else
            <button type="submit" class="btn btn-primary saved" name="publish" value="1">Pubblica</button>
        @endif

        <a href="{{ route('news.index') }}" class="btn btn-default">Annulla</a>
    </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 submission validation
            $('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();
                        });
                    });
                }
            });

            // Layouts array from PHP
            var layouts = [];
            @foreach($layouts as $i => $l)
                layouts[{{ $i }}] = '{{ $l }}';
            @endforeach

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

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

            // Auto-generate slug for new news
            @if(!isset($news))
                $(".title").keyup(function(){
                    var Text = $(this).val();
                    Text = Text.toLowerCase();
                    Text = Text.replace(/[àáâãäå]/g, 'a')
                              .replace(/[èéêë]/g, 'e')
                              .replace(/[ìíîï]/g, 'i')
                              .replace(/[òóôõö]/g, 'o')
                              .replace(/[ùúûü]/g, 'u')
                              .replace(/[ç]/g, 'c')
                              .replace(/[ñ]/g, 'n')
                              .replace(/[^a-zA-Z0-9]+/g,'-')
                              .replace(/^-|-$/g, '');
                    $(".slug").val(Text);
                });
            @endif

            // Character counters
            function updateCharCounter(selector, countSelector, max = 100) {
                $(selector).on("keyup change", function () {
                    const len = $(this).val().length;
                    const char = len >= max ? 0 : max - len;
                    $(countSelector).text(char + ' caratteri rimanenti');
                });
            }

            updateCharCounter('.title', '#chars');
            updateCharCounter('.title_region_1', '#chars_region_1');
            updateCharCounter('.title_region_2', '#chars_region_2');

            // Section change handlers
            $(".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('');
                }
            });

            // Layout selection handler
            $(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'));
            });

            // Initialize layouts for existing news
            @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

            // Highlight selected positions
            @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
        });

        // Layout loading function
        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