@extends('layout.front.master')

@section('title', 'Mi suscripción | ' . config('site.name'))

@section('content')
<section class="py-5 my-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8 col-lg-6">
                <div class="text-center mb-5">
                    <h2 class="font-weight-bold custom-text-8 mb-3">Gestionar mi suscripción</h2>
                    <p class="custom-text-4 text-color-grey">
                        @if(isset($projects))
                            Tus proyectos activos con <strong>{{ $email }}</strong>
                        @else
                            Ingresá el email con el que adquiriste tu sitio web.
                        @endif
                    </p>
                </div>

                @if(session('error'))
                <div class="alert alert-danger mb-4">
                    {{ session('error') }}
                </div>
                @endif

                @if(isset($projects) && count($projects) > 0)
                    {{-- Project list --}}
                    <div class="mb-4">
                        @foreach($projects as $project)
                        <div class="card border-0 rounded-0 mb-3 shadow-sm">
                            <div class="card-body p-4 d-flex align-items-center justify-content-between">
                                <div>
                                    <h5 class="font-weight-bold mb-1">{{ $project['name'] }}</h5>
                                    <div class="d-flex align-items-center gap-3">
                                        <span class="badge {{ $project['status'] === 'active' || $project['status'] === 'trialing' ? 'bg-success' : 'bg-warning' }}">
                                            {{ $project['status'] === 'trialing' ? 'Período de prueba' : ($project['status'] === 'active' ? 'Activo' : ucfirst($project['status'])) }}
                                        </span>
                                        @if($project['amount'])
                                            <span class="text-color-grey custom-text-3">{{ $project['amount'] }}</span>
                                        @endif
                                        @if($project['trial_end'])
                                            <span class="text-color-grey custom-text-3">Prueba hasta {{ $project['trial_end'] }}</span>
                                        @endif
                                    </div>
                                </div>
                                <a href="{{ $project['portal_url'] }}" class="btn btn-sm btn-outline-primary rounded-0 font-weight-semibold">
                                    Gestionar
                                </a>
                            </div>
                        </div>
                        @endforeach
                    </div>

                    <div class="text-center">
                        <a href="{{ route('billing.portal') }}" class="text-color-grey custom-text-3">Usar otro email</a>
                    </div>
                @else
                    {{-- Email form --}}
                    <form method="POST" action="{{ route('billing.portal.redirect') }}">
                        @csrf
                        <div class="mb-4">
                            <label class="form-label fw-semibold">Email</label>
                            <input type="email" name="email" class="form-control form-control-lg rounded-0"
                                   placeholder="tu@email.com" required value="{{ old('email') }}">
                            @error('email')
                            <div class="text-danger mt-1 small">{{ $message }}</div>
                            @enderror
                        </div>
                        <button type="submit" class="btn btn-primary rounded-0 w-100 py-3 font-weight-semibold custom-text-4">
                            Acceder a mi facturación
                        </button>
                    </form>

                    <p class="text-center text-color-grey custom-text-3 mt-4">
                        Serás redirigido a Stripe, nuestro procesador de pagos seguro.
                    </p>
                @endif
            </div>
        </div>
    </div>
</section>
@endsection