{% extends "pos/base.html" %}
{% block title %}Room Status Manager{% endblock %}

{% block stylesheets %}
<style>
  .room-status-page {
    max-width: 1180px;
    margin: 16px auto;
    padding: 0 12px;
  }

  .rs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
  }

  .rs-title h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #111827;
  }

  .rs-title p {
    margin: 3px 0 0;
    color: #6b7280;
    font-size: 13px;
  }

  .rs-actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .rs-btn {
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #111827;
    padding: 8px 12px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .rs-btn:hover {
    background: #f9fafb;
    text-decoration: none;
    color: #111827;
  }

  .rs-btn-primary {
    background: #b8860b;
    border-color: #b8860b;
    color: #ffffff;
  }

  .rs-btn-primary:hover {
    background: #9f7307;
    color: #ffffff;
  }

  .rs-panel {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
  }

  .rs-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
  }

  .rs-toolbar-left {
    color: #374151;
    font-size: 13px;
    font-weight: 600;
  }

  .rs-table {
    width: 100%;
    border-collapse: collapse;
  }

  .rs-table th,
  .rs-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: middle;
    text-align: left;
    font-size: 14px;
  }

  .rs-table th {
    background: #f9fafb;
    color: #6b7280;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
  }

  .rs-room-no {
    font-weight: 700;
    color: #111827;
  }

  .rs-muted {
    color: #6b7280;
    font-size: 13px;
  }

  .rs-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid transparent;
    text-transform: capitalize;
  }

  .status-vacant {
    background: #e0f2fe;
    color: #075985;
    border-color: #7dd3fc;
  }

  .status-dirty {
    background: #fef3c7;
    color: #92400e;
    border-color: #facc15;
  }

  .status-occupied {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fca5a5;
  }

  .status-reserved {
    background: #fde68a;
    color: #78350f;
    border-color: #f59e0b;
  }

  .status-cleaning {
    background: #ffedd5;
    color: #9a3412;
    border-color: #fb923c;
  }

  .status-maintenance {
    background: #ede9fe;
    color: #5b21b6;
    border-color: #a78bfa;
  }

  .status-out_of_order {
    background: #f3f4f6;
    color: #4b5563;
    border-color: #d1d5db;
  }

  .status-blocked {
    background: #e5e7eb;
    color: #374151;
    border-color: #9ca3af;
  }

  .rs-select {
    width: 180px;
    height: 36px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #ffffff;
    color: #111827;
    padding: 6px 8px;
    font-size: 14px;
  }

  .rs-select:disabled {
    background: #f3f4f6;
    color: #9ca3af;
    cursor: not-allowed;
  }

  .rs-locked {
    color: #991b1b;
    font-size: 13px;
    font-weight: 600;
  }

  .rs-changed {
    outline: 2px solid #facc15;
    border-color: #f59e0b;
  }

  .rs-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid #e5e7eb;
    background: #ffffff;
  }

  @media (max-width: 768px) {
    .rs-header,
    .rs-toolbar,
    .rs-footer {
      align-items: flex-start;
      flex-direction: column;
    }

    .rs-panel {
      overflow-x: auto;
    }

    .rs-table {
      min-width: 820px;
    }
  }
</style>
{% endblock %}

