{% extends 'base.html' %}

{% block title %}Checkout - {{ course.title }}{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-6">
            <div class="card border-0 shadow-lg rounded-4 p-5 text-center">
                <div class="mb-4">
                    <span class="badge bg-success bg-opacity-10 text-success p-3 rounded-circle">
                        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
                    </span>
                </div>
                <h1 class="fw-bold mb-3">Complete Your Enrollment</h1>
                <p class="text-muted mb-5">You're one step away from joining <strong>{{ course.title }}</strong>.</p>
                
                <div class="bg-light p-4 rounded-4 mb-5 text-start">
                    <div class="d-flex justify-content-between mb-2">
                        <span>Course Fee</span>
                        <span class="fw-bold">${{ course.price }}</span>
                    </div>
                    <div class="d-flex justify-content-between mb-2 text-success">
                        <span>Discount</span>
                        <span class="fw-bold">-$0.00</span>
                    </div>
                    <hr>
                    <div class="d-flex justify-content-between h4 mb-0">
                        <span class="fw-bold">Total</span>
                        <span class="fw-bold text-primary">${{ course.price }}</span>
                    </div>
                </div>

                <div class="d-grid gap-3">
                    <button class="btn btn-primary py-3 fw-bold" disabled>Pay with Stripe (Coming Soon)</button>
                    <button class="btn btn-gold py-3 fw-bold" onclick="alert('Enrollment successful (Demo Mode)!')">Enroll for Free (Demo)</button>
                </div>
                
                <p class="mt-4 small text-muted">This is a placeholder for the final checkout flow.</p>
                <a href="{% url 'course_detail' course.slug %}" class="btn btn-link text-decoration-none mt-2">Back to Course</a>
            </div>
        </div>
    </div>
</div>
{% endblock %}