@extends('adminlte::page')

@section('content_header')
<h1><b>Manuales</b></h1>
<hr>
@stop

@section('content')
<div class="d-flex justify-content-center">
    <div class="col-md-4">
        <div class="card card-outline card-success">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-book"></i> Manuales del Sistema</h3>
            </div>
            <div class="card-body text-center">
                <div class="row">
                    <div class="col-md-6 mb-4">
                        <div class="manual-card p-3">
                            <a href="{{ asset('Manual Usuario.pdf') }}" 
                               target="_blank"
                               style="text-decoration: none; color: inherit;">
                                <i class="fas fa-user-tie fa-4x mb-3 text-primary clickable-icon"></i>
                                <h5>Manual de Usuario</h5>
                                <p class="text-muted small">Guía para usuarios del sistema</p>
                            </a>
                            <a href="{{ asset('Manual Usuario.pdf') }}" 
                               class="btn btn-primary btn-block" 
                               target="_blank"
                               download="Manual_Usuario.pdf">
                                <i class="fas fa-download"></i> Descargar
                            </a>
                        </div>
                    </div>
                    
                    <div class="col-md-6 mb-4">
                        <div class="manual-card p-3">
                            <a href="{{ asset('Manual tecnico.pdf') }}" 
                               target="_blank"
                               style="text-decoration: none; color: inherit;">
                                <i class="fas fa-code fa-4x mb-3 text-success clickable-icon"></i>
                                <h5>Manual Técnico</h5>
                                <p class="text-muted small">Documentación para desarrolladores</p>
                            </a>
                            <a href="{{ asset('Manual tecnico.pdf') }}" 
                               class="btn btn-success btn-block" 
                               target="_blank"
                               download="Manual_Tecnico.pdf">
                                <i class="fas fa-download"></i> Descargar
                            </a>
                        </div>
                    </div>
                </div>
                
                <div class="alert alert-info mt-3">
                    <i class="fas fa-info-circle"></i> 
                    <strong>Nota:</strong> Los manuales están en formato PDF. Asegúrese de tener 
                    un lector de PDF instalado como Adobe Reader.
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .clickable-icon:hover {
        transform: scale(1.1);
        transition: transform 0.3s ease;
    }
</style>
@stop