@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 ({{ $lang }})</h1>
        <h3>Gestión de eventos para FICG.</h3>
    </div>

    <div id="objects">
        @if( $objects->count() < 1 )
            <p class="empty">No hay objetos.</p>
        @else
            {{ $objects->links() }}
            @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>
            @endforeach
            {{ $objects->links() }}
        @endif
    </div>

    <div id="new-modal-object" class="ui modal object">
        <div class="header">Agregar evento ({{ $lang }})</div>
        <div class="scrolling content">
            <form class="row ui form" 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="field">
                                <textarea name="ficha" rows="4" placeholder="Agrega la ficha técnica aquí"></textarea>
                            </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" value="Sinopsis">
                            </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 800<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" value="Director">
                            </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>

                    <input type="hidden" value="{{ $lang }}" name="lang">
                    @if($lang == "en")
                        <div class="ui grid">
                            <div class="field lang-parent-id sixteen wide column">
                                <label>Versión en español</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>
                    @endif

                    <div class="ui grid">
                        <div class="sixteen 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="sixteen wide column">
                            <div class="ui labeled input">
                                <div class="ui label">Trailer YouTube URL:</div>
                                <input name="trailer" type="text" placeholder="https://youtu.be/kNRAFhkYONc">
                            </div>
                        </div>
                    </div>
                    <div class="ui grid">
                        <div class="field lang-parent-id sixteen wide column">
                            <label>Evento Referencia</label>
                            <div class="ui selection dropdown">
                                <input type="hidden" name="ref_event">
                                <i class="dropdown icon"></i>
                                <div class="default text">Ninguno</div>
                                <div class="menu">
                                    @foreach ($shortfilms as $shortfilm)
                                        <div class="item" data-value="{{ $shortfilm->id }}">{{ $shortfilm->name }}</div>
                                    @endforeach
                                </div>
                            </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 en programa.</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 evento ({{ $lang }})</div>
            <div class="scrolling content">
                <form class="row ui form" 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">
                        <input type="hidden" name="page" value="{{ request()->page }}">

                        <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="field">
                                    <textarea name="ficha" rows="4" placeholder="Agrega la ficha técnica aquí">{{ $object->ficha }}</textarea>
                                </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 800):</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 class="eight wide column">
                                <div class="field">
                                    <label>Categorías:</label>
                                    <select name="categories[]" multiple="" class="ui fluid dropdown categories">
                                        @foreach ($subcategories as $subcategory)
                                            <option {{ $object->categories->contains('id', $subcategory->id) ? 'selected' : '' }} value="{{ $subcategory->id }}">{{ $subcategory->name }}</option>
                                        @endforeach
                                    </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 800<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>

                        <input type="hidden" value="{{ $lang }}" name="lang">
                        @if($lang == "en")
                            <div class="ui grid">
                                <div class="field lang-parent-id sixteen wide column">
                                    <label>Versión en español</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 ($objects_es as $parent)
                                                @if($parent->id != $object->id)
                                                    <div class="item" data-value="{{ $parent->id }}">{{ $parent->name }}</div>
                                                @endif
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif

                        <div class="ui grid">
                            <div class="sixteen 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="sixteen wide column">
                                <div class="ui labeled input">
                                    <div class="ui label">Trailer YouTube URL:</div>
                                    <input name="trailer" type="text" placeholder="https://youtu.be/kNRAFhkYONc" value="{{ $object->trailer }}">
                                </div>
                            </div>
                        </div>
                        <div class="ui grid">
                            <div class="field lang-parent-id sixteen wide column">
                                <label>Evento Referencia</label>
                                <div class="ui selection dropdown">
                                    <input type="hidden" name="ref_event">
                                    <i class="dropdown icon"></i>
                                    @php
                                        $flag = true;
                                    @endphp
                                    @foreach ($shortfilms as $shortfilm)
                                        @if ($shortfilm->id == $object->ref_event)
                                            <div class="default text">{{ $shortfilm->name }}</div>
                                            {{ $flag = false }}
                                        @endif
                                    @endforeach
                                    @if ($flag)
                                        <div class="default text">{{ $object->ref_event ? $object->ref_event : 'Ninguno'}}</div>
                                    @endif
                                    <div class="menu">
                                        @foreach ($shortfilms as $shortfilm)
                                            <div class="item" data-value="{{ $shortfilm->id }}">{{ $shortfilm->name }}</div>
                                        @endforeach
                                    </div>
                                </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 en programa.</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
            });

            $(".update-modal .add-date-button").on('click', function() {
                var id = $(this).attr('objectid');
                var newdate = $("#modal-object-"+id+" .datetimeinput .input:nth-child(1)").clone(true);
                newdate.appendTo("#modal-object-"+id+" .datetimeinput");

                newdate.find(".datetimepicker").flatpickr({
                    enableTime: true,
                    time_24hr: true
                });

                $("#modal-object-"+id+" .remove-date-button").fadeIn();
            });

            $(".update-modal .remove-date-button").on('click', function() {
                var id = $(this).attr('objectid');
                if($("#modal-object-"+id+" .datetimeinput .input").length > 1)
                    $("#modal-object-"+id+" .datetimeinput .input:last-child").remove();

                if($("#modal-object-"+id+" .datetimeinput .input").length < 2)
                    $("#modal-object-"+id+" .remove-date-button").fadeOut();
            });

            $("#new-modal-object .add-date-button").on('click', function() {
                var newdate = $("#new-modal-object .datetimeinput .input:nth-child(1)").clone(true);
                newdate.appendTo("#new-modal-object .datetimeinput");

                newdate.find(".datetimepicker").flatpickr({
                    enableTime: true,
                    time_24hr: true
                });

                $("#new-modal-object .remove-date-button").fadeIn();
            });

            $("#new-modal-object .remove-date-button").on('click', function() {
                if($("#new-modal-object .datetimeinput .input").length > 1)
                    $("#new-modal-object .datetimeinput .input:last-child").remove();

                if($("#new-modal-object .datetimeinput .input").length < 2)
                    $("#new-modal-object .remove-date-button").fadeOut();
            });
        });
    </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>
        .ui.grid input {
            width: auto !important;
        }

        .edit-desc-grid.is-a-movie {
            grid-auto-rows: 210px;
        }

        #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;
        }

        #objects .object.event .badges .badge {
            border: 1px solid #666;
        }

        textarea:focus {
            outline: none;
        }

        ul.pagination {
            list-style: none;
            padding: 0;
            margin: 20px 0;
        }

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