{% extends "pos/base.html" %}
{% block title %}Bookings{% endblock %}

{% block content %}
<style>
  .bm-wrap{padding:14px}
  .bm-head{
    display:flex;justify-content:space-between;gap:12px;align-items:flex-start;
    margin-bottom:14px;flex-wrap:wrap;
  }
  .bm-title{margin:0;font-size:1.5rem;font-weight:900;color:#0f172a}
  .bm-sub{margin:4px 0 0;color:#64748b}
  .bm-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:14px}
  .bm-kpi{
    background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:12px;
    box-shadow:0 8px 22px rgba(15,23,42,.05)
  }
  .bm-kpi .l{color:#64748b;font-size:.78rem;font-weight:800}
  .bm-kpi .v{font-size:1.45rem;font-weight:900;color:#111827;margin-top:4px}
  .bm-card{
    background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:14px;
    box-shadow:0 12px 30px rgba(15,23,42,.06);margin-bottom:14px
  }
  .filter-grid{
    display:grid;grid-template-columns:1.5fr repeat(5,1fr) auto;gap:10px;align-items:end
  }
  .field label{display:block;font-size:.78rem;color:#64748b;font-weight:800;margin-bottom:5px}
  .field input,.field select{
    width:100%;border:1px solid #d1d5db;border-radius:12px;padding:9px 10px;
  }
  .btn{
    border:1px solid #d1d5db;background:#fff;border-radius:999px;padding:9px 13px;
    font-weight:800;cursor:pointer;text-decoration:none;color:#111827;display:inline-flex;
    align-items:center;justify-content:center;gap:6px
  }
  .btn.primary{background:#2563eb;color:#fff;border-color:#2563eb}
  .btn.sm{padding:6px 10px;font-size:.82rem}
  .table{width:100%;border-collapse:collapse}
  .table th,.table td{padding:10px 8px;border-bottom:1px solid #eef2f7;text-align:left;vertical-align:middle}
  .table th{font-size:.76rem;text-transform:uppercase;color:#64748b;letter-spacing:.04em}
  .r{text-align:right!important}
  .code{font-weight:900;color:#1d4ed8}
  .muted{color:#64748b}
  .badge{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:.75rem;font-weight:900}
  .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}
  .status-noshow{background:#f3e8ff;color:#7e22ce}
  .actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
  .pagination{display:flex;gap:8px;justify-content:flex-end;margin-top:12px;align-items:center}
  @media(max-width:1100px){
    .bm-kpis{grid-template-columns:repeat(3,1fr)}
    .filter-grid{grid-template-columns:1fr 1fr}
  }
  @media(max-width:700px){
    .bm-kpis{grid-template-columns:repeat(2,1fr)}
    .filter-grid{grid-template-columns:1fr}
  }
</style>

<div class="bm-wrap">

  <div class="bm-head">
    <div>
      <h1 class="bm-title">Booking Audit</h1>
      <p class="bm-sub">All public, guest, prebook, checked-in and checked-out bookings in one place. 
        To see the booking detail etc
      </p>
    </div>
  </div>

  <div class="bm-kpis">
    <div class="bm-kpi"><div class="l">All</div><div class="v">{{ counts.all }}</div></div>
    <div class="bm-kpi"><div class="l">Pending</div><div class="v">{{ counts.pending }}</div></div>
    <div class="bm-kpi"><div class="l">Confirmed</div><div class="v">{{ counts.confirmed }}</div></div>
    <div class="bm-kpi"><div class="l">Checked-in</div><div class="v">{{ counts.checkedin }}</div></div>
    <div class="bm-kpi"><div class="l">Checked-out</div><div class="v">{{ counts.checkedout }}</div></div>
    <div class="bm-kpi"><div class="l">Cancelled</div><div class="v">{{ counts.cancelled }}</div></div>
  </div>

  <form method="get" class="bm-card">
    <div class="filter-grid">
      <div class="field">
        <label>Search</label>
        <input name="q" value="{{ q }}" placeholder="Booking no, guest, phone, CNIC, email">
      </div>

      <div class="field">
        <label>Status</label>
        <select name="status">
          <option value="">All</option>
          {% for val,label in statuses %}
            <option value="{{ val }}" {% if status == val %}selected{% endif %}>{{ label }}</option>
          {% endfor %}
        </select>
      </div>

      <div class="field">
        <label>Source</label>
        <select name="source">
          <option value="">All</option>
          <option value="web" {% if source == "web" %}selected{% endif %}>Web</option>
          <option value="staff" {% if source == "staff" %}selected{% endif %}>Staff</option>
          <option value="guest" {% if source == "guest" %}selected{% endif %}>Guest</option>
        </select>
      </div>

      <div class="field">
        <label>Evidence</label>
        <select name="evidence">
          <option value="">All</option>
          <option value="uploaded" {% if evidence == "uploaded" %}selected{% endif %}>Uploaded</option>
          <option value="missing" {% if evidence == "missing" %}selected{% endif %}>Missing</option>
        </select>
      </div>

      <div class="field">
        <label>From</label>
        <input type="date" name="date_from" value="{{ date_from }}">
      </div>

      <div class="field">
        <label>To</label>
        <input type="date" name="date_to" value="{{ date_to }}">
      </div>

      <button class="btn primary">Filter</button>
    </div>
  </form>

  <div class="bm-card">
    <div style="overflow:auto;">
      <table class="table">
        <thead>
          <tr>
            <th>Booking</th>
            <th>Guest</th>
            <th>Dates</th>
            <th>Status</th>
            <th>Source</th>
            <th>Total</th>
            <th>Evidence</th>
            <th class="r">Actions</th>
          </tr>
        </thead>

        <tbody>
          {% for b in bookings %}
            <tr>
              <td>
                <span class="code">#{{ b.t_id }}</span>
                <div class="muted">PK: {{ b.pk }}</div>
              </td>

              <td>
                <b>{{ b.guest.name|default:"Guest" }}</b>
                <div class="muted">{{ b.guest.contact|default:b.guest_account.email }}</div>
              </td>

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

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

              <td>{{ b.source|default:"-" }}</td>

              <td>
                <b>{{ b.total_amount|floatformat:0 }}</b>
                <div class="muted">Adv: {{ b.advance_received|floatformat:0 }}</div>
              </td>

              <td>
                {% if b.proof_file %}
                  <a class="btn sm" href="{{ b.proof_file.url }}" target="_blank">View</a>
                {% else %}
                  <span class="muted">Missing</span>
                {% endif %}
              </td>

              <td class="r">
                <div class="actions">
                  <a class="btn sm" href="{% url 'hotel:bookings:detail' t_id=b.t_id %}">View</a>


                </div>
              </td>
            </tr>
          {% empty %}
            <tr>
              <td colspan="8" class="muted">No bookings found.</td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    <div class="pagination">
      {% if page_obj.has_previous %}
        <a class="btn sm" href="?page={{ page_obj.previous_page_number }}&q={{ q }}&status={{ status }}&source={{ source }}&evidence={{ evidence }}&date_from={{ date_from }}&date_to={{ date_to }}">Previous</a>
      {% endif %}

      <span class="muted">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span>

      {% if page_obj.has_next %}
        <a class="btn sm" href="?page={{ page_obj.next_page_number }}&q={{ q }}&status={{ status }}&source={{ source }}&evidence={{ evidence }}&date_from={{ date_from }}&date_to={{ date_to }}">Next</a>
      {% endif %}
    </div>
  </div>

</div>
{% endblock %}