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

{% block page_title %}{{ form_title|default:"Tambah Keluarga" }}{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/admin/references/references-form.css' %}">
<link rel="stylesheet" href="{% static 'css/admin/references/references-general.css' %}">
<style>
    /* Ensure Django form fields have proper styling */
    #id_nomor_kk, #id_nama_kepala_keluarga, #id_alamat, #id_dusun, #id_rt, #id_rw {
        border-radius: 8px;
        border: 2px solid #e5e7eb;
        padding: 0.75rem;
        font-size: 1rem;
        transition: all 0.3s ease;
        width: 100%;
    }

    #id_nomor_kk:focus, #id_nama_kepala_keluarga:focus, #id_alamat:focus, #id_dusun:focus, #id_rt:focus, #id_rw:focus {
        border-color: #10b981;
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
        outline: none;
    }

    /* Ensure select options are visible */
    #id_dusun option, #id_rt option, #id_rw option {
        padding: 0.5rem;
        background: white;
        color: #374151;
    }

    #id_dusun option:checked, #id_rt option:checked, #id_rw option:checked {
        background: #10b981;
        color: white;
    }

    /* Anggota keluarga styling */
    .search-box {
        position: relative;
    }

    .search-results {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        border: 2px solid #e5e7eb;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        max-height: 300px;
        overflow-y: auto;
        z-index: 1000;
        margin-top: 0.5rem;
        display: none;
    }

    .search-result-item {
        padding: 1rem;
        cursor: pointer;
        border-bottom: 1px solid #f3f4f6;
        display: flex;
        align-items: center;
        gap: 1rem;
        transition: all 0.2s ease;
    }

    .search-result-item:hover {
        background: #f9fafb;
    }

    .search-result-item:last-child {
        border-bottom: none;
    }

    .search-result-item.selected {
        background: #e0f2fe;
        color: #0277bd;
    }

    .avatar-placeholder {
        width: 48px;
        height: 48px;
        background: #f3f4f6;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #6b7280;
        font-size: 1.2rem;
    }

    .anggota-item {
        transition: all 0.3s ease;
    }

    .anggota-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    .selected-anggota-section {
        background: #f8fafc;
        padding: 1.5rem;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
    }

    /* Dropdown styling */
    #rt_select, #rw_select {
        border-radius: 8px;
        border: 2px solid #e5e7eb;
        padding: 0.75rem;
        font-size: 1rem;
        transition: all 0.3s ease;
        width: 100%;
    }

    #rt_select:focus, #rw_select:focus {
        border-color: #10b981;
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
        outline: none;
    }

    #rt_select:disabled, #rw_select:disabled {
        background-color: #f9fafb;
        color: #6b7280;
        cursor: not-allowed;
    }
</style>
{% endblock %}

