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

{% block page_title %}{% if lorong %}Edit Data Lorong{% else %}Tambah Data Lorong{% endif %}{% 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-{% if lorong %}edit{% else %}plus{% endif %} penduduk-text-primary"></i>
                        {% if lorong %}Edit Data Lorong{% else %}Tambah Data Lorong{% endif %}
                    </h1>
                    <p class="penduduk-text-muted mb-0">{% if lorong %}Perbarui data lorong yang sudah ada{% else %}Tambah data lorong baru ke dalam sistem{% endif %}</p>
                    </div>
                    <div class="penduduk-form-btn-group">
                        <a href="{% url 'admin_panel:references_lorong_list' %}" class="penduduk-form-btn penduduk-form-btn-secondary">
                            <i class="fas fa-arrow-left"></i>
                            Kembali
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="penduduk-form-row row justify-content-center">
        <div class="col-lg-10 col-12">

            <div class="penduduk-form-card card">
                <div class="card-header">
                    <h6>
                        <i class="fas fa-edit"></i>
                        Form Data Lorong
                    </h6>
                </div>
                <div class="card-body">
                    <form id="lorongForm" method="post" action="{% if lorong %}{% url 'admin_panel:references_lorong_update' lorong.id %}{% else %}{% url 'admin_panel:references_lorong_add' %}{% endif %}" enctype="multipart/form-data">
                        {% csrf_token %}

                        <div class="form-section mb-4">
                            <h6 class="section-title">
                                <i class="fas fa-info-circle mr-2"></i>
                                Informasi Dasar
                            </h6>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="id_nama_lorong" class="form-label">
                                            Nama Lorong <span class="text-danger">*</span>
                                        </label>
                                        <input type="text" class="form-control" id="id_nama_lorong" name="nama_lorong"
                                               placeholder="Masukkan nama lorong" value="{% if lorong %}{{ lorong.nama_lorong }}{% endif %}" required>
                                        <div class="invalid-feedback">
                                            Nama lorong harus diisi
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="id_kode" class="form-label">
                                            Kode Lorong
                                        </label>
                                        <input type="text" class="form-control" id="id_kode" name="kode"
                                               placeholder="Masukkan kode lorong (Opsional)" value="{% if lorong %}{{ lorong.kode }}{% endif %}">
                                        <small class="form-text text-muted">
                                            <i class="fas fa-info-circle mr-1"></i>
                                            Opsional - Bisa dikosongkan
                                        </small>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="id_dusun" class="form-label">
                                            Dusun <span class="text-danger">*</span>
                                        </label>
                                        <select class="form-control" id="id_dusun" name="dusun" required>
                                            <option value="">Pilih Dusun</option>
                                            {% for dusun in dusun_list %}
                                            <option value="{{ dusun.id }}" {% if lorong and lorong.dusun.id == dusun.id %}selected{% endif %}>{{ dusun.name }}</option>
                                            {% endfor %}
                                        </select>
                                        <div class="invalid-feedback">
                                            Dusun harus dipilih
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="id_ketua_lorong" class="form-label">
                                            Ketua Lorong
                                        </label>
                                        <div class="position-relative">
                                            <input type="text" class="form-control" id="id_ketua_lorong_search"
                                                   placeholder="Cari ketua lorong (Opsional)..." autocomplete="off">
                                            <input type="hidden" id="id_ketua_lorong" name="ketua_lorong" value="">
                                            <div id="ketua_lorong_dropdown" class="search-dropdown" style="display: none;">
                                                <div class="search-results" id="ketua_lorong_results">

                                                </div>
                                            </div>
                                        </div>
                                        <div id="selected_ketua_lorong" 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_ketua_name"></div>
                                                    <small class="text-muted" id="selected_ketua_details"></small>
                                                </div>
                                                <button type="button" class="btn btn-sm btn-outline-danger" id="clear_ketua_selection">
                                                    <i class="fas fa-times"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <small class="form-text text-muted">
                                            <i class="fas fa-search mr-1"></i>
                                            Opsional - Cari ketua lorong dari data penduduk (boleh dikosongkan)
                                        </small>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="id_rt_number" class="form-label">
                                            Nomor RT
                                        </label>
                                        <input type="text" class="form-control" id="id_rt_number" name="rt_number"
                                               placeholder="Contoh: 001 (Opsional)" value="{% if lorong %}{{ lorong.rt_number }}{% endif %}">
                                        <small class="form-text text-muted">
                                            <i class="fas fa-info-circle mr-1"></i>
                                            Opsional - Nomor RT untuk lorong ini
                                        </small>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="id_population_count" class="form-label">
                                            Jumlah Penduduk
                                        </label>
                                        <input type="number" class="form-control" id="id_population_count"
                                               value="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>
                            </div>
                        </div>

                        <div class="form-section mb-4">
                            <h6 class="section-title">
                                <i class="fas fa-info mr-2"></i>
                                Informasi Tambahan
                            </h6>
                            <div class="row">
                                <div class="col-12">
                                    <div class="form-group">
                                        <label for="id_description" class="form-label">
                                            Deskripsi Lorong
                                        </label>
                                        <textarea class="form-control" id="id_description" name="description" rows="3"
                                                  placeholder="Masukkan deskripsi lorong">{% if lorong %}{{ lorong.description }}{% endif %}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-section mb-4">
                            <h6 class="section-title">
                                <i class="fas fa-info mr-2"></i>
                                Informasi Tambahan
                            </h6>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="id_length" class="form-label">
                                            Panjang Lorong (Meter)
                                        </label>
                                        <input type="number" class="form-control" id="id_length" name="length"
                                               step="0.01" min="0" placeholder="Masukkan panjang lorong dalam meter" value="{% if lorong %}{{ lorong.length }}{% endif %}">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="id_house_count" class="form-label">
                                            Jumlah Rumah
                                        </label>
                                        <input type="number" class="form-control" id="id_house_count"
                                               value="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 rumah dihitung otomatis dari data penduduk yang terdaftar
                                        </small>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="id_population_count" class="form-label">
                                            Jumlah Penduduk
                                        </label>
                                        <input type="number" class="form-control" id="id_population_count"
                                               value="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>
                            </div>
                        </div>

                        <div class="form-actions">
                            <div class="d-grid gap-2">
                                <button type="submit" class="penduduk-form-btn penduduk-form-btn-primary" id="submitBtn">
                                    <i class="fas fa-save"></i>
                                    Simpan Data
                                </button>
                                <a href="{% url 'admin_panel:references_lorong_list' %}" class="penduduk-form-btn penduduk-form-btn-danger">
                                    <i class="fas fa-times"></i>
                                    Batal
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="previewModal" tabindex="-1" role="dialog" aria-labelledby="previewModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="previewModalLabel">
                    <i class="fas fa-eye mr-2"></i>
                    Preview Data Lorong
                </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="row">
                    <div class="col-md-6">
                        <div class="info-item">
                            <div class="info-label">Nama Lorong</div>
                            <div class="info-value" id="preview_nama">-</div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="info-item">
                            <div class="info-label">Kode Lorong</div>
                            <div class="info-value" id="preview_kode">-</div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="info-item">
                            <div class="info-label">Dusun</div>
                            <div class="info-value" id="preview_dusun">-</div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="info-item">
                            <div class="info-label">Ketua Lorong</div>
                            <div class="info-value" id="preview_ketua">-</div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="info-item">
                            <div class="info-label">Panjang Lorong</div>
                            <div class="info-value" id="preview_length">-</div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="info-item">
                            <div class="info-label">Jumlah Rumah</div>
                            <div class="info-value" id="preview_house_count">-</div>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="info-item">
                            <div class="info-label">Deskripsi</div>
                            <div class="info-value" id="preview_description">-</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
                <button type="button" class="btn btn-primary" id="saveFromPreview">
                    <i class="fas fa-save mr-1"></i>
                    Simpan Data
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>$(document).ready(function() {

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

    $('#previewBtn').on('click', function() {
        updatePreview();
        $('#previewModal').modal('show');
    });

    $('#saveFromPreview').on('click', function() {
        $('#previewModal').modal('hide');
        if (validateForm()) {
            submitForm();
        }
    });

    $('input, select, textarea').on('blur', function() {
        validateField($(this));
    });

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

    $('#clear_ketua_selection').on('click', function() {
        clearKetuaSelection();
    });

    $(document).on('click', function(e) {
        if (!$(e.target).closest('#id_ketua_lorong_search, #ketua_lorong_dropdown').length) {
            hideKetuaDropdown();
        }
    });
});

function validateForm() {
    let isValid = true;

    const requiredFields = ['nama_lorong', 'dusun'];
    requiredFields.forEach(function(field) {
        const element = $(`#id_${field}`);
        if (!element.val()) {
            element.addClass('is-invalid');
            isValid = false;
        } else {
            element.removeClass('is-invalid');
        }
    });

    if (!isValid) {
        showAlert('Mohon isi Nama Lorong dan Dusun.', 'error');
    }

    return isValid;
}

function showAlert(message, type) {

    if (typeof window.showGlobalNotification === 'function') {
        window.showGlobalNotification(message, type);
    } else {
        showWarning(message);
    }
}

function validateField(field) {
    const value = field.val();
    const fieldName = field.attr('name');

    if (field.attr('required') && !value) {
        field.addClass('is-invalid');
        return false;
    } else {
        field.removeClass('is-invalid');
        return true;
    }
}

function updatePreview() {
    $('#preview_nama').text($('#id_nama_lorong').val() || '-');
    $('#preview_kode').text($('#id_kode').val() || '-');
    $('#preview_dusun').text($('#id_dusun option:selected').text() || '-');
    $('#preview_ketua').text($('#id_ketua_lorong').val() || '-');
    $('#preview_rt').text($('#id_rt_number').val() || '-');
    $('#preview_length').text($('#id_length').val() || '-');
    $('#preview_house_count').text($('#id_house_count').val() || '-');
    $('#preview_description').text($('#id_description').val() || '-');
}

function submitForm() {
    const btn = $('#submitBtn');
    const originalText = btn.html();

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

    document.getElementById('lorongForm').submit();
}

let searchTimeout;

function searchKetuaLorong(query) {
    console.log('Searching ketua lorong:', {query});

    if (query.length < 2) {
        hideKetuaDropdown();
        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);
                return response.json();
            })
            .then(data => {
                console.log('Search results:', data);
                if (data.success && data.data) {
                    displayKetuaSearchResults(data.data);
                } else {
                    showKetuaNoResults();
                }
            })
            .catch(error => {
                console.error('Error searching ketua lorong:', error);
                showKetuaNoResults();
            });
    }, 300);
}

