{% extends "website/home/base.html" %}
{% block title %} Checkout {% endblock %}
{% load static %}
{% block content %}

<style>
    .payment-card input[type="radio"] {
        display: none;
    }

    .payment-card .card {
        cursor: pointer;
        border: 2px solid transparent;
        transition: all 0.3s ease-in-out;
        border-radius: 12px;
    }

    .payment-card input[type="radio"]:checked+.card {
        border: 1px solid #ed3f3f;
        background-color: #f8f9fa;
    }
</style>

<div class="container my-5">

    <form method="post">
        <div class="row g-4">
            <!-- Left: Billing & Shipping Form -->
            <div class="col-lg-7">
                <div class="card border-1">
                    <div class="card-body">
                        <h4 class="mb-3 bg-light rounded p-2">Billing Details</h4>

                        {% csrf_token %}
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Full Name</label>
                                <input type="text" name="full_name" class="form-control" placeholder="John Doe"
                                    required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Phone</label>
                                <input type="text" name="phone" class="form-control" placeholder="+8801XXXXXXXXX"
                                    required>
                            </div>
                            <div class="col-12">
                                <label class="form-label">Email (Optional)</label>
                                <input type="email" name="email" class="form-control" placeholder="example@email.com">
                            </div>
                            <div class="col-12">
                                <label class="form-label">Address</label>
                                <textarea name="address" class="form-control" rows="2"
                                    placeholder="Street address, City, ZIP" required></textarea>
                            </div>

                        </div>

                        <br>
 
                        <h5 class="mb-3">Shipping Method</h5>
                         <div class="row g-3">

                            <!-- Dhaka Inside -->
                            <div class="col-6 col-md-6 col-lg-3">
                                <label class="payment-card w-100">
                                    <input type="radio" name="shipping_method" value="{{ business.shipping_cost_inside }}" checked>
                                    <div class="card shadow-sm text-center p-3 h-100">
                                        <h6 class="mb-0">ঢাকার ভিতরে</h6>
                                        <h5> Tk. {{ business.shipping_cost_inside }} </h5>
                                    </div>
                                </label>
                            </div>

                            <!-- Dhaka Outside -->
                            <div class="col-6 col-md-6 col-lg-3">
                                <label class="payment-card w-100">
                                    <input type="radio" name="shipping_method" value="{{ business.shipping_cost_outside }}">
                                    <div class="card shadow-sm text-center p-3 h-100">
                                        <h6 class="mb-0">ঢাকার বাইরে</h6>
                                        <h5> Tk. {{ business.shipping_cost_outside }} </h5>
                                    </div>
                                </label>
                            </div>

                        </div>



                        <br>
                        <h5 class="mb-3">Payment Method</h5>
                        <div class="row g-3">

                            <!-- COD -->
                            <div class="col-6 col-md-3">
                                <label class="payment-card w-100">
                                    <input type="radio" name="payment_method" value="cod" checked>
                                    <div class="card shadow-sm text-center p-3 h-100">
                                        <img src="/static/website/images/cod.jpg" alt="Cash on Delivery"
                                            class="img-fluid mb-2" style="height:85px;">
                                        <!-- <h6 class="mb-0">Cash on Delivery</h6> -->
                                    </div>
                                </label>
                            </div>

                            <!-- bKash -->
                            <div class="col-6 col-md-3">
                                <label class="payment-card w-100">
                                    <input type="radio" name="payment_method" value="bkash">
                                    <div class="card shadow-sm text-center p-3 h-100">
                                        <img src="/static/website/images/bkash.png" alt="bKash" class="img-fluid mb-2"
                                            style="height:85px;">
                                        <!-- <h6 class="mb-0">bKash</h6> -->
                                    </div>
                                </label>
                            </div>

                            <!-- Nagad -->
                            <div class="col-6 col-md-3">
                                <label class="payment-card w-100">
                                    <input type="radio" name="payment_method" value="nagad">
                                    <div class="card shadow-sm text-center p-3 h-100">
                                        <img src="/static/website/images/nagad.png" alt="Nagad" class="img-fluid mb-2"
                                            style="height:85px;">
                                        <!-- <h6 class="mb-0">Nagad</h6> -->
                                    </div>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right: Order Summary -->
            <div class="col-lg-5">
                <div class="card border-1">
                    <div class="card-body p-3">
                        <h4 class="mb-3 bg-light rounded p-2">Order Summary</h4>



                        <ul class="list-group list-group-flush mb-3">
                            {% for item in cart_items %}
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                
                                <!-- Left Section: Product Image -->
                                <div class="d-flex align-items-center">
                                <img src="{{ item.product.product_image.url }}" alt="{{ item.product.name_english }}" 
                                    class="rounded-1 me-3 border p-1" style="width: 50px; height: 50px; object-fit: cover;">
                                
                                <!-- Product Info -->
                                <div>
                                    <strong>{{ item.product.name_english }}</strong><br>
                                    <small>Qty: {{ item.quantity }}</small>
                                </div>
                                </div>

                                <!-- Right Section: Price -->
                                <span style="width:130px;text-align: right;">
                                {% if item.product.discount_price %}
                                    ৳ {{ item.product.discount_price|floatformat:2 }}
                                {% else %}
                                    ৳ {{ item.product.unit_price|floatformat:2 }}
                                {% endif %}
                                </span>
                                
                            </li>
                            {% endfor %}
                            </ul>

                     
                  
                        <div class="d-flex justify-content-between mb-2">
                            <span>Subtotal</span>
                            <strong>{{ subtotal|floatformat:2 }} ৳</strong>
                        </div>


                        <div class="d-flex justify-content-between mb-2 text-danger">
                            <span>Discount Coupon</span>
                            <strong>- 0 ৳</strong>
                        </div>
 

                        <div class="d-flex justify-content-between mb-2">
                            <span>Shipping</span>
                            <strong class="order-summary-shipping">{{ shipping|floatformat:2 }} ৳</strong>
                        </div> 
                        <hr>
                        <div class="d-flex justify-content-between fs-5">
                            <span>Total</span>
                            <strong class="order-summary-total text-dark">{{ total|floatformat:2 }} ৳</strong>
                        </div>
                        <br>
                        
                        <!-- Coupon Code -->
                        <!-- {% csrf_token %}
                        <div class="input-group">
                            <input type="text" name="coupon_code" class="form-control" placeholder="Enter coupon code">
                            <button type="submit" class="btn btn-danger">Apply</button>
                        </div>
                        <br> -->


                        <!-- <button type="submit" class="btn btn-primary w-100 mt-4 py-2">
                            Place Order
                        </button> -->

                        <button type="submit" class="btn btn-primary w-100 mt-4 py-2" id="placeOrderBtn">
                            <span class="btn-text">Place Order</span>
                            <span class="spinner-border spinner-border-sm ms-2 d-none" role="status" aria-hidden="true"></span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>



