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

{% block title %}{% if form.instance.pk %}Edit{% else %}Tambah{% endif %} Organisasi Kepemudaan{% 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, #a8edea 0%, #fed6e3 100%);
        color: #333;
        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);
    }

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

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

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

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

    .logo-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;
    }

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

    .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%;
        }

        .logo-upload {
            padding: 1rem;
        }

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

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

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

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

            <div class="form-section">
                <h5 class="section-title">Informasi Dasar</h5>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="{{ form.nama_organisasi.id_for_label }}" class="form-label">
                                Nama Organisasi <span class="required">*</span>
                            </label>
                            {{ form.nama_organisasi }}
                            {% if form.nama_organisasi.errors %}
                                <div class="validation-error">{{ form.nama_organisasi.errors.0 }}</div>
                            {% endif %}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="{{ form.jenis_organisasi.id_for_label }}" class="form-label">
                                Jenis Organisasi <span class="required">*</span>
                            </label>
                            {{ form.jenis_organisasi }}
                            {% if form.jenis_organisasi.errors %}
                                <div class="validation-error">{{ form.jenis_organisasi.errors.0 }}</div>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="{{ form.ketua_search.id_for_label }}" class="form-label">
                                Ketua <span class="required">*</span>
                            </label>
                            {{ form.ketua_search }}
                            {{ form.ketua }}
                            {% if form.ketua.errors %}
                                <div class="validation-error">{{ form.ketua.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 class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="{{ form.sekretaris_search.id_for_label }}" class="form-label">
                                Sekretaris
                            </label>
                            {{ form.sekretaris_search }}
                            {{ form.sekretaris }}
                            {% if form.sekretaris.errors %}
                                <div class="validation-error">{{ form.sekretaris.errors.0 }}</div>
                            {% endif %}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="{{ form.bendahara_search.id_for_label }}" class="form-label">
                                Bendahara
                            </label>
                            {{ form.bendahara_search }}
                            {{ form.bendahara }}
                            {% if form.bendahara.errors %}
                                <div class="validation-error">{{ form.bendahara.errors.0 }}</div>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="{{ form.tanggal_didirikan.id_for_label }}" class="form-label">
                                Tanggal Didirikan
                            </label>
                            {{ form.tanggal_didirikan }}
                            {% if form.tanggal_didirikan.errors %}
                                <div class="validation-error">{{ form.tanggal_didirikan.errors.0 }}</div>
                            {% endif %}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="{{ form.alamat.id_for_label }}" class="form-label">
                                Alamat
                            </label>
                            {{ form.alamat }}
                            {% if form.alamat.errors %}
                                <div class="validation-error">{{ form.alamat.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.telepon.id_for_label }}" class="form-label">
                                Telepon
                            </label>
                            {{ form.telepon }}
                            {% if form.telepon.errors %}
                                <div class="validation-error">{{ form.telepon.errors.0 }}</div>
                            {% endif %}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="{{ form.email.id_for_label }}" class="form-label">
                                Email
                            </label>
                            {{ form.email }}
                            {% if form.email.errors %}
                                <div class="validation-error">{{ form.email.errors.0 }}</div>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label for="{{ form.website.id_for_label }}" class="form-label">
                        Website
                    </label>
                    {{ form.website }}
                    {% if form.website.errors %}
                        <div class="validation-error">{{ form.website.errors.0 }}</div>
                    {% endif %}
                    <div class="form-help">Masukkan URL website (contoh: https://example.com)</div>
                </div>
            </div>

            <div class="form-section">
                <h5 class="section-title">Deskripsi & Visi Misi</h5>
                <div class="form-group">
                    <label for="{{ form.deskripsi.id_for_label }}" class="form-label">
                        Deskripsi
                    </label>
                    {{ form.deskripsi }}
                    {% if form.deskripsi.errors %}
                        <div class="validation-error">{{ form.deskripsi.errors.0 }}</div>
                    {% endif %}
                </div>

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

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

            <div class="form-section">
                <h5 class="section-title">Kegiatan & Prestasi</h5>
                <div class="form-group">
                    <label for="{{ form.kegiatan.id_for_label }}" class="form-label">
                        Kegiatan
                    </label>
                    {{ form.kegiatan }}
                    {% if form.kegiatan.errors %}
                        <div class="validation-error">{{ form.kegiatan.errors.0 }}</div>
                    {% endif %}
                </div>

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

            <div class="form-section">
                <h5 class="section-title">Logo Organisasi</h5>
                <div class="form-group">
                    <div class="logo-upload" onclick="document.getElementById('id_logo').click()">
                        {% if form.instance.logo %}
                            <img src="{{ form.instance.logo.url }}" alt="Logo Organisasi" class="logo-preview" id="logoPreview">
                        {% else %}
                            <div class="logo-placeholder" id="logoPlaceholder">
                                <i class="fas fa-users-line"></i>
                            </div>
                        {% endif %}
                        <div>
                            <i class="fas fa-cloud-upload-alt fa-2x mb-2"></i>
                            <p class="mb-1">Klik untuk upload logo</p>
                            <small class="text-muted">Format: JPG, PNG, WEBP (Max 2MB)</small>
                        </div>
                    </div>
                    {{ form.logo }}
                    {% if form.logo.errors %}
                        <div class="validation-error">{{ form.logo.errors.0 }}</div>
                    {% endif %}
                </div>
            </div>

            <div class="btn-group">
                <a href="{% url 'admin_panel:organization:admin_kepemudaan_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_logo').on('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                $('#logoPreview').attr('src', e.target.result).show();
                $('#logoPlaceholder').hide();
            };
            reader.readAsDataURL(file);
        }
    });

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

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

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

    $('#kepemudaanForm').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');
        }
    });

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