{% extends 'admin_panel/base.html' %}
{% load static %}
{% load role_permissions %}

{% block page_title %}Data RT{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/admin/references/references-general.css' %}">
{% endblock %}

{% block content %}
<div class="container-fluid">

    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center">
                <div class="mb-2 mb-md-0">
                    <h1 class="h3 mb-1 text-dark font-weight-bold">
                        <i class="fas fa-home text-primary me-2"></i>
                        Data RT
                    </h1>
                    <p class="text-muted mb-0 small">Kelola data Rukun Tetangga (RT) di desa</p>
                </div>
                <div class="header-buttons-wrapper">
                    <a href="{% url 'admin_panel:references_rt_add' %}" class="btn btn-primary btn-header-action">
                        <i class="fas fa-plus"></i>
                        <span class="d-none d-sm-inline ms-1">Tambah</span>
                    </a>
                    
                    <a href="{% url 'references:global_import' %}" class="btn btn-info btn-header-action">
                        <i class="fas fa-file-import"></i>
                        <span class="d-none d-sm-inline ms-1">Global Import</span>
                    </a>
                    
                    <a href="{% url 'references:import_export_dashboard' %}" class="btn btn-success btn-header-action">
                        <i class="fas fa-download"></i>
                        <span class="d-none d-sm-inline ms-1">Export Dashboard</span>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row mb-4">
        <div class="col-12">
            <div class="card filter-card">
                <div class="card-header py-2">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-filter me-2"></i>
                        Filter & Pencarian
                    </h6>
                </div>
                <div class="card-body p-2">
                    <form method="get" id="filterForm">
                        <div class="row g-2">
                            <div class="col-lg-3 col-md-4 col-6 mb-2">
                                <label for="search" class="form-label small mb-1">Cari RT</label>
                                <input type="text" class="form-control form-control-sm" id="search" name="search"
                                       value="{{ request.GET.search }}" placeholder="Nomor RT...">
                            </div>
                            <div class="col-lg-3 col-md-4 col-6 mb-2">
                                <label for="dusun" class="form-label small mb-1">Dusun</label>
                                <select class="form-control form-control-sm" id="dusun" name="dusun">
                                    <option value="">Semua</option>
                                    {% for dusun in dusun_options %}
                                        <option value="{{ dusun.id }}" {% if request.GET.dusun == dusun.id|stringformat:"s" %}selected{% endif %}>{{ dusun.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-lg-3 col-md-4 col-6 mb-2">
                                <label for="status" class="form-label small mb-1">Status</label>
                                <select class="form-control form-control-sm" id="status" name="status">
                                    <option value="">Semua</option>
                                    <option value="aktif" {% if request.GET.status == 'aktif' %}selected{% endif %}>Aktif</option>
                                    <option value="tidak_aktif" {% if request.GET.status == 'tidak_aktif' %}selected{% endif %}>Tidak Aktif</option>
                                </select>
                            </div>
                            <div class="col-lg-3 col-md-12 col-12 mb-2 d-flex align-items-end gap-2">
                                <button type="submit" class="btn btn-sm btn-primary flex-fill">
                                    <i class="fas fa-search"></i>
                                    <span class="d-none d-md-inline ms-1">Cari</span>
                                </button>
                                <a href="{% url 'admin_panel:references_rt_list' %}" class="btn btn-sm btn-outline-secondary flex-fill">
                                    <i class="fas fa-times"></i>
                                    <span class="d-none d-md-inline ms-1">Reset</span>
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="card shadow">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                <i class="fas fa-list mr-2"></i>
                Daftar RT
            </h6>
        </div>
        <div class="card-body">
            {% if page_obj.object_list %}
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th width="50">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input" id="selectAll">
                                        <label class="custom-control-label" for="selectAll"></label>
                                    </div>
                                </th>
                                <th>No</th>
                                <th>Dusun</th>
                                <th>RW</th>
                                <th>Nomor RT</th>
                                <th>Ketua RT</th>
                                <th>Jumlah Penduduk</th>
                                <th>Status</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for rt in page_obj.object_list %}
                            <tr>
                                <td>
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input item-checkbox"
                                               id="rt_{{ rt.id }}" value="{{ rt.id }}">
                                        <label class="custom-control-label" for="rt_{{ rt.id }}"></label>
                                    </div>
                                </td>
                                <td>{{ forloop.counter|add:page_obj.start_index|add:"-1" }}</td>
                                <td>
                                    <span class="badge badge-info">{{ rt.rw.dusun.name }}</span>
                                </td>
                                <td>
                                    <span class="badge badge-secondary">RW {{ rt.rw.rw_number }}</span>
                                </td>
                                <td>
                                    <strong>RT {{ rt.rt_number }}</strong>
                                </td>
                                <td>
                                    {% if rt.ketua_rt %}
                                        <div class="d-flex align-items-center">
                                            <div class="avatar-placeholder me-2">
                                                <i class="fas fa-user"></i>
                                            </div>
                                            <div>
                                                <div class="font-weight-bold">{{ rt.ketua_rt.name }}</div>
                                                <small class="text-muted">{{ rt.ketua_rt.nik }}</small>
                                            </div>
                                        </div>
                                    {% else %}
                                        <span class="text-muted">Belum ditentukan</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <span class="badge badge-primary">{{ rt.get_population_count }} orang</span>
                                </td>
                                <td>
                                    {% if rt.is_active %}
                                        <span class="badge badge-success">Aktif</span>
                                    {% else %}
                                        <span class="badge badge-danger">Tidak Aktif</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <div class="btn-group" role="group">
                                        <a href="{% url 'admin_panel:references_rt_detail' rt.id %}"
                                           class="btn btn-sm btn-outline-info"
                                           title="Detail">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        <a href="{% url 'admin_panel:references_rt_edit' rt.id %}"
                                           class="btn btn-sm btn-outline-primary"
                                           title="Edit">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <button type="button" class="btn btn-sm btn-outline-danger"
                                                data-rt-id="{{ rt.id }}"
                                                data-rt-number="{{ rt.rt_number }}"
                                                onclick="deleteRTFromButton(this)"
                                                title="Hapus">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                <div class="d-flex justify-content-between align-items-center mb-3">
                    <div class="bulk-actions-inline">
                        <span class="bulk-count-badge" id="bulkActionsCount">0</span>
                        <button class="bulk-btn bulk-btn-activate" type="button" data-action="activate" title="Aktifkan">
                            <i class="fas fa-check"></i>
                            <span class="bulk-btn-text">Aktifkan</span>
                        </button>
                        <button class="bulk-btn bulk-btn-deactivate" type="button" data-action="deactivate" title="Nonaktifkan">
                            <i class="fas fa-pause"></i>
                            <span class="bulk-btn-text">Nonaktif</span>
                        </button>
                        <button class="bulk-btn bulk-btn-delete" type="button" data-action="delete" title="Hapus">
                            <i class="fas fa-trash"></i>
                            <span class="bulk-btn-text">Hapus</span>
                        </button>
                    </div>
                    <div class="text-muted">
                        Menampilkan {{ page_obj.start_index|default:0 }} - {{ page_obj.end_index|default:0 }} dari {{ page_obj.paginator.count|default:0 }} data
                    </div>
                </div>

                {% if page_obj.has_other_pages %}
                <nav aria-label="Pagination">
                    <ul class="pagination justify-content-center">
                        {% if page_obj.has_previous %}
                            <li class="page-item">
                                <a class="page-link" href="?page=1">&laquo; First</a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.previous_page_number }}">Previous</a>
                            </li>
                        {% endif %}

                        <li class="page-item active">
                            <span class="page-link">
                                Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
                            </span>
                        </li>

                        {% if page_obj.has_next %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.next_page_number }}">Next</a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}">Last &raquo;</a>
                            </li>
                        {% endif %}
                    </ul>
                </nav>
                {% endif %}
            {% else %}
                <div class="text-center py-5">
                    <i class="fas fa-home fa-3x text-muted mb-3"></i>
                    <h5 class="text-muted">Belum ada data RT</h5>
                    <p class="text-muted">Klik tombol "Tambah RT" untuk menambahkan data RT pertama</p>
                </div>
            {% endif %}
        </div>
    </div>
