@extends('layouts.admin')

@section('contenido')
    <div id="novedades" class="row justify-content-center">
        <div class="col-md-10">
            <div class="card">
                <div class="card-header">
                    <a href="{{ route('admin.home') }}" class="btn btn-secondary">Menú</a>
                    <h2 class="d-inline">Novedades</h2>
                </div>
                <div class="card-body">
                    <div class="row mb-2">
                        <div class="col">
                            <div class="input-group mb-3">
                                <input v-on:keyup.enter="listarNovedades" v-model="filtro" name="filtro" class="form-control" type="text" placeholder="Filtro de búsqueda">
                                <div class="input-group-append">
                                    <button v-on:click.prevent="borrarFiltro" class="btn btn-secondary" type="button" id="button-addon2">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                                <div class="input-group-append">
                                    <button v-on:click.prevent="listarNovedades" class="btn btn-secondary" type="button" id="button-addon2">
                                        <i class="fas fa-search"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <button type="button" class="btn btn-primary float-right" v-on:click.prevent="crearNovedad">
                                Nueva Novedad
                            </button>
                        </div>
                    </div>
                    <table class="table">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>FECHA</th>
                                <th>TÍTULO</th>
                                <th>TIPO</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="novedad in novedades" v-bind:key="novedad.id">
                                
                                <td>@{{ novedad.id }}</td>
                                <td>@{{ formatearFecha(novedad.created_at) }}</td>
                                <td>@{{ novedad.titulo }}</td>
                                <td>
                                    <span v-if="novedad.tipos_novedad_id == 3">
                                        <i class="fas fa-star" style="color: #FFAB00;"></i>
                                        <p class="d-inline ml-2">Principal</p>
                                    </span>
                                    <span v-if="novedad.tipos_novedad_id == 2">
                                        <i class="fas fa-tag" style="color: #D500F9;"></i>
                                        <p class="d-inline ml-2">Destacada</p>
                                    </span>
                                </td>
                                <td class="acciones">
                                    <a class="btn btn-warning btn-sm" v-on:click.prevent="editarNovedad(novedad)">Editar</a>                                 
                                    <a class="btn btn-danger btn-sm" v-on:click.prevent="eliminarNovedad(novedad)">Eliminar</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>

                    <nav>
                        <ul class="pagination">
                            <li v-if="paginacion.pagina_actual > 1" class="page-item">
                                <a v-on:click.prevent="cambiarPagina(paginacion.pagina_actual - 1)" class="page-link" href="#">Atrás</a>
                            </li>
                            <li v-for="pagina in paginas" class="page-item" v-bind:class="[pagina == paginaActiva ? 'active' : '']">
                                <a v-on:click.prevent="cambiarPagina(pagina)" class="page-link" href="#">@{{ pagina }}</a>
                            </li>
                            <li v-if="paginacion.pagina_actual < paginacion.ultima_pagina" class="page-item">
                                <a v-on:click.prevent="cambiarPagina(paginacion.pagina_actual + 1)" class="page-link" href="#">Siguiente</a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>

        @include('admin.novedades.modal')
    </div>
@endsection

@section('scripts')
    <script src="{{ asset('vendor/ckeditor/ckeditor.js') }}"></script>
    <script>
        $(document).ready(function () {
            CKEDITOR.replace('cuerpo');
        });
    </script>
@endsection