{% extends "layout/ver_baru/base_admin.html" %}
{% block title %}Manage WOK CWN{% endblock %}

{% block content %}
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<div class="container mx-auto px-4 py-6">
    <!-- Header -->
    <h2 class="text-center text-white bg-red-700 shadow-lg rounded-lg py-3 mb-6">
        Wilayah Operasional Kerja CWN
    </h2>

    <!-- Card Tabel -->
    <div class="bg-white shadow-md rounded-lg p-4 overflow-hidden">
        <!-- Header Card -->
        <div class="flex justify-between items-center bg-gray-900 text-white px-4 py-2">
            <h3 class="font-semibold">Daftar WOK</h3>
            <!-- Tombol Tambah -->
            <button onclick="openModal('', '', false)"
                class="bg-green-600 hover:bg-green-700 text-white px-3 py-1 rounded text-sm">
                + Tambah WOK
            </button>
        </div>

        <!-- Isi Card (Tabel) -->
        <div class="overflow-x-auto">
            <table class="w-full border border-gray-300">
                <thead class="bg-gray-100 text-gray-700">
                    <tr>
                        <th class="p-2 border">ID</th>
                        <th class="p-2 border">Nama</th>
                        <th class="p-2 border">Tampil</th>
                        <th class="p-2 border">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    {% for w in woks %}
                    <tr class="border hover:bg-red-50">
                        <td class="text-center p-2 border">{{ w.wok_id }}</td>
                        <td class="p-2 border">{{ w.wok_name }}</td>
                        <td class="text-center p-2 border">
                            {% if w.isshow %}
                                <span class="bg-green-600 text-white text-xs px-2 py-1 rounded">Ya</span>
                            {% else %}
                                <span class="bg-gray-400 text-white text-xs px-2 py-1 rounded">Tidak</span>
                            {% endif %}
                        </td>
                        <td class="text-center p-2 border space-x-2">
                            <button 
                               class="bg-yellow-500 hover:bg-yellow-600 text-white px-3 py-1 rounded text-sm"
                               onclick="openModal('{{ w.wok_id }}', '{{ w.wok_name }}', '{{ w.isshow }}')">
                               Edit
                            </button>
                            <button onclick="confirmDelete('{{ w.wok_id }}')"
                               class="bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded text-sm">Delete</button>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>


<!-- Modal Form -->
<div id="wokModal" class="fixed inset-0 hidden bg-black bg-opacity-50 flex items-center justify-center z-50">
  <div class="bg-white rounded-lg shadow-lg w-full max-w-lg">
    <div class="bg-red-700 text-white px-4 py-2 flex justify-between items-center">
        <h4 id="modalTitle" class="font-semibold">Tambah WOK</h4>
        <button onclick="closeModal()" class="text-white hover:text-gray-200">&times;</button>
    </div>
    <div class="p-4 bg-gray-50">
        <form id="wokForm" method="post" class="space-y-4">
            {% csrf_token %}
            <input type="hidden" name="mode" id="formMode" value="create">

            <!-- ID -->
            <div>
                <label for="wok_id" class="block text-sm font-medium">ID</label>
                <input type="text" name="wok_id" id="wok_id"
                    required
                    class="mt-1 p-2 border border-gray-300 rounded w-full">
            </div>

            <!-- Nama -->
            <div>
                <label for="wok_name" class="block text-sm font-medium">Nama</label>
                <input type="text" name="wok_name" id="wok_name"
                    required
                    class="mt-1 p-2 border border-gray-300 rounded w-full">
            </div>

            <!-- Tampil -->
            <div class="flex items-center">
                <input id="isShow" type="checkbox" name="isShow"
                    class="h-4 w-4 text-red-600 border-gray-300 rounded">
                <label for="isShow" class="ml-2 text-sm">Tampilkan</label>
            </div>

            <!-- Buttons -->
            <div class="flex space-x-2">
                <button type="submit"
                    class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded">
                    Simpan
                </button>
                <button type="button" onclick="closeModal()"
                    class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded">
                    Batal
                </button>
            </div>
        </form>
    </div>
  </div>
</div>

<!-- Script Modal -->
<script>
function openModal(id, name, isShow) {
    document.getElementById('wokModal').classList.remove('hidden');
    if (id) {
        document.getElementById('modalTitle').textContent = "Edit WOK";
        document.getElementById('formMode').value = "edit";
        document.getElementById('wok_id').value = id;
        document.getElementById('wok_id').readOnly = true;
        document.getElementById('wok_name').value = name;
        document.getElementById('isShow').checked = (isShow === "True");
    } else {
        document.getElementById('modalTitle').textContent = "Tambah WOK";
        document.getElementById('formMode').value = "create";
        document.getElementById('wok_id').value = "";
        document.getElementById('wok_id').readOnly = false;
        document.getElementById('wok_name').value = "";
        document.getElementById('isShow').checked = false;
    }
}

function closeModal() {
    document.getElementById('wokModal').classList.add('hidden');
}
</script>

<!-- Delete confirm -->
<script>
function confirmDelete(wokId) {
    Swal.fire({
        title: 'Yakin hapus data ini?',
        text: "Tindakan ini tidak bisa dibatalkan!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Ya, hapus!'
    }).then((result) => {
        if (result.isConfirmed) {
            const deleteUrl = "{% url 'wok_delete' 'WOK_ID_PLACEHOLDER' %}".replace('WOK_ID_PLACEHOLDER', wokId);
            window.location.href = deleteUrl;
        }
    })
}
</script>

{% if message %}
<script>
Swal.fire({
    icon: 'success',
    title: '{{ message }}',
    showConfirmButton: false,
    timer: 1800
});
</script>
{% endif %}

{% endblock %}