fix form

resources/views/news/_form.blade.php

@@ -1,41 +1,54 @@
+{{ 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">
+@endif
+
+<div class="box box-primary">
     <div class="box-header with-border">
-        <h3 class="box-title"></h3>
+        <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>
+                    <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 ?? '') }}">
+                           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 ?? '') }}">
+                    <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 ?? '') }}">
+                    <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">
@@ -54,13 +67,15 @@
             </div>
             <div class="col-md-8">
                 <div class="form-group">
-                    <label for="aaa">News attualmente in primo piano:</label><br>
+                    <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">
@@ -73,6 +88,7 @@
                     </select>
                 </div>
             </div>
+
             <div class="col-md-4">
                 <div class="form-group">
                     <label for="region_1_id">Regione 1:</label>
@@ -84,6 +100,7 @@
                     </select>
                 </div>
             </div>
+
             <div class="col-md-4">
                 <div class="form-group">
                     <label for="region_2_id">Regione 2:</label>
@@ -96,11 +113,12 @@
                 </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 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">
@@ -108,14 +126,13 @@
                     </div>
                 @endif
             @else
-                <div class="col-md-4" id="layout_section"
-                    style="display:{{ (isset($news) && $news->section_position != '') || !isset($news) ? 'block' : 'none' }}">
+                <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 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">
@@ -123,14 +140,13 @@
                     </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 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 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">
@@ -138,11 +154,12 @@
                     </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 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">
@@ -150,8 +167,7 @@
                     <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>
+                            <option value="{{ $key }}" {{ old('event_id', $news->event_id ?? '') == $key ? 'selected' : '' }}>{{ $value }}</option>
                         @endforeach
                     </select>
                 </div>
@@ -162,55 +178,56 @@
                     <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>
+                            <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 ?? '') }}">
+                           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')) }}">
+                           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>
+                    <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(false)
-                            <div class="custom-file-upload">
-                                <input type="file" name="image" id="image" 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"] }}">
+                        @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>
@@ -218,7 +235,7 @@
                     <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">
+                            <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" />
@@ -229,7 +246,7 @@
                     <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">
+                            <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" />
@@ -242,7 +259,7 @@
                     <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">
+                            <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" />
@@ -253,7 +270,7 @@
                     <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">
+                            <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" />
@@ -264,7 +281,7 @@
                     <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">
+                            <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" />
@@ -272,90 +289,373 @@
                     </div>
                 </div>
             </div>
+
+            {{-- Video and PDF Row --}}
             <div class="row">
                 <div class="col-md-6">
                     <div class="form-group">
-                        <label for="pdf">PDF:</label><br>
+                        <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">
+                            <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">{{ $news->pdf }}</a>
-                            <br><input type="checkbox" name="remove_pdf" value="1"> Rimuovi 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>
-        @endif
-        <div class="row">
-            <div class="col-md-12">
-                <div class="form-group">
-                    <label for="no_social">Selezionando questo flag la news NON viene pubblicata su Facebook/Twitter ma
-                        solamente sul sito:</label><br>
-                    <input type="checkbox" name="no_social" id="no_social" value="on" {{ old('no_social', $news->no_social ?? '') == 'on' ? 'checked' : '' }}>
+
+            {{-- 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>
+            <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)
-            <span style="color:red; font-weight:bold">ATTENZIONE : l'utente {{ $news->user->name }} sta modificando questa
-                news</span><br><br>
+            <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 }}</button>
+
+        <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-success saved" name="publish" value="1">Pubblica</button>
+                <button type="submit" class="btn btn-primary saved" name="publish" value="1">Pubblica</button>
             @else
-                <button type="submit" class="btn btn-success saved" name="unpublish" value="1">Torna bozza</button>
+                <button type="submit" class="btn btn-warning saved" name="unpublish" value="1">Torna bozza</button>
             @endif
         @else
-            <button type="submit" class="btn btn-success saved" name="publish" value="1">Pubblica</button>
+            <button type="submit" class="btn btn-primary saved" name="publish" value="1">Pubblica</button>
         @endif
-        <a href="{{ route('news.index') }}" class="btn btn-info">Annulla</a>
+
+        <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>
-        $(document).ready(function () {
-            $('.js-editor').summernote({
-                height: 400,
-                lang: 'it-IT',
-                toolbar: [
-                    ['style', ['style']],
-                    ['font', ['bold', 'italic', 'underline', 'clear']],
-                    ['fontname', ['fontname']],
-                    ['fontsize', ['fontsize']],
-                    ['color', ['color']],
-                    ['para', ['ul', 'ol', 'paragraph']],
-                    ['height', ['height']],
-                    ['table', ['table']],
-                    ['insert', ['link', 'picture', 'video']],
-                    ['view', ['fullscreen', 'codeview', 'help']]
-                ],
-                callbacks: {
-                    onImageUpload: function (files) {
-                        console.log('Image upload:', files);
+        $(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();
+                        });
+                    });
                 }
             });
 
-            $('#title').on('input', function () {
-                var remaining = 100 - $(this).val().length;
-                $('#chars').text(remaining + ' caratteri rimanenti');
+            // 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' }
             });
 
-            $('#title_region_1').on('input', function () {
-                var remaining = 100 - $(this).val().length;
-                $('#chars_region_1').text(remaining + ' caratteri rimanenti');
+            // 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('');
             });
 
-            $('#title_region_2').on('input', function () {
-                var remaining = 100 - $(this).val().length;
-                $('#chars_region_2').text(remaining + ' caratteri rimanenti');
+            $(".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>
-@endsection
+@stop