@extends('layouts.app', ['title' => 'Panel de Usuario', 'menu' => 'Inicio'])

@section('content')

<div class="row p-3">

    <div class="col-lg-4 col-md-6">
        <div class="card bg-primary text-white">
            <div class="card-body">
                <h5 class="card-title text-white">Saldo Actual</h5>
                <h3 class="text-white">S/ {{ number_format(Auth::user()->balance, 2) }}</h3>
                <a href="{{ route('plans.index') }}" class="btn btn-light btn-sm mt-2">
                    <i class="ri-add-circle-line me-1"></i> Recargar Saldo
                </a>
            </div>
        </div>
    </div>

    <div class="col-lg-4 col-md-6">
        <div class="card bg-info text-white">
            <div class="card-body">
                <h5 class="card-title text-white">Trabajos en Cola</h5>
                <h3 class="text-white">{{ $activeJobs->count() }}</h3>
                <p class="card-text mb-0">Traducciones en estado 'pendiente' o 'procesando'.</p>
            </div>
        </div>
    </div>

    <div class="col-lg-4 col-md-12">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Historial</h5>
                <h3 class="text-success">{{ $completedJobsCount }}</h3>
                <p class="card-text mb-0">Total de traducciones completadas con éxito.</p>
            </div>
        </div>
    </div>
</div>

<div class="row">

    <div class="col-lg-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Accesos Rápidos</h5>
                <p class="card-title-desc">Comienza un nuevo trabajo o revisa tu historial.</p>
                <div class="d-grid gap-2">
                    <a href="{{ route('translator.index') }}" class="btn btn-primary btn-lg">
                        <i class="ri-translate-2 me-1"></i> Traducir Nuevo Archivo
                    </a>
                    <a href="{{ route('wallet.index') }}" class="btn btn-secondary btn-lg">
                        <i class="ri-wallet-3-line me-1"></i> Ver Mi Billetera
                    </a>
                    <a href="{{ route('po-viewer.index') }}" class="btn btn-info btn-lg">
                        <i class="ri-eye-line me-1"></i> Usar Visor (Gratis)
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-8">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Trabajos Activos en Cola</h5>
                <div class="table-responsive">
                    <table class="table table-sm table-striped mb-0">
                        <thead>
                            <tr>
                                <th>Archivo</th>
                                <th>Enviado</th>
                                <th>Costo (S/)</th>
                                <th>Estado</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($activeJobs as $job)
                                <tr>
                                    <td>{{ Str::limit($job->original_file_name, 35) }}</td>
                                    <td>{{ $job->created_at->diffForHumans() }}</td>
                                    <td>{{ number_format($job->cost, 2) }}</td>
                                    <td>
                                        @if ($job->status == 'pending')
                                            <span class="badge bg-info">Pendiente</span>
                                        @else
                                            <span class="badge bg-primary">Procesando...</span>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="text-center py-3">
                                        ¡No tienes trabajos en la cola!
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection