{% extends "base.html" %}

{% block title %}Jasa Reparasi - {{ app_settings.company_name }}{% endblock %}
{% block page_title %}Jasa Reparasi{% endblock %}

{% macro status_badge(s) -%}
    {% if s == 'Masuk' %}<span class="px-2 py-0.5 text-xs font-semibold rounded-full bg-gray-100 text-gray-700">Masuk</span>
    {% elif s == 'Diagnosa' %}<span class="px-2 py-0.5 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">Diagnosa</span>
    {% elif s == 'Perbaikan' %}<span class="px-2 py-0.5 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">Perbaikan</span>
    {% elif s == 'Selesai' %}<span class="px-2 py-0.5 text-xs font-semibold rounded-full bg-green-100 text-green-800">Selesai</span>
    {% elif s == 'Diambil' %}<span class="px-2 py-0.5 text-xs font-semibold rounded-full bg-purple-100 text-purple-800">Diambil</span>
    {% elif s == 'Batal' %}<span class="px-2 py-0.5 text-xs font-semibold rounded-full bg-red-100 text-red-700">Batal</span>
    {% else %}<span class="px-2 py-0.5 text-xs font-semibold rounded-full bg-gray-100 text-gray-700">{{ s }}</span>{% endif %}
{%- endmacro %}

