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

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

{% block content %}
<div class="beneficiaries-wrapper">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="page-header">
                    <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-3">
                        <div class="flex-grow-1">
                            <h4 class="mb-1">Daftar Penerima Bantuan</h4>
                            <p class="text-muted mb-0">Kelola data penerima bantuan di Desa Pulosari</p>
                        </div>
                        <div class="w-100 w-md-auto">
                            <div class="card border-0 shadow-sm">
                                <div class="card-body p-2">
                                    <div class="d-flex flex-column flex-md-row gap-2">
                                        <a href="{% url 'admin_panel:beneficiary_create' %}" class="btn btn-primary btn-sm">
                                            <i class="fas fa-plus me-1"></i>Tambah Penerima
                                        </a>
                                        <button type="button" class="btn btn-success btn-sm" id="importBtn">
                                            <i class="fas fa-file-import me-1"></i>Import
                                        </button>
                                        <button type="button" class="btn btn-info btn-sm" id="exportBtn">
                                            <i class="fas fa-file-export me-1"></i>Export
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="filter-card">
                    <div class="card-body">
                        <form method="get" id="filterForm" class="row g-3">
                            <div class="col-12 col-sm-6 col-md-4">
                                <label for="search" class="form-label">Pencarian</label>
                                <input type="text" class="form-control" id="search" name="search"
                                       value="{{ search }}" placeholder="Cari nama, NIK, atau telepon...">
                            </div>
                            <div class="col-12 col-sm-6 col-md-3">
                                <label for="category" class="form-label">Kategori</label>
                                <select class="form-select" id="category" name="category">
                                    <option value="">Semua Kategori</option>
                                    {% for category in categories %}
                                    <option value="{{ category.id }}" {% if selected_category == category.id|stringformat:"s" %}selected{% endif %}>
                                        {{ category.name }}
                                    </option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-12 col-sm-6 col-md-3">
                                <label for="status" class="form-label">Status</label>
                                <select class="form-select" id="status" name="status">
                                    <option value="">Semua Status</option>
                                    <option value="active" {% if selected_status == 'active' %}selected{% endif %}>Aktif</option>
                                    <option value="inactive" {% if selected_status == 'inactive' %}selected{% endif %}>Tidak Aktif</option>
                                    <option value="pending" {% if selected_status == 'pending' %}selected{% endif %}>Pending</option>
                                </select>
                            </div>
                            <div class="col-12 col-sm-6 col-md-2">
                                <label class="form-label d-none d-md-block">&nbsp;</label>
                                <div class="d-flex gap-2">
                                    <button type="submit" class="btn btn-primary flex-fill flex-md-grow-0">
                                        <i class="fas fa-search me-1"></i>Cari
                                    </button>
                                    <a href="{% url 'admin_panel:beneficiaries_list' %}" class="btn btn-outline-secondary flex-fill flex-md-grow-0">
                                        <i class="fas fa-times me-1"></i>Reset
                                    </a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

            <div class="beneficiaries-table">
                <div class="card-header">
                    <h6 class="card-title mb-0">
                        <i class="fas fa-hand-holding-heart me-2"></i>Daftar Penerima
                        <span class="text-white-50 ms-2">({{ beneficiaries.paginator.count }} data)</span>
                    </h6>
                    <div class="d-flex flex-column flex-md-row gap-2 w-100 w-md-auto mt-2 mt-md-0">
                        <div class="bulk-actions d-none" id="bulkActions">
                            <button class="btn btn-sm btn-outline-danger" id="bulkDeleteBtn" disabled>
                                <i class="fas fa-trash me-1"></i>Hapus
                            </button>
                            <button class="btn btn-sm btn-outline-warning" id="bulkEditBtn" disabled>
                                <i class="fas fa-edit me-1"></i>Edit
                            </button>
                            <button class="btn btn-sm btn-outline-info" id="bulkExportBtn" disabled>
                                <i class="fas fa-file-csv me-1"></i>Export
                            </button>
                        </div>
                        <button class="btn btn-sm btn-outline-light" id="exportAllBtn">
                            <i class="fas fa-file-csv me-1"></i>Export Semua
                        </button>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table" id="beneficiariesTable">
                        <thead>
                            <tr>
                                <th width="3%" class="text-center">
                                    <input type="checkbox" id="selectAll" class="form-check-input">
                                </th>
                                <th width="5%" class="d-none d-md-table-cell text-center">ID</th>
                                <th width="8%" class="d-none d-lg-table-cell">Foto</th>
                                <th width="22%">Nama</th>
                                <th width="14%" class="d-none d-sm-table-cell">NIK</th>
                                <th width="14%" class="d-none d-md-table-cell">Kategori</th>
                                <th width="10%" class="d-none d-md-table-cell text-center">Status</th>
                                <th width="10%" class="d-none d-lg-table-cell text-center">Tanggal</th>
                                <th width="14%" class="text-center">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for beneficiary in beneficiaries %}
                            <tr>
                                <td class="text-center">
                                    <input type="checkbox" class="form-check-input beneficiary-checkbox" value="{{ beneficiary.id }}">
                                </td>
                                <td class="d-none d-md-table-cell">
                                    <span class="badge badge-primary">#{{ beneficiary.id }}</span>
                                </td>
                                <td class="d-none d-lg-table-cell">
                                    {% if beneficiary.photo %}
                                        <img src="{{ beneficiary.photo.url }}" alt="{{ beneficiary.name }}"
                                             class="beneficiary-photo">
                                    {% else %}
                                        <div class="beneficiary-photo-placeholder">
                                            <i class="fas fa-user"></i>
                                        </div>
                                    {% endif %}
                                </td>
                                <td>
                                    <div class="d-flex align-items-center">

                                        <div class="d-lg-none mr-2">
                                            {% if beneficiary.photo %}
                                                <img src="{{ beneficiary.photo.url }}" alt="{{ beneficiary.name }}"
                                                     class="beneficiary-photo">
                                            {% else %}
                                                <div class="beneficiary-photo-placeholder">
                                                    <i class="fas fa-user"></i>
                                                </div>
                                            {% endif %}
                                        </div>
                                        <div>
                                            <div class="beneficiary-name">{{ beneficiary.person.name }}</div>
                                            <div class="beneficiary-nik d-sm-none">{{ beneficiary.person.nik }}</div>
                                            <div class="d-md-none">
                                                <span class="badge badge-info badge-sm">{{ beneficiary.category.name|truncatechars:10 }}</span>
                                                <span class="badge badge-{% if beneficiary.status == 'aktif' %}success{% elif beneficiary.status == 'pending' %}warning{% else %}secondary{% endif %} badge-sm mr-2">
                                                    {{ beneficiary.get_status_display }}
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td class="d-none d-sm-table-cell"><span class="text-muted">{{ beneficiary.person.nik }}</span></td>
                                <td class="d-none d-md-table-cell">
                                    <span class="badge badge-info">{{ beneficiary.category.name }}</span>
                                </td>
                                <td class="d-none d-md-table-cell">
                                    <span class="badge badge-{% if beneficiary.status == 'aktif' %}success{% elif beneficiary.status == 'pending' %}warning{% else %}secondary{% endif %}">
                                        {{ beneficiary.get_status_display }}
                                    </span>
                                </td>
                                <td class="d-none d-lg-table-cell"><span class="text-muted">{{ beneficiary.created_at|date:"d/m/Y" }}</span></td>
                                <td class="text-center">
                                    <div class="btn-group btn-group-sm" role="group">
                                        <a href="{% url 'admin_panel:beneficiary_detail' beneficiary.pk %}"
                                           class="btn btn-outline-primary btn-sm" title="Detail" data-toggle="tooltip">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        <a href="{% url 'admin_panel:beneficiary_update' beneficiary.pk %}"
                                           class="btn btn-outline-warning btn-sm" title="Edit" data-toggle="tooltip">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        {% if beneficiary.person.phone_number or beneficiary.person.mobile_number %}
                                        <a href="https://wa.me/{{ beneficiary.person.phone_number|default:beneficiary.person.mobile_number|cut:'+' }}"
                                           target="_blank" class="btn btn-outline-success btn-sm" title="WhatsApp" data-toggle="tooltip">
                                            <i class="fab fa-whatsapp"></i>
                                        </a>
                                        {% endif %}
                                        <button type="button" class="btn btn-outline-danger btn-sm delete-btn"
                                                data-beneficiary-id="{{ beneficiary.id }}"
                                                data-beneficiary-name="{{ beneficiary.person.name|escapejs }}"
                                                title="Hapus" data-toggle="tooltip">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="8" class="empty-state">
                                    <div class="text-center">
                                        <i class="fas fa-hand-holding-heart"></i>
                                        <h5 class="text-muted">Belum ada data penerima bantuan</h5>
                                        <p class="text-muted">Silakan tambah penerima bantuan baru</p>
                                        <a href="{% url 'admin_panel:beneficiary_create' %}" class="btn btn-success mt-3">
                                            <i class="fas fa-plus mr-1"></i>Tambah Penerima
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>

            {% if beneficiaries.has_other_pages %}
            <div class="pagination">
                <ul class="pagination">
                    {% if beneficiaries.has_previous %}
                        <li class="page-item">
                            <a class="page-link" href="?page=1{% if search %}&search={{ search }}{% endif %}{% if selected_category %}&category={{ selected_category }}{% endif %}{% if selected_status %}&status={{ selected_status }}{% endif %}">First</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="?page={{ beneficiaries.previous_page_number }}{% if search %}&search={{ search }}{% endif %}{% if selected_category %}&category={{ selected_category }}{% endif %}{% if selected_status %}&status={{ selected_status }}{% endif %}">Previous</a>
                        </li>
                    {% endif %}

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

                    {% if beneficiaries.has_next %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ beneficiaries.next_page_number }}{% if search %}&search={{ search }}{% endif %}{% if selected_category %}&category={{ selected_category }}{% endif %}{% if selected_status %}&status={{ selected_status }}{% endif %}">Next</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="?page={{ beneficiaries.paginator.num_pages }}{% if search %}&search={{ search }}{% endif %}{% if selected_category %}&category={{ selected_category }}{% endif %}{% if selected_status %}&status={{ selected_status }}{% endif %}">Last</a>
                        </li>
                    {% endif %}
                </ul>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<div class="modal" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">
                    <i class="fas fa-exclamation-triangle text-warning mr-2"></i>Konfirmasi Hapus
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Apakah Anda yakin ingin menghapus penerima bantuan:</p>
                <div class="alert alert-warning">
                    <strong id="beneficiaryName"></strong>
                </div>
                <p class="text-muted">Data yang sudah dihapus tidak dapat dikembalikan.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteBtn">
                    <i class="fas fa-trash mr-1"></i>Hapus Data
                </button>
            </div>
        </div>
    </div>
