{% extends 'base.html' %}

{% block title %}Custom Order #{{ order.id }} - {{ block.super }}{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row">
        <!-- Order Details -->
        <div class="col-md-4">
            <div class="card mb-4">
                <div class="card-header bg-primary text-white">
                    <h5 class="card-title mb-0">Anfrage-Details</h5>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled">
                        <li class="mb-2">
                            <strong>Status:</strong>
                            <span class="badge bg-{{ order.status }}">
                                {{ order.get_status_display }}
                            </span>
                        </li>
                        <li class="mb-2">
                            <strong>Character:</strong>
                            {{ order.character_name }}
                        </li>
                        <li class="mb-2">
                            <strong>Typ:</strong>
                            {{ order.get_fursuit_type_display }}
                        </li>
                        <li class="mb-2">
                            <strong>Stil:</strong>
                            {{ order.get_style_display }}
                        </li>
                        <li class="mb-2">
                            <strong>Budget:</strong>
                            {{ order.budget_range }}
                        </li>
                        {% if order.deadline_request %}
                        <li class="mb-2">
                            <strong>Gewünschter Termin:</strong>
                            {{ order.deadline_request }}
                        </li>
                        {% endif %}
                        <li class="mb-2">
                            <strong>Bestelldatum:</strong>
                            {{ order.created|date:"d.m.Y" }}
                        </li>
                    </ul>

                    {% if order.quoted_price %}
                    <div class="alert alert-info">
                        <h6 class="alert-heading">Angebot</h6>
                        <p class="mb-0">{{ order.quoted_price }} €</p>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Character Details -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">Character-Details</h5>
                </div>
                <div class="card-body">
                    <h6>Beschreibung</h6>
                    <p>{{ order.character_description }}</p>

                    {% if order.reference_images %}
                    <h6>Referenzbilder</h6>
                    <img data-src="{{ order.reference_images.url }}" class="img-fluid rounded furry-lazy-image" alt="Referenzbild">
                    {% endif %}

                    <h6 class="mt-3">Farbwünsche</h6>
                    <p>{{ order.color_preferences }}</p>

                    {% if order.special_requests %}
                    <h6>Besondere Wünsche</h6>
                    <p>{{ order.special_requests }}</p>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Progress Timeline -->
        <div class="col-md-8">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">Fortschritt</h5>
                    {% if user.is_staff %}
                    <a href="{% url 'add_progress_update' order.id %}" class="btn btn-primary btn-sm">
                        <i class="bi bi-plus"></i> Update hinzufügen
                    </a>
                    {% endif %}
                </div>
                <div class="card-body">
                    {% if progress_updates %}
                    <div class="timeline">
                        {% for update in progress_updates %}
                        <div class="timeline-item">
                            <div class="timeline-marker {% if update.completed %}bg-success{% endif %}"></div>
                            <div class="timeline-content">
                                <h6 class="mb-2">
                                    {{ update.get_stage_display }}
                                    {% if update.completed %}
                                    <i class="bi bi-check-circle-fill text-success"></i>
                                    {% endif %}
                                </h6>
                                <p>{{ update.description }}</p>
                                {% if update.image %}
                                <img data-src="{{ update.image.url }}" class="img-fluid rounded mb-2 furry-lazy-image" alt="Fortschrittsbild">
                                {% endif %}
                                <small class="text-muted">
                                    {{ update.created|date:"d.m.Y H:i" }}
                                </small>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    {% else %}
                    <div class="text-center py-4">
                        <i class="bi bi-clock text-muted" style="font-size: 2rem;"></i>
                        <p class="mt-2">Noch keine Fortschritts-Updates vorhanden.</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.timeline {
    position: relative;
    padding: 20px 0;
}

.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 15px;
    height: 100%;
    width: 2px;
    background: #e9ecef;
}

.timeline-item {
    position: relative;
    margin-bottom: 30px;
    padding-left: 40px;
}

.timeline-marker {
    position: absolute;
    left: 7px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #dee2e6;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px #dee2e6;
}

.timeline-content {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 4px;
}

.badge.bg-pending { background-color: #ffc107; }
.badge.bg-quoted { background-color: #17a2b8; }
.badge.bg-approved { background-color: #28a745; }
.badge.bg-in_progress { background-color: #007bff; }
.badge.bg-ready { background-color: #20c997; }
.badge.bg-shipped { background-color: #6f42c1; }
.badge.bg-completed { background-color: #28a745; }
.badge.bg-cancelled { background-color: #dc3545; }
</style>
{% endblock %}