@extends('layout.admin')

@section('title', 'Noticias')

<!-- ======================================================= -->

@section('content')

<!-- ======================================================= -->
<style media="screen">
    #objects .object, #objects_es .object, #objects_en .object {
        min-height: 75px;
        vertical-align: top;
    }
    #objects .object .title, #objects_es .object .title, #objects_en .object .title {
        width: 100%;
    }
</style>
<section id="admin-section" class="main-section admin-section">
    <div class="heading left-align">
        <h1>Noticias</h1>
        <h3>Gestión de noticias para FICG.</h3>
    </div>

    <div id="objects">
        @if(count($objects_es) < 1)
            <p>No hay objetos.</p>
        @endif
        @foreach ($objects_es as $object)
            <div class="object" mtrigger="modal-object-{{ $object->id }}">
                {{-- <div class="thumb" style="background-image: url('{{ asset($object->image ) }}')"></div> --}}
                <div class="title">{{ $object->name }}</div>
                <div class="badges">
					{{--<div class="badge">Cineteca</div>--}}
                </div>
            </div>
        @endforeach
        <div>
            {!! $objects_es->links() !!}
        </div>
        <div class="heading left-align">
            <h3>Gestión de noticias en inglés para FICG.</h3>
        </div>
        @if(count($objects_en) < 1)
            <p>No hay objetos.</p>
        @endif
        @foreach ($objects_en as $object)
            <div class="object" mtrigger="modal-object-{{ $object->id }}">
                {{-- <div class="thumb" style="background-image: url('{{ asset($object->image ) }}')"></div> --}}
                <div class="title">{{ $object->name }}</div>
                <div class="badges">
                    {{--<div class="badge">Cineteca</div>--}}
                </div>
            </div>
        @endforeach
    </div>

    <div id="new-modal-object" class="ui modal object">
        <div class="header">Agregar</div>
        <div class="scrolling content">
            <form class="row" action="{{ route('news.store') }}" method="post" enctype="multipart/form-data">
                @csrf
                <div class="block">

                    <div class="ui labeled input">
                        <div class="ui label">Nombre:</div>
                        <input name="name" type="text" placeholder="Nombre de la noticia" required>
                    </div>

                    <div class="ui labeled input">
                        <div class="ui label">Tagline:</div>
                        <input name="tagline" type="text" placeholder="Agrega un tagline o fecha" required>
                    </div>

                    <div class="ui labeled input">
                        <div class="ui label">Imagen (1920 x 640):</div>
                        <input name="image" type="file" placeholder="Portada" required>
                    </div>
                    <p style="color: #000; font-size: 12px;">Los tamaños son solo medidas recomendadas para una mejor visualización, no es obligatorio que la imagen subida sea del tamaño indicado.</p>

                    <div class="ui form">
                        <div class="field" style="margin-bottom: 10px;">
                            <label><b>Contenido de la noticia</b></label>
                            <textarea id="content" class="mceeditor" rows="2" spellcheck="false" name="content"></textarea>
                        </div>
                    </div>

                    <div class="lang-selection-container ui form">
                        <div class="field lang-dropdown">
                            <label>Idioma</label>
                            <div class="ui selection dropdown">
                                <input type="hidden" name="lang" value="es">
                                <i class="dropdown icon"></i>
                                <div class="default text">Español</div>
                                <div class="menu">
                                    <div class="item" data-value="es">Español</div>
                                    <div class="item" data-value="en">Inglés</div>
                                </div>
                            </div>
                        </div>

                        <div class="field lang-parent-id">
                            <label>Objeto original</label>
                            <div class="ui selection dropdown">
                                <input type="hidden" name="lang_parent_id">
                                <i class="dropdown icon"></i>
                                <div class="default text">Ninguno</div>
                                <div class="menu">
                                    @foreach ($objects_es as $object)
                                        <div class="item" data-value="{{ $object->id }}">{{ $object->name }}</div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="space-before center-align">
                        <button class="ui button primary" type="submit">Guardar</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    @php
        $parents = $objects_es;
    @endphp

    @foreach ($objects_es as $object)
	    <div id="modal-object-{{ $object->id }}" class="ui modal object">
	        <div class="header">Editar
            </div>
	        <div class="scrolling content">
	            <form class="row" action="{{ route('news.update') }}" method="post" enctype="multipart/form-data">
	                @csrf
	                <div class="block">
                        <input type="hidden" name="id" value="{{ $object->id }}">
                        <input type="hidden" name="_method" value="PUT">

                        <div class="ui labeled input">
                            <div class="ui label">Nombre:</div>
                            <input name="name" type="text" placeholder="Nombre de la noticia" value="{{ $object->name }}" required>
                        </div>

                        <div class="ui labeled input">
                            <div class="ui label">Tagline:</div>
                            <input name="tagline" type="text" placeholder="Agrega un tagline o fecha" value="{{ $object->tagline }}">
                        </div>

                        <div class="ui labeled input">
                            <div class="ui label">Imagen (1920 x 640):</div>
                            <input name="image" type="file" placeholder="Portada" style="background-image: url({{ asset($object->image) }}); background-size: auto 100%; background-position: 99% center; background-repeat: no-repeat;">
                        </div>
                        <p style="color: #000; font-size: 12px;">Los tamaños son solo medidas recomendadas para una mejor visualización, no es obligatorio que la imagen subida sea del tamaño indicado.</p>

                        <div class="ui form">
                            <div class="field" style="margin-bottom: 10px;">
                                <label><b>Contenido de la noticia</b></label>
                                <textarea class="mceeditor" rows="2" spellcheck="false" name="content">{{ $object->content }}</textarea>
                            </div>
                        </div>

                        <div class="lang-selection-container ui form">
                            <div class="field lang-dropdown">
                                <label>Idioma</label>
                                <div class="ui selection dropdown">
                                    <input type="hidden" name="lang" value="{{ $object->lang }}">
                                    <i class="dropdown icon"></i>
                                    <div class="default text">{{ $object->lang == 'es' ? 'Español' : 'Inglés' }}</div>
                                    <div class="menu">
                                        <div class="item" data-value="es">Español</div>
                                        <div class="item" data-value="en">Inglés</div>
                                    </div>
                                </div>
                            </div>

                            <div class="field lang-parent-id">
                                <label>Objeto original</label>
                                <div class="ui selection dropdown">
                                    <input type="hidden" name="lang_parent_id" value="{{ $object->lang_parent_id }}">
                                    <i class="dropdown icon"></i>
                                    <div class="default text">{{ $object->newsitem ? $object->newsitem->name : 'Ninguno' }}</div>
                                    <div class="menu">
                                        @foreach ($parents as $parent)
                                            @if($parent->id != $object->id)
                                                <div class="item" data-value="{{ $parent->id }}">{{ $parent->name }}</div>
                                            @endif
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                            <div>
                                <b>Número de la noticia:</b> <a href= "https://www.ficg.mx/es/noticia/{{ $object->id}}" target="_blank" rel="noopener noreferrer">  {{ $object->id}}</a>
                            </div>
                        </div>

	                    <div class="space-before center-align">
	                        <button class="ui button primary" type="submit">Actualizar</button>
	                        <button class="ui button red erase" objectid="{{ $object->id }}">Borrar</button>
	                    </div>
	                </div>
	            </form>
	        </div>
	    </div>
    @endforeach

    @php
        $parents = $objects_es;
    @endphp

    @foreach ($objects_en as $object)
        <div id="modal-object-{{ $object->id }}" class="ui modal object">
            <div class="header">Editar</div>
            <div class="scrolling content">
                <form class="row" action="{{ route('news.update') }}" method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="block">
                        <input type="hidden" name="id" value="{{ $object->id }}">
                        <input type="hidden" name="_method" value="PUT">

                        <div class="ui labeled input">
                            <div class="ui label">Nombre:</div>
                            <input name="name" type="text" placeholder="Nombre de la noticia" value="{{ $object->name }}" required>
                        </div>

                        <div class="ui labeled input">
                            <div class="ui label">Tagline:</div>
                            <input name="tagline" type="text" placeholder="Agrega un tagline o fecha" value="{{ $object->tagline }}">
                        </div>

                        <div class="ui labeled input">
                            <div class="ui label">Imagen (1920 x 640):</div>
                            <input name="image" type="file" placeholder="Portada" style="background-image: url({{ asset($object->image) }}); background-size: auto 100%; background-position: 99% center; background-repeat: no-repeat;">
                        </div>
                        <p style="color: #000; font-size: 12px;">Los tamaños son solo medidas recomendadas para una mejor visualización, no es obligatorio que la imagen subida sea del tamaño indicado.</p>

                        <div class="ui form">
                            <div class="field" style="margin-bottom: 10px;">
                                <label><b>Contenido de la noticia</b></label>
                                <textarea class="mceeditor" rows="2" spellcheck="false" name="content">{{ $object->content }}</textarea>
                            </div>
                        </div>

                        <div class="lang-selection-container ui form">
                            <div class="field lang-dropdown">
                                <label>Idioma</label>
                                <div class="ui selection dropdown">
                                    <input type="hidden" name="lang" value="{{ $object->lang }}">
                                    <i class="dropdown icon"></i>
                                    <div class="default text">{{ $object->lang == 'es' ? 'Español' : 'Inglés' }}</div>
                                    <div class="menu">
                                        <div class="item" data-value="es">Español</div>
                                        <div class="item" data-value="en">Inglés</div>
                                    </div>
                                </div>
                            </div>

                            <div class="field lang-parent-id">
                                <label>Objeto original</label>
                                <div class="ui selection dropdown">
                                    <input type="hidden" name="lang_parent_id" value="{{ $object->lang_parent_id }}">
                                    <i class="dropdown icon"></i>
                                    <div class="default text">{{ $object->bulletin ? $object->bulletin->name : 'Ninguno' }}</div>
                                    <div class="menu">
                                        @foreach ($parents as $parent)
                                            @if($parent->id != $object->id)
                                                <div class="item" data-value="{{ $parent->id }}">{{ $parent->name }}</div>
                                            @endif
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                            <div>
                                <b>Número de la noticia:</b> <a href= "https://www.ficg.mx/es/noticia/{{ $object->id}}" target="_blank" rel="noopener noreferrer">  {{ $object->id}}</a>
                            </div>
                        </div>

                        <div class="space-before center-align">
                            <button class="ui button primary" type="submit">Actualizar</button>
                            <button class="ui button red erase" objectid="{{ $object->id }}">Borrar</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    @endforeach

    <div id="erase-modal" class="ui mini modal">
        <div class="header">¿Borrar?</div>
        <div class="content">
            <p style="color: #000;">¿Confirmas el borrado permanente de este objeto?</p>
        </div>
        <div class="actions">
            <div class="ui negative button primary">
                No
            </div>
            <div class="ui positive button red">
                Yes
            </div>
        </div>
    </div>

    <form id="erase-form" method="post" action="{{ route('news.destroy') }}">
        @csrf
        <input type="hidden" name="_method" value="DELETE">
        <input class="erase-field" type="hidden" name="id" value="">
    </form>
