@extends('layout.admin')

@section('title', 'Cubos')

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

@section('content')

<!-- ======================================================= -->
<section id="admin-section" class="main-section admin-section">
    <div class="heading left-align">
        <h1>Slider Principal "Cubos"</h1>
        <h3>Gestión de slider principal "cubos" en español para FICG.</h3>
    </div>

    <div id="objects_es" class="cubes-grid">
        @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->title }}</div>
                <div class="badges">
					{{--<div class="badge">Cineteca</div>--}}
                </div>
            </div>
        @endforeach
    </div>

    <h3>Gestión de slider principal "cubos" en inglés para FICG.</h3>

    <div id="objects_en" class="cubes-grid">
        @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->title }}</div>
                <div class="badges">
                    {{--<div class="badge">Cineteca</div>--}}
                </div>
            </div>
        @endforeach
    </div>

    @php
        $is_the_first_one = true;
    @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('cube.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">{{ $is_the_first_one ? "Imagen (800 x 1024):" : "Imagen (1024 x 800):" }}</div>
	                        <input name="image" type="file" placeholder="Portada">
	                    </div>
	                    <div class="ui labeled input">
	                        <div class="ui label">URL:</div>
	                        <input name="url" type="text" value="{{ $object->url }}" placeholder="URL">
	                    </div>
	                    <div class="ui labeled input">
	                        <div class="ui label">Título:</div>
	                        <input name="title" type="text" value="{{ $object->title }}" placeholder="Título" required>
                        </div>
                        <div class="ui labeled input">
	                        <div class="ui label">Orden:</div>
	                        <input name="order" type="number" value="{{ $object->order }}" placeholder="Orden" 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. 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>
	                    </div>
	                </div>
	            </form>
	        </div>
        </div>
        @php
            $is_the_first_one = false;
        @endphp
    @endforeach

    @php
        $is_the_first_one_es = true;
    @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('cube.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">{{ $is_the_first_one_es ? "Imagen (800 x 1024):" : "Imagen (1024 x 800):" }}</div>
                            <input name="image" type="file" placeholder="Portada">
                        </div>
                        <div class="ui labeled input">
                            <div class="ui label">URL:</div>
                            <input name="url" type="text" value="{{ $object->url }}" placeholder="URL">
                        </div>
                        <div class="ui labeled input">
                            <div class="ui label">Título:</div>
                            <input name="title" type="text" value="{{ $object->title }}" placeholder="Título" required>
                        </div>
                        <div class="ui labeled input">
                            <div class="ui label">Orden:</div>
                            <input name="order" type="number" value="{{ $object->order }}" placeholder="Orden" 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. 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>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        @php
            $is_the_first_one_es = false;
        @endphp
    @endforeach
</section>

@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