</div>

<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white py-2">
                <h6 class="modal-title mb-0" id="deleteModalLabel">
                    <i class="fas fa-trash mr-1"></i>
                    Hapus Data
                </h6>
                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close" style="margin: 0; padding: 0; font-size: 1.5rem; line-height: 1;">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body text-center py-3">
                <i class="fas fa-exclamation-triangle text-warning" style="font-size: 3rem;"></i>
                <h6 class="mt-3 mb-2"><strong id="deleteItemName">-</strong></h6>
                <small class="text-muted d-block mb-3">Data yang dihapus tidak dapat dikembalikan</small>
            </div>
            <div class="modal-footer py-2 justify-content-center">
                <button type="button" class="btn btn-sm btn-secondary px-3" data-dismiss="modal">
                    <i class="fas fa-times"></i> Batal
                </button>
                <button type="button" class="btn btn-sm btn-danger px-3" id="confirmDeleteBtn">
                    <i class="fas fa-trash"></i> Hapus
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>function toggleBulkActionsDropdown(event) {
    event.preventDefault();
    event.stopPropagation();
    const menu = document.getElementById('bulkActionsMenu');
    menu.classList.toggle('show');
}

document.addEventListener('click', function(event) {
    const dropdown = document.getElementById('bulkActionsMenu');
    const button = document.getElementById('bulkActionsDropdown');

    if (dropdown && !button.contains(event.target) && !dropdown.contains(event.target)) {
        dropdown.classList.remove('show');
    }
});
</script>

