@extends('layouts.admin')

@section('contenido')
    <div id="tipos-profesional" 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">Tipos de Profesionales</h2>
                    <a href="{{ route('profesionales') }}" class="btn btn-secondary float-right">Profesionales</a>
                </div>
                <div class="card-body">
                    <div class="row mb-2">
                        <div class="col">
                            <div class="input-group mb-3">
                                <input v-on:keyup.enter="listarTiposProfesional" 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="listarTiposProfesional" 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="crearTipoProfesional">
                                Nuevo Tipo de Profesional
                            </button>
                        </div>
                    </div>
                    <table class="table">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>NOMBRE</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="tipo in tiposProfesional" v-bind:key="tipo.id">
                                <td>@{{ tipo.id }}</td>
                                <td>@{{ tipo.nombre }}</td>
                                <td class="acciones">
                                    <a class="btn btn-warning btn-sm" v-on:click.prevent="editarTipoProfesional(tipo)">Editar</a>                                  
                                    <a class="btn btn-danger btn-sm" v-on:click.prevent="eliminarTipoProfesional(tipo)">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.tipos-profesional.modal')
    </div>
@endsection