@extends('layouts.site')
@section('title', 'Estatus Subscription')

@section('content')
<div class="container mx-auto shadow  bg-white  h-screen ">
    @if($subscribed)
        <div class="w-full md:w-1/2 p-6  mx-auto justify-center ">
            <p class="w-full text-center py-4">
                <i class="text-4xl w-20 h-20 m-auto fa fa-check text-white bg-green-500 p-6 rounded-full"></i>
            </p>
            <div class="w-full text-center">
                <h3 class="md:text-2xl text-base text-gray-900 font-semibold text-center my-8">¡Pago Exitoso!</h3>
                <p class="text-gray-600 my-8">Gracias por completar su pago seguro en línea.</p>
                <p class="my-8"> Que tengas un excelente día!  </p>
                <div class="py-10 text-center my-8">
                    <a href="{{ route('site.home') }}" class="px-12 bg-indigo-600 hover:bg-indigo-500 text-white font-semibold py-3 rounded">
                      Aprendamos
                    </a>
                </div>
            </div>
        </div>
        <div class="w-full flex justify-center">
            @foreach($courses as $course)
                @include('site.partials.course',compact('course'))
            @endforeach
        </div>
    @else
        <div class="w-full md:w-1/2 p-2 md:p-10  mx-auto justify-center">
            <p class="w-full text-center py-4">
                <i class="text-4xl w-20 h-20 m-auto fa fa-times text-white bg-red-500 p-6 rounded-full"></i>
            </p>
            <div class="w-full text-center">
                <h3 class="md:text-2xl text-base text-gray-900 font-semibold text-center my-10">¡Error al Pagar!</h3>
                <p class="text-gray-600 my-10">Hubo un error con tu pago.</p>
                <div class="text-center my-10">
                    <a href="{{ route('site.plans.list') }}" class="px-12 bg-black hover:bg-black/50 text-white font-semibold py-3 rounded">
                        <i class="fas fa-undo-alt"></i> Intentarlo de nuevo
                    </a>
                </div>
            </div>
        </div>
    @endif
</div>
@endsection