{% extends "admin/base.html" %}

{% block title %}{% if is_edit %}Edit{% else %}Tambah{% endif %} Testimonial HMI{% endblock %}

{% block content %}
<div class="min-h-screen bg-gray-50 p-4 sm:p-6 lg:p-8">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6">
        <div class="mb-4 sm:mb-0">
            <h1 class="text-2xl sm:text-3xl font-bold text-gray-900">
                {% if is_edit %}Edit{% else %}Tambah{% endif %} Testimonial HMI
            </h1>
            <p class="text-gray-600 mt-1">
                {% if is_edit %}Perbarui informasi testimonial{% else %}Tambahkan testimonial baru{% endif %}
            </p>
        </div>
        <div>
            <a href="{% url 'admin_panel:tentang_hmi:testimonial' %}" class="inline-flex items-center px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors">
                <i class="fas fa-arrow-left mr-2"></i>Kembali
            </a>
        </div>
    </div>

    <!-- Form -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="lg:col-span-2">
            <div class="bg-white rounded-lg shadow-sm">
                <div class="px-4 sm:px-6 py-4 border-b border-gray-200">
                    <h6 class="text-lg font-semibold text-gray-900">Informasi Alumni</h6>
                </div>
                <div class="p-4 sm:p-6">
                    <form method="post" enctype="multipart/form-data">
                        {% csrf_token %}
                        
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
                            <div>
                                <label for="name" class="block text-sm font-medium text-gray-700 mb-2">Nama Lengkap <span class="text-red-500">*</span></label>
                                <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                                       id="name" name="name" value="{% if testimonial %}{{ testimonial.name }}{% endif %}" required>
                            </div>
                            <div>
                                <label for="position" class="block text-sm font-medium text-gray-700 mb-2">Posisi/Jabatan <span class="text-red-500">*</span></label>
                                <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                                       id="position" name="position" value="{% if testimonial %}{{ testimonial.position }}{% endif %}" required>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
                            <div>
                                <label for="company" class="block text-sm font-medium text-gray-700 mb-2">Perusahaan/Organisasi</label>
                                <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                                       id="company" name="company" value="{% if testimonial %}{{ testimonial.company }}{% endif %}">
                            </div>
                            <div>
                                <label for="graduation_year" class="block text-sm font-medium text-gray-700 mb-2">Tahun Lulus</label>
                                <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                                       id="graduation_year" name="graduation_year" value="{% if testimonial %}{{ testimonial.graduation_year }}{% endif %}"
                                       placeholder="2020">
                            </div>
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
                            <div>
                                <label for="avatar" class="block text-sm font-medium text-gray-700 mb-2">Foto Profil</label>
                                <input type="file" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                                       id="avatar" name="avatar" accept="image/*">
                                {% if testimonial and testimonial.avatar %}
                                    <div class="mt-2">
                                        <img src="{{ testimonial.avatar.url }}" alt="Current avatar" class="h-20 w-20 rounded-full object-cover">
                                        <p class="text-sm text-gray-500 mt-1">Foto saat ini</p>
                                    </div>
                                {% endif %}
                            </div>
                            <div>
                                <label for="initial" class="block text-sm font-medium text-gray-700 mb-2">Huruf Awal Nama</label>
                                <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                                       id="initial" name="initial" value="{% if testimonial %}{{ testimonial.initial }}{% endif %}" maxlength="1"
                                       placeholder="A">
                                <p class="text-sm text-gray-500 mt-1">Digunakan jika tidak ada foto profil</p>
                            </div>
                        </div>

                        <div class="mb-4">
                            <label for="testimonial" class="block text-sm font-medium text-gray-700 mb-2">Testimoni <span class="text-red-500">*</span></label>
                            <textarea class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                                      id="testimonial" name="testimonial" rows="4" required>{% if testimonial %}{{ testimonial.testimonial }}{% endif %}</textarea>
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
                            <div>
                                <label for="rating" class="block text-sm font-medium text-gray-700 mb-2">Rating <span class="text-red-500">*</span></label>
                                <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                                        id="rating" name="rating" required>
                                    <option value="5" {% if testimonial and testimonial.rating == 5 %}selected{% endif %}>5 Bintang</option>
                                    <option value="4" {% if testimonial and testimonial.rating == 4 %}selected{% endif %}>4 Bintang</option>
                                    <option value="3" {% if testimonial and testimonial.rating == 3 %}selected{% endif %}>3 Bintang</option>
                                    <option value="2" {% if testimonial and testimonial.rating == 2 %}selected{% endif %}>2 Bintang</option>
                                    <option value="1" {% if testimonial and testimonial.rating == 1 %}selected{% endif %}>1 Bintang</option>
                                </select>
                            </div>
                            <div>
                                <label for="order" class="block text-sm font-medium text-gray-700 mb-2">Order</label>
                                <input type="number" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                                       id="order" name="order" value="{% if testimonial %}{{ testimonial.order }}{% else %}0{% endif %}" min="0">
                            </div>
                        </div>

                        <div class="mb-6">
                            <div class="flex items-center">
                                <input class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" type="checkbox" id="is_active" name="is_active" 
                                       {% if not testimonial or testimonial.is_active %}checked{% endif %}>
                                <label class="ml-2 text-sm text-gray-700" for="is_active">Aktif</label>
                            </div>
                        </div>

                        <div class="flex flex-col sm:flex-row gap-3">
                            <button type="submit" class="inline-flex items-center justify-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                                <i class="fas fa-save mr-2"></i>
                                {% if is_edit %}Perbarui{% else %}Simpan{% endif %}
                            </button>
                            <a href="{% url 'admin_panel:tentang_hmi:testimonial' %}" class="inline-flex items-center justify-center px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors">
                                <i class="fas fa-times mr-2"></i>Batal
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="space-y-6">
            <div class="bg-white rounded-lg shadow-sm">
                <div class="px-4 sm:px-6 py-4 border-b border-gray-200">
                    <h6 class="text-lg font-semibold text-gray-900">Preview Testimonial</h6>
                </div>
                <div class="p-4 sm:p-6">
                    <div class="text-center">
                        <div id="avatar-preview" class="mb-4">
                            {% if testimonial and testimonial.avatar %}
                                <img src="{{ testimonial.avatar.url }}" alt="Avatar" class="h-16 w-16 rounded-full object-cover mx-auto">
                            {% else %}
                                <div class="h-16 w-16 rounded-full bg-gray-300 flex items-center justify-center mx-auto">
                                    <span id="initial-preview" class="text-lg font-medium text-gray-700">{% if testimonial %}{{ testimonial.initial }}{% else %}A{% endif %}</span>
                                </div>
                            {% endif %}
                        </div>
                        <div id="name-preview" class="text-lg font-semibold text-gray-900 mb-1">
                            {% if testimonial %}{{ testimonial.name }}{% else %}Nama Alumni{% endif %}
                        </div>
                        <div id="position-preview" class="text-sm text-gray-600 mb-2">
                            {% if testimonial %}{{ testimonial.position }}{% else %}Posisi Alumni{% endif %}
                        </div>
                        <div id="rating-preview" class="flex justify-center mb-3">
                            {% for i in "12345" %}
                                <i class="fas fa-star {% if forloop.counter <= 5 %}text-yellow-400{% else %}text-gray-300{% endif %}"></i>
                            {% endfor %}
                        </div>
                        <div id="testimonial-preview" class="text-sm text-gray-700 italic">
                            {% if testimonial %}{{ testimonial.testimonial|truncatechars:100 }}{% else %}Testimoni alumni akan ditampilkan di sini...{% endif %}
                        </div>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-lg shadow-sm">
                <div class="px-4 sm:px-6 py-4 border-b border-gray-200">
                    <h6 class="text-lg font-semibold text-gray-900">Tips</h6>
                </div>
                <div class="p-4 sm:p-6">
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-500 mr-3 mt-1"></i>
                            <span class="text-sm text-gray-700">Gunakan nama lengkap alumni</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-500 mr-3 mt-1"></i>
                            <span class="text-sm text-gray-700">Posisi harus sesuai dengan pekerjaan saat ini</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-500 mr-3 mt-1"></i>
                            <span class="text-sm text-gray-700">Testimoni harus asli dan bermakna</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-500 mr-3 mt-1"></i>
                            <span class="text-sm text-gray-700">Rating mencerminkan kepuasan alumni</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const nameInput = document.getElementById('name');
    const positionInput = document.getElementById('position');
    const testimonialInput = document.getElementById('testimonial');
    const ratingInput = document.getElementById('rating');
    const initialInput = document.getElementById('initial');
    const avatarInput = document.getElementById('avatar');
    
    const namePreview = document.getElementById('name-preview');
    const positionPreview = document.getElementById('position-preview');
    const testimonialPreview = document.getElementById('testimonial-preview');
    const ratingPreview = document.getElementById('rating-preview');
    const initialPreview = document.getElementById('initial-preview');
    const avatarPreview = document.getElementById('avatar-preview');
    
    function updatePreview() {
        const name = nameInput.value || 'Nama Alumni';
        const position = positionInput.value || 'Posisi Alumni';
        const testimonial = testimonialInput.value || 'Testimoni alumni akan ditampilkan di sini...';
        const rating = parseInt(ratingInput.value) || 5;
        const initial = initialInput.value || 'A';
        
        namePreview.textContent = name;
        positionPreview.textContent = position;
        testimonialPreview.textContent = testimonial.length > 100 ? testimonial.substring(0, 100) + '...' : testimonial;
        initialPreview.textContent = initial;
        
        // Update rating stars
        ratingPreview.innerHTML = '';
        for (let i = 1; i <= 5; i++) {
            const star = document.createElement('i');
            star.className = `fas fa-star ${i <= rating ? 'text-yellow-400' : 'text-gray-300'}`;
            ratingPreview.appendChild(star);
        }
    }
    
    nameInput.addEventListener('input', updatePreview);
    positionInput.addEventListener('input', updatePreview);
    testimonialInput.addEventListener('input', updatePreview);
    ratingInput.addEventListener('change', updatePreview);
    initialInput.addEventListener('input', updatePreview);
    
    // Auto-fill initial from name
    nameInput.addEventListener('input', function() {
        if (this.value && !initialInput.value) {
            initialInput.value = this.value.charAt(0).toUpperCase();
            updatePreview();
        }
    });
    
    // Handle avatar preview
    avatarInput.addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                avatarPreview.innerHTML = `<img src="${e.target.result}" alt="Avatar" class="h-16 w-16 rounded-full object-cover mx-auto">`;
            };
            reader.readAsDataURL(file);
        }
    });
});
</script>
{% endblock %}