{% block content %}
<div class="space-y-4">

    <!-- STATS -->
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
        <div class="bg-white rounded-xl shadow p-4 border-l-4 border-blue-500">
            <p class="text-xs text-gray-500 font-semibold">Sedang Dikerjakan</p>
            <p class="text-2xl font-bold text-blue-600">{{ stats.masuk }}</p>
        </div>
        <div class="bg-white rounded-xl shadow p-4 border-l-4 border-green-500">
            <p class="text-xs text-gray-500 font-semibold">Selesai (Belum Diambil)</p>
            <p class="text-2xl font-bold text-green-600">{{ stats.selesai }}</p>
        </div>
        <div class="bg-white rounded-xl shadow p-4 border-l-4 border-purple-500">
            <p class="text-xs text-gray-500 font-semibold">Sudah Diambil</p>
            <p class="text-2xl font-bold text-purple-600">{{ stats.diambil }}</p>
        </div>
    </div>

    <!-- LIST -->
    <div class="bg-white rounded-lg sm:rounded-xl shadow-md overflow-hidden">
        <div class="p-3 sm:p-4 lg:p-6 border-b border-gray-200 bg-gradient-to-r from-purple-50 to-blue-100">
            <div class="flex flex-col space-y-3 sm:space-y-4 lg:flex-row lg:items-center lg:justify-between lg:space-y-0">
                <h3 class="text-base sm:text-lg lg:text-xl font-bold text-gray-800">
                    <i class="fas fa-tools text-purple-600 mr-2"></i>Daftar Order Reparasi
                </h3>
                <div class="flex gap-2 flex-wrap">
                    <form method="GET" class="flex gap-2 flex-1 lg:flex-none">
                        <select name="status" onchange="this.form.submit()"
                                class="px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 bg-white">
                            <option value="">Semua Status</option>
                            {% for s in ['Masuk','Diagnosa','Perbaikan','Selesai','Diambil','Batal'] %}
                            <option value="{{ s }}" {% if s == status_filter %}selected{% endif %}>{{ s }}</option>
                            {% endfor %}
                        </select>
                        <input type="text" name="search" value="{{ search }}"
                               placeholder="Cari nota / barang / SN / customer..."
                               class="w-full lg:w-56 px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500">
                    </form>
                    <button onclick="openModal('addRepairModal')"
                            class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg font-semibold text-sm whitespace-nowrap">
                        <i class="fas fa-plus mr-1"></i>Order Baru
                    </button>
                </div>
            </div>
        </div>

        <!-- Mobile -->
        <div class="block lg:hidden divide-y divide-gray-100">
            {% for r in repairs.items %}
            <a href="{{ url_for('repair_detail', id=r.id) }}" class="block p-3 hover:bg-gray-50">
                <div class="flex justify-between items-start mb-1">
                    <div class="flex-1 min-w-0 pr-2">
                        <p class="font-bold text-gray-900 text-sm truncate">{{ r.nomor_service }}</p>
                        <p class="text-xs text-gray-600 truncate">{{ r.customer.nama if r.customer else '-' }}</p>
                    </div>
                    <div>{{ status_badge(r.status) }}</div>
                </div>
                <p class="text-sm font-semibold text-gray-800">{{ r.nama_barang }}{% if r.merk %} ({{ r.merk }}){% endif %}</p>
                {% if r.serial_number %}
                <p class="text-xs text-gray-500"><i class="fas fa-barcode mr-1"></i>SN: {{ r.serial_number }}</p>
                {% endif %}
                <div class="flex justify-between text-xs text-gray-500 mt-1">
                    <span>{{ r.tanggal_masuk.strftime('%d/%m/%Y') }}</span>
                    <span class="font-semibold text-gray-800">Rp {{ "{:,.0f}".format(r.total_biaya or 0) }}</span>
                </div>
            </a>
            {% else %}
            <div class="p-8 text-center text-gray-400">
                <i class="fas fa-tools text-4xl mb-2"></i>
                <p class="text-sm">Belum ada order reparasi</p>
            </div>
            {% endfor %}
        </div>

        <!-- Desktop -->
        <div class="hidden lg:block overflow-x-auto">
            <table class="w-full">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">No. Service</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Tgl Masuk</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Pelanggan</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Barang</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Serial Number</th>
                        <th class="px-4 py-3 text-center text-xs font-semibold text-gray-600 uppercase">Status</th>
                        <th class="px-4 py-3 text-right text-xs font-semibold text-gray-600 uppercase">Total Biaya</th>
                        <th class="px-4 py-3 text-center text-xs font-semibold text-gray-600 uppercase">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    {% for r in repairs.items %}
                    <tr class="hover:bg-gray-50">
                        <td class="px-4 py-3 text-sm font-mono font-bold text-blue-700">{{ r.nomor_service }}</td>
                        <td class="px-4 py-3 text-sm text-gray-600">{{ r.tanggal_masuk.strftime('%d/%m/%Y') }}</td>
                        <td class="px-4 py-3 text-sm text-gray-900">{{ r.customer.nama if r.customer else '-' }}</td>
                        <td class="px-4 py-3 text-sm text-gray-900">
                            {{ r.nama_barang }}{% if r.merk %} <span class="text-gray-500">({{ r.merk }}{% if r.tipe %} {{ r.tipe }}{% endif %})</span>{% endif %}
                        </td>
                        <td class="px-4 py-3 text-sm font-mono text-gray-700">{{ r.serial_number or '-' }}</td>
                        <td class="px-4 py-3 text-center">{{ status_badge(r.status) }}</td>
                        <td class="px-4 py-3 text-sm text-right font-semibold">Rp {{ "{:,.0f}".format(r.total_biaya or 0) }}</td>
                        <td class="px-4 py-3 text-center">
                            <a href="{{ url_for('repair_detail', id=r.id) }}"
                               class="text-blue-600 hover:text-blue-800 mr-2 p-1" title="Detail">
                                <i class="fas fa-file-medical"></i>
                            </a>
                            {% if current_user.role != 'Kasir' and (not r.jumlah_dibayar or r.jumlah_dibayar <= 0) %}
                            <a href="{{ url_for('delete_repair', id=r.id) }}"
                               onclick="return confirm('Hapus order reparasi ini?')"
                               class="text-red-600 hover:text-red-800 p-1" title="Hapus">
                                <i class="fas fa-trash"></i>
                            </a>
                            {% endif %}
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="8" class="px-4 py-8 text-center text-gray-500">
                            <i class="fas fa-tools text-4xl mb-2 text-gray-300"></i>
                            <p>Belum ada order reparasi</p>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        {% if repairs.pages > 1 %}
        <div class="p-3 sm:p-4 border-t bg-gray-50 flex items-center justify-between">
            <p class="text-xs sm:text-sm text-gray-600">
                {{ repairs.per_page * (repairs.page - 1) + 1 }} -
                {{ [repairs.per_page * repairs.page, repairs.total]|min }} dari {{ repairs.total }}
            </p>
            <div class="flex gap-1">
                {% if repairs.has_prev %}
                <a href="?page={{ repairs.prev_num }}{% if search %}&search={{ search }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}"
                   class="px-2 py-1 text-sm border rounded hover:bg-gray-100"><i class="fas fa-chevron-left"></i></a>
                {% endif %}
                {% if repairs.has_next %}
                <a href="?page={{ repairs.next_num }}{% if search %}&search={{ search }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}"
                   class="px-2 py-1 text-sm border rounded hover:bg-gray-100"><i class="fas fa-chevron-right"></i></a>
                {% endif %}
            </div>
        </div>
        {% endif %}
    </div>
