{% extends "base.html" %}

{% block title %}Riwayat Reparasi - {{ customer.nama }}{% endblock %}
{% block page_title %}Riwayat Reparasi Pelanggan{% endblock %}

{% block content %}
<div class="space-y-4 max-w-5xl mx-auto">

    <a href="{{ url_for('customers') }}" class="text-sm text-gray-600 hover:text-gray-800">
        <i class="fas fa-arrow-left mr-1"></i>Kembali ke Pelanggan
    </a>

    <!-- Customer Info -->
    <div class="bg-white rounded-xl shadow overflow-hidden">
        <div class="bg-gradient-to-r from-blue-600 to-purple-600 text-white p-4 sm:p-6 flex items-center gap-4">
            <div class="w-14 h-14 rounded-full bg-white/20 flex items-center justify-center text-2xl font-bold">
                {{ customer.nama[:1]|upper }}
            </div>
            <div class="flex-1">
                <p class="text-xs uppercase opacity-80">Pelanggan</p>
                <p class="text-xl font-bold">{{ customer.nama }}</p>
                <p class="text-xs opacity-90">
                    <i class="fas fa-phone mr-1"></i>{{ customer.no_hp or '-' }}
                    &nbsp; <i class="fas fa-map-marker-alt mr-1"></i>{{ customer.alamat or '-' }}
                </p>
            </div>
            <div class="text-right">
                <p class="text-xs opacity-80">Total Reparasi</p>
                <p class="text-2xl font-bold">{{ history|length }}</p>
            </div>
        </div>
    </div>

    <!-- Timeline -->
    <div class="bg-white rounded-xl shadow p-4 sm:p-6">
        <h3 class="font-bold text-gray-800 mb-4">
            <i class="fas fa-history text-purple-600 mr-1"></i>Riwayat Reparasi (Rekam Servis)
        </h3>

        {% if history %}
        <div class="space-y-3">
            {% for r in history %}
            <a href="{{ url_for('repair_detail', id=r.id) }}"
               class="block border rounded-lg p-3 sm:p-4 hover:shadow-md hover:border-purple-400 transition">
                <div class="flex flex-wrap justify-between items-start gap-2 mb-2">
                    <div>
                        <p class="font-mono font-bold text-blue-700">{{ r.nomor_service }}</p>
                        <p class="text-xs text-gray-500">
                            <i class="far fa-calendar mr-1"></i>{{ r.tanggal_masuk.strftime('%d %b %Y') }}
                            {% if r.tanggal_selesai %} &rarr; {{ r.tanggal_selesai.strftime('%d %b %Y') }}{% endif %}
                        </p>
                    </div>
                    <div class="text-right">
                        <span class="px-2 py-0.5 text-xs font-semibold rounded-full
                            {% if r.status == 'Diambil' %}bg-purple-100 text-purple-800
                            {% elif r.status == 'Selesai' %}bg-green-100 text-green-800
                            {% elif r.status == 'Perbaikan' %}bg-blue-100 text-blue-800
                            {% elif r.status == 'Batal' %}bg-red-100 text-red-700
                            {% else %}bg-gray-100 text-gray-700{% endif %}">
                            {{ r.status }}
                        </span>
                        <p class="text-xs text-gray-500 mt-1">Bayar: <b>{{ r.status_bayar }}</b></p>
                    </div>
                </div>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 text-sm">
                    <div>
                        <p class="font-bold text-gray-900">{{ r.nama_barang }}
                            {% if r.merk %}<span class="text-gray-500 font-normal">({{ r.merk }}{% if r.tipe %} {{ r.tipe }}{% endif %})</span>{% endif %}
                        </p>
                        {% if r.serial_number %}
                        <p class="text-xs font-mono text-blue-700"><i class="fas fa-barcode mr-1"></i>SN: {{ r.serial_number }}</p>
                        {% endif %}
                        <p class="text-xs text-gray-600 mt-1 line-clamp-2">
                            <b>Keluhan:</b> {{ r.keluhan }}
                        </p>
                    </div>
                    <div class="sm:text-right">
                        <p class="text-xs text-gray-500">Total Biaya</p>
                        <p class="text-lg font-bold text-gray-900">Rp {{ "{:,.0f}".format(r.total_biaya or 0) }}</p>
                        {% if r.sisa_tagihan > 0 %}
                        <p class="text-xs text-red-600 font-semibold">Sisa: Rp {{ "{:,.0f}".format(r.sisa_tagihan) }}</p>
                        {% endif %}
                        {% if r.actions %}
                        <p class="text-xs text-gray-500 mt-1">{{ r.actions|length }} tindakan tercatat</p>
                        {% endif %}
                    </div>
                </div>
            </a>
            {% endfor %}
        </div>
        {% else %}
        <div class="py-10 text-center text-gray-400">
            <i class="fas fa-tools text-5xl mb-3"></i>
            <p>Belum ada riwayat reparasi untuk pelanggan ini.</p>
            <a href="{{ url_for('repairs') }}" class="inline-block mt-3 px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg text-sm font-semibold">
                <i class="fas fa-plus mr-1"></i>Buat Order Reparasi
            </a>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}