{% extends 'dashboard/base.html' %}

{% block content %}
<style>
    /* --- CSS UTAMA & RESPONSIVE LAYOUT --- */
    .dashboard-container {
        font-family: 'Inter', system-ui, -apple-system, sans-serif;
        color: #1f2937;
        padding: 10px;
    }

    /* Page Header */
    .page-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;
        gap: 16px;
        flex-wrap: wrap;
    }
    .page-title {
        font-size: 22px;
        font-weight: 700;
        color: #111827;
        display: flex;
        align-items: center;
    }

    /* Tombol Utama */
    .btn-add {
        background: #10b981;
        color: white;
        border: none;
        padding: 10px 18px;
        border-radius: 8px;
        cursor: pointer;
        font-weight: 600;
        font-size: 14px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: all 0.2s ease;
        box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
    }
    .btn-add:hover {
        background: #059669;
        transform: translateY(-1px);
        box-shadow: 0 4px 6px rgba(16, 185, 129, 0.3);
    }

    /* Card & Tabel */
    .card-table {
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
        border: 1px solid #e5e7eb;
        overflow-x: auto;
    }
    .custom-table {
        width: 100%;
        border-collapse: collapse;
        text-align: left;
        font-size: 14px;
    }
    .custom-table th {
        background: #f9fafb;
        color: #4b5563;
        font-weight: 600;
        padding: 14px 16px;
        border-bottom: 2px solid #e5e7eb;
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: 0.05em;
    }
    .custom-table td {
        padding: 14px 16px;
        border-bottom: 1px solid #e5e7eb;
        color: #374151;
    }
    .custom-table tr:hover {
        background-color: #f8fafc;
    }

    /* Badge Token & Area */
    .token-badge {
        font-family: 'Courier New', Courier, monospace;
        background: #f3f4f6;
        color: #1f2937;
        padding: 6px 12px;
        border-radius: 6px;
        font-weight: 600;
        font-size: 13px;
        border: 1px solid #e5e7eb;
        display: inline-block;
        max-width: 250px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* --- MODAL POPUP --- */
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(4px);
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
        z-index: 9999;
    }
    .modal-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }
    .modal-box {
        background: white;
        border-radius: 14px;
        width: 100%;
        max-width: 480px;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        transform: scale(0.95);
        transition: transform 0.25s ease;
        overflow: hidden;
    }
    .modal-overlay.active .modal-box {
        transform: scale(1);
    }
    .modal-header-custom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 20px;
        border-bottom: 1px solid #e5e7eb;
        background: #f9fafb;
    }
    .modal-header-custom h5 {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        color: #111827;
    }
    .modal-body-custom {
        padding: 20px;
    }

    /* Form Styles */
    .form-group {
        margin-bottom: 16px;
    }
    .form-group label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: #4b5563;
        margin-bottom: 6px;
    }
    .form-control-custom {
        width: 100%;
        padding: 10px 12px;
        border-radius: 8px;
        border: 1px solid #d1d5db;
        font-size: 14px;
        box-sizing: border-box;
        transition: all 0.2s;
    }
    .form-control-custom:focus {
        outline: none;
        border-color: #10b981;
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
    }

    /* Kotak Sukses Token */
    .token-display-box {
        background: #ecfdf5;
        border: 1px solid #a7f3d0;
        border-radius: 10px;
        padding: 16px;
        margin-top: 10px;
        display: none;
    }
    .token-copy-wrapper {
        display: flex;
        gap: 8px;
        margin-top: 8px;
    }
    .btn-copy {
        background: #065f46;
        color: white;
        border: none;
        padding: 0 12px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
    }

    .modal-footer-custom {
        padding: 14px 20px;
        border-top: 1px solid #e5e7eb;
        background: #f9fafb;
        display: flex;
        justify-content: flex-end;
        gap: 10px;
    }
</style>

<div class="page-header">
    <div class="page-title">
        <i class="fa-solid fa-industry" style="color: #f59e0b; margin-right: 8px;"></i>
        Manajemen & Token Mesin ESP32
    </div>
    <div style="display: flex; gap: 10px;">
        <button type="button" class="btn-add" style="background-color: #4f46e5;" onclick="openModalArea()">
            <i class="fas fa-layer-group"></i> + Tambah Area
        </button>
        <button type="button" class="btn-add" onclick="openModal()">
            <i class="fas fa-plus"></i> + Tambah Mesin Baru
        </button>
    </div>
</div>

