{% extends "plants/base.html" %}
{% block title %}Crop thumbnail — {{ plant.name }}{% endblock %}
{% block content %}

<div class="d-flex align-items-center gap-2 mb-3">
    <a href="{% url 'plant_detail' plant.pk %}" class="btn btn-sm btn-outline-secondary">←</a>
    <h5 class="mb-0">Crop thumbnail — {{ plant.name }}</h5>
</div>

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

{% if card_photos|length > 1 %}
<div class="d-flex gap-2 mb-3">
    {% for photo in card_photos %}
    <img src="{{ photo.image.url }}" width="60" height="60"
         class="rounded card-source-thumb {% if forloop.first %}border border-success border-2{% endif %}"
         style="object-fit:cover;cursor:pointer;"
         data-url="{{ photo.image.url }}"
         onclick="switchSource(this)">
    {% endfor %}
</div>
{% endif %}

<div style="max-height:60vh;overflow:hidden;background:#111;border-radius:8px;" class="mb-3">
    <img id="crop-image" src="{{ card_photos.0.image.url }}"
         style="display:block;max-width:100%;max-height:60vh;">
</div>

<form method="post" id="crop-form">
    {% csrf_token %}
    <input type="hidden" name="x" id="f-x">
    <input type="hidden" name="y" id="f-y">
    <input type="hidden" name="width" id="f-w">
    <input type="hidden" name="height" id="f-h">
    <input type="hidden" name="natural_width" id="f-nw">
    <input type="hidden" name="natural_height" id="f-nh">
    <input type="hidden" name="source_url" id="f-src" value="{{ card_photos.0.image.url }}">
    <button type="submit" class="btn btn-success w-100">Save as thumbnail</button>
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.js"></script>
<script>
let cropper;

function initCropper(img) {
    if (cropper) cropper.destroy();
    cropper = new Cropper(img, {
        viewMode: 1,
        dragMode: 'move',
        autoCropArea: 0.7,
        restore: false,
        guides: true,
        center: true,
        highlight: false,
        cropBoxMovable: true,
        cropBoxResizable: true,
        toggleDragModeOnDblclick: false,
    });
}

initCropper(document.getElementById('crop-image'));

function switchSource(thumb) {
    document.querySelectorAll('.card-source-thumb').forEach(t => {
        t.classList.remove('border', 'border-success', 'border-2');
    });
    thumb.classList.add('border', 'border-success', 'border-2');
    const img = document.getElementById('crop-image');
    img.src = thumb.dataset.url;
    document.getElementById('f-src').value = thumb.dataset.url;
    img.onload = () => initCropper(img);
}

document.getElementById('crop-form').addEventListener('submit', function(e) {
    const data = cropper.getData(true);
    const imgData = cropper.getImageData();
    document.getElementById('f-x').value = data.x;
    document.getElementById('f-y').value = data.y;
    document.getElementById('f-w').value = data.width;
    document.getElementById('f-h').value = data.height;
    document.getElementById('f-nw').value = imgData.naturalWidth;
    document.getElementById('f-nh').value = imgData.naturalHeight;
});
</script>

{% endblock %}