@extends('layouts.theme')
@section('header')
    <h2 class="text-2xl color-bipymes-4 font-semibold">
        {{ __('Resultados') }}
    </h2>
@endsection

@section('content')
    
    <div class="">
        <div class="max-w-7xl gap-4">
            <div class="p-5 bg-bipymes-5">
                {!! nl2br(e($result)) !!}
            </div>
            <div class="flex flex-col justify-center items-center p-5 gap-5">
                <h3 class="text-center font-bold">¿Te gusta el resultado?</h3>
                <div class="flex flex-row gap-5">
                    <button class="flex items-center px-4 py-4 border border-transparent font-semibold text-white uppercase tracking-widest hover:bg-gray-700  focus:bg-gray-700 active:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150  rounded-se-none rounded-es-none rounded-ee-2xl rounded-ss-2xl text-center bg-bipymes-4 border-none text-xl aspect-square">
                        <i class="fa-regular fa-thumbs-up"></i>
                    </button>
                    <button class="flex items-center px-4 py-4 border border-transparent font-semibold text-white uppercase tracking-widest hover:bg-gray-700  focus:bg-gray-700 active:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150  rounded-se-none rounded-es-none rounded-ee-2xl rounded-ss-2xl text-center bg-bipymes-4 border-none text-xl aspect-square">
                        <i class="fa-regular fa-thumbs-down"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('aside')
    <div class="flex flex-col bg-bipymes-6 rounded-2xl p-8 gap-6">
        <img src="{{ asset('images/asistente.jpg') }}" alt="">
        <div class="flex flex-col gap-2">
            <h2 class="color-bipymes-4 font-semibold text-xl">Mi agente virtual</h2>
            <p class="color-bipymes-4">Utiliza el agente virtual para responder, analizar y gestionar tus consultas.</p>
        </div>
        <button class="border-2 border-color-bipymes-1 rounded-lg color-bipymes-1 text-xs px-4 py-2 w-fit">Hablar con agente</button>
    </div>
@endsection