{% block content %}
<div class="penduduk-form-wrapper">

    <div class="penduduk-form-header">
        <div class="row">
            <div class="col-12">
                <div class="d-flex flex-column flex-lg-row justify-content-between align-items-start align-items-lg-center">
                    <div class="mb-3 mb-lg-0">
                        <h1 class="h2 mb-2">
                            <i class="fas fa-{{ form_icon|default:'plus' }} penduduk-text-primary"></i>
                            {{ form_title|default:"Tambah Keluarga" }}
                        </h1>
                        <p class="penduduk-text-muted mb-0">{{ form_subtitle|default:"Lengkapi data keluarga baru" }}</p>
                    </div>
                    <div class="penduduk-form-btn-group">
                        <a href="{% url 'admin_panel:references_keluarga_list' %}" class="penduduk-form-btn penduduk-form-btn-secondary">
                            <i class="fas fa-arrow-left"></i>
                            Kembali
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <form id="keluargaForm" method="post" novalidate action="{% if keluarga %}{% url 'admin_panel:references_keluarga_update_anggota' keluarga.id %}{% else %}{% url 'admin_panel:references_keluarga_add' %}{% endif %}">
        {% csrf_token %}

        <div class="penduduk-form-row row">

            <div class="col-lg-8 col-12">
                <div class="penduduk-form-card card">
                    <div class="card-header">
                        <h6>
                            <i class="fas fa-home"></i>
                            Informasi Keluarga
                        </h6>
                    </div>
                    <div class="card-body">
                        {% if keluarga %}

                        <div class="row">

                            <div class="col-md-6 mb-3">
                                <label class="form-label">Nomor KK</label>
                                <div class="form-control-plaintext bg-light p-3 rounded border">
                                    <i class="fas fa-id-card text-primary mr-2"></i>
                                    <strong>{{ keluarga.nomor_kk|default:"-" }}</strong>
                                </div>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="form-label">Nama Kepala Keluarga</label>
                                <div class="form-control-plaintext bg-light p-3 rounded border">
                                    <i class="fas fa-user-tie text-primary mr-2"></i>
                                    <strong>{{ keluarga.nama_kepala_keluarga|default:"-" }}</strong>
                                </div>
                            </div>

                            <div class="col-12 mb-3">
                                <label class="form-label">Alamat Lengkap</label>
                                <div class="form-control-plaintext bg-light p-3 rounded border">
                                    <i class="fas fa-map-marker-alt text-primary mr-2"></i>
                                    {{ keluarga.alamat|default:"-" }}
                                </div>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="form-label">Dusun</label>
                                <div class="form-control-plaintext bg-light p-3 rounded border">
                                    <i class="fas fa-home text-primary mr-2"></i>
                                    {{ keluarga.dusun.name|default:"-" }}
                                </div>
                            </div>

                            <div class="col-md-3 mb-3">
                                <label class="form-label">RT</label>
                                <div class="form-control-plaintext bg-light p-3 rounded border">
                                    <i class="fas fa-building text-primary mr-2"></i>
                                    {{ keluarga.rt|default:"-" }}
                                </div>
                            </div>

                            <div class="col-md-3 mb-3">
                                <label class="form-label">RW</label>
                                <div class="form-control-plaintext bg-light p-3 rounded border">
                                    <i class="fas fa-city text-primary mr-2"></i>
                                    {{ keluarga.rw|default:"-" }}
                                </div>
                            </div>

                            <div class="col-12 mb-3">
                                <div class="alert alert-info">
                                    <i class="fas fa-info-circle mr-2"></i>
                                    <strong>Informasi:</strong> Untuk mengedit data kepala keluarga, silakan
                                    {% if kepala_keluarga_id %}
                                    <a href="{% url 'admin_panel:references_penduduk_edit' kepala_keluarga_id %}" class="alert-link">
                                        klik di sini
                                    </a>
                                    {% else %}
                                    <span class="text-muted">Data kepala keluarga tidak ditemukan</span>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        {% else %}

                        <div class="row">

                            <div class="col-md-6 mb-3">
                                <label for="{{ form.nomor_kk.id_for_label }}" class="form-label">
                                    {{ form.nomor_kk.label }} <span class="text-danger">*</span>
                                </label>
                                {{ form.nomor_kk }}
                                {% if form.nomor_kk.errors %}
                                    <div class="text-danger small mt-1">
                                        {% for error in form.nomor_kk.errors %}
                                            {{ error }}
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="{{ form.nama_kepala_keluarga.id_for_label }}" class="form-label">
                                    {{ form.nama_kepala_keluarga.label }} <span class="text-danger">*</span>
                                </label>
                                {{ form.nama_kepala_keluarga }}
                                {% if form.nama_kepala_keluarga.errors %}
                                    <div class="text-danger small mt-1">
                                        {% for error in form.nama_kepala_keluarga.errors %}
                                            {{ error }}
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </div>

                            <div class="col-12 mb-3">
                                <label for="{{ form.alamat.id_for_label }}" class="form-label">
                                    {{ form.alamat.label }} <span class="text-danger">*</span>
                                </label>
                                {{ form.alamat }}
                                {% if form.alamat.errors %}
                                    <div class="text-danger small mt-1">
                                        {% for error in form.alamat.errors %}
                                            {{ error }}
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="{{ form.dusun.id_for_label }}" class="form-label">
                                    {{ form.dusun.label }} <span class="text-danger">*</span>
                                </label>
                                {{ form.dusun }}
                                {% if form.dusun.errors %}
                                    <div class="text-danger small mt-1">
                                        {% for error in form.dusun.errors %}
                                            {{ error }}
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </div>

                            <div class="col-md-3 mb-3">
                                <label for="rt_select" class="form-label">
                                    <i class="fas fa-building me-1"></i>
                                    RT
                                </label>
                                <select class="form-control" id="rt_select" name="rt" disabled>
                                    <option value="">Pilih RT</option>
                                </select>
                                <div class="form-text">
                                    <i class="fas fa-info-circle"></i>
                                    <span>Pilih RW terlebih dahulu untuk memuat daftar RT</span>
                                </div>
                            </div>

                            <div class="col-md-3 mb-3">
                                <label for="rw_select" class="form-label">
                                    <i class="fas fa-city me-1"></i>
                                    RW
                                </label>
                                <select class="form-control" id="rw_select" name="rw" disabled>
                                    <option value="">Pilih RW</option>
                                </select>
                                <div class="form-text">
                                    <i class="fas fa-info-circle"></i>
                                    <span>Pilih Dusun terlebih dahulu untuk memuat daftar RW</span>
                                </div>
                            </div>
                        </div>
                        {% endif %}
                    </div>
                </div>

                <div class="penduduk-form-card card mt-4">
                    <div class="card-header">
                        <h6>
                            <i class="fas fa-users"></i>
                            Anggota Keluarga
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="anggota-section">
                            <div class="row">
                                <div class="col-md-8">
                                    <div class="search-box mb-3">
                                        <label for="searchPenduduk" class="form-label">
                                            <i class="fas fa-search me-1"></i>
                                            Cari Penduduk
                                        </label>
                                        <input type="text" class="form-control" id="searchPenduduk" placeholder="Ketik nama atau NIK penduduk...">
                                        <div class="search-results" id="searchResults"></div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="selected-count mb-3">
                                        <div class="alert alert-info">
                                            <i class="fas fa-info-circle me-1"></i>
                                            <strong>Anggota Terpilih:</strong> <span id="anggotaCount">0</span> orang
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="selected-anggota-section">
                                <h6 class="mb-3">
                                    <i class="fas fa-list me-1"></i>
                                    Daftar Anggota Keluarga
                                </h6>
                                <div class="selected-anggota" id="selectedAnggota">
                                    {% for anggota in current_anggota %}
                                    <div class="anggota-item" data-id="{{ anggota.id }}">
                                        <div class="d-flex justify-content-between align-items-center p-3 border rounded mb-2">
                                            <div class="d-flex align-items-center">
                                                <div class="avatar-placeholder me-3">
                                                    <i class="fas fa-user"></i>
                                                </div>
                                                <div>
                                                    <h6 class="mb-1">{{ anggota.name }}</h6>
                                                    <small class="text-muted">NIK: {{ anggota.nik }}</small>
                                                </div>
                                            </div>
                                            <button type="button" class="btn btn-sm btn-outline-danger" onclick="removeAnggota({{ anggota.id }})">
                                                <i class="fas fa-times"></i>
                                            </button>
                                        </div>
                                    </div>
                                    {% endfor %}
                                </div>
                            </div>

                            {% for anggota in current_anggota %}
                            <input type="hidden" name="anggota_keluarga" value="{{ anggota.id }}">
                            {% endfor %}
                        </div>
                    </div>
                </div>

            </div>

            <div class="col-lg-4 col-12">

                <div class="penduduk-form-card card mb-4">
                    <div class="card-header">
                        <h6>
                            <i class="fas fa-toggle-on"></i>
                            Status
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input" id="is_active" name="is_active"
                                       {% if keluarga.is_active != False %}checked{% endif %}>
                                <label class="custom-control-label" for="is_active">
                                    Keluarga Aktif
                                </label>
                            </div>
                        </div>
                        <small class="text-muted">
                            Keluarga yang tidak aktif tidak akan muncul dalam laporan.
                        </small>
                    </div>
                </div>

                <div class="penduduk-form-card card">
                    <div class="card-body">
                        <div class="d-grid gap-2">
                            {% if keluarga %}
                            <button type="submit" class="penduduk-form-btn penduduk-form-btn-primary">
                                <i class="fas fa-users"></i>
                                Update Anggota
                            </button>
                            {% else %}
                            <button type="submit" class="penduduk-form-btn penduduk-form-btn-primary">
                                <i class="fas fa-save"></i>
                                Simpan Data
                            </button>
                            {% endif %}
                            <a href="{% url 'admin_panel:references_keluarga_list' %}" class="penduduk-form-btn penduduk-form-btn-danger">
                                <i class="fas fa-times"></i>
                                Batal
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