</div>

{% endblock content %}

{% block extra_js %}
{% csrf_token %}
<script>let deleteId = null;
let selectedBeneficiaries = [];

$('#filterForm select').on('change', function() {
    $('#filterForm').submit();
});

let searchTimeout;
$('#search').on('input', function() {
    clearTimeout(searchTimeout);
    searchTimeout = setTimeout(function() {
        $('#filterForm').submit();
    }, 500);
});

function showDeleteModal(id, name) {
    deleteId = id;
    $('#beneficiaryName').text(name);
    $('#deleteModal').modal('show');
}

$('#confirmDeleteBtn').click(function() {
    if (deleteId) {
        const submitBtn = $(this);
        const originalText = submitBtn.html();
        submitBtn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin mr-1"></i>Menghapus...');

        $.ajaxSetup({
            beforeSend: function(xhr, settings) {
                if (!this.crossDomain) {
                    xhr.setRequestHeader("X-CSRFToken", $('[name=csrfmiddlewaretoken]').val());
                }
            }
        });

        $.ajax({
            url: `{% url 'admin_panel:beneficiary_delete' 0 %}`.replace('0', deleteId),
            type: 'POST',
            success: function(response) {
                $('#deleteModal').modal('hide');
                if (response.success) {
                    showSuccess(response.message || 'Data penerima bantuan berhasil dihapus');
                    setTimeout(() => location.reload(), 1000);
                } else {
                    showError(response.message || 'Gagal menghapus data');
                }
            },
            error: function(xhr, status, error) {
                $('#deleteModal').modal('hide');
                console.error('Delete error:', xhr.responseText);
                showError('Terjadi kesalahan saat menghapus data: ' + error);
            },
            complete: function() {
                submitBtn.prop('disabled', false).html(originalText);
            }
        });
    }
});