<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){

    function updateTotals(shipping_cost){
        // Subtotal থেকে read করা
        var subtotal = parseFloat("{{ subtotal }}") || 0;

        // Discount coupon (যদি dynamic না হয়, সেট করা হলো fixed)
        var discount = parseFloat("{{ discount_amount|default:0 }}") || 0;

        // Shipping cost
        shipping_cost = parseFloat(shipping_cost) || 0;

        // Update Shipping in Order Summary
        $(".order-summary-shipping").text(shipping_cost.toFixed(2) + " ৳");

        // Calculate Total
        var total = subtotal - discount + shipping_cost;

        // Update Total
        $(".order-summary-total").text(total.toFixed(2) + " ৳");
    }

    // Initial update
    updateTotals($("input[name='shipping_method']:checked").val());

    // On shipping method change
    $("input[name='shipping_method']").change(function(){
        var selectedShipping = $(this).val();
        updateTotals(selectedShipping);
    });


     // --- Place Order Button Loading Effect ---
    $("#placeOrderBtn").on("click", function(e){
        e.preventDefault(); // Stop immediate form submit
        
        let btn = $(this);
        let spinner = btn.find(".spinner-border");
        let text = btn.find(".btn-text");

        // Disable button and show loading
        btn.prop("disabled", true);
        spinner.removeClass("d-none");
        text.text("Placing Order...");

        // Simulate 3-second loading, then submit
        setTimeout(function(){
            btn.closest("form")[0].submit();
        }, 3000);
    });

});
</script>

{% endblock %}