{% extends "pos/base.html" %}
{% load static %}

{% block title %}Pre-Booking Management{% endblock %}


{% block content %}

<style>
  .pb-page{padding:16px;}
  .pb-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:14px;
  }
  .pb-title{
    margin:0;
    font-size:24px;
    font-weight:900;
    color:#172b4d;
  }
  .pb-subtitle{
    margin:4px 0 0;
    color:#64748b;
    font-size:13px;
  }
  .pb-card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:14px;
    box-shadow:0 8px 20px rgba(15,23,42,.06);
    padding:14px;
    margin-bottom:14px;
  }
  .pb-summary{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:12px;
    margin-bottom:14px;
  }
  .pb-box{
    background:linear-gradient(180deg,#ffffff,#f8fafc);
    border:1px solid #e5e7eb;
    border-radius:14px;
    padding:14px;
  }
  .pb-box .k{
    font-size:12px;
    font-weight:800;
    color:#64748b;
    text-transform:uppercase;
  }
  .pb-box .v{
    font-size:22px;
    font-weight:900;
    color:#0f172a;
    margin-top:4px;
  }
  .pb-filter{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr 1fr auto;
    gap:10px;
    align-items:end;
  }
  .pb-table-wrap{overflow:auto;}
  .pb-table{
    width:100%;
    border-collapse:collapse;
    font-size:13px;
  }
  .pb-table th{
    background:#f1f5f9;
    color:#334155;
    font-weight:900;
    padding:10px;
    border-bottom:1px solid #e5e7eb;
    white-space:nowrap;
  }
  .pb-table td{
    padding:10px;
    border-bottom:1px solid #eef2f7;
    vertical-align:middle;
    white-space:nowrap;
  }
  .pb-table tfoot td{
    background:#f8fafc;
    font-weight:900;
  }
  .pb-badge{
    display:inline-block;
    padding:4px 8px;
    border-radius:999px;
    font-size:11px;
    font-weight:900;
  }
  .pb-pending{background:#fef3c7;color:#92400e;}
  .pb-confirmed{background:#dcfce7;color:#166534;}
  .pb-other{background:#e5e7eb;color:#374151;}
  .pb-actions{
    display:flex;
    justify-content:flex-end;
    gap:6px;
  }
  @media(max-width:1100px){
    .pb-summary{grid-template-columns:repeat(2,minmax(0,1fr));}
    .pb-filter{grid-template-columns:1fr;}
    .pb-header{flex-direction:column;align-items:flex-start;}
  }
</style>

<div class="pb-page">

  <div class="pb-header">
    <div>
      <h1 class="pb-title">Pre-Booking Management</h1>
      <p class="pb-subtitle">Pending and confirmed reservations. Manage payment, voucher, cancellation and check-in.</p>
    </div>

    <a href="{% url 'hotel:prebook:prebook_add' %}" class="btn btn-primary">
      <i class="fas fa-plus mr-1"></i> New Pre-Booking
    </a>
  </div>

  <div class="pb-summary">
    <div class="pb-box">
      <div class="k">Records</div>
      <div class="v">{{ total_records }}</div>
    </div>
    <div class="pb-box">
      <div class="k">Total Amount</div>
      <div class="v">{{ total_amount|floatformat:0 }}</div>
    </div>
    <div class="pb-box">
      <div class="k">Advance Required</div>
      <div class="v">{{ total_advance_required|floatformat:0 }}</div>
    </div>
    <div class="pb-box">
      <div class="k">Paid</div>
      <div class="v">{{ total_paid|floatformat:0 }}</div>
    </div>
    <div class="pb-box">
      <div class="k">Balance</div>
      <div class="v">{{ total_balance|floatformat:0 }}</div>
    </div>
  </div>

  <div class="pb-card">
    <form method="get" class="pb-filter">
      <div>
        <label>Search</label>
        <input type="text" name="q" value="{{ q }}" class="form-control"
               placeholder="Guest, phone, CNIC, T#, booking code">
      </div>

      <div>
        <label>From Check-in</label>
        <input type="date" name="from" value="{{ from_str }}" class="form-control">
      </div>

      <div>
        <label>To Check-in</label>
        <input type="date" name="to" value="{{ to_str }}" class="form-control">
      </div>

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

      <div>
        <label>Source</label>
        <select name="source" class="form-control">
          <option value="" {% if not current_source %}selected{% endif %}>All Sources</option>
          {% for s in source_choices %}
            <option value="{{ s }}" {% if current_source == s %}selected{% endif %}>
              {{ s|title }}
            </option>
          {% endfor %}
        </select>
      </div>

      <div>
        <button type="submit" class="btn btn-dark">Filter</button>
        <a href="{% url 'hotel:prebook:prebook_list' %}" class="btn btn-light">Reset</a>
      </div>
    </form>
  </div>

  <div class="pb-card">
    <div class="pb-table-wrap">
      <table class="pb-table">
        <thead>
          <tr>
            <th>T#</th>
            <th>Guest</th>
            <th>Contact</th>
            <th>Source</th>
            <th>Dates</th>
            <th>Nights</th>
            <th class="text-right">Total</th>
            <th class="text-right">Adv Req</th>
            <th class="text-right">Paid</th>
            <th class="text-right">Balance</th>
            <th>Status</th>
            <th class="text-right">Actions</th>
          </tr>
        </thead>

        <tbody>
          {% for b in rows %}
            <tr>
              <td>
              <strong>{{ b.prebook_ref_label }}</strong>
              {% if b.has_official_tid %}
                <div class="text-muted small">Booking Code: BC#{{ b.booking_code }}</div>
              {% else %}
                <div class="text-muted small">No T# yet</div>
              {% endif %}
            </td>
              <td>{% if b.guest %}<strong>{{ b.guest.name }}</strong>{% else %}-{% endif %}</td>
              <td>{% if b.guest %}{{ b.guest.contact|default:"-" }}{% else %}-{% endif %}</td>
              <td>{{ b.source|default:"-"|title }}</td>
              <td>{{ b.checkin_date|date:"d/m/Y" }} → {{ b.checkout_date|date:"d/m/Y" }}</td>
              <td>{{ b.nights }}</td>
              <td class="text-right">{{ b.total_amount|floatformat:0 }}</td>
              <td class="text-right">{{ b.advance_required|floatformat:0 }}</td>
              <td class="text-right">{{ b.paid_sum|floatformat:0 }}</td>
              <td class="text-right">{{ b.balance_amount|floatformat:0 }}</td>
              <td>
                {% if b.status == "CONFIRMED" %}
                  <span class="pb-badge pb-confirmed">CONFIRMED</span>
                {% elif b.status == "PENDING" %}
                  <span class="pb-badge pb-pending">PENDING</span>
                {% else %}
                  <span class="pb-badge pb-other">{{ b.status }}</span>
                {% endif %}
              </td>
              <td>
                <div class="pb-actions">
                  <a class="btn btn-sm btn-outline-primary"
                     href="{% url 'hotel:prebook:prebook_detail' b.prebook_ref  %}">
                    Open
                  </a>

                  <a class="btn btn-sm btn-outline-secondary"
                     target="_blank"
                     href="{% url 'hotel:prebook:prebook_voucher' b.prebook_ref  %}">
                    Voucher
                  </a>

                  {% if b.can_edit %}
                    <a class="btn btn-sm btn-outline-warning"
                       href="{% url 'hotel:prebook:prebook_edit' b.prebook_ref  %}">
                      Edit
                    </a>
                  {% endif %}

                  {% if b.can_pay %}
                    <a class="btn btn-sm btn-outline-success"
                       href="{% url 'hotel:prebook:prebook_pay' b.prebook_ref  %}">
                      Payment
                    </a>
                  {% endif %}

                  {% if b.can_checkin %}
                    <a class="btn btn-sm btn-success"
                       href="{% url 'hotel:checkin:checkin_edit' b.t_id  %}">
                      Check-in
                    </a>
                  {% endif %}

                  {% if b.can_cancel %}
                    <a class="btn btn-sm btn-outline-danger"
                       href="{% url 'hotel:prebook:prebook_cancel' b.prebook_ref  %}"
                       onclick="return confirm('Cancel this booking and release holds?');">
                      Cancel
                    </a>
                  {% endif %}
                </div>
              </td>
            </tr>
          {% empty %}
            <tr>
              <td colspan="12" class="text-center text-muted" style="padding:30px;">
                No active pre-bookings found.
              </td>
            </tr>
          {% endfor %}
        </tbody>

        <tfoot>
          <tr>
            <td colspan="6" class="text-right">Total</td>
            <td class="text-right">{{ total_amount|floatformat:0 }}</td>
            <td class="text-right">{{ total_advance_required|floatformat:0 }}</td>
            <td class="text-right">{{ total_paid|floatformat:0 }}</td>
            <td class="text-right">{{ total_balance|floatformat:0 }}</td>
            <td colspan="2"></td>
          </tr>
        </tfoot>
      </table>
    </div>

    {% if page_obj.has_other_pages %}
      <div style="display:flex;gap:8px;justify-content:flex-end;margin-top:12px;">
        {% if page_obj.has_previous %}
          <a class="btn btn-sm btn-light"
             href="?q={{ q }}&status={{ current_status }}&source={{ current_source }}&from={{ from_str }}&to={{ to_str }}&page={{ page_obj.previous_page_number }}">
            Previous
          </a>
        {% endif %}

        <span class="btn btn-sm btn-light">
          Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
        </span>

        {% if page_obj.has_next %}
          <a class="btn btn-sm btn-light"
             href="?q={{ q }}&status={{ current_status }}&source={{ current_source }}&from={{ from_str }}&to={{ to_str }}&page={{ page_obj.next_page_number }}">
            Next
          </a>
        {% endif %}
      </div>
    {% endif %}
  </div>

</div>

{% endblock %}