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

{% block page_title %}{{ form_title|default:"Tambah Dusun" }}{% 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' %}">
{% 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 Dusun" }}
                        </h1>
                        <p class="penduduk-text-muted mb-0">{{ form_subtitle|default:"Lengkapi data dusun baru" }}</p>
                    </div>
                    <div class="penduduk-form-btn-group">
                        <a href="{% url 'admin_panel:references_dusun_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="dusunForm" method="post" novalidate>
        {% 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-map-marker-alt"></i>
                            Informasi Dusun
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row">

                            <div class="col-md-6 col-12 penduduk-form-field">
                                <label for="name" class="form-label">
                                    Nama Dusun <span class="text-danger">*</span>
                                </label>
                                <input type="text" class="form-control" id="name" name="name"
                                       value="{{ dusun.name|default:'' }}" required>
                                <div class="invalid-feedback">
                                    Nama dusun harus diisi.
                                </div>
                            </div>

                            <div class="col-md-6 col-12 penduduk-form-field">
                                <label for="code" class="form-label">
                                    Kode Dusun
                                </label>
                                <input type="text" class="form-control" id="code" name="code"
                                       value="{{ dusun.code|default:'' }}" placeholder="Contoh: DUS001">
                                <small class="form-text text-muted">
                                    Kode unik untuk identifikasi dusun (Opsional)
                                </small>
                            </div>

                            <div class="col-12 penduduk-form-field">
                                <label for="description" class="form-label">
                                    Deskripsi
                                </label>
                                <textarea class="form-control" id="description" name="description" rows="3"
                                          placeholder="Deskripsi dusun...">{{ dusun.description|default:'' }}</textarea>
                            </div>

                            <div class="col-md-6 col-12 penduduk-form-field">
                                <label for="area_size" class="form-label">
                                    Luas Wilayah (Hektar)
                                </label>
                                <input type="text" class="form-control" id="area_size" name="area_size"
                                       value="{{ dusun.area_size|floatformat:2|default:'' }}"
                                       placeholder="Masukkan luas wilayah dalam hektar (contoh: 22.79)"
                                       pattern="[0-9]+(\.[0-9]+)?" title="Masukkan angka dengan titik sebagai pemisah desimal">
                            </div>

                            <div class="col-md-6 col-12 penduduk-form-field">
                                <label for="population_count" class="form-label">
                                    Jumlah Penduduk
                                </label>
                                <input type="number" class="form-control" id="population_count"
                                       value="{{ dusun.population_count|default:0 }}" readonly
                                       style="background-color: #f8f9fa; cursor: not-allowed;">
                                <small class="form-text text-muted">
                                    <i class="fas fa-info-circle mr-1"></i>
                                    Jumlah penduduk dihitung otomatis dari data penduduk yang terdaftar
                                </small>
                            </div>

                            <div class="col-12 penduduk-form-field">
                                <label for="kepala_dusun_search" class="form-label">
                                    Kepala Dusun
                                </label>
                                <div class="position-relative">
                                    <input type="text" class="form-control" id="kepala_dusun_search"
                                           placeholder="Ketik nama atau NIK kepala dusun..." autocomplete="off">
                                    <input type="hidden" id="kepala_dusun" name="kepala_dusun" value="{{ dusun.kepala_dusun.id|default:'' }}">
                                    <div id="kepala_dusun_dropdown" class="dropdown-menu" style="display: none; width: 100%; max-height: 300px; overflow-y: auto; z-index: 1000;">

                                    </div>
                                </div>
                                <div id="selected_kepala_dusun" class="selected-item mt-2" style="display: none;">
                                    <div class="d-flex align-items-center p-2 bg-light rounded">
                                        <div class="avatar-placeholder me-2">
                                            <i class="fas fa-user"></i>
                                        </div>
                                        <div class="flex-grow-1">
                                            <div class="fw-bold" id="selected_name"></div>
                                            <small class="text-muted" id="selected_details"></small>
                                        </div>
                                        <button type="button" class="btn btn-sm btn-outline-danger" id="clear_selection">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                </div>
                                <small class="form-text text-muted">
                                    <i class="fas fa-search mr-1"></i>
                                    Cari kepala dusun dari semua data penduduk (Opsional - boleh dikosongkan jika belum ada data)
                                </small>
                            </div>

                            <div class="col-md-6 col-12 penduduk-form-field">
                                <label for="rt_count" class="form-label">
                                    Jumlah RT
                                </label>
                                <input type="number" class="form-control" id="rt_count"
                                       value="{{ dusun.get_rt_count|default:0 }}" readonly
                                       style="background-color: #f8f9fa; cursor: not-allowed;">
                                <small class="form-text text-muted">
                                    <i class="fas fa-info-circle mr-1"></i>
                                    Jumlah RT dihitung otomatis dari data lorong
                                </small>
                            </div>

                            <div class="col-md-6 col-12 penduduk-form-field">
                                <label for="lorong_count" class="form-label">
                                    Jumlah Lorong
                                </label>
                                <input type="number" class="form-control" id="lorong_count"
                                       value="{{ dusun.get_lorong_count|default:0 }}" readonly
                                       style="background-color: #f8f9fa; cursor: not-allowed;">
                                <small class="form-text text-muted">
                                    <i class="fas fa-info-circle mr-1"></i>
                                    Jumlah lorong dihitung otomatis dari data lorong
                                </small>
                            </div>
                        </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 dusun.is_active %}checked{% endif %}>
                                <label class="custom-control-label" for="is_active">
                                    Dusun Aktif
                                </label>
                            </div>
                        </div>
                        <small class="text-muted">
                            Dusun 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">
                            <button type="submit" class="penduduk-form-btn penduduk-form-btn-primary">
                                <i class="fas fa-save"></i>
                                Simpan Data
                            </button>
                            <a href="{% url 'admin_panel:references_dusun_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>$(document).ready(function() {

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

    $('#area_size').on('input', function() {
        let value = $(this).val();

        value = value.replace(',', '.');
        $(this).val(value);

        validateAreaSize();
    });

    $('#area_size').on('blur', function() {
        validateAreaSize();
    });

    $('#kepala_dusun_search').on('input', function() {
        const query = $(this).val();
        searchPenduduk(query);
    });

    $('#kepala_dusun_dropdown').on('click', '.penduduk-item', function() {
        const id = $(this).data('id');
        const name = $(this).data('name');
        const nik = $(this).data('nik');
        const phone = $(this).data('phone');
        const occupation = $(this).data('occupation');
        const address = $(this).data('address');

        selectPenduduk(id, name, nik, phone, occupation, address);
    });

    $('#clear_selection').on('click', function() {
        clearSelection();
    });

    $(document).on('click', function(e) {
        if (!$(e.target).closest('#kepala_dusun_search, #kepala_dusun_dropdown').length) {
            hideDropdown();
        }
    });

    {% if dusun.kepala_dusun %}
    const existingKepalaDusun = {
        id: {{ dusun.kepala_dusun.id }},
        name: '{{ dusun.kepala_dusun.name }}',
        nik: '{{ dusun.kepala_dusun.nik }}',
        phone: '{{ dusun.kepala_dusun.phone_number|default:dusun.kepala_dusun.mobile_number|default:"" }}',
        occupation: '{{ dusun.kepala_dusun.occupation|default:"" }}',
        address: '{{ dusun.kepala_dusun.address }}'
    };

    document.getElementById('kepala_dusun').value = existingKepalaDusun.id;
    document.getElementById('selected_name').textContent = existingKepalaDusun.name;
    document.getElementById('selected_details').innerHTML = `
        <i class="fas fa-id-card"></i>${existingKepalaDusun.nik}<br>
        <i class="fas fa-phone"></i>${existingKepalaDusun.phone || '-'}<br>
        <i class="fas fa-briefcase"></i>${existingKepalaDusun.occupation || '-'}
    `;
    document.getElementById('selected_kepala_dusun').style.display = 'block';
    {% endif %}
});

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

    form.classList.remove('was-validated');
    $('.form-control').removeClass('is-invalid');
    $('.invalid-feedback').hide();

    const nameField = document.getElementById('name');
    if (!nameField.value.trim()) {
        nameField.setCustomValidity('Nama dusun harus diisi');
        $(nameField).addClass('is-invalid');
        $(nameField).siblings('.invalid-feedback').show();
        isValid = false;
    } else {
        nameField.setCustomValidity('');
        $(nameField).removeClass('is-invalid');
    }

    const areaSizeField = document.getElementById('area_size');
    if (areaSizeField.value.trim()) {
        const areaSizeValue = areaSizeField.value.replace(',', '.');
        const areaSizeNumber = parseFloat(areaSizeValue);

        if (isNaN(areaSizeNumber) || areaSizeNumber < 0) {
            areaSizeField.setCustomValidity('Masukkan angka yang valid (contoh: 22.79)');
            $(areaSizeField).addClass('is-invalid');
            isValid = false;
        } else {
            areaSizeField.setCustomValidity('');
            $(areaSizeField).removeClass('is-invalid');

            areaSizeField.value = areaSizeNumber.toFixed(2);
        }
    }

    if (!isValid) {
        form.classList.add('was-validated');
        showAlert('Mohon isi nama dusun.', 'error');
    }

    return isValid;
}