<div class="card-table">
    <table class="custom-table">
        <thead>
            <tr>
                <th style="width: 50px;">No</th>
                <th>Nama Mesin</th>
                <th>Area / Lokasi</th>
                <th>Keterangan</th>
                <th>Token Keamanan ESP32</th>
                <th style="width: 140px; text-align: center;">Status Laporan</th>
                <th>Tanggal Terdaftar</th>
            </tr>
        </thead>
        <tbody>
            {% for mesin in daftar_mesin %}
            <tr>
                <td style="text-align: center;">{{ forloop.counter }}</td>
                <td style="font-weight: 600;">{{ mesin.nama_mesin }}</td>
                <td>
                    {% if mesin.area %}
                        <span style="background: #e0f2fe; color: #0369a1; padding: 3px 8px; border-radius: 4px; font-weight: 600; font-size: 11px;">
                            {{ mesin.area.nama_area }}
                        </span>
                    {% else %}
                        <span style="color: #9ca3af;">-</span>
                    {% endif %}
                </td>
                
                <!-- KOLOM KETERANGAN DENGAN INLINE EDIT -->
                <td>
                    <div id="ket-display-{{ mesin.id }}" style="display: flex; align-items: center; justify-content: space-between; gap: 8px;">
                        <span class="ket-text">{{ mesin.keterangan|default:"-" }}</span>
                        <button type="button" onclick="editKeterangan('{{ mesin.id }}')" style="background: none; border: none; color: #4f46e5; cursor: pointer; padding: 2px 6px; font-size: 12px;" title="Edit Keterangan">
                            <i class="fas fa-edit"></i>
                        </button>
                    </div>
        
                    <div id="ket-edit-{{ mesin.id }}" style="display: none;">
                        <div style="display: flex; gap: 4px; align-items: center;">
                            <input type="text" id="input-ket-{{ mesin.id }}" class="form-control-custom" value="{{ mesin.keterangan|default:'' }}" style="padding: 4px 8px; font-size: 12px; width: 100%; box-sizing: border-box;">
                            <button type="button" onclick="simpanKeterangan('{{ mesin.id }}')" style="background: #10b981; color: white; border: none; padding: 4px 8px; border-radius: 4px; cursor: pointer; font-size: 11px;" title="Simpan">
                                <i class="fas fa-check"></i>
                            </button>
                            <button type="button" onclick="batalEdit('{{ mesin.id }}')" style="background: #ef4444; color: white; border: none; padding: 4px 8px; border-radius: 4px; cursor: pointer; font-size: 11px;" title="Batal">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </div>
                </td>
        
                <td>
                    <div style="display: flex; align-items: center; justify-content: space-between; gap: 10px; max-width: 320px;">
                        <span class="token-badge" style="display: inline-block; white-space: nowrap; overflow: hidden; text-truncate: ellipsis; max-width: 220px;">
                            {{ mesin.token|default:"Belum Ada Token" }}
                        </span>
                        {% if mesin.token %}
                        <button type="button" class="copy-btn" data-token="{{ mesin.token }}" style="background: #f3f4f6; border: 1px solid #d1d5db; color: #374151; padding: 4px 8px; border-radius: 4px; cursor: pointer; font-size: 11px; font-weight: 600; display: flex; align-items: center; gap: 4px; transition: all 0.2s;" title="Salin Token">
                            <i class="fas fa-copy"></i> <span class="btn-text">Salin</span>
                        </button>
                        {% endif %}
                    </div>
                </td>

                <!-- KOLOM STATUS LAPORAN (BARU) -->
                <td style="text-align: center;">
                    <select onchange="simpanStatusMesin('{{ mesin.id }}', this.value)" 
                            style="padding: 4px 8px; border-radius: 6px; font-weight: 600; font-size: 11px; cursor: pointer; border: 1px solid #d1d5db; outline: none; transition: all 0.2s;
                                   {% if mesin.status == 'review' %} background-color: #fef3c7; color: #d97706; border-color: #fcd34d; {% else %} background-color: #d1fae5; color: #065f46; border-color: #a7f3d0; {% endif %}">
                        
                        <!-- PERBAIKAN: Menggunakan pengkondisian eksplisit (normal atau kosong) -->
                        <option value="normal" {% if mesin.status == 'normal' or not mesin.status %}selected{% endif %}>🟢 Normal</option>
                        <option value="review" {% if mesin.status == 'review' %}selected{% endif %}>🟡 Review</option>
                    </select>
                </td>

                <td>{{ mesin.created_at|date:"d M Y H:i" }}</td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="7" style="text-align: center; color: #9ca3af; padding: 30px;">
                    Belum ada unit mesin yang terdaftar.
                </td>
            </tr>
            {% endfor %}

        </tbody>
    </table>
