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

{% block content %}
<div class="container mt-5">
    <div class="card shadow-lg p-4">
        <h2 class="text-center mb-4">آپلود عکس پروفایل</h2>
        
        {% if messages %}
            <div class="alert alert-info">
                {% for message in messages %}
                    {{ message }}
                {% endfor %}
            </div>
        {% endif %}

        <div class="text-center mb-3">
            {% if person.pic %}
                <img id="previewImage" src="{{ person.pic.url }}" class="img-thumbnail" alt="عکس قبلی" style="max-width: 200px; border-radius: 50%;">
            {% else %}
                <img id="previewImage" src="{% static 'media\users\default_profile.png' %}" class="img-thumbnail" alt="بدون عکس" style="max-width: 200px; border-radius: 50%;">
            {% endif %}
        </div>

        <form method="post" enctype="multipart/form-data" class="needs-validation" novalidate>
            {% csrf_token %}
            <div class="mb-3">
                <label for="id_pic" class="form-label">انتخاب عکس:</label>
                <input type="file" id="id_pic" name="pic" accept="image/*" class="form-control" onchange="openCropper(event)">
                <small class="text-muted">حداکثر حجم مجاز: 100 کیلوبایت</small>
                <div class="invalid-feedback">لطفاً یک عکس معتبر انتخاب کنید.</div>
            </div>
            <div class="d-flex justify-content-center">
                <button type="submit" class="btn btn-primary px-4">آپلود</button>
                <a href="{% url 'psychological_test' person.id %}" class="btn btn-secondary ms-3">رد شدن</a>

            </div>
        </form>
    </div>
</div>

<!-- Modal برای کراپ کردن تصویر -->
<div class="modal fade " id="cropModal" tabindex="-1" role="dialog" aria-labelledby="cropModalLabel" aria-hidden="true" style="overflow: hidden;">
    <div class="modal-dialog" role="document" style="overflow: hidden;">
        <div class="modal-content" style="overflow: hidden;">
            <div class="modal-header" style="overflow: hidden;">
                <h5 class="modal-title" id="cropModalLabel">کراپ کردن عکس</h5>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <img id="cropperImage" src="" alt="تصویر برای کراپ" class="img-fluid">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">بستن</button>
                <button type="button" class="btn btn-primary" onclick="cropAndSetImage()">ذخیره تغییرات</button>
            </div>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css">

<script>
    var cropper;
    var croppedFile;
    
    function openCropper(event) {
        var file = event.target.files[0];
        if (file) {
            if (file.size > 102400) {  // 100 KiB = 102400 bytes
                alert('حجم فایل بیشتر از 100 کیلوبایت است. لطفاً فایل کوچکتری انتخاب کنید.');
                return;
            }
            var reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('cropperImage').src = e.target.result;
                $('#cropModal').modal('show');
                setTimeout(() => {
                    var image = document.getElementById('cropperImage');
                    cropper = new Cropper(image, {
                        aspectRatio: 1,   // نسبت تصویر مربعی (برای پروفایل)
                        viewMode: 2,      // جلوگیری از برش تصویر از کادر
                        movable: false,   // غیر فعال کردن جابجایی تصویر
                        scalable: false,  // غیر فعال کردن بزرگ‌نمایی
                        zoomable: false,  // غیر فعال کردن زوم
                        rotatable: false, // غیر فعال کردن چرخش تصویر
                        responsive: true, // پاسخ‌دهی به اندازه صفحه
                        checkOrientation: true,  // برای جلوگیری از چرخش ناخواسته تصویر
                        autoCropArea: 0.8,       // درصد فضای عکس برای کراپ کردن
                    });
                }, 500);
            };
            reader.readAsDataURL(file);
        }
    }
    
    function cropAndSetImage() {
        var canvas = cropper.getCroppedCanvas();
        canvas.toBlob(function(blob) {
            croppedFile = new File([blob], "profile_" + Date.now() + ".jpg", { type: "image/jpeg" });
            var dataTransfer = new DataTransfer();
            dataTransfer.items.add(croppedFile);
            document.getElementById('id_pic').files = dataTransfer.files;
            document.getElementById('previewImage').src = URL.createObjectURL(croppedFile);
            $('#cropModal').modal('hide');
        }, "image/jpeg", 0.8);
    }
</script>
{% endblock %}