{% extends 'adminapp/master.html' %}
{% load static %}

{% block content %}
<div class="page-content">
    <div class="container-fluid">

        <!-- Page Header -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box d-flex align-items-center justify-content-between">
                    <h4 class="mb-0 fw-semibold"><i class="fas fa-shopping-cart"></i> Order Details</h4>
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item">
                            <a href="{% url 'manageorder' %}" class="text-decoration-none">
                                <i class="fas fa-list"></i> Manage Orders
                            </a>
                        </li>
                        <li class="breadcrumb-item active text-primary">Order #{{ order.id }}</li>
                    </ol>
                </div>
            </div>
        </div>

        <div class="row ">
            <!-- Order Status Update -->
            <div class="col-lg-12">
                <div class="card shadow">
                    <div class="card-header">
                        <h5 class="card-title text-center mb-0">Update Order Status</h5>
                    </div>
                    
                    <div class="card-body">
                        <form method="POST" action="{% url 'update_order_status' order.id %}">
                            {% csrf_token %}
                            <div class="mb-3">
                                <label class="form-label"><strong>Status:</strong></label>
                                <select name="status" class="form-control"
                                    {% if order.status in "cancelled,completed" %}disabled{% endif %}>
                                    <option value="pending" {% if order.status == "pending" %}selected{% endif %}>Pending</option>
                                    <option value="processing" {% if order.status == "processing" %}selected{% endif %}>Processing</option>
                                    <option value="completed" {% if order.status == "completed" %}selected{% endif %}>Completed</option>
                                    <option value="cancelled" {% if order.status == "cancelled" %}selected{% endif %}
                                        {% if order.status in "processing,completed" %}disabled{% endif %}>Cancelled</option>
                                </select>
                            </div>
                            {% if order.status not in "cancelled,completed" %}
                                <button type="submit" class="btn btn-primary"><i class="fas fa-check-circle"></i> Update</button>
                            {% else %}
                                <p class="text-danger"><strong>Status cannot be changed for a completed or cancelled order.</strong></p>
                            {% endif %}
                        </form>
                    </div>
                </div>
            </div>
<!-- Order & Client Information -->
<div class="col-lg-6">
    <div class="card shadow">
        <div class="card-header">
            <h5 class="card-title text-center mb-0">Order & Client Details</h5>
        </div>
        <div class="card-body">
            <h5><strong> Order Details :- </strong></h5>
            <p><strong>Order ID:</strong> {{ order.id }}</p>
            <p><strong>Order Date:</strong> {{ order.created_at|date:"M d, Y - H:i A" }}</p>
            <p><strong>Completion Date:</strong> {{ order.ad_completion_date|default:"N/A" }}</p>
            
            <p><strong>Order Status:</strong> 
                {% if order.status == "pending" %}
                    <span class="badge bg-warning">Pending</span>
                {% elif order.status == "processing" %}
                    <span class="badge bg-info">Processing</span>
                {% elif order.status == "completed" %}
                    <span class="badge bg-success">Completed</span>
                {% elif order.status == "cancelled" %}
                    <span class="badge bg-danger">Cancelled</span>
                {% else %}
                    <span class="badge bg-dark">Unknown</span>
                {% endif %}
            </p>

            <!-- ✅ Payment Status Added Here -->
            <p><strong>Payment Status:</strong>  
                {% if payment_status == "paid" or payment_status == "Paid"  %}
                    <span class="badge bg-success">Paid</span>
                {% elif payment_status == "refunded" or payment_status == "Refunded" %}
                    <span class="badge bg-danger">Refunded</span>
                {% else %}
                    <span class="badge bg-secondary">Unknown</span>
                {% endif %}
            </p>

            {% if order.location_link %}
                <p><strong><i class="fas fa-map-marker-alt"></i> Location:</strong> <a href="{{ order.location_link }}" target="_blank">View Location</a></p>
            {% endif %}
            {% if order.social_media_platform %}
                <p><strong><i class="fas fa-share-alt"></i> Social Media Platform:</strong> {{ order.social_media_platform }}</p>
            {% endif %}

            <hr>
            <h5><strong> Client Details :- </strong></h5>
            <p><strong>Name:</strong> {{ order.full_name }}</p>
            <p><strong>Email:</strong> {{ order.email }}</p>
            <p><strong>Phone:</strong> {{ order.phone }}</p>
        </div>
    </div>
</div>


            <!-- Template Details -->
            <div class="col-lg-6">
                <div class="card shadow">
                    <div class="card-header">
                        <h5 class="card-title text-center mb-0">Template Details</h5>
                    </div>
                    <div class="card-body">
                        <p><strong>Template ID:</strong> {{ order.template_id }}</p>
                        <p><strong>Template Name:</strong> {{ order.template_name }}</p>
                        
                        <p><strong>Ad Type:</strong> {{ order.template_ad_type }}</p>
                        
                        {% if order.template_image %}
                            <p><strong>Selected Template:</strong></p>
                            <img src="{{ order.template_image.url }}" alt="Template Image" class="img-fluid rounded" style="max-width: 300px;">
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- Customization Details -->
<div class="col-lg-6">
    <div class="card shadow">
        <div class="card-header">
            <h5 class="card-title text-center mb-0">Customization Details</h5>
        </div>
        <div class="card-body">
            <p><strong>Customization Title : </strong> {{ order.ad.title|default:"N/A" }}</p>
            <p><strong>Customization Description : </strong> {{ order.ad.description|default:"N/A" }}</p>
            <p><strong>Customization Color : </strong><span style="color:{{ order.ad.color }}; background: {{ order.ad.color }}; padding: 2px 6px; border-radius: 4px;">{{ order.ad.color }}</span></p>
            <p><strong>Customization Style : </strong> {{ order.ad.style|default:"N/A" }}</p>
            <p><strong>Customization Image:</strong></p>
            <img src="{{ order.ad.image.url }}" alt="Template Image" class="img-fluid rounded-3 order-img" style="width: 120px; height: 80px; object-fit: cover;" />
                            
        </div>
    </div>
</div> 


            <!-- Pricing Breakdown -->
            <div class="col-lg-6">
                <div class="card shadow">
                    <div class="card-header">
                        <h5 class="card-title  text-center mb-0">Pricing Breakdown</h5>
                    </div>
                    <div class="card-body">
                        <p><strong>Base Price:</strong>Rs. {{ order.base_price }}</p>
                        <p><strong>Making Charges:</strong>Rs. {{ order.making_charges }}</p>
                        <p><strong>GST Amount:</strong>Rs. {{ order.gst_amount }}</p>
                        <p><strong>Additional Charge:</strong>Rs. {{ order.additional_charge }}</p>
                        <hr>
                        <h5><strong>Total Price:</strong>Rs. {{ order.total_price }}</h5>
                        <p><strong>Payment Method:</strong> {{ order.payment_method }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}