<script>$(document).ready(function() {
    console.log('RT List page loaded');

    $('#selectAll').change(function() {
        $('.item-checkbox').prop('checked', this.checked);
        updateBulkActions();
    });

    $(document).on('change', '.item-checkbox', function() {
        updateBulkActions();
    });
});

function deleteRT(rtId, rtName) {
    $('#deleteItemName').text(rtName);
    $('#confirmDeleteBtn').off('click').on('click', function() {
        const btn = $(this);
        const originalText = btn.html();

        btn.html('<i class="fas fa-spinner fa-spin mr-1"></i>Menghapus...');
        btn.prop('disabled', true);

        fetch(`/admin-panel/references/rt/${rtId}/delete/`, {
            method: 'POST',
            headers: {
                'X-CSRFToken': getCookie('csrftoken')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const modal = bootstrap.Modal.getInstance(document.getElementById('deleteModal'));
                if (modal) modal.hide();
                location.reload();
            } else {
                showWarning('Error: ' + data.error);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showWarning('Terjadi kesalahan saat menghapus data');
        })
        .finally(() => {
            btn.html(originalText);
            btn.prop('disabled', false);
        });
    });

    const modal = new bootstrap.Modal(document.getElementById('deleteModal'));
    modal.show();
}

function deleteRTFromButton(button) {
    const rtId = $(button).data('rt-id');
    const rtNumber = $(button).data('rt-number');
    const rtName = 'RT ' + rtNumber;

    deleteRT(rtId, rtName);
}

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;
}
</script>

<script>function updateBulkActions() {
    const selected = $('.item-checkbox:checked').length;
    const container = $('#bulkActionsContainer');
    const count = $('#bulkActionsCount');
    const dropdown = $('#bulkActionsDropdown');

    count.text(selected);

    if (selected > 0) {
        dropdown.removeClass('btn-outline-primary').addClass('btn-primary');
        dropdown.find('i').removeClass('fa-tasks').addClass('fa-check');
    } else {
        dropdown.removeClass('btn-primary').addClass('btn-outline-primary');
        dropdown.find('i').removeClass('fa-check').addClass('fa-tasks');
    }

    const totalCheckboxes = $('.item-checkbox').length;
    const selectAll = $('#selectAll');

    if (selected === 0) {
        selectAll.prop('indeterminate', false).prop('checked', false);
    } else if (selected === totalCheckboxes) {
        selectAll.prop('indeterminate', false).prop('checked', true);
    } else {
        selectAll.prop('indeterminate', true);
    }
}

function executeBulkAction(action) {
    const selected = $('.item-checkbox:checked');

    if (selected.length === 0) {
        showError('Pilih minimal satu data');
        return;
    }

    const selectedIds = [];
    selected.each(function() {
        selectedIds.push($(this).val());
    });

    const actionLabels = {
        'activate': 'mengaktifkan',
        'deactivate': 'menonaktifkan',
        'delete': 'menghapus'
    };

    if (action === 'delete') {
        if (!confirm(`Apakah Anda yakin ingin menghapus ${selectedIds.length} data RT?\n\nTindakan ini tidak dapat dibatalkan!`)) {
            return;
        }
    } else {
        if (!confirm(`Apakah Anda yakin ingin ${actionLabels[action]} ${selectedIds.length} data RT?`)) {
            return;
        }
    }

    showLoading(`Menjalankan aksi ${actionLabels[action]} pada ${selectedIds.length} data...`);

    if (action === 'delete') {
        bulkDeleteRT(selectedIds);
    } else if (action === 'activate') {
        bulkActivateRT(selectedIds);
    } else if (action === 'deactivate') {
        bulkDeactivateRT(selectedIds);
    }
}

function bulkDeleteRT(ids) {
    $.ajax({
        url: '{% url "admin_panel:references_rt_bulk_delete" %}',
        type: 'POST',
        data: {
            'rt_ids[]': ids,
            'csrfmiddlewaretoken': $('[name=csrfmiddlewaretoken]').val()
        },
        beforeSend: function(xhr) {
            xhr.setRequestHeader('X-CSRFToken', $('[name=csrfmiddlewaretoken]').val());
        },
        success: function(response) {
            hideLoading();
            if (response.success) {
                showAlert(`Berhasil menghapus ${response.deleted_count} data RT`, 'success');

                setTimeout(function() {
                    location.reload();
                }, 1500);
            } else {
                let errorMessage = response.message || 'Gagal menghapus data RT';
                if (response.errors && response.errors.length > 0) {
                    errorMessage += '\n\nDetail error:\n' + response.errors.join('\n');
                }
                showAlert(errorMessage, 'error');
            }
        },
        error: function(xhr, status, error) {
            hideLoading();
            console.error('Bulk delete error:', xhr.responseText);
            showAlert('Terjadi kesalahan saat menghapus data RT: ' + xhr.responseText, 'error');
        }
    });
}

