{% extends "base.html" %}
{% load static %}
{% block title %}Secure Checkout | BookStore{% endblock %}

{% block content %}
<section class="bg-white border-bottom py-5 mb-5">
    <div class="container py-4">
        <h1 class="fw-800 display-5 mb-0 text-center">Complete Your <span class="text-primary-gradient">Purchase</span></h1>
        <p class="text-muted fs-5 mt-2 text-center">Secure your copy of "{{ book.title }}" in just a few steps.</p>
    </div>
</section>

<div class="container mb-5 pb-5">
    <div class="row g-5 justify-content-center">
        <!-- Order Summary (Left) -->
        <div class="col-lg-4 order-lg-2">
            <div class="card border-0 shadow-soft rounded-4 overflow-hidden sticky-top" style="top: 100px;">
                <div class="p-4 bg-primary-light border-bottom border-primary border-opacity-10">
                    <h5 class="fw-bold mb-0 text-primary">Order Summary</h5>
                </div>
                <div class="p-4 bg-white">
                    <div class="d-flex align-items-center mb-4 pb-4 border-bottom">
                        {% if book.cover_image %}
                        <img src="{{ book.cover_image.url }}" class="rounded-3 shadow-sm me-3" style="width: 80px; height: 110px; object-fit: cover;">
                        {% else %}
                        <div class="rounded-3 bg-light me-3 d-flex align-items-center justify-content-center" style="width: 80px; height: 110px;">
                            <i class="fas fa-book text-muted opacity-25"></i>
                        </div>
                        {% endif %}
                        <div>
                            <h6 class="fw-bold mb-1 text-dark">{{ book.title }}</h6>
                            <p class="small text-muted mb-0">{{ book.category.name }}</p>
                            <span class="badge bg-light text-primary mt-2 rounded-pill small">Digital PDF</span>
                        </div>
                    </div>
                    
                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-muted">Item Price</span>
                        <span class="fw-bold text-dark">${{ book.price }}</span>
                    </div>
                    <div class="d-flex justify-content-between mb-4">
                        <span class="text-muted">Transaction Fee</span>
                        <span class="text-success fw-bold">FREE</span>
                    </div>
                    
                    <hr class="my-4 opacity-10">
                    
                    <div class="d-flex justify-content-between align-items-center mb-0">
                        <h5 class="fw-800 mb-0">Total Amount</h5>
                        <h4 class="fw-800 text-primary mb-0">${{ book.price }}</h4>
                    </div>
                </div>
                <div class="p-4 bg-light text-center">
                    <p class="small text-muted mb-0"><i class="fas fa-lock me-2 text-primary"></i>Secure checkout provided by BookStore</p>
                </div>
            </div>
        </div>

        <!-- Checkout Form (Right) -->
        <div class="col-lg-6 order-lg-1">
            <div class="card border-0 shadow-soft rounded-4 p-4 p-md-5 bg-white">
                <!-- Step 1: Payment Instructions -->
                <div class="mb-5">
                    <div class="d-flex align-items-center mb-4">
                        <span class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3 shadow-sm" style="width: 32px; height: 32px; font-size: 0.9rem; font-weight: 800;">1</span>
                        <h5 class="fw-bold mb-0">Payment Instructions</h5>
                    </div>
                    
                    <div class="bg-primary-light p-4 rounded-4 mb-4 border border-primary border-opacity-10 position-relative overflow-hidden">
                        <div class="position-absolute top-0 end-0 p-3 opacity-10">
                            <i class="fas fa-mobile-screen-button fa-5x"></i>
                        </div>
                        <p class="small text-primary fw-bold mb-3 text-uppercase letter-spacing-1">Send your payment to:</p>
                        <div class="row g-3">
                            <div class="col-12">
                                <div class="payment-method-item bg-white p-3 rounded-3 shadow-sm d-flex align-items-center">
                                    <div class="icon bg-success bg-opacity-10 text-success rounded-circle me-3 p-2">
                                        <i class="fas fa-money-bill-wave"></i>
                                    </div>
                                    <div>
                                        <small class="text-muted d-block" style="font-size: 0.7rem;">ZAAD / SAHAL / EVC PLUS</small>
                                        <span class="fw-bold text-dark fs-5">+252 63 4844506</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <p class="small text-muted mt-4 mb-0">
                            <i class="fas fa-info-circle me-2 text-primary"></i>
                            After transfer, please keep your <strong>Transaction ID</strong> ready to enter below.
                        </p>
                    </div>
                </div>

                <!-- Step 2: Verification Details -->
                <div>
                    <div class="d-flex align-items-center mb-4">
                        <span class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3 shadow-sm" style="width: 32px; height: 32px; font-size: 0.9rem; font-weight: 800;">2</span>
                        <h5 class="fw-bold mb-0">Verification Details</h5>
                    </div>
                    
                    <form action="{% url 'checkout' book.slug %}" method="POST" enctype="multipart/form-data">
                        {% csrf_token %}
                        <div class="mb-4">
                            <label for="email" class="form-label fw-bold small text-muted text-uppercase">Email Address</label>
                            <div class="input-group">
                                <span class="input-group-text bg-light border-0 px-3"><i class="far fa-envelope text-muted"></i></span>
                                <input type="email" class="form-control bg-light border-0 py-3 px-4 shadow-none" name="email" required placeholder="Where should we send your book?">
                            </div>
                            <div id="emailHelp" class="form-text small text-muted mt-2">We'll never share your email with anyone else.</div>
                        </div>
                        
                        <div class="mb-4">
                            <label for="transaction_id" class="form-label fw-bold small text-muted text-uppercase">Transaction ID / Reference</label>
                            <div class="input-group">
                                <span class="input-group-text bg-light border-0 px-3"><i class="fas fa-hashtag text-muted"></i></span>
                                <input type="text" class="form-control bg-light border-0 py-3 px-4 shadow-none" name="transaction_id" required placeholder="Enter the ID from your mobile transfer">
                            </div>
                        </div>
                        
                        <div class="mb-5">
                            <label for="screenshot" class="form-label fw-bold small text-muted text-uppercase">Payment Screenshot (Optional)</label>
                            <input type="file" class="form-control bg-light border-0 py-3 px-4 shadow-none" name="screenshot" accept="image/*">
                            <div class="form-text small text-muted mt-2">Adding a screenshot helps us verify your payment faster.</div>
                        </div>
                        
                        <button type="submit" class="btn btn-primary btn-lg w-100 py-3 fw-bold rounded-pill shadow-lg mt-3">
                            Confirm Purchase & Submit
                            <i class="fas fa-arrow-right ms-2"></i>
                        </button>
                    </form>
                </div>
                
                <!-- Trust Badges -->
                <div class="mt-5 pt-4 border-top">
                    <div class="row g-3 text-center">
                        <div class="col-4">
                            <i class="fas fa-shield-alt text-muted opacity-50 mb-2 fa-lg d-block"></i>
                            <span class="small text-muted opacity-75" style="font-size: 0.65rem; font-weight: bold; text-uppercase;">SECURE PAYMENT</span>
                        </div>
                        <div class="col-4 border-start border-end">
                            <i class="fas fa-bolt text-muted opacity-50 mb-2 fa-lg d-block"></i>
                            <span class="small text-muted opacity-75" style="font-size: 0.65rem; font-weight: bold; text-uppercase;">INSTANT ACCESS</span>
                        </div>
                        <div class="col-4">
                            <i class="fas fa-user-check text-muted opacity-50 mb-2 fa-lg d-block"></i>
                            <span class="small text-muted opacity-75" style="font-size: 0.65rem; font-weight: bold; text-uppercase;">VERIFIED SELLER</span>
                        </div>
                    </div>
                </div>

                <!-- Support -->
                <div class="mt-4 text-center">
                    <p class="small text-muted">Need help? <a href="https://wa.me/252634844506" class="text-primary fw-bold text-decoration-none"><i class="fab fa-whatsapp me-1"></i>Contact support on WhatsApp</a></p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}