{% extends 'base.html' %}

{% block title %}Customer - {{ customer.name }}{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="h3 mb-0">
        <i class="bi bi-people me-2"></i>
        Customer Details
    </h1>
    <div>
        <a href="{% url 'inventory:customer_list' %}" class="btn btn-outline-secondary me-2">
            <i class="bi bi-arrow-left me-2"></i>
            Back to List
        </a>
        <a href="#" class="btn btn-primary">
            <i class="bi bi-pencil me-2"></i>
            Edit
        </a>
    </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">Customer Information</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <p><strong>Customer Code:</strong> {{ customer.code }}</p>
                        <p><strong>Name:</strong> {{ customer.name }}</p>
                        <p><strong>Type:</strong> 
                            <span class="badge bg-{% if customer.customer_type == 'corporate' %}primary{% elif customer.customer_type == 'wholesale' %}info{% else %}secondary{% endif %}">
                                {{ customer.get_customer_type_display }}
                            </span>
                        </p>
                        <p><strong>Status:</strong> 
                            <span class="badge bg-{% if customer.is_active %}success{% else %}secondary{% endif %}">
                                {{ customer.is_active|yesno:"Active,Inactive" }}
                            </span>
                        </p>
                    </div>
                    <div class="col-md-6">
                        <p><strong>Contact Person:</strong> {{ customer.contact_person|default:"Not set" }}</p>
                        <p><strong>Email:</strong> {{ customer.email|default:"Not set" }}</p>
                        <p><strong>Phone:</strong> {{ customer.phone|default:"Not set" }}</p>
                        <p><strong>Credit Limit:</strong> Rp {{ customer.credit_limit|floatformat:0 }}</p>
                    </div>
                </div>
                
                {% if customer.address %}
                <div class="mt-3">
                    <strong>Address:</strong>
                    <p class="mt-2">{{ customer.address }}</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">Account Information</h5>
            </div>
            <div class="card-body">
                <p><strong>Customer Since:</strong> {{ customer.created_at|date:"d/m/Y" }}</p>
                <p><strong>Last Updated:</strong> {{ customer.updated_at|date:"d/m/Y H:i" }}</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}