{% extends 'base.html' %}
{% load manufacture_extras %}

{% block title %}Manufacturing Order - {{ manufacturing_order.order_number }}{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="h3 mb-0">
        <i class="bi bi-tools me-2"></i>
        Manufacturing Order
    </h1>
    <div>
        <a href="{% url 'manufacture:manufacture_list' %}" class="btn btn-outline-secondary me-2">
            <i class="bi bi-arrow-left me-2"></i>
            Back to List
        </a>
        {% if user.is_superuser or user.is_staff %}
        <a href="{% url 'manufacture:manufacture_edit' manufacturing_order.pk %}" class="btn btn-primary">
            <i class="bi bi-pencil me-2"></i>
            Edit
        </a>
        {% endif %}
    </div>
</div>

<div class="row">
    <div class="col-md-8">
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="card-title mb-0">Order Details</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <p><strong>Order Number:</strong> {{ manufacturing_order.order_number }}</p>
                        <p><strong>Date:</strong> {{ manufacturing_order.date|date:"d/m/Y" }}</p>
                        <p><strong>Status:</strong> 
                            <span class="badge bg-{% if manufacturing_order.status == 'completed' %}success{% elif manufacturing_order.status == 'in_progress' %}warning{% else %}secondary{% endif %}">
                                {{ manufacturing_order.get_status_display }}
                            </span>
                        </p>
                    </div>
                    <div class="col-md-6">
                        <p><strong>Product:</strong> {{ manufacturing_order.product.name }}</p>
                        <p><strong>Quantity:</strong> {{ manufacturing_order.quantity }}</p>
                        <p><strong>Created By:</strong> {{ manufacturing_order.created_by.get_full_name|default:"N/A" }}</p>
                    </div>
                </div>
                
                {% if manufacturing_order.notes %}
                <div class="mt-3">
                    <strong>Notes:</strong>
                    <p class="mt-2">{{ manufacturing_order.notes }}</p>
                </div>
                {% endif %}
            </div>
        </div>
        
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">Cost Information</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4">
                        <div class="text-center">
                            <h6 class="text-muted">Labor Cost</h6>
                            <h4 class="text-primary">Rp {{ manufacturing_order.labor_cost|format_currency }}</h4>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="text-center">
                            <h6 class="text-muted">Overhead Cost</h6>
                            <h4 class="text-warning">Rp {{ manufacturing_order.overhead_cost|format_currency }}</h4>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="text-center">
                            <h6 class="text-muted">Total Cost</h6>
                            <h4 class="text-success">Rp {{ manufacturing_order.total_cost|format_currency }}</h4>
                        </div>
                    </div>
                </div>
                
                <div class="text-center mt-3">
                    <h6 class="text-muted">Unit Cost</h6>
                    <h5 class="text-info">Rp {{ manufacturing_order.get_unit_cost|format_currency }}</h5>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">Product Information</h5>
            </div>
            <div class="card-body">
                <p><strong>Product Code:</strong> {{ manufacturing_order.product.code }}</p>
                <p><strong>Category:</strong> {{ manufacturing_order.product.category.name|default:"N/A" }}</p>
                <p><strong>Current Stock:</strong> {{ manufacturing_order.product.current_stock }}</p>
                <p><strong>Cost Price:</strong> Rp {{ manufacturing_order.product.cost_price|format_currency }}</p>
                <p><strong>Selling Price:</strong> Rp {{ manufacturing_order.product.selling_price|format_currency }}</p>
            </div>
        </div>
        
        <div class="card mt-3">
            <div class="card-header">
                <h5 class="card-title mb-0">Timestamps</h5>
            </div>
            <div class="card-body">
                <p><strong>Created:</strong> {{ manufacturing_order.created_at|date:"d/m/Y H:i" }}</p>
                <p><strong>Updated:</strong> {{ manufacturing_order.updated_at|date:"d/m/Y H:i" }}</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}