$('#deleteModal').on('hidden.bs.modal', function() {
    deleteId = null;
});

$(document).ready(function() {
    $('[data-toggle="tooltip"]').tooltip();
    $('[title]').tooltip({
        placement: 'top',
        trigger: 'hover'
    });

    $(document).on('click', '.delete-btn', function() {
        const beneficiaryId = $(this).data('beneficiary-id');
        const beneficiaryName = $(this).data('beneficiary-name');
        showDeleteModal(beneficiaryId, beneficiaryName);
    });
});

$('#selectAll').on('change', function() {
    const isChecked = $(this).is(':checked');
    $('.beneficiary-checkbox').prop('checked', isChecked);
    updateBulkActions();
});

$('.beneficiary-checkbox').on('change', function() {
    updateBulkActions();
    updateSelectAll();
});

function updateBulkActions() {
    const checkedBoxes = $('.beneficiary-checkbox:checked');
    const count = checkedBoxes.length;

    if (count > 0) {
        $('#bulkActions').removeClass('d-none');
        $('#bulkDeleteBtn, #bulkEditBtn, #bulkExportBtn').prop('disabled', false);
        $('#bulkDeleteBtn').html(`<i class="fas fa-trash mr-1"></i>Hapus ${count} Item`);
    } else {
        $('#bulkActions').addClass('d-none');
        $('#bulkDeleteBtn, #bulkEditBtn, #bulkExportBtn').prop('disabled', true);
    }
}