{% block content %}
<div class="room-status-page">

  <div class="rs-header">
    <div class="rs-title">
      <h2>Room Status Manager</h2>
      <p>Select room statuses first, then save all changes together. Occupied rooms are locked.</p>
    </div>

    <div class="rs-actions">
      <a href="{% url 'hotel:board:staff_board' %}" class="rs-btn">Back to Board</a>
    </div>
  </div>

  {% if messages %}
    {% for message in messages %}
      <div class="alert alert-{{ message.tags }}">
        {{ message }}
      </div>
    {% endfor %}
  {% endif %}

  <form method="post" action="{% url 'hotel:rooms:status_bulk_update' %}" id="roomStatusForm">
    {% csrf_token %}

    <div class="rs-panel">
      <div class="rs-toolbar">
        <div class="rs-toolbar-left">
          Total Rooms: {{ rooms|length }}
        </div>

        <div class="rs-actions">
          <button type="button" class="rs-btn" id="btnDirtyAll">Set Vacant Rooms to Dirty</button>
          <button type="button" class="rs-btn" id="btnVacantAll">Set Dirty Rooms to Vacant</button>
          <button type="submit" class="rs-btn rs-btn-primary">Save Changes</button>
        </div>
      </div>

      <table class="rs-table">
        <thead>
          <tr>
            <th style="width:110px;">Room</th>
            <th>Category</th>
            <th>Floor</th>
            <th>Current Status</th>
            <th>Booking</th>
            <th style="width:220px;">New Status</th>
          </tr>
        </thead>

        <tbody>
          {% for room in rooms %}
            {% with st=room.status|default:"vacant" %}
              <tr>
                <td>
                  <div class="rs-room-no">{{ room.room_no }}</div>
                </td>

                <td>
                  {% if room.category %}
                    {{ room.category.name }}
                  {% else %}
                    <span class="rs-muted">No Category</span>
                  {% endif %}
                </td>

                <td>
                  {% if room.floor %}
                    {{ room.floor }}
                  {% else %}
                    <span class="rs-muted">-</span>
                  {% endif %}
                </td>

                <td>
                  <span class="rs-badge status-{{ st }}">
                    {{ room.get_status_display }}
                  </span>
                </td>

                <td>
                  {% if room.current_booking %}
                    #{{ room.current_booking.booking_code }}
                  {% else %}
                    <span class="rs-muted">No active booking</span>
                  {% endif %}
                </td>

                <td>
                  {% if room.current_booking or room.status == RoomStatus.OCCUPIED %}
                    <select class="rs-select" disabled>
                      <option>{{ room.get_status_display }}</option>
                    </select>
                    <div class="rs-locked">Locked while occupied</div>
                  {% else %}
                    <select
                      class="rs-select room-status-select"
                      name="room_status_{{ room.id }}"
                      data-original="{{ room.status }}"
                      data-room="{{ room.room_no }}"
                    >
                      <option value="{{ RoomStatus.VACANT }}" {% if room.status == RoomStatus.VACANT %}selected{% endif %}>Vacant</option>
                      <option value="{{ RoomStatus.DIRTY }}" {% if room.status == RoomStatus.DIRTY %}selected{% endif %}>Dirty</option>
                      <option value="{{ RoomStatus.CLEANING }}" {% if room.status == RoomStatus.CLEANING %}selected{% endif %}>Cleaning</option>
                      <option value="{{ RoomStatus.MAINTENANCE }}" {% if room.status == RoomStatus.MAINTENANCE %}selected{% endif %}>Maintenance</option>
                      <option value="{{ RoomStatus.OUT_OF_ORDER }}" {% if room.status == RoomStatus.OUT_OF_ORDER %}selected{% endif %}>Out of Order</option>
                      <option value="{{ RoomStatus.BLOCKED }}" {% if room.status == RoomStatus.BLOCKED %}selected{% endif %}>Blocked</option>
                    </select>
                  {% endif %}
                </td>
              </tr>
            {% endwith %}
          {% empty %}
            <tr>
              <td colspan="6" class="rs-muted">No rooms found.</td>
            </tr>
          {% endfor %}
        </tbody>
      </table>

      <div class="rs-footer">
        <span class="rs-muted" id="changeCounter">No changes selected.</span>
        <button type="submit" class="rs-btn rs-btn-primary">Save Changes</button>
      </div>
    </div>
  </form>
</div>

<script>
(function(){
  const selects = Array.from(document.querySelectorAll('.room-status-select'));
  const counter = document.getElementById('changeCounter');
  const form = document.getElementById('roomStatusForm');

  function refreshChangedState(){
    let changed = 0;

    selects.forEach(function(sel){
      const original = (sel.dataset.original || '').toLowerCase();
      const current = (sel.value || '').toLowerCase();

      if(original !== current){
        changed += 1;
        sel.classList.add('rs-changed');
      } else {
        sel.classList.remove('rs-changed');
      }
    });

    if(counter){
      counter.textContent = changed ? (changed + ' change(s) selected.') : 'No changes selected.';
    }
  }

  selects.forEach(function(sel){
    sel.addEventListener('change', refreshChangedState);
  });

  const btnDirtyAll = document.getElementById('btnDirtyAll');
  const btnVacantAll = document.getElementById('btnVacantAll');

  if(btnDirtyAll){
    btnDirtyAll.addEventListener('click', function(){
      selects.forEach(function(sel){
        if((sel.dataset.original || '').toLowerCase() === 'vacant'){
          sel.value = 'dirty';
        }
      });
      refreshChangedState();
    });
  }

  if(btnVacantAll){
    btnVacantAll.addEventListener('click', function(){
      selects.forEach(function(sel){
        if((sel.dataset.original || '').toLowerCase() === 'dirty'){
          sel.value = 'vacant';
        }
      });
      refreshChangedState();
    });
  }

  if(form){
    form.addEventListener('submit', function(e){
      const changed = selects.some(function(sel){
        return (sel.dataset.original || '').toLowerCase() !== (sel.value || '').toLowerCase();
      });

      if(!changed){
        e.preventDefault();
        alert('No room status changes selected.');
        return;
      }

      if(!confirm('Save selected room status changes?')){
        e.preventDefault();
      }
    });
  }

  refreshChangedState();
})();
</script>
{% endblock %}