@extends('layout.admin')

@section('title', 'Eventos')

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

@section('content')

@php
	setlocale(LC_ALL,"es_ES.UTF-8");
	date_default_timezone_set('Europe/Amsterdam');
	$today = date('Y-m-d');
@endphp

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

    <div id="objects">
        <div class="heading left-align">
            <h2>{{ $category->name }}</h2>
        </div>

        @if( $objects->count() < 1 )
            <p class="empty">No hay objetos.</p>
        @else
            @foreach ($objects as $event)
                <div class="object event {{ $event->is_published ? 'published' : 'unpublished' }}" mtrigger="modal-object-{{ $event->id }}">
                    <div class="thumb" style="background-image: url('{{ asset($event->portrait ) }}')"></div>
                    <div class="title">{{ $event->name }}</div>
                    <div class="badges">
                    	@foreach ($event->categories as $subcategory)
                        	<div class="badge">{{ $subcategory->name }}</div>
                        @endforeach
                    </div>
                    <div class="date">{{ (strftime("%A %e de %B %Y", (new DateTime($event->date))->getTimestamp())) }}</div>
                </div>
            @endforeach
        @endif
    </div>

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

                    <div class="ui grid">
                        <div class="eight wide column">
                            <div class="ui labeled input">
                                <div class="ui label">*Nombre:</div>
                                <input name="name" type="text" placeholder="Nombre" required>
                            </div>
                        </div>
                        
                        <div class="eight wide column">
                            <div class="ui labeled input">
                                <div class="ui label">Tagline:</div>
                                <input name="tagline" type="text" placeholder="Tagline">
                            </div>
                        </div>
                        
                        <div class="sixteen wide column">
                            <div class="ui labeled input">
                                <div class="ui label">*Portada (1920 x 600):</div>
                                <input name="portrait" type="file" placeholder="Portada" required>
                            </div>
                        </div>

                        <div class="sixteen wide column hidden">
                            <div class="ui labeled input">
                                <div class="ui label">Imagen en contenido:</div>
                                <input name="image" type="file" placeholder="Imagen">
                            </div>
                        </div>
                        
                        <div class="eight wide column">
                            <div class="field">
                                <label>Layout</label>
                                <select name="type" class="ui fluid dropdown">
                                    <option value="1">Película</option>
                                    <option value="2">Alternativo</option>
                                </select>
                            </div>
                        </div>

                        <div class="eight wide column">
                            <div class="field">
                                <label>Categorías:</label>
                                <div class="ui fluid multiple search selection dropdown">
                                    <input type="hidden" name="categories">
                                    <i class="dropdown icon"></i>
                                    <div class="default text">Ninguna</div>
                                    <div class="menu">
                                        @foreach ($subcategories as $subcategory)
                                            <div class="item" data-value="{{ $subcategory->id }}" data-text="{{ $subcategory->name }}">
                                                {{ $subcategory->name }}
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="edit-desc-grid is-a-movie">
                        <div class="description main-paragraph">
                            <div class="ui input">
                                <input name="title1" type="text" placeholder="Título">
                            </div>
                            <div class="field">
                                <textarea name="description1" rows="4" placeholder="Agrega algo de texto aquí..."></textarea>
                            </div>
                        </div>
                        <div class="description image">
                            <div class="inner always-visible">
                                <i class="fas fa-image"></i><br>1280 x 600<br>
                                <div class="note">Los cambios se verán reflejados al<br>dar clic en guardar/actualizar.</div>
                            </div>
                        </div>
                        <div class="description middle-paragraph">
                            <div class="ui input">
                                <input name="title2" type="text" placeholder="Título">
                            </div>
                            <div class="field">
                                <textarea name="description2" rows="7" placeholder="Agrega algo de texto aquí..."></textarea>
                            </div>
                        </div>
                        <div class="description with-inner">
                            <div class="field">
                                <textarea name="description3" rows="9" placeholder="Agrega algo de texto aquí..."></textarea>
                            </div>
                        </div>
                    </div>

                    <div class="ui grid">
                        <div class="eight wide column">
                            <div class="ui labeled input">
                                <div class="ui label">*Prioridad:</div>
                                <input name="priority" type="number" value="1000" required>
                            </div>
                        </div>

                        <div class="eight wide column">
                            <div class="ui labeled input">
                                <div class="ui label">Fecha:</div>
                                <input class="datetimepicker" name="date" type="text" placeholder="aaaa-mm-dd hh:mm:ss" value="" required>
                            </div>
                        </div>
                    </div>

                    <div class="inline field">
                        <div class="ui toggle checkbox field-block" style="margin: 25px 0px 15px;box-shadow: none;">
                            <input name="is_published" type="checkbox" tabindex="0" class="hidden">
                            <label>Publicar inmediatamente.</label>
                        </div>
                    </div>

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

    @foreach ($objects as $object)
	    <div id="modal-object-{{ $object->id }}" class="ui modal object update-modal">
	        <div class="header">Editar</div>
	        <div class="scrolling content">
	            <form class="row" action="{{ route('event.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 grid">
                            <div class="eight wide column">
                                <div class="ui labeled input">
                                    <div class="ui label">*Nombre:</div>
                                    <input name="name" type="text" value="{{ $object->name }}" placeholder="Nombre" required>
                                </div>
                            </div>
                            
                            <div class="eight wide column">
                                <div class="ui labeled input">
                                    <div class="ui label">Tagline:</div>
                                    <input name="tagline" type="text" value="{{ $object->tagline }}" placeholder="Tagline">
                                </div>
                            </div>
                            
                            <div class="sixteen wide column">
                                <div class="ui labeled input">
                                    <div class="ui label">Portada (1920 x 600):</div>
                                    <input name="portrait" type="file" placeholder="Portada">
                                </div>
                            </div>
    
                            <div class="sixteen wide column hidden">
                                <div class="ui labeled input">
                                    <div class="ui label">Imagen en contenido (1280 x 600):</div>
                                    <input name="image" type="file" placeholder="Imagen">
                                </div>
                            </div>
                            
                            <div class="eight wide column">
                                <div class="field">
                                    <label>Layout</label>
                                    <select name="type" class="ui fluid dropdown" objectid="{{ $object->id }}">
                                        <option value="1" {{ 1 == $object->type ? 'selected' : '' }}>Película</option>
                                        <option value="2" {{ 2 == $object->type ? 'selected' : '' }}>Alternativo</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="edit-desc-grid is-a-movie">
                            <div class="description main-paragraph">
                                <div class="ui input">
                                    <input name="title1" type="text" value="{{ $object->title1 }}" placeholder="Título">
                                </div>
                                <div class="field">
                                    <textarea name="description1" rows="4" placeholder="Agrega algo de texto aquí...">{{ $object->description1 }}</textarea>
                                </div>
                            </div>
                            <div class="description image" objectid="{{ $object->id }}" style="background-image: url({{ asset($object->image) }})">
                                @if( $object->image )
                                    <div class="overlay"></div>
                                @endif
                                <div class="inner">
                                    <i class="fas fa-image"></i><br>1280 x 600<br>
                                    <div class="note">Los cambios se verán reflejados al<br>dar clic en guardar/actualizar.</div>
                                </div>
                            </div>
                            <div class="description middle-paragraph">
                                <div class="ui input">
                                    <input name="title2" type="text" value="{{ $object->title2 }}" placeholder="Título">
                                </div>
                                <div class="field">
                                    <textarea name="description2" rows="7" placeholder="Agrega algo de texto aquí...">{{ $object->description2 }}</textarea>
                                </div>
                            </div>
                            <div class="description with-inner">
                                <div class="field">
                                    <textarea name="description3" rows="9" placeholder="Agrega algo de texto aquí...">{{ $object->description3 }}</textarea>
                                </div>
                            </div>
                        </div>

                        <div class="ui grid">
                            <div class="eight wide column">
                                <div class="ui labeled input">
                                    <div class="ui label">*Prioridad:</div>
                                    <input name="priority" type="number" value="{{ $object->priority }}" required>
                                </div>
                            </div>

                            <div class="eight wide column">
                                <div class="ui labeled input">
                                    <div class="ui label">Fecha:</div>
                                    <input class="datetimepicker" name="date" type="text" placeholder="aaaa-mm-dd hh:mm:ss" value="{{ $object->date }}" required>
                                </div>
                            </div>
                        </div>

                        <div class="inline field">
                            <div class="ui toggle checkbox field-block" style="margin: 25px 0px 15px;box-shadow: none;">
                                <input name="is_published" type="checkbox" tabindex="0" class="hidden" {{ $object->is_published ? 'checked' : '' }}>
                                <label>Publicar inmediatamente.</label>
                            </div>
                        </div>

	                    <div class="space-before center-align">
                            <button class="ui button primary" type="submit">Actualizar</button>
                            <a class="ui button info" target="_blank" href="{{ route('event', [ 'id' => $object->id ]) }}">Ver</a>
	                        <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('event.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.jsdelivr.net/npm/flatpickr"></script>
    <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');
            });

            /// ======================================================

            /// Modify inline image (updating object)
            $(".update-modal .description.image").on("click", function() {
                var objectid = $(this).attr('objectid');
                $("#modal-object-" + objectid + " input[name='image']").click();
            });

            /// Modify layout (updating object)
            $(".update-modal select[name='type']").on('change', function() {
                var objectid = $(this).attr('objectid');

                if( $(this).val() == 1 ) $("#modal-object-" + objectid + " .edit-desc-grid").addClass('is-a-movie');
                else $("#modal-object-" + objectid + " .edit-desc-grid").removeClass('is-a-movie');
            });

            /// ======================================================

            /// Modify inline image (creating new object)
            $("#new-modal-object .description.image").on("click", function() {
                $("#new-modal-object input[name='image']").click();
            });

            /// Modify layout (creating new object)
            $("#new-modal-object select[name='type']").on('change', function() {
                if( $(this).val() == 1 ) $("#new-modal-object .edit-desc-grid").addClass('is-a-movie');
                else $("#new-modal-object .edit-desc-grid").removeClass('is-a-movie');
            });

            /// ======================================================

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

            /// 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;
            });

            /// Datetime picker plugin <<===============
            $(".datetimepicker").flatpickr({
                enableTime: true,
                time_24hr: true
            });
        });
    </script>
@endpush

@push('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <link rel="stylesheet" href="{{ asset('css/home.min.css') }}">
    <style>
        #objects .object {
            width: 150px;
            margin: 2px 5px;
            height: 200px;
        }

        #objects .object:hover {
            
        }

        #objects .object .thumb {
            background-size: cover;
            background-repeat: no-repeat;
            border-radius: 3px;
            height: 100%;
            width: 100%;
        }

        .empty {
            padding-left: 10px;
        }

        .edit-desc-grid .image .inner {
            z-index: 9;
        }

        textarea:focus {
            outline: none;
        }
    </style>
@endpush