{% extends 'shop/base.html' %}
{% block title %}Checkout - Nana Tradings{% endblock %}

{% block content %}
<div class="container my-5">
    <!-- 🛒 Checkout Header -->
    <div class="text-center mb-5">
        <h1 class="fw-bold"><i class="fas fa-shopping-bag text-success"></i> Checkout</h1>
        <p class="text-muted checkout-subtext">Complete your purchase and enjoy premium dry fruits.</p>
    </div>

    <!-- Step Indicator -->
    <div class="progress mb-4">
        <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
            Review & Confirm Order
        </div>
    </div>

    <div class="row g-4">
        <!-- ✅ Left Column: Order Summary -->
        <div class="col-md-5">
            <div class="order-summary card shadow-lg p-4 rounded-4">
                <h4 class="fw-bold mb-3">Your Order</h4>
                <ul class="list-group mb-3">
                    {% for item in cart_items %}
                    <li class="list-group-item d-flex align-items-center">
                        <img src="{{ item.product.image.url }}" class="order-product-img rounded-3 me-3" alt="{{ item.product.name }}">
                        <div class="w-100 d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="my-0">{{ item.product.name }}</h6>
                                <small class="text-muted">Quantity: {{ item.quantity }}</small>
                            </div>
                            <span class="text-success fw-bold">${{ item.product.price|floatformat:2 }}</span>
                        </div>
                    </li>
                    {% endfor %}
                    <li class="list-group-item d-flex justify-content-between bg-light">
                        <strong>Total (USD)</strong>
                        <strong class="text-success fs-5">${{ total_price|floatformat:2 }}</strong>
                    </li>
                </ul>
            </div>
        </div>

        <!-- ✅ Right Column: Shipping & Payment -->
        <div class="col-md-7">
            <div class="card shadow-lg p-4 rounded-4">
                <h4 class="fw-bold mb-3">Shipping Details</h4>
                <form id="checkoutForm" method="POST" action="{% url 'process_checkout' %}">
                    {% csrf_token %}

                    <div class="mb-3">
                        <label for="fullName" class="form-label fw-semibold"><i class="fas fa-user me-2"></i>Full Name</label>
                        <input type="text" class="form-control" id="fullName" name="full_name" placeholder="John Doe" required>
                    </div>

                    <div class="mb-3">
                        <label for="address" class="form-label fw-semibold"><i class="fas fa-map-marker-alt me-2"></i>Shipping Address</label>
                        <input type="text" class="form-control" id="address" name="address" placeholder="123 Main Street" required>
                    </div>

                    <div class="mb-3">
                        <label for="phone" class="form-label fw-semibold"><i class="fas fa-phone-alt me-2"></i>Phone Number</label>
                        <input type="text" class="form-control" id="phone" name="phone" placeholder="+93 701900324" required>
                    </div>

                    <h4 class="fw-bold mt-4">Payment Method</h4>
                    <div class="payment-options my-3">
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="payment_method" id="creditCard" value="Credit Card" checked>
                            <label class="form-check-label" for="creditCard">
                                <i class="fas fa-credit-card text-primary"></i> Credit Card / Debit Card
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="payment_method" id="paypal" value="PayPal">
                            <label class="form-check-label" for="paypal">
                                <i class="fab fa-paypal text-info"></i> PayPal
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="payment_method" id="cod" value="Cash on Delivery">
                            <label class="form-check-label" for="cod">
                                <i class="fas fa-hand-holding-usd text-success"></i> Cash on Delivery
                            </label>
                        </div>
                    </div>

                    <button type="submit" class="btn btn-lg btn-success w-100 fw-bold mt-4">
                        <i class="fas fa-check-circle me-2"></i> Place Order
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- ✅ Include SweetAlert for Confirmation -->
<script>
    document.getElementById("checkoutForm").addEventListener("submit", function(event) {
        event.preventDefault();
        let form = this;

        // Detect if Dark Mode is active
        let isDarkMode = document.body.classList.contains("dark-mode");

        Swal.fire({
            title: "Confirm Order",
            text: "Are you sure you want to place this order?",
            icon: "warning",
            background: isDarkMode ? "#2b2b2b" : "#fff", /* Dark mode background */
            color: isDarkMode ? "#fff" : "#000", /* Dark mode text color */
            showCancelButton: true,
            confirmButtonColor: isDarkMode ? "#00e676" : "#28a745", /* Green in both modes */
            cancelButtonColor: isDarkMode ? "#ff4d4d" : "#d33", /* Red in both modes */
            confirmButtonText: "Yes, Place Order!"
        }).then((result) => {
            if (result.isConfirmed) {
                form.submit();  // ✅ Proceed with form submission
            }
        });
    });
</script>


<!-- ✅ Custom Styling -->
<style>
/* 🌟 Dark Mode Implementation */
.dark-mode .checkout-heading, .dark-mode .order-heading {
    color: #00e676;
}

.dark-mode .checkout-subtext, .dark-mode .order-product-quantity, .dark-mode .total-text {
    color: #bbb;
}

.dark-mode .checkout-form-card, .dark-mode .order-summary {
    background: #2b2b2b;
    color: white;
}

.dark-mode .order-item {
    background: #333;
    color: white;
    border-color: #444;
}

.dark-mode .total-amount {
    background: #444;
    color: white;
}

.dark-mode .checkout-input {
    background: #333;
    color: white;
    border-color: #00c853;
}

.dark-mode .payment-options .form-check {
    background: #444;
    color: white;
}

/* ✅ Order Summary Styling */
.order-summary {
    background: #f8f9fa;
    border-left: 5px solid #148818;
    border-radius: 12px;
    transition: all 0.3s ease-in-out;
    margin-bottom: 20px;
}

/* 📸 Order Product Image */
.order-product-img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 8px;
}

/* 🛍️ Checkout Form Styling */
.checkout-form-card {
    background: #fff;
    transition: all 0.3s ease-in-out;
    border-radius: 12px;
}

/* 📝 Form Inputs */
.checkout-input {
    border: 2px solid #148818;
    border-radius: 8px;
    padding: 10px;
    font-size: 16px;
}

/* 🔘 Payment Options */
.payment-options .form-check {
    background: #f8f9fa;
    padding: 10px;
    border-radius: 6px;
    transition: all 0.3s ease-in-out;
}

.payment-options .form-check:hover {
    background: #e9ecef;
    transform: scale(1.02);
}

/* ✅ Order Placement Button */
.place-order-btn {
    background: linear-gradient(135deg, #148818, #0f6f12);
    border: none;
}

.place-order-btn:hover {
    background: linear-gradient(135deg, #0f6f12, #148818);
    transform: scale(1.03);
}
/* 🌙 Ensure Subtext is Visible in Dark Mode */
.dark-mode .checkout-subtext {
    color: #e0e0e0 !important;  /* Light gray for better visibility */
}
/* 🎯 Responsive Design */
@media (max-width: 768px) {
    .order-summary {
        margin-bottom: 20px;
    }
}

</style>


{% endblock %}