{% extends "hotel/base_public.html" %}
{% block title %}My Bookings{% endblock %}
{% block content %}
<h2>My Bookings</h2>

<div class="row" style="gap:10px; margin-bottom:10px">
  <a href="?status=" class="chip {% if not status %}active{% endif %}">All</a>
  <a href="?status=PENDING" class="chip {% if status == 'PENDING' %}active{% endif %}">Pending</a>
  <a href="?status=CONFIRMED" class="chip {% if status == 'CONFIRMED' %}active{% endif %}">Confirmed</a>
  <a href="?status=CHECKEDIN" class="chip {% if status == 'CHECKEDIN' %}active{% endif %}">Checked-in</a>
</div>

<table class="table">
  <thead>
    <tr>
      <th>Code</th><th>Dates</th><th>Status</th><th>Total</th><th>Evidence</th><th>Actions</th>
    </tr>
  </thead>
  <tbody>
    {% for b in bookings %}
    <tr data-code="{{ b.pk }}">
      <td>#{{ b.pk }}</td>
      <td>{{ b.checkin_date }} → {{ b.checkout_date }} ({{ b.nights }} nights)</td>
      <td>
        {% if b.status == "PENDING" and b.deposit_deadline and b.deposit_deadline|date:"U" < now|date:"U" %}
          <span class="badge warn">Over-due</span>
        {% endif %}
        <span class="badge">{{ b.status }}</span>
      </td>
      <td>{{ b.total_amount|floatformat:2 }}</td>
      <td>
        {% if b.proof_file %}
          <a href="{{ b.proof_file.url }}" target="_blank">View</a>
          <span class="badge success">Uploaded</span>
        {% else %}
          <span class="badge">Missing</span>
        {% endif %}
        {% if b.status == "PENDING" %}
          <div style="margin-top:6px">
            <input type="file" class="ev-file" accept="image/*,application/pdf">
            <button class="btn sm ev-upload">Upload</button>
            <div class="muted ev-msg"></div>
          </div>
        {% endif %}
      </td>
      <td>
        <a href="{% url 'hotel:guest_booking_detail' code=b.pk %}" class="btn sm">Details</a>
        {% if b.status == "PENDING" %}
          <a href="{% url 'hotel:guest_booking_cancel' code=b.pk %}" class="btn sm">Cancel</a>
        {% endif %}
      </td>
    </tr>
    {% empty %}
    <tr><td colspan="6" class="muted">No bookings.</td></tr>
    {% endfor %}
  </tbody>
</table>

<script>
function getCookie(name){const v=`; ${document.cookie}`;const p=v.split(`; ${name}=`);if(p.length===2)return p.pop().split(';').shift();return '';}
const CSRF=getCookie('csrftoken');

document.querySelectorAll('.ev-upload').forEach(btn=>{
  btn.addEventListener('click', async ()=>{
    const tr = btn.closest('tr'); const code = tr.dataset.code;
    const input = tr.querySelector('.ev-file'); const msg = tr.querySelector('.ev-msg');
    if(!input.files.length){ msg.textContent='Choose a file first.'; return; }
    msg.textContent='Uploading...';
    const fd = new FormData(); fd.append('code', code); fd.append('evidence', input.files[0]);
    const r = await fetch("{% url 'hotel:api_guest_evidence_upload' %}", { method:'POST', headers:{'X-CSRFToken':CSRF}, body: fd });
    if(!r.ok){ msg.textContent='Failed: '+(await r.text()); return; }
    msg.textContent='Uploaded ✓. Reloading...'; location.reload();
  });
});
</script>
{% endblock %}