{% extends "base.html" %}

{% block title %}{{ customer.name }}{% endblock %}
{% block page_title %}{{ customer.name }}{% endblock %}
{% block page_subtitle %}Customer profile{% endblock %}

{% block content %}
{% include "partials/breadcrumb.html" %}

<div class="card mb-6">
    <h3 class="text-lg font-semibold mb-4">Customer Details</h3>
    <dl class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
        <div>
            <dt class="text-slate-500">Name</dt>
            <dd class="font-medium text-base">{{ customer.name }}</dd>
        </div>
        <div>
            <dt class="text-slate-500">Mobile Number</dt>
            <dd class="font-medium text-base">{{ customer.mobile_number }}</dd>
        </div>
        <div>
            <dt class="text-slate-500">WhatsApp Number</dt>
            <dd class="font-medium text-base">{{ customer.whatsapp_number|default:"—" }}</dd>
        </div>
        <div>
            <dt class="text-slate-500">Alternate Number</dt>
            <dd class="font-medium text-base">{{ customer.alternate_number|default:"—" }}</dd>
        </div>
        <div class="md:col-span-2">
            <dt class="text-slate-500">Address</dt>
            <dd>{{ customer.address|default:"—" }}</dd>
        </div>
        <div class="md:col-span-2">
            <dt class="text-slate-500">Notes</dt>
            <dd>{{ customer.notes|default:"No notes added." }}</dd>
        </div>
        <div>
            <dt class="text-slate-500">Status</dt>
            <dd>{% if customer.active %}Active{% else %}Inactive{% endif %}</dd>
        </div>
        <div>
            <dt class="text-slate-500">Created</dt>
            <dd>{{ customer.created_at|date:"d M Y, H:i" }}</dd>
        </div>
    </dl>
</div>

<div class="flex flex-wrap gap-3 mb-6">
    {% if can_book_order %}
    <a href="{% url 'orders:create' %}?customer_id={{ customer.pk }}" class="btn-primary">Book an Order</a>
    {% endif %}
    {% if can_manage %}
    <a href="{% url 'customers:edit' customer.pk %}" class="btn-secondary">Edit Customer</a>
    {% if customer.active %}
    <a href="{% url 'customers:deactivate' customer.pk %}" class="btn-secondary">Deactivate</a>
    {% endif %}
    {% endif %}
    <a href="{% url 'customers:list' %}" class="btn-secondary">Back to Customers</a>
</div>

<div class="card">
    <h3 class="text-lg font-semibold mb-4">Order History</h3>
    {% if customer.order_count %}
    <p class="text-sm text-slate-600">{{ customer.order_count }} order(s) on record.</p>
    <a href="{% url 'orders:list' %}?q={{ customer.mobile_number }}" class="btn-secondary mt-3 inline-flex">View Orders</a>
    {% else %}
    <p class="text-sm text-slate-500">No orders yet.</p>
    {% if can_book_order %}
    <a href="{% url 'orders:create' %}?customer_id={{ customer.pk }}" class="btn-primary mt-3 inline-flex">Book First Order</a>
    {% endif %}
    {% endif %}
</div>
{% endblock %}