{% endblock %}

{% block extra_js %}
<script>let selectedAnggota = new Set();
let searchTimeout;

$(document).ready(function() {

    {% for anggota in current_anggota %}
    selectedAnggota.add({{ anggota.id }});
    {% endfor %}

    // Update anggota count on page load
    updateAnggotaCount();

    $('#keluargaForm').on('submit', function(e) {
        if (!validateForm()) {
            e.preventDefault();
        }
    });

    $('#id_nomor_kk').on('input', function() {
        validateKK(this);
    });

    // Handle dusun change to load RW options
    $('#id_dusun').on('change', function() {
        const dusunId = $(this).val();
        if (dusunId) {
            loadRWOptions(dusunId);
        } else {
            $('#rw_select').empty().append('<option value="">Pilih RW</option>').prop('disabled', true);
            $('#rt_select').empty().append('<option value="">Pilih RT</option>').prop('disabled', true);
        }
    });

    // Handle RW change to load RT options
    $('#rw_select').on('change', function() {
        const rwId = $(this).val();
        if (rwId) {
            loadRTOptions(rwId);
        } else {
            $('#rt_select').empty().append('<option value="">Pilih RT</option>').prop('disabled', true);
        }
    });

    $('#searchPenduduk').on('input', function() {
        const query = $(this).val();
        if (query.length >= 2) {
            clearTimeout(searchTimeout);
            searchTimeout = setTimeout(() => {
                searchPenduduk(query);
            }, 300);
        } else {
            $('#searchResults').hide();
        }
    });

    $(document).on('click', function(e) {
        if (!$(e.target).closest('.search-box').length) {
            $('#searchResults').hide();
        }
    });
});