</section>

<a class="addobject floating-circle right bottom"><i class="fas fa-plus" style="top: 1px;"></i></a>

@endsection

<!-- ======================================================* -->

@push('scripts')
    <!--<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>-->
    <script src="{{ asset('lib/tinymce/tinymce.min.js') }}"></script>
    <script>
        jQuery(function( $ ) {
            /// Init modals
            $('.ui.modal').modal();

            /// Init dropdowns
            $('.ui.dropdown').dropdown();

            /// Init checkbox
            $('.ui.checkbox').checkbox();

            /// Init TinyMCE
            tinymce.init({selector:'.mceeditor', plugins: 'code'});

            /// Add new
            $('.addobject').on('click', function() {
                $('#new-modal-object').modal('show');
            });

            /// Manage click on objects
            $('#objects .object').on('click', function(){
                var modal = '#' + $(this).attr('mtrigger');
                $(modal).modal('show');
            });

            /// Showing loading indicator
            $('form').on('submit', function(){
                $(".loader").css("display", "flex").hide().fadeIn();
                return true;
            });

            /// Erase object
            $('.erase').on('click', function(e) {
                e.preventDefault();
                var id = $(this).attr('objectid');

                $('#erase-form .erase-field').val(id);

                $('#erase-modal').modal({
                    onApprove: function() {
                        $('#erase-form').submit();
                    }
                }).modal('show');
                return false;
            });
        });
    </script>
@endpush

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/home.min.css') }}">
@endpush