@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
@include('layouts.navbars.auth.topnav', ['title' => 'Biblioteca de la Escuela de Abogados del Estado'])

<div class="container-fluid py-4">
    <!-- Portada Principal -->
    <div class="row justify-content-center align-items-center min-vh-50">
        <div class="col-lg-8 col-md-10 text-center">
            <!-- Logo y Título -->
            <div class="mb-5">
                <div class="icon icon-xxl icon-shape bg-gradient-primary shadow-primary rounded-circle mx-auto mb-4">
                    <i class="fas fa-balance-scale text-white"></i>
                </div>
                <br><br><br><br><br><br>
                <h1 class="display-4 fw-bold mb-3 text-primary">Biblioteca Jurídica</h1>
                <h2 class="h3 text-muted">Escuela de Abogados del Estado</h2>
                <div class="divider mx-auto bg-primary my-4" style="width: 80px; height: 3px;"></div>
            </div>

            <!-- Lema Institucional -->
            <div class="mt-5 pt-4 border-top">
                <p class="text-muted mb-0">
                    <i class="fas fa-quote-left text-primary me-2"></i>
                    Custodiamos el conocimiento jurídico para la formación de excelencia
                    <i class="fas fa-quote-right text-primary ms-2"></i>
                </p>
            </div>
            <br>
        </div>

        <div class="row">
            <!-- Textos -->
            <div class="col-xl-3 col-sm-4 mb-xl-0 mb-4">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Textos</p>
                                    <h5 class="font-weight-bolder mb-0">{{ $cantidadTextos }}</h5>
                                </div>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape bg-gradient-primary shadow-primary text-center rounded-circle">
                                    <i class="fas fa-book text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Usuarios -->
            <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Usuarios</p>
                                    <h5 class="font-weight-bolder mb-0">{{ $cantidadUsuarios }}</h5>
                                </div>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape bg-gradient-danger shadow-danger text-center rounded-circle">
                                    <i class="fas fa-users text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Autores -->
            <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Autores</p>
                                    <h5 class="font-weight-bolder mb-0">{{ $cantidadAutores }}</h5>
                                </div>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape bg-gradient-success shadow-success text-center rounded-circle">
                                    <i class="fas fa-user-edit text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- categorias-->
            <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Categorias</p>
                                    <h5 class="font-weight-bolder mb-0">{{ $cantidadCategorias }}</h5>
                                </div>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape bg-gradient-primary shadow-primary text-center rounded-circle">
                                    <i class="fas fa-th-large text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

@include('layouts.footers.auth.footer')
@endsection