@extends('layout.admin')

@section('title', 'Mayahuels')

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

@section('content')

<!-- ======================================================= -->
<section id="admin-section" class="main-section admin-section">
    <div class="heading left-align">
        <h1>Mayahuel</h1>
        <h3>Gestión de Mayahuels para FICG.</h3>
    </div>

    <div id="objects">
        @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->image ) }}')"></div>
                <div class="title">{{ $object->name }}</div>
                <div class="badges">
					<div class="badge lang-badge">{{ $object->lang }}</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('mayahuels.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="image" type="file" placeholder="Portada" required>
                    </div>
                    <div class="ui labeled input">
                        <div class="ui label">*PDF:</div>
                        <input name="pdf" type="file" placeholder="PDF" required>
                    </div>
                    <div class="ui labeled input">
                        <div class="ui label">Nombre:</div>
                        <input name="name" type="text" placeholder="Nombre del boletín" 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">
                                <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>

    @php
        $parents = $objects;
    @endphp

    @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('mayahuels.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="image" type="file" placeholder="Portada">
	                    </div>
	                    <div class="ui labeled input">
	                        <div class="ui label">PDF:</div>
	                        <input name="pdf" type="file" placeholder="PDF">
	                    </div>
	                    <div class="ui labeled input">
	                        <div class="ui label">Nombre:</div>
	                        <input name="name" type="text" value="{{ $object->name }}" placeholder="Nombre del boletín" 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->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>

	                    <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">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('mayahuels.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>
        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 .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

@push('scripts')
    <script>
        jQuery(function($) {
            $('select.dropdown').dropdown();
        });
    </script>
@endpush