{% extends "base.html" %}

{% block title %}Reparasi {{ repair.nomor_service }} - {{ app_settings.company_name }}{% endblock %}
{% block page_title %}Kartu Reparasi {{ repair.nomor_service }}{% endblock %}

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

    <div class="flex justify-between items-center">
        <a href="{{ url_for('repairs') }}" class="text-sm text-gray-600 hover:text-gray-800">
            <i class="fas fa-arrow-left mr-1"></i>Kembali ke daftar
        </a>
        {% if repair.customer %}
        <a href="{{ url_for('customer_repair_history', id=repair.customer_id) }}"
           class="text-sm text-purple-600 hover:text-purple-800">
            <i class="fas fa-history mr-1"></i>Riwayat {{ repair.customer.nama }}
        </a>
        {% endif %}
    </div>

    <!-- HEADER CARD (seperti kepala rekam medis) -->
    <div class="bg-white rounded-xl shadow-lg overflow-hidden">
        <div class="bg-gradient-to-r from-purple-600 to-blue-600 text-white p-4 sm:p-6">
            <div class="flex flex-col sm:flex-row justify-between gap-3">
                <div>
                    <p class="text-xs uppercase opacity-80">No. Service</p>
                    <p class="text-2xl font-bold font-mono">{{ repair.nomor_service }}</p>
                    <p class="text-xs mt-1 opacity-90">
                        <i class="far fa-calendar mr-1"></i>Masuk: {{ repair.tanggal_masuk.strftime('%d %b %Y %H:%M') }}
                        {% if repair.tanggal_selesai %}
                        &nbsp;|&nbsp; Selesai: {{ repair.tanggal_selesai.strftime('%d %b %Y %H:%M') }}
                        {% endif %}
                    </p>
                </div>
                <div class="text-right">
                    <p class="text-xs uppercase opacity-80">Status</p>
                    <p class="text-xl font-bold">{{ repair.status }}</p>
                    <p class="text-xs mt-1 opacity-90">Bayar: <b>{{ repair.status_bayar }}</b></p>
                </div>
            </div>
        </div>

        <div class="p-4 sm:p-6 grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
            <div class="bg-gray-50 rounded-lg p-3">
                <p class="text-xs font-semibold text-gray-500 uppercase mb-1"><i class="fas fa-user mr-1"></i>Pelanggan</p>
                <p class="font-bold text-gray-900">{{ repair.customer.nama if repair.customer else '-' }}</p>
                {% if repair.customer %}
                <p class="text-xs text-gray-600">{{ repair.customer.no_hp or '-' }}</p>
                <p class="text-xs text-gray-600">{{ repair.customer.alamat or '-' }}</p>
                {% endif %}
            </div>
            <div class="bg-gray-50 rounded-lg p-3">
                <p class="text-xs font-semibold text-gray-500 uppercase mb-1"><i class="fas fa-box mr-1"></i>Barang</p>
                <p class="font-bold text-gray-900">{{ repair.nama_barang }}</p>
                <p class="text-xs text-gray-700">
                    {% if repair.merk %}Merk: {{ repair.merk }}{% endif %}
                    {% if repair.tipe %} &middot; Tipe: {{ repair.tipe }}{% endif %}
                </p>
                {% if repair.serial_number %}
                <p class="text-xs font-mono text-blue-700 mt-1"><i class="fas fa-barcode mr-1"></i>SN: {{ repair.serial_number }}</p>
                {% endif %}
                {% if repair.kelengkapan %}<p class="text-xs text-gray-600 mt-1">Kelengkapan: {{ repair.kelengkapan }}</p>{% endif %}
                {% if repair.kondisi_fisik %}<p class="text-xs text-gray-600">Kondisi: {{ repair.kondisi_fisik }}</p>{% endif %}
            </div>
        </div>
    </div>

    <!-- REKAM MEDIS: Keluhan + Diagnosa -->
    <div class="bg-white rounded-xl shadow p-4 sm:p-6">
        <h3 class="font-bold text-gray-800 mb-3">
            <i class="fas fa-stethoscope text-red-500 mr-1"></i>Keluhan & Diagnosa
        </h3>
        <form method="POST" action="{{ url_for('update_repair', id=repair.id) }}" class="space-y-3">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                <div>
                    <label class="block text-xs font-semibold text-gray-700 mb-1">Nama Barang *</label>
                    <input type="text" name="nama_barang" value="{{ repair.nama_barang }}" required
                           class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg">
                </div>
                <div class="grid grid-cols-2 gap-2">
                    <div>
                        <label class="block text-xs font-semibold text-gray-700 mb-1">Merk</label>
                        <input type="text" name="merk" value="{{ repair.merk or '' }}"
                               class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-700 mb-1">Tipe</label>
                        <input type="text" name="tipe" value="{{ repair.tipe or '' }}"
                               class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg">
                    </div>
                </div>
                <div>
                    <label class="block text-xs font-semibold text-gray-700 mb-1">Serial Number / IMEI</label>
                    <input type="text" name="serial_number" value="{{ repair.serial_number or '' }}"
                           class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg font-mono">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-gray-700 mb-1">Teknisi</label>
                    <input type="text" name="teknisi" value="{{ repair.teknisi or '' }}"
                           class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-gray-700 mb-1">Kelengkapan</label>
                    <input type="text" name="kelengkapan" value="{{ repair.kelengkapan or '' }}"
                           class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-gray-700 mb-1">Kondisi Fisik</label>
                    <input type="text" name="kondisi_fisik" value="{{ repair.kondisi_fisik or '' }}"
                           class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg">
                </div>
            </div>
            <div>
                <label class="block text-xs font-semibold text-gray-700 mb-1">Keluhan Pelanggan *</label>
                <textarea name="keluhan" rows="2" required
                          class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg">{{ repair.keluhan }}</textarea>
            </div>
            <div>
                <label class="block text-xs font-semibold text-gray-700 mb-1">Diagnosa</label>
                <textarea name="diagnosa" rows="2"
                          class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg">{{ repair.diagnosa or '' }}</textarea>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                <div>
                    <label class="block text-xs font-semibold text-gray-700 mb-1">Estimasi Biaya</label>
                    <input type="number" name="estimasi_biaya" value="{{ repair.estimasi_biaya or 0 }}" step="any" min="0"
                           class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-gray-700 mb-1">Status *</label>
                    <select name="status" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg">
                        {% for s in ['Masuk','Diagnosa','Perbaikan','Selesai','Diambil','Batal'] %}
                        <option value="{{ s }}" {% if repair.status == s %}selected{% endif %}>{{ s }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label class="block text-xs font-semibold text-gray-700 mb-1">Catatan</label>
                    <input type="text" name="catatan" value="{{ repair.catatan or '' }}"
                           class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg">
                </div>
            </div>

            <div class="flex justify-end pt-2 border-t">
                <button type="submit"
                        class="px-5 py-2 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-semibold">
                    <i class="fas fa-save mr-1"></i>Simpan Perubahan
                </button>
            </div>
        </form>
    </div>

    <!-- RIWAYAT TINDAKAN -->
    <div class="bg-white rounded-xl shadow p-4 sm:p-6">
        <h3 class="font-bold text-gray-800 mb-3">
            <i class="fas fa-notes-medical text-green-600 mr-1"></i>Riwayat Tindakan & Biaya
        </h3>

        <!-- Table -->
        <div class="overflow-x-auto rounded-lg border">
            <table class="w-full text-sm">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-3 py-2 text-left text-xs font-semibold text-gray-600">Tanggal</th>
                        <th class="px-3 py-2 text-left text-xs font-semibold text-gray-600">Tindakan</th>
                        <th class="px-3 py-2 text-left text-xs font-semibold text-gray-600">Sparepart</th>
                        <th class="px-3 py-2 text-left text-xs font-semibold text-gray-600">Teknisi</th>
                        <th class="px-3 py-2 text-right text-xs font-semibold text-gray-600">Jasa</th>
                        <th class="px-3 py-2 text-right text-xs font-semibold text-gray-600">Sparepart</th>
                        <th class="px-3 py-2 text-right text-xs font-semibold text-gray-600">Total</th>
                        <th class="px-3 py-2 text-center text-xs font-semibold text-gray-600"></th>
                    </tr>
                </thead>
                <tbody class="divide-y">
                    {% for a in repair.actions %}
                    <tr>
                        <td class="px-3 py-2 text-xs text-gray-600">{{ a.tanggal.strftime('%d/%m/%Y %H:%M') }}</td>
                        <td class="px-3 py-2 text-sm text-gray-900">
                            {{ a.tindakan }}
                            {% if a.catatan %}<p class="text-xs text-gray-500 italic">{{ a.catatan }}</p>{% endif %}
                        </td>
                        <td class="px-3 py-2 text-xs text-gray-600">{{ a.sparepart or '-' }}</td>
                        <td class="px-3 py-2 text-xs text-gray-600">{{ a.teknisi or '-' }}</td>
                        <td class="px-3 py-2 text-right text-sm">Rp {{ "{:,.0f}".format(a.biaya_jasa or 0) }}</td>
                        <td class="px-3 py-2 text-right text-sm">Rp {{ "{:,.0f}".format(a.biaya_sparepart or 0) }}</td>
                        <td class="px-3 py-2 text-right text-sm font-bold">Rp {{ "{:,.0f}".format(a.total or 0) }}</td>
                        <td class="px-3 py-2 text-center">
                            <a href="{{ url_for('delete_repair_action', id=repair.id, aid=a.id) }}"
                               onclick="return confirm('Hapus tindakan ini? Total biaya akan dikurangi.')"
                               class="text-red-500 hover:text-red-700" title="Hapus">
                                <i class="fas fa-times"></i>
                            </a>
                        </td>
                    </tr>
                    {% else %}
                    <tr><td colspan="8" class="px-3 py-6 text-center text-gray-400 text-sm">Belum ada tindakan tercatat</td></tr>
                    {% endfor %}
                </tbody>
                {% if repair.actions %}
                <tfoot>
                    <tr class="bg-gray-50 font-bold">
                        <td colspan="6" class="px-3 py-2 text-right">TOTAL</td>
                        <td class="px-3 py-2 text-right">Rp {{ "{:,.0f}".format(repair.total_biaya or 0) }}</td>
                        <td></td>
                    </tr>
                </tfoot>
                {% endif %}
            </table>
        </div>

        <!-- Form Tambah Tindakan -->
        <form method="POST" action="{{ url_for('add_repair_action', id=repair.id) }}"
              class="mt-4 bg-green-50 border border-green-200 rounded-lg p-3 sm:p-4 space-y-3">
            <p class="font-semibold text-sm text-green-800"><i class="fas fa-plus-circle mr-1"></i>Tambah Tindakan</p>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                <div class="md:col-span-2">
                    <label class="block text-xs font-semibold text-gray-700 mb-1">Tindakan *</label>
                    <textarea name="tindakan" rows="2" required placeholder="Ganti IC power, cleaning kipas, flash ROM..."
                              class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg"></textarea>
                </div>
                <div>
                    <label class="block text-xs font-semibold text-gray-700 mb-1">Sparepart Digunakan</label>
                    <input type="text" name="sparepart" placeholder="IC power, LCD, Baterai..."
                           class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-gray-700 mb-1">Teknisi</label>
                    <input type="text" name="teknisi" value="{{ repair.teknisi or '' }}"
                           class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-gray-700 mb-1">Biaya Jasa</label>
                    <input type="number" name="biaya_jasa" value="0" step="any" min="0"
                           class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-gray-700 mb-1">Biaya Sparepart</label>
                    <input type="number" name="biaya_sparepart" value="0" step="any" min="0"
                           class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg">
                </div>
                <div class="md:col-span-2">
                    <label class="block text-xs font-semibold text-gray-700 mb-1">Catatan</label>
                    <input type="text" name="catatan" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg">
                </div>
            </div>
            <div class="flex justify-end">
                <button type="submit"
                        class="px-5 py-2 text-sm bg-green-600 hover:bg-green-700 text-white rounded-lg font-semibold">
                    <i class="fas fa-plus mr-1"></i>Catat Tindakan
                </button>
            </div>
        </form>
    </div>

    <!-- PEMBAYARAN -->
    <div class="bg-white rounded-xl shadow p-4 sm:p-6">
        <h3 class="font-bold text-gray-800 mb-3">
            <i class="fas fa-money-bill-wave text-amber-500 mr-1"></i>Pembayaran
        </h3>
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 text-center mb-4">
            <div class="bg-gray-50 rounded-lg p-3">
                <p class="text-xs text-gray-500">Total Biaya</p>
                <p class="text-lg font-bold text-gray-900">Rp {{ "{:,.0f}".format(repair.total_biaya or 0) }}</p>
            </div>
            <div class="bg-green-50 rounded-lg p-3">
                <p class="text-xs text-gray-500">Sudah Dibayar</p>
                <p class="text-lg font-bold text-green-700">Rp {{ "{:,.0f}".format(repair.jumlah_dibayar or 0) }}</p>
            </div>
            <div class="bg-red-50 rounded-lg p-3">
                <p class="text-xs text-gray-500">Sisa Tagihan</p>
                <p class="text-lg font-bold text-red-700">Rp {{ "{:,.0f}".format(repair.sisa_tagihan) }}</p>
            </div>
        </div>
        {% if repair.status_bayar != 'Lunas' and repair.total_biaya > 0 %}
        <form method="POST" action="{{ url_for('bayar_repair', id=repair.id) }}"
              class="flex flex-col sm:flex-row gap-2 items-stretch sm:items-end">
            <div class="flex-1">
                <label class="block text-xs font-semibold text-gray-700 mb-1">Jumlah Bayar</label>
                <input type="number" name="jumlah" step="any" min="1" required
                       value="{{ repair.sisa_tagihan|int }}"
                       class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg">
            </div>
            <button type="submit"
                    class="px-5 py-2 text-sm bg-amber-500 hover:bg-amber-600 text-white rounded-lg font-semibold">
                <i class="fas fa-check mr-1"></i>Terima Pembayaran
            </button>
        </form>
        {% else %}
        <p class="text-center text-sm text-green-700 font-semibold">
            <i class="fas fa-check-circle"></i>
            {% if repair.total_biaya <= 0 %}Belum ada biaya tercatat.{% else %}Pembayaran LUNAS.{% endif %}
        </p>
        {% endif %}
    </div>
</div>
{% endblock %}