@extends('front.layouts.main')

@section('contenido')
<style>
    #perfil .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
        background: #FF5600;
        color: #fff;
    }
    #perfil .nav-link {
        color: #000;
        font-size: 13px;
    }
    #perfil .table tr th {
        font-size: 12px;
    }
    #perfil .table tr th, #perfil .table tr td {
        color: #000;
    }
    .col-20 {
        float: left;
        width: 20%;
    }
    @media screen and (max-width: 991px) {
        .col-20 {
            width: 100%;
        }
    }
</style>

<div class="col-12 fondo_subpagina">
    <div class="col-12 espacio_header">∏

    </div>
</div>

<div class="col-12 pt-lg-5 pt-3 pb-lg-5 pb-3" style="margin-bottom: 25px; background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('{{ asset('img/bg/bg.png') }}'); background-size: cover; background-attachment: fixed; background-position: center;">
    <div class="container">
        <div class="col-12 text-white">
            <h1>Portal</h1>
            <p class="mb-2">Bienvenido, {{ auth()->user()->name }} | HB3579</p>
            <p class="mb-0"><a href="{{ route('principal') }}" class="a_naranja">Inicio</a> / Portal</p>
        </div>
    </div>
</div>
<div class="container py-4">
  <h1>Resultado del pago</h1>

  <p><strong>Pedido #:</strong> {{ $pedido->id }}</p>
  <p><strong>Hash:</strong> {{ $hash ?? $pedido->hash_pagopar }}</p>
  <p><strong>Estado API:</strong> {{ $estado ?? 'pendiente' }}</p>

  @if($pagado)
    <p class="text-success">✅ Pago acreditado.</p>
  @elseif(!empty($rechazado))
    <p class="text-danger">❌ Pago rechazado/cancelado.</p>
  @else
    <p class="text-warning">⌛ Aún pendiente o no acreditado.</p>
  @endif

  <a href="{{ route('page.vistaPanelCliente') }}" class="btn btn-primary mt-3">Volver a mis paquetes</a>
</div>
@endsection