function updateSelectAll() {
    const totalBoxes = $('.beneficiary-checkbox').length;
    const checkedBoxes = $('.beneficiary-checkbox:checked').length;

    if (checkedBoxes === 0) {
        $('#selectAll').prop('indeterminate', false).prop('checked', false);
    } else if (checkedBoxes === totalBoxes) {
        $('#selectAll').prop('indeterminate', false).prop('checked', true);
    } else {
        $('#selectAll').prop('indeterminate', true);
    }
}

$('#bulkDeleteBtn').on('click', function() {
    const selectedIds = $('.beneficiary-checkbox:checked').map(function() {
        return $(this).val();
    }).get();

    if (selectedIds.length === 0) {
        showWarning('Pilih item yang akan dihapus');
        return;
    }

    if (confirm(`Apakah Anda yakin ingin menghapus ${selectedIds.length} item?`)) {
        bulkDeleteBeneficiaries(selectedIds);
    }
});

function bulkDeleteBeneficiaries(ids) {
    const btn = $('#bulkDeleteBtn');
    const originalText = btn.html();
    btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin mr-1"></i>Menghapus...');

    const formData = new FormData();
    formData.append('action', 'bulk_delete');
    formData.append('csrfmiddlewaretoken', $('[name=csrfmiddlewaretoken]').val());
    ids.forEach(id => {
        formData.append('ids', id);
    });

    $.ajax({
        url: '{% url "admin_panel:beneficiaries_list" %}',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
            if (response.success) {
                showSuccess(response.message);

                $('.beneficiary-checkbox:checked').prop('checked', false);
                $('#selectAll').prop('checked', false);
                updateBulkActions();
                setTimeout(() => location.reload(), 1500);
            } else {
                showError(response.message || 'Gagal menghapus data');
            }
        },
        error: function(xhr, status, error) {
            console.error('Bulk delete error:', xhr.responseText);
            let errorMessage = 'Terjadi kesalahan saat menghapus data';
            try {
                const response = JSON.parse(xhr.responseText);
                if (response.message) {
                    errorMessage = response.message;
                }
            } catch (e) {

            }
            showError(errorMessage);
        },
        complete: function() {
            btn.prop('disabled', false).html(originalText);
        }
    });
}

    $('#toast-container').append(toast);
    toast.toast('show');
    setTimeout(() => toast.remove(), 5000);
}

$('#importBtn').on('click', function() {
    showAlert('Fitur Import sedang dalam pengembangan. Coming soon!', 'info');
});

$('#exportBtn').on('click', function() {
    showAlert('Fitur Export sedang dalam pengembangan. Coming soon!', 'info');
});
</script>
{% endblock extra_js %}