{% extends 'base.html' %}
{% block content %}
<h2 class="mb-3">{{ project.client_name }}'s Designs</h2>

<div class="alert alert-info">
  <h5>Instructions</h5>
  <ol>
    <li>Click anywhere on the design to drop a pin and leave a note.</li>
    <li>Provide overall feedback in the box provided below.</li>
    <li>When you are completely happy, enter your full name and click <strong>Sign Off</strong>.</li>
  </ol>
</div>

{% for img in project.images %}
<div class="mb-5 position-relative d-inline-block w-100" style="max-width:100%">
  <h5>Design {{ loop.index }}</h5>
  <img id="design-{{ img.id }}" src="{{ url_for('uploaded_file', filename=img.filename) }}" class="img-fluid border mb-3 w-100">
  <div id="pins-{{ img.id }}" class="position-absolute top-0 start-0 w-100 h-100"></div>
</div>
{% endfor %}

<form method="post" class="card card-body mb-3">
  <h5>Overall Feedback</h5>
  <textarea name="feedback" class="form-control mb-2" rows="3">{{ project.feedback }}</textarea>
  <button type="submit" class="btn btn-warning">Submit Feedback</button>
</form>

<form method="post" class="card card-body">
  <h5>Sign Off</h5>
  <p>Please enter your full name to confirm approval of this design.</p>
  <input type="text" name="signer_name" class="form-control mb-2" placeholder="Your Full Name">
  <button name="signoff" value="1" class="btn btn-success">Sign Off</button>
</form>

{% if project.signed_off %}
  <div class="alert alert-success mt-3">
    ✅ Signed off by <strong>{{ project.signed_off_by }}</strong> at {{ project.signed_off_at }}
  </div>
{% endif %}
{% endblock %}

{% block scripts %}
<script>
{% for img in project.images %}
const imgEl{{ img.id }} = document.getElementById('design-{{ img.id }}');
const pinsContainer{{ img.id }} = document.getElementById('pins-{{ img.id }}');

function addPin{{ img.id }}(ann) {
  const pin = document.createElement('div');
  pin.className = 'pin';
  pin.style.left = ann.x + '%';
  pin.style.top = ann.y + '%';
  pin.setAttribute('title', ann.comment);
  pinsContainer{{ img.id }}.appendChild(pin);
  new bootstrap.Tooltip(pin);
}

imgEl{{ img.id }}.addEventListener('click', function(e) {
  const rect = imgEl{{ img.id }}.getBoundingClientRect();
  const xPerc = ((e.clientX - rect.left) / rect.width * 100).toFixed(2);
  const yPerc = ((e.clientY - rect.top) / rect.height * 100).toFixed(2);
  const comment = prompt("Enter your note:");
  if (!comment) return;
  fetch('{{ url_for("save_annotation", image_id=img.id) }}', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ x: xPerc, y: yPerc, comment: comment })
  })
  .then(r => r.json())
  .then(data => {
    if (data.status === 'ok') {
      addPin{{ img.id }}(data);
    }
  })
  .catch(() => alert("Network error saving note."));
});

{% for ann in img.annotations %}
addPin{{ img.id }}({x: {{ ann.x }}, y: {{ ann.y }}, comment: "{{ ann.comment | e }}"});
{% endfor %}
{% endfor %}
</script>
{% endblock %}