</div>
<!-- MODAL TAMBAH AREA BARU -->
<div class="modal-overlay" id="modalAddArea">
    <div class="modal-box">
        <div class="modal-header-custom">
            <h5 style="margin: 0; font-size: 15px;">Tambah Area / Lokasi Baru</h5>
            <i class="fas fa-times" style="cursor: pointer; font-size: 16px;" onclick="closeModalArea()"></i>
        </div>
        <div class="modal-body-custom">
            <form id="formAddArea">
                <div class="form-group">
                    <label>Nama Area :</label>
                    <input type="text" class="form-control-custom" id="inputNamaArea" required placeholder="Contoh: Gedung A / Line 01">
                </div>
                <div class="form-group">
                    <label>Keterangan Area :</label>
                    <textarea class="form-control-custom" id="inputKeteranganArea" rows="2" placeholder="Catatan lokasi opsional..."></textarea>
                </div>
            </form>
        </div>
        <div class="modal-footer-custom">
            <button type="button" style="background: #e5e7eb; color: #374151; border: none; padding: 8px 14px; border-radius: 6px; cursor: pointer; font-weight: 600;" onclick="closeModalArea()">Batal</button>
            <button type="button" style="background: #4f46e5; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-weight: 600;" id="btnSaveArea">Simpan Area</button>
        </div>
    </div>
</div>

<!-- MODAL TAMBAH MESIN -->
<div class="modal-overlay" id="modalAddMachine">
    <div class="modal-box">
        <div class="modal-header-custom">
            <h5 style="margin: 0; font-size: 15px;">Tambah Unit Mesin Baru</h5>
            <i class="fas fa-times" style="cursor: pointer; font-size: 16px;" onclick="closeModal()"></i>
        </div>
        <div class="modal-body-custom">
            <form id="formAddMachine">
                <div class="form-group">
                    <label>Nama Mesin :</label>
                    <input type="text" class="form-control-custom" id="inputNama" required placeholder="Contoh: Mesin Injeksi 01">
                </div>
                <div class="form-group">
                    <label>Pilih Area / Lokasi :</label>
                    <select class="form-control-custom" id="selectArea">
                        <option value="">-- Pilih Area (Opsional) --</option>
                        {% for area in daftar_area %}
                            <option value="{{ area.id }}">{{ area.nama_area }}</option>
                        {% empty %}
                            <option value="" disabled>Belum ada area terdaftar</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group">
                    <label>Keterangan :</label>
                    <textarea class="form-control-custom" id="inputKeterangan" rows="3" placeholder="Informasi lokasi / spesifikasi..."></textarea>
                </div>
            </form>

            <div class="token-display-box" id="tokenDisplayBox">
                <div style="color: #065f46; font-weight: bold; font-size: 13px; margin-bottom: 6px;">
                    <i class="fas fa-check-circle"></i> Mesin & Token Berhasil Dibuat!
                </div>
                <div style="font-size: 11px; color: #047857; margin-bottom: 10px;">
                    Salin kode token di bawah ini ke dalam program C++ ESP32 Anda:
                </div>
                <div class="token-badge" id="generatedTokenText" style="font-size: 14px; word-break: break-all; user-select: all; padding: 8px;"></div>
            </div>
        </div>
        <div class="modal-footer-custom">
            <button type="button" style="background: #e5e7eb; color: #374151; border: none; padding: 8px 14px; border-radius: 6px; cursor: pointer; font-weight: 600;" onclick="closeModal()" id="btnBatal">Batal</button>
            <button type="button" style="background: #10b981; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-weight: 600;" id="btnSaveMachine">Simpan & Generate Token</button>
        </div>
    </div>
