<!-- Modal Trigger -->
<button onclick="toggleModal()" class="bg-blue-500 text-white px-4 py-2 rounded-lg">Tambah Customer</button>

<!-- Modal -->
<div id="customerModal" class="fixed inset-0 bg-gray-900 bg-opacity-50 hidden flex items-center justify-center">
    <div class="bg-white p-6 rounded-lg shadow-lg w-1/3">
        <h2 class="text-xl font-semibold mb-4">Tambah Customer</h2>
        <form method="POST" action="{% url 'admin:app_customer_add' %}">
            {% csrf_token %}
            <div class="mb-4">
                <label class="block text-sm font-medium">Nama</label>
                <input type="text" name="name" class="w-full px-3 py-2 border rounded-lg focus:ring-blue-500 focus:border-blue-500">
            </div>
            <div class="mb-4">
                <label class="block text-sm font-medium">Nomor Telepon</label>
                <input type="text" name="phone_number" class="w-full px-3 py-2 border rounded-lg focus:ring-blue-500 focus:border-blue-500">
            </div>
            <div class="mb-4">
                <label class="block text-sm font-medium">Email</label>
                <input type="email" name="email" class="w-full px-3 py-2 border rounded-lg focus:ring-blue-500 focus:border-blue-500">
            </div>
            <div class="mb-4">
                <label class="block text-sm font-medium">Alamat</label>
                <textarea name="address" class="w-full px-3 py-2 border rounded-lg focus:ring-blue-500 focus:border-blue-500"></textarea>
            </div>
            <div class="flex justify-end">
                <button type="button" onclick="toggleModal()" class="px-4 py-2 bg-gray-500 text-white rounded-lg mr-2">Batal</button>
                <button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded-lg">Simpan</button>
            </div>
        </form>
    </div>
</div>

<script>
function toggleModal() {
    document.getElementById('customerModal').classList.toggle('hidden');
}
</script>
