{% extends "base.html" %}
{% block title %}Manajemen Akun{% endblock %}
{% block content %}
<div class="d-flex justify-content-between mb-3">
    <div>
        <i class="fas fa-users-cog fa-2x text-primary me-2"></i>
        <span class="fs-5 fw-bold">Manajemen Akun Pengguna</span>
        <p class="text-muted small">Kelola akun PLKB, Kader, Dapur, dan Superadmin</p>
    </div>
    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalTambahAkun">
        <i class="fas fa-plus me-1"></i> Tambah Akun
    </button>
</div>

<div class="card mb-3">
    <div class="card-body">
        <form method="GET" action="/manajemen_akun" class="row g-2">
            <div class="col-md-4">
                <label class="form-label">Filter Kecamatan</label>
                <select name="kecamatan" class="form-select" onchange="this.form.submit()">
                    <option value="">-- Semua Kecamatan --</option>
                    {% for k in DATA_WILAYAH.keys() %}
                    <option value="{{ k }}" {% if k == filter_kec %}selected{% endif %}>{{ k }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-2 d-flex align-items-end">
                <a href="/manajemen_akun" class="btn btn-secondary w-100">Reset</a>
            </div>
        </form>
    </div>
</div>

<div class="table-responsive">
    <table class="table table-bordered table-hover table-custom">
        <thead class="table-light">
            <tr>
                <th>No</th>
                <th>Username</th>
                <th>Nama Lengkap</th>
                <th>Role</th>
                <th>Wilayah Tugas</th>
                <th>Aksi</th>
            </tr>
        </thead>
        <tbody>
            {% for user in users %}
            <tr>
                <td>{{ loop.index }}</td>
                <td class="fw-bold">{{ user[1] }}</td>
                <td>{{ user[2] }}</td>
                <td>
                    {% if user[3] == 'superadmin' %}<span class="badge bg-danger">Superadmin</span>
                    {% elif user[3] == 'plkb' %}<span class="badge bg-primary">PLKB</span>
                    {% elif user[3] == 'kader' %}<span class="badge bg-success">Kader</span>
                    {% elif user[3] == 'dapur' %}<span class="badge bg-warning text-dark">Dapur</span>
                    {% endif %}
                </td>
                <td>{{ user[5] if user|length > 5 else '-' }}</td>
                <td>
                    <button class="btn btn-sm btn-warning" data-bs-toggle="modal" data-bs-target="#editModal{{ user[0] }}"><i class="fas fa-edit"></i> Edit</button>
                    <a href="javascript:void(0)" onclick="confirmDelete('/hapus_akun/{{ user[0] }}')" class="btn btn-sm btn-danger"><i class="fas fa-trash"></i> Hapus</a>
                </td>
            </tr>
            <div class="modal fade" id="editModal{{ user[0] }}" tabindex="-1">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <form action="/edit_akun" method="POST">
                            <input type="hidden" name="id" value="{{ user[0] }}">
                            <div class="modal-header bg-warning">
                                <h5 class="modal-title">Edit Akun: {{ user[1] }}</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>
                            <div class="modal-body">
                                <div class="mb-2"><label>Username</label><input type="text" name="username" class="form-control" value="{{ user[1] }}" required></div>
                                <div class="mb-2"><label>Password Baru (kosongkan jika tidak ganti)</label><input type="password" name="password" class="form-control" placeholder="..."></div>
                                <div class="mb-2"><label>Role</label>
                                    <select name="role" class="form-select">
                                        <option value="superadmin" {% if user[3]=='superadmin' %}selected{% endif %}>Superadmin</option>
                                        <option value="plkb" {% if user[3]=='plkb' %}selected{% endif %}>PLKB</option>
                                        <option value="kader" {% if user[3]=='kader' %}selected{% endif %}>Kader</option>
                                        <option value="dapur" {% if user[3]=='dapur' %}selected{% endif %}>Dapur</option>
                                    </select>
                                </div>
                                <div class="mb-2"><label>Kecamatan Tugas</label>
                                    <select name="kecamatan" class="form-select">
                                        <option value="SEMUA">-- Superadmin (Semua) --</option>
                                        {% for k in DATA_WILAYAH.keys() %}
                                        <option value="{{ k }}" {% if user[5] == k %}selected{% endif %}>{{ k }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="submit" class="btn btn-primary">Simpan Perubahan</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            {% endfor %}
        </tbody>
    </table>
</div>

<div class="modal fade" id="modalTambahAkun" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="/tambah_akun" method="POST">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title">Tambah Akun Baru</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-2"><label>Username</label><input type="text" name="username" class="form-control" required></div>
                    <div class="mb-2"><label>Password</label><input type="password" name="password" class="form-control" required></div>
                    <div class="mb-2"><label>Nama Lengkap</label><input type="text" name="nama_lengkap" class="form-control" required></div>
                    <div class="mb-2"><label>Role</label>
                        <select name="role" class="form-select" id="roleSelect" required>
                            <option value="">-- Pilih --</option>
                            <option value="superadmin">Superadmin</option>
                            <option value="plkb">PLKB</option>
                            <option value="kader">Kader</option>
                            <option value="dapur">Dapur</option>
                        </select>
                    </div>
                    <div class="mb-2"><label>Kecamatan Tugas</label>
                        <select name="kecamatan" class="form-select" required>
                            <option value="SEMUA">-- Superadmin (Semua) --</option>
                            {% for k in DATA_WILAYAH.keys() %}
                            <option value="{{ k }}">{{ k }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Simpan Akun Baru</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}