@extends('layout.admin')

@section('title', 'Sedes')

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

@section('content')

<!-- ======================================================= -->
<section id="admin-section" class="main-section admin-section">
    <div class="heading left-align">
        <h1>Sedes</h1>
        <h3>{{ $title }}</h3>
    </div>

    <div id="objects_es">
        @if(count($objects) < 1)
            <p>No hay objetos.</p>
        @endif
        @foreach ($objects as $object)
            <div class="object" mtrigger="modal-object-{{ $object->id }}">
                <div class="thumb" style="background-image: url('{{ asset($object->portrait ) }}')"></div>
                <div class="title">{{ $object->name }}</div>
            </div>
        @endforeach
        {{ $objects->links() }}

    </div>

    {{-- <div class="heading left-align">
        <h3>Gestión de sedes en inglés para FICG.</h3>
    </div>

    <div id="objects_en">
        @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->portrait ) }}')"></div>
                <div class="title">{{ $object->name }}</div>
                <div class="badges">
                    {{--<div class="badge">Cineteca</div>--}
                </div>
            </div>
        @endforeach
        {{ $objects_en->links() }}

    </div> --}}

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

                    <div class="ui labeled input">
                        <div class="ui label">*Imagen (1024 x 1024):</div>
                        <input name="portrait" type="file" placeholder="Portada" required>
                    </div>

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

                    <div class="ui labeled input">
                        <div class="ui label">Dirección:</div>
                        <input name="address" type="text" placeholder="Dirección de la sede" required>
                    </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 as $object)
                                        <div class="item" data-value="{{ $object->id }}">{{ $object->name }}</div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </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="space-before center-align">
                        <button class="ui button primary" type="submit">Guardar</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    {{-- @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('venue.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">
                        <input type="hidden" name="page" value="{{ request()->page }}">

	                    <div class="ui labeled input">
                            <div class="ui label">*Imagen (1024 x 1024):</div>
                            <input name="portrait" type="file" placeholder="Portada">
                        </div>

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

                        <div class="ui labeled input">
                            <div class="ui label">Dirección:</div>
                            <input name="address" type="text" placeholder="Dirección de la sede" value="{{ $object->address }}" required>
                        </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>

	                    <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. De igual manera se recomienda que las imágenes no excedan los 600KB de peso. Esto lo puedes lograr usando un formato de imagen ligero como JPG, optimizando el archivo y reduciendo los ppp.</p>

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

    @foreach ($objects 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('venue.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">*Imagen (1024 x 1024):</div>
                            <input name="portrait" type="file" placeholder="Portada">
                        </div>

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

                        <div class="ui labeled input">
                            <div class="ui label">Dirección:</div>
                            <input name="address" type="text" placeholder="Dirección de la sede" value="{{ $object->address }}" required>
                        </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>

                        <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. De igual manera se recomienda que las imágenes no excedan los 600KB de peso. Esto lo puedes lograr usando un formato de imagen ligero como JPG, optimizando el archivo y reduciendo los ppp.</p>

                        <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('venue.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>
<style>
ul.pagination {
        list-style: none;
        padding: 0;
        margin: 20px 0;
    }

    ul.pagination li {
        display: inline-block;
        padding: 5px;
        margin: 2px;
    }
</style>
@endsection

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

@push('scripts')
    <script>
        jQuery(function( $ ) {
            /// Init modals
            $('.ui.modal').modal();

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

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

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

            /// Manage click on objects
            $('#objects_es .object, #objects_en .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