{% extends "base.html" %}

{% block title %}Data Pelanggan - {{ app_settings.company_name }}{% endblock %}
{% block page_title %}Data Pelanggan{% endblock %}

{% block content %}
<div class="bg-white rounded-lg sm:rounded-xl shadow-md sm:shadow-lg overflow-hidden">
    <!-- Header -->
    <div class="p-3 sm:p-4 lg:p-6 border-b border-gray-200 bg-gradient-to-r from-blue-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-users text-blue-600 mr-1 sm:mr-2 text-sm sm:text-base"></i>
                Daftar Pelanggan
            </h3>
            <div class="flex gap-2 sm:gap-3">
                <form method="GET" class="flex-1 lg:flex-none">
                    <div class="relative">
                        <input type="text" name="search" value="{{ search }}" 
                               placeholder="Cari..." 
                               class="w-full lg:w-48 pl-8 pr-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                        <i class="fas fa-search absolute left-2.5 top-1/2 transform -translate-y-1/2 text-gray-400 text-xs"></i>
                    </div>
                </form>
                <a href="{{ url_for('customers_export') }}"
                   class="bg-emerald-600 hover:bg-emerald-700 active:bg-emerald-800 text-white px-3 sm:px-4 py-2 rounded-lg font-semibold transition-colors whitespace-nowrap text-sm inline-flex items-center"
                   title="Export semua pelanggan ke CSV">
                    <i class="fas fa-file-csv mr-1 sm:mr-2"></i>Export CSV
                </a>
                <button onclick="openModal('importModal')"
                        class="bg-amber-500 hover:bg-amber-600 active:bg-amber-700 text-white px-3 sm:px-4 py-2 rounded-lg font-semibold transition-colors whitespace-nowrap text-sm inline-flex items-center"
                        title="Import data pelanggan dari CSV">
                    <i class="fas fa-file-upload mr-1 sm:mr-2"></i>Import CSV
                </button>
                <button onclick="openModal('addModal')"
                        class="bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white px-3 sm:px-4 py-2 rounded-lg font-semibold transition-colors whitespace-nowrap text-sm">
                    <i class="fas fa-plus mr-1 sm:mr-2"></i>Tambah
                </button>
            </div>
        </div>
    </div>

    <!-- Mobile Card View -->
    <div class="block lg:hidden divide-y divide-gray-100">
        {% for customer in customers.items %}
        <div class="p-3 hover:bg-gray-50 active:bg-gray-100 transition-colors">
            <div class="flex justify-between items-start mb-2">
                <div class="flex-1 min-w-0 pr-2">
                    <div class="flex items-center gap-2 mb-1">
                        <h4 class="text-sm font-bold text-gray-900 truncate">{{ customer.nama }}</h4>
                        {% if customer.jenis == 'Sub Agen' %}
                        <span class="px-2 py-0.5 text-xs font-semibold rounded-full bg-purple-100 text-purple-700 flex-shrink-0">Sub Agen</span>
                        {% else %}
                        <span class="px-2 py-0.5 text-xs font-semibold rounded-full bg-blue-100 text-blue-700 flex-shrink-0">Biasa</span>
                        {% endif %}
                    </div>
                    <p class="text-xs text-gray-600 mb-0.5">
                        <i class="fas fa-phone text-gray-400 mr-1"></i>{{ customer.no_hp }}
                    </p>
                    <p class="text-xs text-gray-500 truncate">
                        <i class="fas fa-map-marker-alt text-gray-400 mr-1"></i>{{ customer.alamat }}
                    </p>
                </div>
                <div class="text-right flex-shrink-0">
                    <p class="text-xs text-gray-500 mb-1">Limit</p>
                    <p class="text-sm font-bold text-gray-900">Rp {{ "{:,.0f}".format(customer.limit_piutang) }}</p>
                </div>
            </div>
            <div class="flex justify-end gap-3 pt-2 border-t border-gray-100">
                <a href="{{ url_for('customer_repair_history', id=customer.id) }}"
                   class="text-purple-600 hover:text-purple-700 active:text-purple-800 p-1.5 transition-colors"
                   title="Riwayat Reparasi">
                    <i class="fas fa-tools text-sm"></i>
                </a>
                <button onclick="editCustomer({{ customer.id }}, '{{ customer.nama }}', '{{ customer.alamat }}', '{{ customer.no_hp }}', '{{ customer.jenis }}', {{ customer.limit_piutang }})"
                        class="text-blue-600 hover:text-blue-700 active:text-blue-800 p-1.5 transition-colors">
                    <i class="fas fa-edit text-sm"></i>
                </button>
                <a href="{{ url_for('delete_customer', id=customer.id) }}"
                   onclick="return confirm('Yakin ingin menghapus pelanggan ini?')"
                   class="text-red-600 hover:text-red-700 active:text-red-800 p-1.5 transition-colors">
                    <i class="fas fa-trash text-sm"></i>
                </a>
            </div>
        </div>
        {% else %}
        <div class="p-8 text-center text-gray-400">
            <i class="fas fa-inbox text-4xl mb-2"></i>
            <p class="text-sm">Belum ada data pelanggan</p>
        </div>
        {% endfor %}
    </div>

    <!-- Desktop Table View -->
    <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">Nama</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">No HP</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Alamat</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Jenis</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Limit Piutang</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 customer in customers.items %}
                <tr class="hover:bg-gray-50">
                    <td class="px-4 py-3 text-sm font-medium text-gray-900">{{ customer.nama }}</td>
                    <td class="px-4 py-3 text-sm text-gray-600">{{ customer.no_hp }}</td>
                    <td class="px-4 py-3 text-sm text-gray-600">{{ customer.alamat }}</td>
                    <td class="px-4 py-3">
                        {% if customer.jenis == 'Sub Agen' %}
                        <span class="px-2 py-1 text-xs font-semibold rounded-full bg-purple-100 text-purple-800">Sub Agen</span>
                        {% else %}
                        <span class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">Biasa</span>
                        {% endif %}
                    </td>
                    <td class="px-4 py-3 text-sm font-semibold text-gray-900">Rp {{ "{:,.0f}".format(customer.limit_piutang) }}</td>
                    <td class="px-4 py-3 text-center">
                        <a href="{{ url_for('customer_repair_history', id=customer.id) }}"
                           class="text-purple-600 hover:text-purple-800 mr-3 p-1" title="Riwayat Reparasi">
                            <i class="fas fa-tools"></i>
                        </a>
                        <button onclick="editCustomer({{ customer.id }}, '{{ customer.nama }}', '{{ customer.alamat }}', '{{ customer.no_hp }}', '{{ customer.jenis }}', {{ customer.limit_piutang }})"
                                class="text-blue-600 hover:text-blue-800 mr-3 p-1">
                            <i class="fas fa-edit"></i>
                        </button>
                        <a href="{{ url_for('delete_customer', id=customer.id) }}"
                           onclick="return confirm('Yakin ingin menghapus pelanggan ini?')"
                           class="text-red-600 hover:text-red-800 p-1">
                            <i class="fas fa-trash"></i>
                        </a>
                    </td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="6" class="px-4 py-8 text-center text-gray-500">
                        <i class="fas fa-inbox text-4xl mb-2 text-gray-300"></i>
                        <p>Belum ada data pelanggan</p>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    {% if customers.pages > 1 %}
    <div class="p-3 sm:p-4 lg:p-6 border-t border-gray-200 bg-gray-50">
        <div class="flex flex-col sm:flex-row items-center justify-between gap-3">
            <p class="text-xs sm:text-sm text-gray-600 text-center sm:text-left">
                {{ customers.per_page * (customers.page - 1) + 1 }} - 
                {{ [customers.per_page * customers.page, customers.total]|min }} dari {{ customers.total }}
            </p>
            <div class="flex space-x-1 sm:space-x-2">
                {% if customers.has_prev %}
                <a href="?page={{ customers.prev_num }}{% if search %}&search={{ search }}{% endif %}" 
                   class="px-2 sm:px-3 py-1 text-sm border border-gray-300 rounded hover:bg-gray-100 active:bg-gray-200">
                    <i class="fas fa-chevron-left"></i>
                </a>
                {% endif %}
                
                {% for page_num in customers.iter_pages(left_edge=1, right_edge=1, left_current=1, right_current=2) %}
                    {% if page_num %}
                        <a href="?page={{ page_num }}{% if search %}&search={{ search }}{% endif %}" 
                           class="px-2 sm:px-3 py-1 text-sm border rounded {% if page_num == customers.page %}bg-blue-600 text-white border-blue-600{% else %}border-gray-300 hover:bg-gray-100 active:bg-gray-200{% endif %}">
                            {{ page_num }}
                        </a>
                    {% else %}
                        <span class="px-2 sm:px-3 py-1 text-sm">...</span>
                    {% endif %}
                {% endfor %}
                
                {% if customers.has_next %}
                <a href="?page={{ customers.next_num }}{% if search %}&search={{ search }}{% endif %}" 
                   class="px-2 sm:px-3 py-1 text-sm border border-gray-300 rounded hover:bg-gray-100 active:bg-gray-200">
                    <i class="fas fa-chevron-right"></i>
                </a>
                {% endif %}
            </div>
        </div>
    </div>
    {% endif %}
