@extends('layouts.app', ['title' => 'Mi Billetera e Historial', 'menu' => 'Configuración'])

@section('content')

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Historial de Billetera</h5>
                <p class="card-title-desc">Aquí puedes ver tus recargas y los costos de tus traducciones.</p>
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>Fecha</th>
                                <th>Descripción</th>
                                <th class="text-end">Monto (S/)</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($transactions as $tx)
                                <tr>
                                    <td>{{ $tx->created_at->format('d/m/Y h:i A') }}</td>
                                    <td>{{ $tx->description }}</td>
                                    <td class="text-end">
                                        @if ($tx->amount > 0)
                                            <span class="text-success"><strong>+ {{ number_format($tx->amount, 2) }}</strong></span>
                                        @else
                                            <span class="text-danger">{{ number_format($tx->amount, 2) }}</span>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="3" class="text-center">No tienes transacciones todavía.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="mt-3">{{ $transactions->links() }}</div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Historial de Traducciones</h5>
                <p class="card-title-desc">Aquí puedes ver el estado y descargar tus trabajos completados.</p>
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>Archivo Original</th>
                                <th>Fecha</th>
                                <th>Costo (S/)</th>
                                <th>Estado</th>
                                <th class="text-end">Acción</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($translationJobs as $job)
                                <tr>
                                    <td>{{ $job->original_file_name }}</td>
                                    <td>{{ $job->created_at->format('d/m/Y h:i A') }}</td>
                                    <td>{{ number_format($job->cost, 2) }}</td>
                                    <td>
                                        @if ($job->status == 'completed')
                                            <span class="badge bg-success">Completado</span>
                                        @elseif ($job->status == 'pending')
                                            <span class="badge bg-info">Pendiente</span>
                                        @elseif ($job->status == 'processing')
                                            <span class="badge bg-primary">Procesando...</span>
                                        @elseif ($job->status == 'failed')
                                            <span class="badge bg-danger">Fallido</span>
                                        @endif
                                    </td>
                                    <td class="text-end">
                                        @if ($job->status == 'completed')
                                            <a href="{{ route('translator.job.download', $job) }}" class="btn btn-primary btn-sm">
                                                <i class="ri-download-2-line"></i> Descargar
                                            </a>
                                        @elseif ($job->status == 'failed')
                                            <form method="POST" action="{{ route('translator.job.retry', $job) }}" onsubmit="return confirm('Esto volverá a procesar el archivo y te costará S/ {{ number_format($job->cost, 2) }} de tu saldo. ¿Estás seguro?');">
                                                @csrf
                                                <button type="submit" class="btn btn-warning btn-sm"
                                                        data-bs-toggle="tooltip" 
                                                        data-bs-placement="top" 
                                                        title="Error: {{ $job->error_message }}">
                                                    <i class="ri-refresh-line"></i> Reintentar
                                                </button>
                                            </form>
                                            @elseif ($job->status == 'retried')
                                            <span class="badge bg-secondary">Reintentado</span>
                                        @else
                                            <span class="badge 
                                                @if($job->status == 'pending') bg-info @else bg-primary @endif">
                                                {{ ucfirst($job->status) }}...
                                            </span>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="text-center">No has enviado ninguna traducción todavía.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="mt-3">{{ $translationJobs->links() }}</div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl)
        })
    });
</script>
@endpush