function showKetuaLoading() {
    const results = document.getElementById('ketua_lorong_results');
    results.innerHTML = '<div class="loading"><i class="fas fa-spinner"></i> Mencari...</div>';
    showKetuaDropdown();
}

function displayKetuaSearchResults(pendudukList) {
    const results = document.getElementById('ketua_lorong_results');

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

    results.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 nikDisplay = penduduk.nik || '-';
        const dusunDisplay = penduduk.dusun || '-';
        const phoneDisplay = penduduk.phone || '-';
        const occupationDisplay = penduduk.occupation || '-';

        return `
            <div class="search-result-item" data-penduduk-id="${penduduk.id || ''}" data-penduduk-name="${safeName}" data-penduduk-nik="${safeNik}" data-penduduk-phone="${safePhone}" data-penduduk-occupation="${safeOccupation}" data-penduduk-address="${safeAddress}">
                <div class="avatar-placeholder">
                    <i class="fas fa-user"></i>
                </div>
                <div class="result-info">
                    <div class="result-name">${penduduk.name || 'Nama tidak tersedia'}</div>
                    <div class="result-details">
                        <i class="fas fa-id-card"></i>${nikDisplay}<br>
                        <i class="fas fa-map-marker-alt"></i>${dusunDisplay}<br>
                        <i class="fas fa-phone"></i>${phoneDisplay}<br>
                        <i class="fas fa-briefcase"></i>${occupationDisplay}
                    </div>
                </div>
            </div>
        `;
    }).join('');

    // Add click event listeners
    results.querySelectorAll('.search-result-item').forEach(item => {
        item.addEventListener('click', function() {
            const id = this.getAttribute('data-penduduk-id');
            const name = this.getAttribute('data-penduduk-name');
            const nik = this.getAttribute('data-penduduk-nik');
            const phone = this.getAttribute('data-penduduk-phone');
            const occupation = this.getAttribute('data-penduduk-occupation');
            const address = this.getAttribute('data-penduduk-address');

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

    showKetuaDropdown();
}

function showKetuaNoResults() {
    const results = document.getElementById('ketua_lorong_results');
    results.innerHTML = '<div class="no-results">Tidak ada penduduk yang ditemukan</div>';
    showKetuaDropdown();
}

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

function hideKetuaDropdown() {
    document.getElementById('ketua_lorong_dropdown').style.display = 'none';
}

function selectKetuaLorong(id, name, nik, phone, occupation, address) {
    console.log('Selecting ketua lorong:', {id, name, nik, phone, occupation, address});

    // Set hidden input value
    document.getElementById('id_ketua_lorong').value = id;

    // Clear search input
    document.getElementById('id_ketua_lorong_search').value = '';

    // Show selected item
    document.getElementById('selected_ketua_name').textContent = name;
    document.getElementById('selected_ketua_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_ketua_lorong').style.display = 'block';

    // Hide dropdown
    hideKetuaDropdown();

    // Trigger change event for validation
    $('#id_ketua_lorong').trigger('change');
}

function clearKetuaSelection() {
    document.getElementById('id_ketua_lorong').value = '';
    document.getElementById('selected_ketua_lorong').style.display = 'none';
    document.getElementById('id_ketua_lorong_search').value = '';
}
</script>
{% endblock %}