</div>

<!-- Import Modal -->
<div id="importModal" 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-lg max-h-[95vh] overflow-y-auto">
        <div class="p-3 sm:p-4 lg:p-6 border-b border-gray-200 sticky top-0 bg-white z-10 flex justify-between items-center">
            <h3 class="text-base sm:text-lg font-bold text-gray-800">
                <i class="fas fa-file-upload text-amber-500 mr-2"></i>Import Pelanggan dari CSV
            </h3>
            <button onclick="closeModal('importModal')" class="text-gray-400 hover:text-gray-600 p-1">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="p-3 sm:p-4 lg:p-6">
            <!-- Info box -->
            <div class="bg-blue-50 border border-blue-200 rounded-lg p-3 sm:p-4 mb-4">
                <p class="text-sm font-semibold text-blue-800 mb-2">
                    <i class="fas fa-info-circle mr-1"></i>Panduan Import
                </p>
                <ul class="text-xs text-blue-700 space-y-1 list-disc list-inside">
                    <li>File harus berformat <strong>.csv</strong></li>
                    <li>Kolom <strong>nama</strong> wajib diisi</li>
                    <li>Kolom <strong>jenis</strong>: isi <em>Biasa</em> atau <em>Sub Agen</em></li>
                    <li>Kolom <strong>limit_piutang</strong>: angka tanpa titik ribuan</li>
                    <li>Setiap baris akan ditambahkan sebagai pelanggan baru</li>
                </ul>
            </div>

            <!-- Download template -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-3 mb-4 flex items-center justify-between">
                <div>
                    <p class="text-sm font-semibold text-gray-700">Download Template CSV</p>
                    <p class="text-xs text-gray-500 mt-0.5">Gunakan template ini agar format sesuai</p>
                </div>
                <a href="{{ url_for('customers_import_template') }}"
                   class="bg-gray-700 hover:bg-gray-800 text-white px-3 py-2 rounded-lg text-xs font-semibold inline-flex items-center whitespace-nowrap transition-colors">
                    <i class="fas fa-download mr-1.5"></i>Template
                </a>
            </div>

            <!-- Upload form -->
            <form method="POST" action="{{ url_for('customers_import') }}" enctype="multipart/form-data">
                <div class="mb-4">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Pilih File CSV</label>
                    <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center hover:border-amber-400 transition-colors cursor-pointer"
                         onclick="document.getElementById('csv_file_input').click()">
                        <i class="fas fa-cloud-upload-alt text-3xl text-gray-300 mb-2"></i>
                        <p class="text-sm text-gray-500" id="csv_file_label">Klik untuk pilih file CSV</p>
                        <p class="text-xs text-gray-400 mt-1">Format: .csv | Encoding: UTF-8 / Excel</p>
                    </div>
                    <input type="file" id="csv_file_input" name="csv_file" accept=".csv" class="hidden"
                           onchange="document.getElementById('csv_file_label').textContent = this.files[0] ? this.files[0].name : 'Klik untuk pilih file CSV'">
                </div>
                <div class="flex flex-col-reverse sm:flex-row justify-end gap-2 sm:gap-3">
                    <button type="button" onclick="closeModal('importModal')"
                            class="w-full sm:w-auto px-4 sm:px-6 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50">
                        Batal
                    </button>
                    <button type="submit"
                            class="w-full sm:w-auto px-4 sm:px-6 py-2 text-sm bg-amber-500 hover:bg-amber-600 text-white rounded-lg font-semibold transition-colors">
                        <i class="fas fa-upload mr-1.5"></i>Upload & Import
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Add Modal -->
<div id="addModal" 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-2xl max-h-[95vh] overflow-y-auto">
        <div class="p-3 sm:p-4 lg:p-6 border-b border-gray-200 sticky top-0 bg-white z-10">
            <h3 class="text-base sm:text-lg lg:text-xl font-bold text-gray-800">Tambah Pelanggan Baru</h3>
        </div>
        <form method="POST" action="{{ url_for('add_customer') }}" class="p-3 sm:p-4 lg:p-6">
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
                <div class="sm:col-span-2">
                    <label class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1 sm:mb-2">Nama Pelanggan *</label>
                    <input type="text" name="nama" required 
                           class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                </div>
                <div class="sm:col-span-2">
                    <label class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1 sm:mb-2">No HP</label>
                    <input type="text" name="no_hp" 
                           class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                </div>
                <div class="sm:col-span-2">
                    <label class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1 sm:mb-2">Alamat</label>
                    <textarea name="alamat" rows="2" 
                              class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"></textarea>
                </div>
                <div>
                    <label class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1 sm:mb-2">Jenis Pelanggan *</label>
                    <select name="jenis" required 
                            class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                        <option value="Biasa">Pelanggan Biasa</option>
                        <option value="Sub Agen">Sub Agen</option>
                    </select>
                    <p class="text-xs text-gray-500 mt-1">
                        <i class="fas fa-info-circle mr-1"></i>
                        Biasa = Ecer | Sub Agen = Grosir
                    </p>
                </div>
                <div>
                    <label class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1 sm:mb-2">Limit Piutang</label>
                    <input type="number" name="limit_piutang" value="0" step="0.01" 
                           class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                           placeholder="Maksimal piutang">
                    <p class="text-xs text-gray-500 mt-1">
                        <i class="fas fa-info-circle mr-1"></i>
                        Untuk tempo/cicilan
                    </p>
                </div>
            </div>
            <div class="flex flex-col-reverse sm:flex-row justify-end gap-2 sm:gap-3 mt-4 sm:mt-6">
                <button type="button" onclick="closeModal('addModal')" 
                        class="w-full sm:w-auto px-4 sm:px-6 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 active:bg-gray-100">
                    Batal
                </button>
                <button type="submit" 
                        class="w-full sm:w-auto px-4 sm:px-6 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 active:bg-blue-800 font-semibold">
                    Simpan
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Edit Modal -->
<div id="editModal" 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-2xl max-h-[95vh] overflow-y-auto">
        <div class="p-3 sm:p-4 lg:p-6 border-b border-gray-200 sticky top-0 bg-white z-10">
            <h3 class="text-base sm:text-lg lg:text-xl font-bold text-gray-800">Edit Pelanggan</h3>
        </div>
        <form id="editForm" method="POST" class="p-3 sm:p-4 lg:p-6">
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
                <div class="sm:col-span-2">
                    <label class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1 sm:mb-2">Nama Pelanggan *</label>
                    <input type="text" name="nama" id="edit_nama" required 
                           class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                </div>
                <div class="sm:col-span-2">
                    <label class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1 sm:mb-2">No HP</label>
                    <input type="text" name="no_hp" id="edit_no_hp" 
                           class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                </div>
                <div class="sm:col-span-2">
                    <label class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1 sm:mb-2">Alamat</label>
                    <textarea name="alamat" id="edit_alamat" rows="2" 
                              class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"></textarea>
                </div>
                <div>
                    <label class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1 sm:mb-2">Jenis Pelanggan *</label>
                    <select name="jenis" id="edit_jenis" required 
                            class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                        <option value="Biasa">Pelanggan Biasa</option>
                        <option value="Sub Agen">Sub Agen</option>
                    </select>
                    <p class="text-xs text-gray-500 mt-1">
                        <i class="fas fa-info-circle mr-1"></i>
                        Biasa = Ecer | Sub Agen = Grosir
                    </p>
                </div>
                <div>
                    <label class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1 sm:mb-2">Limit Piutang</label>
                    <input type="number" name="limit_piutang" id="edit_limit" step="0.01" 
                           class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                           placeholder="Maksimal piutang">
                    <p class="text-xs text-gray-500 mt-1">
                        <i class="fas fa-info-circle mr-1"></i>
                        Untuk tempo/cicilan
                    </p>
                </div>
            </div>
            <div class="flex flex-col-reverse sm:flex-row justify-end gap-2 sm:gap-3 mt-4 sm:mt-6">
                <button type="button" onclick="closeModal('editModal')" 
                        class="w-full sm:w-auto px-4 sm:px-6 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 active:bg-gray-100">
                    Batal
                </button>
                <button type="submit" 
                        class="w-full sm:w-auto px-4 sm:px-6 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 active:bg-blue-800 font-semibold">
                    Update
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function editCustomer(id, nama, alamat, no_hp, jenis, limit) {
    document.getElementById('editForm').action = `/customers/edit/${id}`;
    document.getElementById('edit_nama').value = nama;
    document.getElementById('edit_alamat').value = alamat;
    document.getElementById('edit_no_hp').value = no_hp;
    document.getElementById('edit_jenis').value = jenis;
    document.getElementById('edit_limit').value = limit;
    openModal('editModal');
}
</script>
{% endblock %}