function generateKodeDusun() {
    const nama = document.getElementById('name').value;
    const kode = document.getElementById('code');

    if (nama && !kode.value) {

        const code = 'DUS' + nama.replace(/\s+/g, '').substring(0, 3).toUpperCase();
        kode.value = code;
    }
}

let searchTimeout;

function searchPenduduk(query) {
    console.log('Searching penduduk:', {query});

    if (query.length < 2) {
        hideDropdown();
        return;
    }

    clearTimeout(searchTimeout);
    searchTimeout = setTimeout(() => {
        showKetuaLoading();

        const url = `/admin-panel/api/references/residents/search/?q=${encodeURIComponent(query)}`;
        console.log('Fetching URL:', url);

        fetch(url)
            .then(response => {
                console.log('✅ Response status:', response.status);
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.json();
            })
            .then(data => {
                console.log('✅ API Response:', data);
                console.log('✅ Data length:', data.data ? data.data.length : 0);

                if (data.success && data.data && Array.isArray(data.data)) {
                    if (data.data.length > 0) {
                        console.log('✅ Sample data:', data.data[0]);
                        displayKetuaSearchResults(data.data);
                    } else {
                        console.log('⚠️ No results found');
                        showKetuaNoResults();
                    }
                } else {
                    console.error('❌ API returned error or invalid data structure:', data);
                    showKetuaError(data.message || 'Tidak dapat memuat data penduduk');
                }
            })
            .catch(error => {
                console.error('❌ Error searching penduduk:', error);
                showKetuaNoResults();
            });
    }, 300);
}

