@extends('layout.admin')

@section('title', 'Categorías')

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

@section('content')

<!-- ======================================================= -->
<section id="admin-section" class="main-section admin-section">
    <div class="heading left-align">
        <h1>Categorías</h1>
        <h3>Gestión de categorías 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->portrait ) }}')"></div>
                <div class="title">{{ $object->name }}</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('category.store') }}" method="post" enctype="multipart/form-data">
                @csrf
                <div class="block">

                    <div class="ui labeled input">
                        <div class="ui label">Nombre:</div>
                        <input name="name" type="text" placeholder="Nombre de la categoría" required>
                    </div>
                    <div class="ui labeled input">
                        <div class="ui label">Nombre en inglés:</div>
                        <input name="name_en" type="text" placeholder="Category name" required>
                    </div>
                    <div class="ui labeled input">
                        <div class="ui label">Portada (1024 x 1024):</div>
                        <input class="with-thumb" name="portrait" type="file" placeholder="Portada">
                    </div>
                    <div class="ui labeled input">
                        <div class="ui label">Orden:</div>
                        <input name="priority" type="number" value="1000" required>
                    </div>

                    <div class="field">
                        <label>Categoría Padre</label>
                        <select name="category_id" class="ui fluid dropdown">
                            <option value="">Ninguna</option>
                            @foreach ($categories as $category)
                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    
                    <div class="inline field">
                        <div class="ui toggle checkbox field-block" style="margin: 25px 0px 15px;box-shadow: none;">
                            <input name="is_active" type="checkbox" tabindex="0" class="hidden">
                            <label>Visible</label>
                        </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 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('category.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">Nombre:</div>
	                        <input name="name" type="text" value="{{ $object->name }}" placeholder="Nombre de la categoría" required>
                        </div>
                        <div class="ui labeled input">
	                        <div class="ui label">Nombre en inglés:</div>
	                        <input name="name_en" type="text" value="{{ $object->name_en }}" placeholder="Category name" required>
                        </div>
	                    <div class="ui labeled input">
	                        <div class="ui label">Portada (1024 x 1024):</div>
                            <input class="with-thumb" name="portrait" type="file" placeholder="Portada" style="background-image: url('{{ asset($object->portrait) }}'); background-size: auto 100%; background-repeat: no-repeat; background-position: 99% -1px;">
	                    </div>
                        <div class="ui labeled input">
                            <div class="ui label">Orden:</div>
                            <input name="priority" type="number" value="{{ $object->priority }}" required>
                        </div>

                        <div class="field">
                            <label>Categoría Padre</label>
                            <select name="category_id" class="ui fluid dropdown">
                                <option value="null">Ninguna</option>
                                @foreach ($categories as $category)
                                    <option value="{{ $category->id }}" {{ $category->id == $object->category_id ? 'selected' : '' }}>{{ $category->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        
                        <div class="inline field">
                            <div class="ui toggle checkbox field-block" style="margin: 25px 0px 15px;box-shadow: none;">
                                <input name="is_active" type="checkbox" tabindex="0" class="hidden" {{ $object->is_active ? 'checked' : '' }}>
                                <label>Visible</label>
                            </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('category.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