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

{% block title %}{% if form.instance.pk %}Edit{% else %}Tambah{% endif %} Anggota Karang Taruna{% endblock %}

{% block extra_css %}
<style>
    .form-container {
        background: white;
        border-radius: 12px;
        border: 1px solid #e3e6f0;
        padding: 2rem;
        margin-bottom: 2rem;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }

    .form-header {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        color: white;
        border-radius: 12px;
        padding: 1.5rem;
        margin-bottom: 2rem;
    }

    .form-header h4 {
        margin: 0;
        font-weight: 600;
    }

    .form-section {
        margin-bottom: 2rem;
    }

    .section-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: #5a5c69;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid #e3e6f0;
    }

    .form-group {
        margin-bottom: 1.5rem;
    }

    .form-label {
        font-weight: 600;
        color: #5a5c69;
        margin-bottom: 0.5rem;
    }

    .form-control, .form-select {
        border-radius: 8px;
        border: 1px solid #d1d3e2;
        padding: 0.75rem 1rem;
        transition: all 0.3s ease;
    }

    .form-control:focus, .form-select:focus {
        border-color: #4e73df;
        box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
    }

    .form-text {
        font-size: 0.875rem;
        color: #6c757d;
    }

    .required {
        color: #e74a3b;
    }

    .btn-group {
        display: flex;
        gap: 1rem;
        justify-content: flex-end;
        margin-top: 2rem;
    }

    .btn {
        padding: 0.75rem 2rem;
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.3s ease;
    }

    .btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    .photo-upload {
        border: 2px dashed #d1d3e2;
        border-radius: 8px;
        padding: 2rem;
        text-align: center;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .photo-upload:hover {
        border-color: #4e73df;
        background-color: #f8f9fc;
    }

    .photo-upload.dragover {
        border-color: #4e73df;
        background-color: #e3f2fd;
    }

    .photo-preview {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid #e3e6f0;
        margin: 0 auto 1rem;
        display: block;
    }

    .photo-placeholder {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        background: #f8f9fc;
        border: 3px solid #e3e6f0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 3rem;
        color: #6c757d;
        margin: 0 auto 1rem;
    }

    .skill-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: 0.5rem;
    }

    .skill-tag {
        background: #4e73df;
        color: white;
        padding: 0.25rem 0.75rem;
        border-radius: 4px;
        font-size: 0.875rem;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }

    .skill-tag .remove {
        cursor: pointer;
        font-weight: bold;
    }

    .skill-tag .remove:hover {
        color: #ffc107;
    }

    .validation-error {
        color: #e74a3b;
        font-size: 0.875rem;
        margin-top: 0.25rem;
    }

    .search-container {
        position: relative;
    }

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

    .search-result-item {
        padding: 0.75rem;
        border-bottom: 1px solid #f8f9fc;
        cursor: pointer;
        transition: background-color 0.2s;
    }

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

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

    .search-result-name {
        font-weight: 600;
        color: #5a5c69;
        margin-bottom: 0.25rem;
    }

    .search-result-details {
        font-size: 0.875rem;
        color: #6c757d;
    }

    .selected-person {
        background-color: #e3f2fd;
        border: 1px solid #4e73df;
        border-radius: 8px;
        padding: 0.75rem;
        margin-top: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .selected-person-info {
        flex: 1;
    }

    .remove-selection {
        margin-left: 0.5rem;
    }

    .form-help {
        font-size: 0.875rem;
        color: #6c757d;
        margin-top: 0.25rem;
    }

    .row {
        margin-bottom: 1rem;
    }

    @media (max-width: 768px) {
        .form-container {
            padding: 1rem;
        }

        .btn-group {
            flex-direction: column;
        }

        .btn {
            width: 100%;
        }

        .photo-upload {
            padding: 1rem;
        }

        .photo-preview,
        .photo-placeholder {
            width: 120px;
            height: 120px;
        }
    }
</style>
{% endblock %}

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

    <div class="form-header">
        <h4>
            <i class="fas fa-users-gear me-2"></i>
            {% if form.instance.pk %}Edit{% else %}Tambah{% endif %} Anggota Karang Taruna
        </h4>
    </div>

    <div class="form-container">
        <form method="post" enctype="multipart/form-data" id="karangTarunaForm">
            {% csrf_token %}

            <div class="form-section">
                <h5 class="section-title">Informasi Personal</h5>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="{{ form.penduduk_search.id_for_label }}" class="form-label">
                                Penduduk <span class="required">*</span>
                            </label>
                            <div class="search-container">
                                {{ form.penduduk_search }}
                                <div id="searchResults" class="search-results" style="display: none;"></div>
                            </div>
                            {{ form.penduduk }}
                            <div id="selectedPenduduk"></div>
                            {% if form.penduduk.errors %}
                                <div class="validation-error">{{ form.penduduk.errors.0 }}</div>
                            {% endif %}
                            <div class="form-help">Pilih penduduk yang akan menjadi anggota Karang Taruna</div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="{{ form.nomor_anggota.id_for_label }}" class="form-label">
                                Nomor Anggota <span class="required">*</span>
                            </label>
                            {{ form.nomor_anggota }}
                            {% if form.nomor_anggota.errors %}
                                <div class="validation-error">{{ form.nomor_anggota.errors.0 }}</div>
                            {% endif %}
                            <div class="form-help">Nomor unik anggota Karang Taruna</div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="{{ form.jabatan.id_for_label }}" class="form-label">
                                Jabatan <span class="required">*</span>
                            </label>
                            {{ form.jabatan }}
                            {% if form.jabatan.errors %}
                                <div class="validation-error">{{ form.jabatan.errors.0 }}</div>
                            {% endif %}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="{{ form.status.id_for_label }}" class="form-label">
                                Status <span class="required">*</span>
                            </label>
                            {{ form.status }}
                            {% if form.status.errors %}
                                <div class="validation-error">{{ form.status.errors.0 }}</div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-section">
                <h5 class="section-title">Informasi Organisasi</h5>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="{{ form.tanggal_bergabung.id_for_label }}" class="form-label">
                                Tanggal Bergabung <span class="required">*</span>
                            </label>
                            {{ form.tanggal_bergabung }}
                            {% if form.tanggal_bergabung.errors %}
                                <div class="validation-error">{{ form.tanggal_bergabung.errors.0 }}</div>
                            {% endif %}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="{{ form.tanggal_keluar.id_for_label }}" class="form-label">
                                Tanggal Keluar
                            </label>
                            {{ form.tanggal_keluar }}
                            {% if form.tanggal_keluar.errors %}
                                <div class="validation-error">{{ form.tanggal_keluar.errors.0 }}</div>
                            {% endif %}
                            <div class="form-help">Kosongkan jika masih aktif</div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <div class="form-check">
                                {{ form.is_pengurus_inti }}
                                <label class="form-check-label" for="{{ form.is_pengurus_inti.id_for_label }}">
                                    Pengurus Inti
                                </label>
                            </div>
                            {% if form.is_pengurus_inti.errors %}
                                <div class="validation-error">{{ form.is_pengurus_inti.errors.0 }}</div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-section">
                <h5 class="section-title">Informasi Kontak</h5>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="{{ form.kontak_whatsapp.id_for_label }}" class="form-label">
                                WhatsApp
                            </label>
                            {{ form.kontak_whatsapp }}
                            {% if form.kontak_whatsapp.errors %}
                                <div class="validation-error">{{ form.kontak_whatsapp.errors.0 }}</div>
                            {% endif %}
                            <div class="form-help">Nomor WhatsApp dengan format 08xxxxxxxxxx</div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="{{ form.email_pribadi.id_for_label }}" class="form-label">
                                Email Pribadi
                            </label>
                            {{ form.email_pribadi }}
                            {% if form.email_pribadi.errors %}
                                <div class="validation-error">{{ form.email_pribadi.errors.0 }}</div>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label for="{{ form.alamat_lengkap.id_for_label }}" class="form-label">
                        Alamat Lengkap
                    </label>
                    {{ form.alamat_lengkap }}
                    {% if form.alamat_lengkap.errors %}
                        <div class="validation-error">{{ form.alamat_lengkap.errors.0 }}</div>
                    {% endif %}
                </div>
            </div>

            <div class="form-section">
                <h5 class="section-title">Pendidikan dan Pekerjaan</h5>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="{{ form.pendidikan_terakhir.id_for_label }}" class="form-label">
                                Pendidikan Terakhir
                            </label>
                            {{ form.pendidikan_terakhir }}
                            {% if form.pendidikan_terakhir.errors %}
                                <div class="validation-error">{{ form.pendidikan_terakhir.errors.0 }}</div>
                            {% endif %}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="{{ form.pekerjaan.id_for_label }}" class="form-label">
                                Pekerjaan
                            </label>
                            {{ form.pekerjaan }}
                            {% if form.pekerjaan.errors %}
                                <div class="validation-error">{{ form.pekerjaan.errors.0 }}</div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-section">
                <h5 class="section-title">Keahlian dan Pengalaman</h5>
                <div class="form-group">
                    <label for="{{ form.bidang_keahlian.id_for_label }}" class="form-label">
                        Bidang Keahlian
                    </label>
                    {{ form.bidang_keahlian }}
                    {% if form.bidang_keahlian.errors %}
                        <div class="validation-error">{{ form.bidang_keahlian.errors.0 }}</div>
                    {% endif %}
                    <div class="form-help">Pisahkan dengan koma jika ada beberapa keahlian</div>
                </div>

                <div class="form-group">
                    <label for="{{ form.pengalaman_organisasi.id_for_label }}" class="form-label">
                        Pengalaman Organisasi
                    </label>
                    {{ form.pengalaman_organisasi }}
                    {% if form.pengalaman_organisasi.errors %}
                        <div class="validation-error">{{ form.pengalaman_organisasi.errors.0 }}</div>
                    {% endif %}
                </div>

                <div class="form-group">
                    <label for="{{ form.prestasi_individu.id_for_label }}" class="form-label">
                        Prestasi Individu
                    </label>
                    {{ form.prestasi_individu }}
                    {% if form.prestasi_individu.errors %}
                        <div class="validation-error">{{ form.prestasi_individu.errors.0 }}</div>
                    {% endif %}
                </div>

                <div class="form-group">
                    <label for="{{ form.kontribusi.id_for_label }}" class="form-label">
                        Kontribusi
                    </label>
                    {{ form.kontribusi }}
                    {% if form.kontribusi.errors %}
                        <div class="validation-error">{{ form.kontribusi.errors.0 }}</div>
                    {% endif %}
                </div>
            </div>

            <div class="form-section">
                <h5 class="section-title">Foto Profil</h5>
                <div class="form-group">
                    <div class="photo-upload" onclick="document.getElementById('id_foto_profil').click()">
                        {% if form.instance.foto_profil %}
                            <img src="{{ form.instance.foto_profil.url }}" alt="Foto Profil" class="photo-preview" id="photoPreview">
                        {% else %}
                            <div class="photo-placeholder" id="photoPlaceholder">
                                <i class="fas fa-camera"></i>
                            </div>
                        {% endif %}
                        <div>
                            <i class="fas fa-cloud-upload-alt fa-2x mb-2"></i>
                            <p class="mb-1">Klik untuk upload foto</p>
                            <small class="text-muted">Format: JPG, PNG, WEBP (Max 2MB)</small>
                        </div>
                    </div>
                    {{ form.foto_profil }}
                    {% if form.foto_profil.errors %}
                        <div class="validation-error">{{ form.foto_profil.errors.0 }}</div>
                    {% endif %}
                </div>
            </div>

            <div class="btn-group">
                <a href="{% url 'admin_panel:organization:admin_karang_taruna_list' %}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i> Kembali
                </a>
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save"></i> Simpan
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

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

    $('#id_foto_profil').on('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                $('#photoPreview').attr('src', e.target.result).show();
                $('#photoPlaceholder').hide();
            };
            reader.readAsDataURL(file);
        }
    });

    $('.photo-upload').on('dragover', function(e) {
        e.preventDefault();
        $(this).addClass('dragover');
    });

    $('.photo-upload').on('dragleave', function(e) {
        e.preventDefault();
        $(this).removeClass('dragover');
    });

    $('.photo-upload').on('drop', function(e) {
        e.preventDefault();
        $(this).removeClass('dragover');
        const files = e.originalEvent.dataTransfer.files;
        if (files.length > 0) {
            $('#id_foto_profil')[0].files = files;
            $('#id_foto_profil').trigger('change');
        }
    });

    $('#karangTarunaForm').on('submit', function(e) {
        let isValid = true;

        $('.validation-error').remove();

        $('input[required], select[required], textarea[required]').each(function() {
            if (!$(this).val()) {
                isValid = false;
                $(this).addClass('is-invalid');
                $(this).after('<div class="validation-error">Field ini wajib diisi</div>');
            } else {
                $(this).removeClass('is-invalid');
            }
        });

        if (!isValid) {
            e.preventDefault();
            orgAPI.showError('Mohon lengkapi semua field yang wajib diisi');
        }
    });

    $('#id_penduduk').on('change', function() {
        if (!$(this).val() && !$('#id_nomor_anggota').val()) {
            const prefix = 'KT';
            const number = String(Math.floor(Math.random() * 999) + 1).padStart(3, '0');
            $('#id_nomor_anggota').val(`${prefix}${number}`);
        }
    });

    // Search functionality for penduduk
    let searchTimeout;
    
    function searchPenduduk(query) {
        if (query.length < 2) {
            $('#searchResults').empty();
            return;
        }
        
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(() => {
            $.ajax({
                url: '{% url "admin_panel:organization:api_search_penduduk" %}',
                method: 'GET',
                data: { q: query },
                success: function(response) {
                    if (response.success) {
                        displaySearchResults(response.data);
                    }
                },
                error: function() {
                    console.error('Error searching penduduk');
                }
            });
        }, 300);
    }
    
    function displaySearchResults(results) {
        const container = $('#searchResults');
        container.empty();
        
        if (results.length === 0) {
            container.html('<div class="search-result-item">Tidak ada penduduk ditemukan</div>');
            return;
        }
        
        results.forEach(penduduk => {
            const item = $(`
                <div class="search-result-item" data-id="${penduduk.id}">
                    <div class="search-result-name">${penduduk.nama}</div>
                    <div class="search-result-details">
                        NIK: ${penduduk.nik} | ${penduduk.gender} | ${penduduk.age} tahun
                    </div>
                </div>
            `);
            container.append(item);
        });
    }
    
    function selectPenduduk(penduduk) {
        $('#id_penduduk').val(penduduk.id);
        $('#id_penduduk_search').val(penduduk.nama);
        $('#searchResults').empty();
        
        // Show selected person info
        const selectedInfo = $(`
            <div class="selected-person">
                <div class="selected-person-info">
                    <strong>${penduduk.nama}</strong><br>
                    <small>NIK: ${penduduk.nik} | ${penduduk.gender} | ${penduduk.age} tahun</small>
                </div>
                <button type="button" class="btn btn-sm btn-outline-danger remove-selection">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        `);
        
        $('#selectedPenduduk').html(selectedInfo);
    }
    
    function clearSelection() {
        $('#id_penduduk').val('');
        $('#id_penduduk_search').val('');
        $('#selectedPenduduk').empty();
    }
    
    // Event listeners
    $('#id_penduduk_search').on('input', function() {
        const query = $(this).val();
        searchPenduduk(query);
    });
    
    $(document).on('click', '.search-result-item', function() {
        const pendudukId = $(this).data('id');
        const pendudukName = $(this).find('.search-result-name').text();
        const pendudukNik = $(this).find('.search-result-details').text();
        
        selectPenduduk({
            id: pendudukId,
            nama: pendudukName,
            nik: pendudukNik.split(' | ')[0].replace('NIK: ', ''),
            gender: pendudukNik.split(' | ')[1],
            age: pendudukNik.split(' | ')[2].replace(' tahun', '')
        });
    });
    
    $(document).on('click', '.remove-selection', function() {
        clearSelection();
    });
    
    // Load existing selection if editing
    {% if form.instance.pk and form.instance.penduduk %}
    const existingPenduduk = {
        id: {{ form.instance.penduduk.id }},
        nama: '{{ form.instance.penduduk.name }}',
        nik: '{{ form.instance.penduduk.nik }}',
        gender: '{{ form.instance.penduduk.gender }}',
        age: {{ form.instance.penduduk.age }}
    };
    selectPenduduk(existingPenduduk);
    {% endif %}

    orgAPI.initResponsive();
});
</script>
{% endblock %}