</div>
<script>
    // Fungsi pembaca cookie untuk mengambil CSRF Token Django secara aman
    function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }

    // --- LOGIKA KENDALI MODAL TAMBAH AREA ---
    function openModalArea() {
        document.getElementById('modalAddArea').classList.add('active');
        document.getElementById('formAddArea').reset();
    }

    function closeModalArea() {
        document.getElementById('modalAddArea').classList.remove('active');
    }

    document.getElementById('btnSaveArea').addEventListener('click', function() {
        const namaArea = document.getElementById('inputNamaArea').value;
        const ketArea = document.getElementById('inputKeteranganArea').value;

        if (!namaArea) {
            alert('Nama area wajib diisi!');
            return;
        }

        fetch("{% url 'add_area_api' %}", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRFToken": getCookie('csrftoken')
            },
            body: JSON.stringify({
                nama_area: namaArea,
                keterangan: ketArea
            })
        })
        .then(res => res.json())
        .then(data => {
            if (data.status === 'success') {
                alert('Area berhasil ditambahkan!');
                location.reload();
            } else {
                alert('Gagal: ' + data.message);
            }
        });
    });

    // --- LOGIKA KENDALI MODAL TAMBAH MESIN ---
    function openModal() {
        document.getElementById('modalAddMachine').classList.add('active');
        document.getElementById('tokenDisplayBox').style.display = 'none';
        document.getElementById('formAddMachine').reset();
        document.getElementById('formAddMachine').style.display = 'block';
        document.getElementById('btnSaveMachine').style.display = 'inline-block';
    }

    function closeModal() {
        document.getElementById('modalAddMachine').classList.remove('active');
        if (document.getElementById('tokenDisplayBox').style.display === 'block') {
            location.reload(); 
        }
    }

    document.getElementById('btnSaveMachine').addEventListener('click', function() {
        const nama = document.getElementById('inputNama').value;
        const areaId = document.getElementById('selectArea').value;
        const keterangan = document.getElementById('inputKeterangan').value;

        if (!nama) {
            alert('Nama mesin tidak boleh kosong!');
            return;
        }

        fetch("{% url 'add_mesin_api' %}", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRFToken": getCookie('csrftoken')
            },
            body: JSON.stringify({
                nama_mesin: nama,
                area_id: areaId,
                keterangan: keterangan
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.status === 'success') {
                document.getElementById('formAddMachine').style.display = 'none';
                document.getElementById('btnSaveMachine').style.display = 'none';
                document.getElementById('btnBatal').innerText = 'Tutup & Reload';
                
                const tokenBox = document.getElementById('tokenDisplayBox');
                document.getElementById('generatedTokenText').innerText = data.data.token;
                tokenBox.style.display = 'block';
            } else {
                alert('Gagal: ' + data.message);
            }
        });
    });
    // --- LOGIKA AJAX EDIT KETERANGAN INLINE DI TABEL ---
    function editKeterangan(id) {
        document.getElementById(`ket-display-${id}`).style.display = 'none';
        document.getElementById(`ket-edit-${id}`).style.display = 'block';
        document.getElementById(`input-ket-${id}`).focus();
    }

    function batalEdit(id) {
        document.getElementById(`ket-display-${id}`).style.display = 'flex';
        document.getElementById(`ket-edit-${id}`).style.display = 'none';
    }

    function simpanKeterangan(id) {
        const statusTeks = document.getElementById(`input-ket-${id}`).value;
        const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]') ? document.querySelector('[name=csrfmiddlewaretoken]').value : '{{ csrf_token }}';

        fetch(`/dashboard/mesin/update-keterangan/${id}/`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': csrftoken
            },
            body: JSON.stringify({ keterangan: statusTeks })
        })
        .then(response => response.json())
        .then(data => {
            if (data.status === 'success') {
                document.querySelector(`#ket-display-${id} .ket-text`).innerText = data.keterangan || '-';
                batalEdit(id);
            } else {
                alert('Gagal memperbarui keterangan: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Terjadi kesalahan koneksi.');
        });
    }
   
    // --- LOGIKA AJAX PERUBAHAN STATUS LAPORAN (NORMAL / REVIEW) ---
    function simpanStatusMesin(id, statusBaru) {
        const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]') ? document.querySelector('[name=csrfmiddlewaretoken]').value : '{{ csrf_token }}';

        fetch(`/dashboard/mesin/update-status/${id}/`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': csrftoken
            },
            body: JSON.stringify({ status: statusBaru })
        })
        .then(response => response.json())
        .then(data => {
            if (data.status === 'success') {
                // Halaman direload agar warna latar dropdown dan kalkulasi di report sinkron riil
                location.reload();
            } else {
                alert('Gagal memperbarui status mesin: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Terjadi kesalahan koneksi jaringan.');
        });
    }

    // --- FUNGSI SALIN TOKEN (COPY TO CLIPBOARD) ---
    document.addEventListener('DOMContentLoaded', function() {
        const buttons = document.querySelectorAll('.copy-btn');
        
        buttons.forEach(button => {
            button.addEventListener('click', function() {
                const token = this.getAttribute('data-token');
                const textSpan = this.querySelector('.btn-text');
                const icon = this.querySelector('i');
                
                navigator.clipboard.writeText(token).then(() => {
                    textSpan.innerText = "Tersalin!";
                    this.style.background = "#d1fae5"; 
                    this.style.color = "#065f46";
                    this.style.borderColor = "#a7f3d0";
                    icon.className = "fas fa-check"; 
                    
                    setTimeout(() => {
                        textSpan.innerText = "Salin";
                        this.style.background = "#f3f4f6";
                        this.style.color = "#374151";
                        this.style.borderColor = "#d1d5db";
                        icon.className = "fas fa-copy";
                    }, 2000);
                }).catch(err => {
                    console.error('Gagal menyalin token: ', err);
                    alert('Gagal menyalin otomatis, silakan salin manual.');
                });
            });
        });
    });
</script>

{% endblock %}