{% extends "pos/base.html" %}
{% block title %}Rooms — Bulk Import & Manage{% endblock %}
{% block heading %}Rooms — Bulk Import & Manage{% endblock %}

{% block stylesheets %}
<style>
    table { width: 100%; border-collapse: collapse; margin: 10px 0; }
    th, td { border: 1px solid #ddd; padding: 6px; font-size: 14px; }
    th { background: #f5f5f5; text-align: left; }
    .card { border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; margin-bottom: 18px; }
    .actions { margin-top: 10px; }
    .row { display: grid; grid-template-columns: 1fr; gap: 16px; }
    @media(min-width: 900px){ .row { grid-template-columns: 1fr 1fr; } }
    .btn { display:inline-block; padding:6px 12px; border:1px solid #ccc; border-radius:6px; background:#fff; cursor:pointer; }
    .btn-primary { background:#2563eb; color:#fff; border-color:#2563eb; }
    .btn-info { background:#006400; color:#fff; border-color:#2563eb; }
    .btn-secondary { background:#f3f4f6; }
    .mb8{ margin-bottom:8px; } .mr8{ margin-right:8px; }
</style>
{% endblock %}

{% block content %}

  <!-- Import Section -->
  <div class="card">
    <h3>Import (Excel)</h3>
    <p class="mb8">
      <a href="{% url 'hotel:rooms_bulk_template' %}" class="btn btn-info">Download Excel Template</a>
    </p>
    <form method="post" enctype="multipart/form-data">
      {% csrf_token %}
      <input type="hidden" name="action" value="upload_excel">
      <input type="file" name="file" accept=".xlsx" required class="mr8">
      <button class="btn btn-primary">Upload Excel File</button>
    </form>
    <p class="mb8"><small>Template columns (exact): Room Category Code, Room Category, Adults, Children, Base Rate, Room #, Floor</small></p>
  </div>

  <div class="row">
    <!-- Categories Inline Edit -->
    <div class="card">
      <h3>Manage Categories (Inline Edit)</h3>
      <form method="post">
        {% csrf_token %}
        <input type="hidden" name="action" value="save_categories">
        {{ cat_formset.management_form }}
        <table>
        <thead>
          <tr>
            {% if cat_formset.forms %}
              {% for f in cat_formset.forms.0.visible_fields %}<th>{{ f.label }}</th>{% endfor %}
            {% else %}
              <th>Fields</th>
            {% endif %}
          </tr>
        </thead>

          <tbody>
            {% for form in cat_formset.forms %}
              <tr>
                {% for h in form.hidden_fields %}{{ h }}{% endfor %}
                {% for f in form.visible_fields %}
                  <td>
                    {{ f.errors }}{{ f }}
                  </td>
                {% endfor %}
              </tr>
            {% empty %}
              <tr><td colspan="8">No categories.</td></tr>
            {% endfor %}
          </tbody>
        </table>
        <div class="actions">
          <button class="btn btn-primary">Save Changes</button>
        </div>
      </form>
    </div>

    <!-- Rooms Inline Edit -->
    <div class="card">
      <h3>Manage Rooms (Inline Edit)</h3>
      <form method="post">
        {% csrf_token %}
        <input type="hidden" name="action" value="save_rooms">
        {{ room_formset.management_form }}
        <table>
          <thead>
            <tr>
              {% for f in room_formset.forms.0.visible_fields %}
                <th>{{ f.label }}</th>
              {% endfor %}
            </tr>
          </thead>
          <tbody>
            {% for form in room_formset.forms %}
              <tr>
                {% for h in form.hidden_fields %}{{ h }}{% endfor %}
                {% for f in form.visible_fields %}
                  <td>
                    {{ f.errors }}{{ f }}
                  </td>
                {% endfor %}
              </tr>
            {% empty %}
              <tr><td colspan="8">No rooms.</td></tr>
            {% endfor %}
          </tbody>

        </table>
        <div class="actions">
          <button class="btn btn-primary">Save Changes</button>
        </div>
      </form>
    </div>
  </div>

{% endblock %}