</div>

<!-- Add Repair Modal -->
<div id="addRepairModal" class="modal fixed inset-0 bg-black bg-opacity-50 items-center justify-center z-50 p-2 sm:p-4">
    <div class="bg-white rounded-lg sm:rounded-xl shadow-2xl w-full max-w-3xl max-h-[95vh] overflow-y-auto">
        <div class="p-4 border-b sticky top-0 bg-white z-10 flex justify-between items-center">
            <h3 class="text-lg font-bold text-gray-800">
                <i class="fas fa-file-medical text-purple-600 mr-1"></i> Order Reparasi Baru
            </h3>
            <button type="button" onclick="closeModal('addRepairModal')" class="text-gray-400 hover:text-gray-600"><i class="fas fa-times"></i></button>
        </div>
        <form method="POST" action="{{ url_for('add_repair') }}" class="p-4 sm:p-6 space-y-4">
            <!-- Pelanggan -->
            <div>
                <label class="block text-xs font-semibold text-gray-700 mb-1">Pelanggan *</label>
                <select name="customer_id" required
                        class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500">
                    <option value="">-- Pilih Pelanggan --</option>
                    {% for c in customers %}
                    <option value="{{ c.id }}">{{ c.nama }}{% if c.no_hp %} ({{ c.no_hp }}){% endif %}</option>
                    {% endfor %}
                </select>
                <p class="text-xs text-gray-500 mt-1">Belum terdaftar? Tambahkan dulu di menu <b>Pelanggan</b>.</p>
            </div>

            <!-- Data Barang -->
            <div class="bg-purple-50 border border-purple-200 rounded-lg p-3 sm:p-4">
                <h4 class="text-sm font-bold text-purple-800 mb-3"><i class="fas fa-box mr-1"></i> Data Barang Direparasi</h4>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    <div class="sm:col-span-2">
                        <label class="block text-xs font-semibold text-gray-700 mb-1">Nama Barang *</label>
                        <input type="text" name="nama_barang" required placeholder="Laptop, HP, TV, Mesin Jahit, dll"
                               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">Merk</label>
                        <input type="text" name="merk" placeholder="Asus, Samsung, Singer..."
                               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 / Model</label>
                        <input type="text" name="tipe"
                               class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg">
                    </div>
                    <div class="sm:col-span-2">
                        <label class="block text-xs font-semibold text-gray-700 mb-1">Serial Number (SN) / IMEI</label>
                        <input type="text" name="serial_number" placeholder="Nomor seri unik barang"
                               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">Kelengkapan</label>
                        <input type="text" name="kelengkapan" placeholder="Charger, Tas, Kabel..."
                               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" placeholder="Mulus / Lecet / Retak..."
                               class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg">
                    </div>
                </div>
            </div>

            <!-- Rekam Keluhan -->
            <div>
                <label class="block text-xs font-semibold text-gray-700 mb-1">Keluhan Pelanggan *</label>
                <textarea name="keluhan" rows="2" required placeholder="Mati total, tidak ngangkat, suara kemeresek..."
                          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">Diagnosa Awal</label>
                <textarea name="diagnosa" rows="2" placeholder="Dugaan kerusakan setelah pengecekan awal..."
                          class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg"></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">Teknisi</label>
                    <input type="text" name="teknisi" 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">Estimasi Biaya</label>
                    <input type="number" name="estimasi_biaya" 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">Status</label>
                    <select name="status" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg">
                        <option value="Masuk">Masuk</option>
                        <option value="Diagnosa">Diagnosa</option>
                        <option value="Perbaikan">Perbaikan</option>
                    </select>
                </div>
            </div>

            <div>
                <label class="block text-xs font-semibold text-gray-700 mb-1">Catatan</label>
                <textarea name="catatan" rows="2" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg"></textarea>
            </div>

            <div class="flex flex-col-reverse sm:flex-row justify-end gap-2 pt-2 border-t">
                <button type="button" onclick="closeModal('addRepairModal')"
                        class="px-4 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50">Batal</button>
                <button type="submit"
                        class="px-5 py-2 text-sm bg-purple-600 hover:bg-purple-700 text-white rounded-lg font-semibold">
                    <i class="fas fa-save mr-1"></i> Simpan Order
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}