function loadRWOptions(dusunId) {
    fetch(`/admin-panel/api/references/rw/by-dusun/${dusunId}/`)
        .then(response => response.json())
        .then(data => {
            if (data.success && data.data) {
                const select = $('#rw_select');
                select.empty().append('<option value="">Pilih RW</option>').prop('disabled', false);
                
                data.data.forEach(function(rw) {
                    select.append(`<option value="${rw.id}">RW ${rw.rw_number}</option>`);
                });
            }
        })
        .catch(error => {
            console.error('Error loading RW options:', error);
        });
}

function loadRTOptions(rwId) {
    fetch(`/admin-panel/api/references/rt/by-rw/${rwId}/`)
        .then(response => response.json())
        .then(data => {
            if (data.success && data.data) {
                const select = $('#rt_select');
                select.empty().append('<option value="">Pilih RT</option>').prop('disabled', false);
                
                data.data.forEach(function(rt) {
                    select.append(`<option value="${rt.rt_number}">RT ${rt.rt_number}</option>`);
                });
            }
        })
        .catch(error => {
            console.error('Error loading RT options:', error);
        });
}

function searchPenduduk(query) {

    $('#searchResults').html('<div class="search-result-item"><i class="fas fa-spinner fa-spin mr-2"></i>Mencari...</div>').show();

    fetch(`/admin-panel/api/references/residents/search/?q=${encodeURIComponent(query)}`, {
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
        .then(response => response.json())
        .then(data => {
            if (data.success && data.data && Array.isArray(data.data)) {
                displaySearchResults(data.data);
            } else {
                console.error('API returned error or invalid data structure:', data);
                $('#searchResults').html('<div class="search-result-item text-danger">Error: ' + (data.message || 'Tidak dapat memuat data penduduk') + '</div>').show();
            }
        })
        .catch(error => {
            console.error('Error searching penduduk:', error);
            $('#searchResults').html('<div class="search-result-item">Error saat mencari data</div>').show();
        });
}

function displaySearchResults(pendudukList) {
    const resultsContainer = $('#searchResults');
    resultsContainer.empty();

    if (pendudukList.length === 0) {
        resultsContainer.html('<div class="search-result-item">Tidak ada data ditemukan</div>');
    } else {
        pendudukList.forEach(penduduk => {
            const isSelected = selectedAnggota.has(penduduk.id);
            const itemClass = isSelected ? 'search-result-item selected' : 'search-result-item';
            const pendudukId = penduduk.id || '';
            const pendudukName = (penduduk.name || 'Nama tidak tersedia').replace(/'/g, "\\'");
            const pendudukNik = (penduduk.nik || '').replace(/'/g, "\\'");
            const nikDisplay = penduduk.nik || 'Tidak ada';
            const nameDisplay = penduduk.name || 'Nama tidak tersedia';

            const itemHtml = `
                <div class="${itemClass}" data-id="${pendudukId}" onclick="toggleAnggota(${pendudukId}, '${pendudukName}', '${pendudukNik}')">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <strong>${nameDisplay}</strong>
                            <br>
                            <small class="text-muted">NIK: ${nikDisplay}</small>
                        </div>
                        <div>
                            <i class="fas fa-${isSelected ? 'check-circle text-success' : 'plus-circle text-primary'}"></i>
                        </div>
                    </div>
                </div>
            `;
            resultsContainer.append(itemHtml);
        });
    }

    resultsContainer.show();
}

function toggleAnggota(id, name, nik) {
    if (selectedAnggota.has(id)) {
        removeAnggota(id);
    } else {
        addAnggota(id, name, nik);
    }
}

function addAnggota(id, name, nik) {
    selectedAnggota.add(id);

    const anggotaItem = `
        <div class="anggota-item" data-id="${id}">
            <div class="d-flex justify-content-between align-items-center p-3 border rounded mb-2">
                <div class="d-flex align-items-center">
                    <div class="avatar-placeholder me-3">
                        <i class="fas fa-user"></i>
                    </div>
                    <div>
                        <h6 class="mb-1">${name}</h6>
                        <small class="text-muted">NIK: ${nik}</small>
                    </div>
                </div>
                <button type="button" class="btn btn-sm btn-outline-danger" onclick="removeAnggota(${id})">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>
    `;
    $('#selectedAnggota').append(anggotaItem);

    const hiddenInput = `<input type="hidden" name="anggota_keluarga" value="${id}">`;
    $('#keluargaForm').append(hiddenInput);

    $(`.search-result-item[data-id="${id}"]`).addClass('selected');
    $(`.search-result-item[data-id="${id}"] .fas`).removeClass('fa-plus-circle text-primary').addClass('fa-check-circle text-success');
    
    updateAnggotaCount();
}

function removeAnggota(id) {
    selectedAnggota.delete(id);

    $(`.anggota-item[data-id="${id}"]`).remove();

    $(`input[name="anggota_keluarga"][value="${id}"]`).remove();

    $(`.search-result-item[data-id="${id}"]`).removeClass('selected');
    $(`.search-result-item[data-id="${id}"] .fas`).removeClass('fa-check-circle text-success').addClass('fa-plus-circle text-primary');
    
    updateAnggotaCount();
}

function updateAnggotaCount() {
    const count = selectedAnggota.size;
    $('#anggotaCount').text(count);
}

function hideDropdown() {
    $('#searchResults').hide();
}

function validateForm() {
    let isValid = true;
    const form = document.getElementById('keluargaForm');

    form.classList.remove('was-validated');

    const requiredFields = ['id_nomor_kk', 'id_nama_kepala_keluarga', 'id_alamat', 'id_dusun'];

    requiredFields.forEach(function(fieldName) {
        const field = document.getElementById(fieldName);
        if (!field.value.trim()) {
            field.setCustomValidity('Field ini harus diisi');
            isValid = false;
        } else {
            field.setCustomValidity('');
        }
    });

    const kk = document.getElementById('id_nomor_kk');
    if (kk.value && !/^\d{16}$/.test(kk.value)) {
        kk.setCustomValidity('Nomor KK harus terdiri dari 16 digit angka');
        isValid = false;
    }

    if (!isValid) {
        form.classList.add('was-validated');
    }

    return isValid;
}

function validateKK(input) {
    const kk = input.value;
    if (kk && !/^\d{16}$/.test(kk)) {
        input.setCustomValidity('Nomor KK harus terdiri dari 16 digit angka');
    } else {
        input.setCustomValidity('');
    }
}
</script>
{% endblock %}