function bulkActivateRT(ids) {
    $.ajax({
        url: '{% url "admin_panel:references_rt_bulk_activate" %}',
        type: 'POST',
        data: {
            'rt_ids[]': ids,
            'csrfmiddlewaretoken': $('[name=csrfmiddlewaretoken]').val()
        },
        beforeSend: function(xhr) {
            xhr.setRequestHeader('X-CSRFToken', $('[name=csrfmiddlewaretoken]').val());
        },
        success: function(response) {
            hideLoading();
            if (response.success) {
                showAlert(`Berhasil mengaktifkan ${response.activated_count} data RT`, 'success');

                setTimeout(function() {
                    location.reload();
                }, 1500);
            } else {
                showAlert(response.message || 'Gagal mengaktifkan data RT', 'error');
            }
        },
        error: function(xhr, status, error) {
            hideLoading();
            console.error('Bulk activate error:', xhr.responseText);
            showAlert('Terjadi kesalahan saat mengaktifkan data RT: ' + xhr.responseText, 'error');
        }
    });
}

function bulkDeactivateRT(ids) {
    $.ajax({
        url: '{% url "admin_panel:references_rt_bulk_deactivate" %}',
        type: 'POST',
        data: {
            'rt_ids[]': ids,
            'csrfmiddlewaretoken': $('[name=csrfmiddlewaretoken]').val()
        },
        beforeSend: function(xhr) {
            xhr.setRequestHeader('X-CSRFToken', $('[name=csrfmiddlewaretoken]').val());
        },
        success: function(response) {
            hideLoading();
            if (response.success) {
                showAlert(`Berhasil menonaktifkan ${response.deactivated_count} data RT`, 'success');

                setTimeout(function() {
                    location.reload();
                }, 1500);
            } else {
                showAlert(response.message || 'Gagal menonaktifkan data RT', 'error');
            }
        },
        error: function(xhr, status, error) {
            hideLoading();
            console.error('Bulk deactivate error:', xhr.responseText);
            showAlert('Terjadi kesalahan saat menonaktifkan data RT: ' + xhr.responseText, 'error');
        }
    });
}

function showError(message) {
    showAlert(message, 'error');
}

function showLoading(message) {

    $('body').append(`
        <div id="loadingOverlay" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9999; display: flex; align-items: center; justify-content: center;">
            <div style="background: white; padding: 20px; border-radius: 8px; text-align: center;">
                <div class="spinner-border text-primary mb-2"></div>
                <div>${message}</div>
            </div>
        </div>
    `);
}

function hideLoading() {
    $('#loadingOverlay').remove();
}

function showAlert(message, type) {
    const alertClass = type === 'success' ? 'alert-success' : type === 'error' ? 'alert-danger' : 'alert-warning';
    const icon = type === 'success' ? 'fas fa-check-circle' : type === 'error' ? 'fas fa-exclamation-circle' : 'fas fa-exclamation-triangle';

    const alertHtml = `
        <div class="alert ${alertClass} alert-dismissible fade show" role="alert" style="position: fixed; top: 20px; right: 20px; z-index: 9999; min-width: 300px;">
            <i class="${icon} mr-2"></i>
            ${message}
            <button type="button" class="close" data-dismiss="alert">
                <span>&times;</span>
            </button>
        </div>
    `;

    $('body').append(alertHtml);

    setTimeout(function() {
        $('.alert').fadeOut();
    }, 5000);
}
</script>

<div class="modal fade" id="bulkActionModal" tabindex="-1" role="dialog" aria-labelledby="bulkActionModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="bulkActionModalLabel">
                    <i class="fas fa-exclamation-triangle mr-2"></i>
                    Konfirmasi Aksi Bulk
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning">
                    <i class="fas fa-warning mr-2"></i>
                    <strong>Peringatan:</strong> Aksi ini akan diterapkan pada <span id="bulkActionCount">0</span> item yang dipilih.
                </div>
                <p id="bulkActionMessage">Apakah Anda yakin ingin melanjutkan?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-primary" id="confirmBulkAction">
                    <i class="fas fa-check mr-1"></i>
                    Ya, Lanjutkan
                </button>
            </div>
        </div>
    </div>
</div>

{% endblock %}