{% extends "pos/base.html" %}
{% block title %}Room Service Orders{% endblock %}
{% block heading %}Room Service Orders{% endblock %}

{% block content %}
<style>
  .rs-wrap{padding:14px}
  .rs-card{
    background:#fff;border:1px solid #e5e7eb;border-radius:16px;
    padding:14px;margin-bottom:14px;box-shadow:0 10px 24px rgba(15,23,42,.05)
  }
  .rs-filter{display:grid;grid-template-columns:2fr 1fr 1fr 1fr auto;gap:10px;align-items:end}
  .rs-table{width:100%;border-collapse:collapse;background:#fff}
  .rs-table th,.rs-table td{padding:9px 8px;border-bottom:1px solid #eef2f7;text-align:left}
  .rs-table th{font-size:.76rem;text-transform:uppercase;color:#64748b}
  .r{text-align:right!important}
  .btn-pill{border-radius:999px;font-weight:800}
  .badge-open{background:#dbeafe;color:#1d4ed8}
  .badge-served{background:#dcfce7;color:#166534}
  .badge-settled{background:#e5e7eb;color:#374151}
  .muted{color:#64748b}
  @media(max-width:1000px){.rs-filter{grid-template-columns:1fr}}
</style>

<div class="rs-wrap">

  <div class="rs-card">
    <form method="get" class="rs-filter">
      <div>
        <label>Search</label>
        <input type="text" name="q" value="{{ q }}" class="form-control"
               placeholder="RS no, booking no, guest, phone, remarks">
      </div>

      <div>
        <label>Status</label>
        <select name="status" class="form-control">
          <option value="">All</option>
          {% for value,label in status_choices %}
            <option value="{{ value }}" {% if status == value %}selected{% endif %}>
              {{ label }}
            </option>
          {% endfor %}
        </select>
      </div>

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

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

      <div>
        <button class="btn btn-primary btn-pill" type="submit">Filter</button>
        <a class="btn btn-outline-secondary btn-pill" href="{% url 'hotel:roomservice:list' %}">Reset</a>
      </div>
    </form>
  </div>

  <div class="rs-card" style="display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;">
    <h5 style="margin:0;">Room Service List</h5>
    <div>
      <a class="btn btn-success btn-pill" href="{% url 'hotel:roomservice:form' %}">
        + New Room Service
      </a>
      <a class="btn btn-outline-primary btn-pill" href="{% url 'hotel:roomservice:pending_list' %}">Pending Requests</a>
    </div>
  </div>

  <div class="rs-card">
    <div class="table-responsive">
      <table class="rs-table">
        <thead>
          <tr>
            <th>RS#</th>
            <th>Date</th>
            <th>Booking</th>
            <th>Guest</th>
            <th>Room</th>
            <th>Status</th>
            <th class="r">Subtotal</th>
            <th class="r">Tax</th>
            <th class="r">Grand Total</th>
            <th class="r">Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for o in rows %}
            <tr>
              <td><b>RS#{{ o.order_no }}</b></td>
              <td>{{ o.created_at|date:"d M Y h:i A" }}</td>
              <td>
                B#{{ o.booking.t_id }}
              </td>
              <td>
                <b>{{ o.booking.guest.name|default:"Guest" }}</b><br>
                <small class="muted">{{ o.booking.guest.contact|default:"-" }}</small>
              </td>
              <td>{{ o.room_nos }}</td>
              <td>
                {% if o.status == "open" %}
                  <span class="badge badge-open">Open</span>
                {% elif o.status == "served" %}
                  <span class="badge badge-served">Served</span>
                {% elif o.status == "settled" %}
                  <span class="badge badge-settled">Settled</span>
                {% else %}
                  <span class="badge badge-secondary">{{ o.status }}</span>
                {% endif %}
              </td>
              <td class="r">{{ o.summary.subtotal|floatformat:2 }}</td>
              <td class="r">
                {{ o.summary.tax_amount|floatformat:2 }}
                <small class="muted">({{ o.summary.tax_percent|floatformat:2 }}%)</small>
              </td>
              <td class="r"><b>{{ o.summary.grand_total|floatformat:2 }}</b></td>
              <td class="r">
                <a class="btn btn-sm btn-outline-primary btn-pill"
                   href="{% url 'hotel:roomservice:detail' o.order_no %}">
                  Detail
                </a>

                {% if o.status != "settled" %}
                <a class="btn btn-sm btn-outline-warning btn-pill"
                   href="{% url 'hotel:roomservice:form' %}?order_no={{ o.order_no }}">
                  Edit
                </a>
              {% endif %}

                <a class="btn btn-sm btn-outline-dark btn-pill"
                   href="{% url 'hotel:bookings:detail' t_id=o.booking.t_id %}">
                  View Booking
                </a>

                <a class="btn btn-sm btn-outline-secondary btn-pill"
                   target="_blank"
                   href="{% url 'hotel:roomservice:kot' o.order_no %}?autoprint=0&close=none">
                  KOT
                </a>
              </td>
            </tr>
          {% empty %}
            <tr>
              <td colspan="10" class="muted">No room service orders found.</td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    <div style="display:flex;justify-content:space-between;align-items:center;margin-top:12px;">
      <small class="muted">
        Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
      </small>

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

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

</div>
{% endblock %}