{% extends "hotel/guest/base.html" %}

{% block title %}My Bookings{% endblock %}
{% block page_title %}My Bookings{% endblock %}

{% block head %}
<style>
  .booking-filter-card{
    margin-bottom:16px;
  }

  .filter-row{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
    justify-content:space-between;
  }

  .filter-tabs{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }

  .filter-chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 11px;
    border-radius:999px;
    background:#f8fafc;
    border:1px solid #e5e7eb;
    color:#334155;
    font-weight:900;
    font-size:.84rem;
  }

  .filter-chip.active{
    background:linear-gradient(135deg,#2563eb,#1d4ed8);
    color:#fff;
    border-color:#2563eb;
  }

  .bookings-wrap{
    overflow:auto;
  }

  .booking-code{
    font-weight:900;
    color:#1d4ed8;
    white-space:nowrap;
  }

  .date-line{
    font-weight:800;
    color:#111827;
  }

  .small-muted{
    color:#64748b;
    font-size:.78rem;
    margin-top:2px;
  }

  .status-pill{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:5px 9px;
    border-radius:999px;
    font-size:.75rem;
    font-weight:900;
    text-transform:uppercase;
  }

  .status-pending{
    background:#fef3c7;
    color:#92400e;
  }

  .status-confirmed{
    background:#dcfce7;
    color:#166534;
  }

  .status-checkedin{
    background:#dbeafe;
    color:#1d4ed8;
  }

  .status-checkedout{
    background:#e5e7eb;
    color:#374151;
  }

  .status-cancelled{
    background:#fee2e2;
    color:#991b1b;
  }

  .evidence-mini{
    display:grid;
    gap:6px;
    min-width:220px;
  }

  .evidence-upload-row{
    display:flex;
    gap:6px;
    align-items:center;
    flex-wrap:wrap;
  }

  .evidence-upload-row input{
    max-width:170px;
    font-size:.78rem;
  }

  .ev-msg{
    color:#64748b;
    font-size:.78rem;
    font-weight:800;
  }

  .actions{
    display:flex;
    gap:6px;
    justify-content:flex-end;
    flex-wrap:wrap;
  }

  .empty-box{
    text-align:center;
    padding:34px 12px;
    color:#64748b;
  }

  .empty-box i{
    font-size:2rem;
    color:#94a3b8;
    margin-bottom:8px;
  }

  @media(max-width:760px){
    .filter-row{
      align-items:flex-start;
      flex-direction:column;
    }

    .table th,
    .table td{
      min-width:130px;
    }
  }
</style>
{% endblock %}

{% block content %}

<section class="card booking-filter-card">
  <div class="filter-row">
    <div>
      <h2 style="margin:0;">My Bookings</h2>
      <p class="muted" style="margin:4px 0 0;">
        Track your hotel booking requests, evidence upload and stay status.
      </p>
    </div>

    <a class="btn primary" href="{% url 'hotel:public:booking_tenant' tenant=tenant_id %}">
      <i class="fa-solid fa-plus"></i>
      New Booking
    </a>
  </div>

  <div class="filter-tabs" style="margin-top:14px;">
    <a href="?status=" class="filter-chip {% if not status %}active{% endif %}">
      All <span>{{ counts.all|default:0 }}</span>
    </a>

    <a href="?status=PENDING" class="filter-chip {% if status == 'PENDING' %}active{% endif %}">
      Pending <span>{{ counts.pending|default:0 }}</span>
    </a>

    <a href="?status=CONFIRMED" class="filter-chip {% if status == 'CONFIRMED' %}active{% endif %}">
      Confirmed <span>{{ counts.confirmed|default:0 }}</span>
    </a>

    <a href="?status=CHECKEDIN" class="filter-chip {% if status == 'CHECKEDIN' %}active{% endif %}">
      Checked-in <span>{{ counts.checkedin|default:0 }}</span>
    </a>

    <a href="?status=CANCELLED" class="filter-chip {% if status == 'CANCELLED' %}active{% endif %}">
      Cancelled <span>{{ counts.cancelled|default:0 }}</span>
    </a>
  </div>
</section>

<section class="card">
  <div class="bookings-wrap">
    <table class="table">
      <thead>
        <tr>
          <th>Booking</th>
          <th>Dates</th>
          <th>Status</th>
          <th>Total</th>
          <th>Evidence</th>
          <th class="r">Actions</th>
        </tr>
      </thead>

      <tbody>
        {% for b in bookings %}
          <tr data-code="{{ b.t_id }}">
            <td>
              <span class="booking-code">#{{ b.t_id }}</span>
              <div class="small-muted">Created: {{ b.created_at|date:"d M Y" }}</div>
            </td>

            <td>
              <div class="date-line">
                {{ b.checkin_date }} → {{ b.checkout_date }}
              </div>
              <div class="small-muted">
                {{ b.nights }} night{% if b.nights != 1 %}s{% endif %}
              </div>
            </td>

            <td>
              {% if b.status == "PENDING" and b.deposit_deadline and b.deposit_deadline|date:"U" < now|date:"U" %}
                <span class="badge warn">
                  <i class="fa-regular fa-clock"></i>
                  Over-due
                </span>
                <br>
              {% endif %}

              <span class="status-pill status-{{ b.status|lower }}">
                {{ b.status }}
              </span>
            </td>

            <td>
              <b>{{ b.total_amount|floatformat:0 }}</b>
              {% if b.advance_required %}
                <div class="small-muted">
                  Advance: {{ b.advance_required|floatformat:0 }}
                </div>
              {% endif %}
            </td>

            <td>
              <div class="evidence-mini">
                {% if b.proof_file %}
                  <div>
                    <span class="badge success">
                      <i class="fa-regular fa-circle-check"></i>
                      Uploaded
                    </span>
                    <a href="{{ b.proof_file.url }}" target="_blank" class="btn" style="padding:5px 9px;margin-left:5px;">
                      View
                    </a>
                  </div>
                {% else %}
                  <span class="badge warn">
                    <i class="fa-regular fa-clock"></i>
                    Missing
                  </span>
                {% endif %}

                {% if b.status == "PENDING" or b.status == "CONFIRMED" %}
                  <div class="evidence-upload-row">
                    <input type="file" class="ev-file" accept=".jpg,.jpeg,.png,.pdf">
                    <button type="button" class="btn ev-upload">
                      Upload
                    </button>
                  </div>
                  <div class="ev-msg"></div>
                {% endif %}
              </div>
            </td>

            <td class="r">
              <div class="actions">
                <a href="{% url 'hotel:guest:booking_detail' code=b.t_id %}" class="btn">
                  <i class="fa-regular fa-eye"></i>
                  Details
                </a>

                {% if b.status == "PENDING" %}
                  <form method="post"
                        action="{% url 'hotel:guest:booking_cancel' code=b.t_id %}"
                        onsubmit="return confirm('Are you sure you want to cancel booking #{{ b.t_id }}?');">
                    {% csrf_token %}
                    <button type="submit" class="btn">
                      <i class="fa-regular fa-circle-xmark"></i>
                      Cancel
                    </button>
                  </form>
                {% endif %}
              </div>
            </td>
          </tr>
        {% empty %}
          <tr>
            <td colspan="6">
              <div class="empty-box">
                <i class="fa-regular fa-calendar-xmark"></i>
                <div>No bookings found.</div>
                <div style="margin-top:10px;">
                  <a class="btn primary" href="{% url 'hotel:public:booking_tenant' tenant=tenant_id %}">
                    Create New Booking
                  </a>
                </div>
              </div>
            </td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</section>

{% endblock %}

{% block scripts %}
<script>
  document.querySelectorAll(".ev-upload").forEach(function(btn){
    btn.addEventListener("click", async function(){
      const tr = btn.closest("tr");
      const code = tr.dataset.code;
      const input = tr.querySelector(".ev-file");
      const msg = tr.querySelector(".ev-msg");

      msg.textContent = "";

      if(!input.files.length){
        msg.textContent = "Choose a file first.";
        return;
      }

      const fd = new FormData();
      fd.append("code", code);
      fd.append("evidence", input.files[0]);

      msg.textContent = "Uploading...";

      try{
        const r = await fetch("{% url 'hotel:guest:api_guest_evidence_upload' %}", {
          method: "POST",
          headers: {
            "X-CSRFToken": getCookie("csrftoken")
          },
          body: fd
        });

        if(!r.ok){
          const txt = await r.text();
          msg.textContent = "Failed: " + txt;
          return;
        }

        msg.textContent = "Uploaded ✓. Reloading...";
        setTimeout(function(){
          location.reload();
        }, 700);

      }catch(e){
        msg.textContent = e.message || "Network error";
      }
    });
  });
</script>
{% endblock %}