function showLoading() {
    const dropdown = document.getElementById('kepala_dusun_dropdown');
    dropdown.innerHTML = '<div class="dropdown-item"><i class="fas fa-spinner fa-spin mr-2"></i>Mencari...</div>';
    showKetuaDropdown();
}

function showKetuaLoading() {
    const dropdown = document.getElementById('kepala_dusun_dropdown');
    dropdown.innerHTML = '<div class="dropdown-item"><i class="fas fa-spinner fa-spin mr-2"></i>Mencari...</div>';
    dropdown.style.display = 'block';
}

function showKetuaNoResults() {
    const dropdown = document.getElementById('kepala_dusun_dropdown');
    dropdown.innerHTML = '<div class="dropdown-item text-muted">Tidak ada penduduk yang ditemukan</div>';
    dropdown.style.display = 'block';
}

function showKetuaError(message) {
    const dropdown = document.getElementById('kepala_dusun_dropdown');
    dropdown.innerHTML = '<div class="dropdown-item text-danger">Error: ' + message + '</div>';
    dropdown.style.display = 'block';
}

function displaySearchResults(pendudukList) {
    const dropdown = document.getElementById('kepala_dusun_dropdown');

    if (pendudukList.length === 0) {
        showKetuaNoResults();
        return;
    }

    dropdown.innerHTML = pendudukList.map(penduduk => {
        const safeName = (penduduk.name || '').replace(/'/g, "\\'");
        const safeNik = (penduduk.nik || '').replace(/'/g, "\\'");
        const safePhone = (penduduk.phone || '').replace(/'/g, "\\'");
        const safeOccupation = (penduduk.occupation || '').replace(/'/g, "\\'");
        const safeAddress = (penduduk.address || '').replace(/'/g, "\\'");
        const dusunName = penduduk.dusun || '-';

        return `
            <div class="dropdown-item penduduk-item" data-id="${penduduk.id || ''}" data-name="${safeName}" data-nik="${safeNik}" data-phone="${safePhone}" data-occupation="${safeOccupation}" data-address="${safeAddress}">
                <div class="d-flex align-items-center">
                    <div class="avatar-placeholder me-2">
                        <i class="fas fa-user"></i>
                    </div>
                    <div class="flex-grow-1">
                        <div class="fw-bold">${penduduk.name || 'Nama tidak tersedia'}</div>
                        <small class="text-muted">NIK: ${penduduk.nik || '-'} | ${dusunName}</small>
                    </div>
                </div>
            </div>
        `;
    }).join('');

    showKetuaDropdown();
}

function displayKetuaSearchResults(pendudukList) {
    const dropdown = document.getElementById('kepala_dusun_dropdown');

    if (pendudukList.length === 0) {
        showKetuaNoResults();
        return;
    }

    dropdown.innerHTML = pendudukList.map(penduduk => {
        const safeName = (penduduk.name || '').replace(/'/g, "\\'");
        const safeNik = (penduduk.nik || '').replace(/'/g, "\\'");
        const safePhone = (penduduk.phone || '').replace(/'/g, "\\'");
        const safeOccupation = (penduduk.occupation || '').replace(/'/g, "\\'");
        const safeAddress = (penduduk.address || '').replace(/'/g, "\\'");
        const dusunName = penduduk.dusun || '-';

        return `
            <div class="dropdown-item penduduk-item" data-id="${penduduk.id || ''}" data-name="${safeName}" data-nik="${safeNik}" data-phone="${safePhone}" data-occupation="${safeOccupation}" data-address="${safeAddress}">
                <div class="d-flex align-items-center">
                    <div class="avatar-placeholder me-2">
                        <i class="fas fa-user"></i>
                    </div>
                    <div class="flex-grow-1">
                        <div class="fw-bold">${penduduk.name || 'Nama tidak tersedia'}</div>
                        <small class="text-muted">NIK: ${penduduk.nik || '-'} | ${dusunName}</small>
                    </div>
                </div>
            </div>
        `;
    }).join('');

    showKetuaDropdown();
}

function showNoResults() {
    const dropdown = document.getElementById('kepala_dusun_dropdown');
    dropdown.innerHTML = '<div class="dropdown-item text-muted">Tidak ada penduduk yang ditemukan</div>';
    showKetuaDropdown();
}

function showKetuaDropdown() {
    document.getElementById('kepala_dusun_dropdown').style.display = 'block';
}

function hideDropdown() {
    document.getElementById('kepala_dusun_dropdown').style.display = 'none';
}

function selectPenduduk(id, name, nik, phone, occupation, address) {
    console.log('Selecting penduduk:', {id, name, nik, phone, occupation, address});

    document.getElementById('kepala_dusun').value = id;

    document.getElementById('kepala_dusun_search').value = '';

    document.getElementById('selected_name').textContent = name;
    document.getElementById('selected_details').innerHTML = `
        <i class="fas fa-id-card"></i>${nik}<br>
        <i class="fas fa-phone"></i>${phone || '-'}<br>
        <i class="fas fa-briefcase"></i>${occupation || '-'}
    `;
    document.getElementById('selected_kepala_dusun').style.display = 'block';

    hideDropdown();

    $('#kepala_dusun_search').removeClass('is-invalid');

    $('#kepala_dusun').trigger('change');
}

function clearSelection() {
    document.getElementById('kepala_dusun').value = '';
    document.getElementById('selected_kepala_dusun').style.display = 'none';
    document.getElementById('kepala_dusun_search').value = '';
}

function validateAreaSize() {
    const areaSizeField = document.getElementById('area_size');
    const value = areaSizeField.value.trim();

    if (value === '') {
        areaSizeField.classList.remove('is-valid', 'is-invalid');
        return true;
    }

    const numericValue = parseFloat(value.replace(',', '.'));

    if (isNaN(numericValue) || numericValue < 0) {
        areaSizeField.classList.remove('is-valid');
        areaSizeField.classList.add('is-invalid');
        areaSizeField.setCustomValidity('Masukkan angka yang valid (contoh: 22.79)');
        return false;
    } else {
        areaSizeField.classList.remove('is-invalid');
        areaSizeField.classList.add('is-valid');
        areaSizeField.setCustomValidity('');
        return true;
    }
}

function showAlert(message, type) {

    $('.notification-toast').remove();

    let bgColor, icon, title;
    if (type === 'success') {
        bgColor = 'linear-gradient(135deg, #28a745 0%, #20c997 100%)';
        icon = 'fa-check-circle';
        title = 'Berhasil';
    } else if (type === 'error') {
        bgColor = 'linear-gradient(135deg, #dc3545 0%, #c82333 100%)';
        icon = 'fa-times-circle';
        title = 'Error';
    } else if (type === 'warning') {
        bgColor = 'linear-gradient(135deg, #ffc107 0%, #e0a800 100%)';
        icon = 'fa-exclamation-triangle';
        title = 'Peringatan';
    } else {
        bgColor = 'linear-gradient(135deg, #17a2b8 0%, #138496 100%)';
        icon = 'fa-info-circle';
        title = 'Informasi';
    }

    const toast = $(`
        <div class="notification-toast" style="
            position: fixed;
            top: 20px;
            right: 20px;
            background: ${bgColor};
            color: white;
            padding: 1rem 1.5rem;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            z-index: 10000;
            min-width: 300px;
            max-width: 400px;
            transform: translateX(100%);
            transition: transform 0.3s ease;
        ">
            <div class="d-flex align-items-center">
                <i class="fas ${icon} fa-lg mr-3"></i>
                <div class="flex-grow-1">
                    <div class="font-weight-bold mb-1">${title}</div>
                    <div class="small">${message}</div>
                </div>
                <button type="button" class="btn-close text-white ml-2" style="
                    background: none;
                    border: none;
                    font-size: 1.2rem;
                    opacity: 0.8;
                    cursor: pointer;
                ">&times;</button>
            </div>
        </div>
    `);

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

    setTimeout(() => {
        toast.css('transform', 'translateX(0)');
    }, 100);

    setTimeout(() => {
        toast.css('transform', 'translateX(100%)');
        setTimeout(() => {
            toast.remove();
        }, 300);
    }, 3000);

    toast.find('.btn-close').on('click', function() {
        toast.css('transform', 'translateX(100%)');
        setTimeout(() => {
            toast.remove();
        }, 300);
    });
}
</script>
{% endblock %}