@extends('layouts.app')

@section('title', ($course->is_free ? 'Inscripción' : 'Comprar curso').' — '.$course->title)

@section('content')
    <header class="page-head checkout-head">
        <div class="container-shell">
            <nav class="breadcrumbs" aria-label="Ruta de navegación">
                <a href="{{ route('home') }}">Inicio</a>
                <span aria-hidden="true">/</span>
                <a href="{{ route('courses.show', $course) }}">{{ $course->title }}</a>
                <span aria-hidden="true">/</span>
                <span>Inscripción</span>
            </nav>

            <span class="eyebrow">{{ $course->is_free ? 'Acceso sin costo' : 'Inscripción segura' }}</span>
            <h1>{{ $course->is_free ? 'Confirma tu lugar' : 'Finaliza tu inscripción' }}</h1>
            <p>
                {{ $course->is_free
                    ? 'Estás a un paso de comenzar. Revisa los detalles y activa el curso en tu cuenta.'
                    : 'Revisa los detalles del curso y completa tu inscripción de forma segura.' }}
            </p>
        </div>
    </header>

    <section class="section-tight checkout-section">
        <div class="container-shell checkout-layout">
            <main class="checkout-main">
                <article class="checkout-course-card">
                    @if ($course->coverUrl())
                        <img class="checkout-course-cover" src="{{ $course->coverUrl() }}" alt="Portada de {{ $course->title }}">
                    @else
                        <div class="checkout-course-cover checkout-cover-placeholder">
                            <span>{{ $course->category?->name ?? 'Aprendizaje profesional' }}</span>
                        </div>
                    @endif

                    <div class="checkout-course-copy">
                        <span class="course-provider">{{ $course->category?->name ?? 'Curso profesional' }}</span>
                        <h2>{{ $course->title }}</h2>
                        <p>{{ $course->subtitle ?: Str::limit(strip_tags($course->description), 150) }}</p>
                        <div class="checkout-course-meta">
                            <span>{{ $course->instructor?->name ?? 'Equipo académico' }}</span>
                            <span>{{ $course->sections->sum(fn ($section) => $section->lessons->count()) }} lecciones</span>
                            <span>Acceso inmediato</span>
                        </div>
                    </div>
                </article>

                <section class="panel checkout-form-card">
                    <div class="panel-head checkout-panel-head">
                        <div>
                            <span class="eyebrow">Último paso</span>
                            <h2>{{ $course->is_free ? 'Activa tu inscripción' : 'Datos de inscripción' }}</h2>
                        </div>
                        <span class="checkout-step">01 / 01</span>
                    </div>

                    <form class="panel-body stack checkout-form" action="{{ route('checkout.store', $course) }}" method="POST" enctype="multipart/form-data">
                        @csrf

                        @if (! $course->is_free)
                            <div class="form-grid checkout-fields">
                                <label class="field">
                                    <span class="form-label">Código de descuento</span>
                                    <input type="text" name="coupon" value="{{ old('coupon') }}" placeholder="Opcional" autocomplete="off">
                                </label>

                                <label class="field">
                                    <span class="form-label">Comprobante de pago</span>
                                    <input type="file" name="proof" accept="image/*,.pdf">
                                    <small>Formatos JPG, PNG o PDF.</small>
                                </label>
                            </div>
                        @else
                            <div class="free-enrollment-note">
                                <span class="free-enrollment-icon" aria-hidden="true">✓</span>
                                <div>
                                    <strong>No se solicitarán datos de pago</strong>
                                    <p>El curso aparecerá en “Mi aprendizaje” inmediatamente después de confirmar.</p>
                                </div>
                            </div>
                        @endif

                        <label class="check-row checkout-terms">
                            <input type="checkbox" name="terms" value="1" {{ old('terms') ? 'checked' : '' }} required>
                            <span>
                                Confirmo que revisé la información del curso y acepto los
                                <span class="checkout-terms-link">términos y condiciones</span>.
                            </span>
                        </label>

                        @error('terms')
                            <p class="form-error">{{ $message }}</p>
                        @enderror

                        <button class="btn btn-primary checkout-submit" type="submit">
                            {{ $course->is_free ? 'Inscribirme ahora' : 'Confirmar inscripción' }}
                        </button>
                    </form>
                </section>
            </main>

            <aside class="panel checkout-summary">
                <div class="panel-head"><h2>Resumen</h2></div>
                <div class="panel-body">
                    <div class="checkout-summary-row">
                        <span>Curso</span>
                        <strong>{{ $course->title }}</strong>
                    </div>
                    <div class="checkout-price-row">
                        <span>Subtotal</span>
                        <strong>{{ $subtotal > 0 ? '$'.number_format($subtotal, 2) : 'Gratis' }}</strong>
                    </div>

                    @if ($tax > 0)
                        <div class="checkout-price-row">
                            <span>Impuestos</span>
                            <strong>${{ number_format($tax, 2) }}</strong>
                        </div>
                    @endif

                    <div class="checkout-total-row">
                        <span>Total</span>
                        <strong>{{ $total > 0 ? '$'.number_format($total, 2) : 'Gratis' }}</strong>
                    </div>

                    <div class="checkout-includes">
                        <span class="form-label">Tu inscripción incluye</span>
                        <ul>
                            <li>Acceso a todas las lecciones</li>
                            <li>Progreso guardado en tu cuenta</li>
                            <li>Materiales descargables</li>
                            <li>Constancia al completar el curso</li>
                        </ul>
                    </div>

                    <p class="checkout-trust"><span aria-hidden="true">⌾</span> Tus datos se procesan de forma segura.</p>
                </div>
            </aside>
        </div>
    </section>
@endsection