{% extends "pos/base.html" %}
{% block title %}Folio B#{{ booking.t_id }}{% endblock %}
{% block heading %}Folio — Booking #{{ booking.t_id }} ({{ booking.guest.name }}){% endblock %}

{% block stylesheets %}
<style>
  .folio-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:12px;
  }

  .summary-card{
    border:1px solid #e5e7eb;
    border-radius:10px;
    background:#fff;
    padding:12px;
    margin-bottom:12px;
  }

  .summary-grid{
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    gap:8px;
  }

  .summary-box{
    border:1px solid #e5e7eb;
    border-radius:10px;
    padding:10px;
    background:#f9fafb;
  }

  .summary-box .label{
    font-size:12px;
    color:#6b7280;
  }

  .summary-box .value{
    font-size:17px;
    font-weight:700;
    color:#111827;
  }

  .type-badge{
    display:inline-block;
    min-width:92px;
    text-align:center;
    padding:4px 8px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    color:#fff;
  }

  .badge-primary{background:#2563eb;}
  .badge-warning{background:#f59e0b;color:#111827;}
  .badge-success{background:#059669;}
  .badge-secondary{background:#6b7280;}

  .table th,
  .table td{
    vertical-align:middle !important;
  }

  .line-roomnight{background:#eff6ff;}
  .line-roomservice{background:#fffbeb;}
  .line-restaurant{background:#ecfdf5;}
  .line-other{background:#f9fafb;}

  .section-title{
    font-weight:700;
    font-size:16px;
    margin-bottom:0;
  }

  .mini-muted{
    font-size:12px;
    color:#6b7280;
  }

  @media(max-width: 991px){
    .summary-grid{
      grid-template-columns:repeat(2, 1fr);
    }
  }
</style>
{% endblock %}

{% block content %}

<div class="folio-actions">
  <a class="btn btn-primary btn-sm" href="{% url 'hotel:bookings:detail' booking.t_id %}">
    See Booking
  </a>

  <a class="btn btn-outline-secondary btn-sm" href="{% url 'restaurant:sales:pos' %}">
    Restaurant Sale
  </a>

  <a class="btn btn-outline-success btn-sm" href="{% url 'hotel:roomservice:form' %}">
    Room Service Sale
  </a>
</div>

<div class="summary-card">
  <div class="summary-grid">
    <div class="summary-box">
      <div class="label">Subtotal</div>
      <div class="value">Rs {{ folio_subtotal|floatformat:2 }}</div>
    </div>

    <div class="summary-box">
      <div class="label">Discount</div>
      <div class="value">Rs {{ folio_discount|floatformat:2 }}</div>
    </div>

    <div class="summary-box">
      <div class="label">Net Amount</div>
      <div class="value">Rs {{ folio_net|floatformat:2 }}</div>
    </div>

    <div class="summary-box">
      <div class="label">Tax</div>
      <div class="value">Rs {{ folio_tax|floatformat:2 }}</div>
    </div>

    <div class="summary-box">
      <div class="label">Charges</div>
      <div class="value">Rs {{ folio_service_charges|add:folio_other_charges|floatformat:2 }}</div>
    </div>

    <div class="summary-box">
      <div class="label">Grand Total</div>
      <div class="value">Rs {{ folio_grand_total|floatformat:2 }}</div>
    </div>
  </div>
</div>

<div class="card">
  <div class="card-header d-flex justify-content-between align-items-center">
    <div>
      <p class="section-title">Folio Ledger</p>
      <div class="mini-muted">Room, room service, restaurant and other charges with discount/tax snapshot.</div>
    </div>
  </div>

  <div class="card-body p-0">
    <div class="table-responsive">
      <table class="table table-sm table-bordered mb-0">
        <thead class="thead-light">
          <tr>
            <th>Date</th>
            <th style="width:130px;">Type</th>
            <th class="text-center" style="width:70px;">Ref</th>
            <th class="text-right" style="width:70px;">Qty</th>
            <th class="text-right" style="width:100px;">Rate</th>
            <th class="text-right" style="width:110px;">Gross</th>
            <th class="text-right" style="width:110px;">Discount</th>
            <th class="text-right" style="width:110px;">Net</th>
            <th class="text-right" style="width:80px;">Tax %</th>
            <th class="text-right" style="width:110px;">Tax</th>
            <th class="text-right" style="width:120px;">With Tax</th>
            <th style="width:80px;">Routed</th>
            <th style="width:90px;">Action</th>
          </tr>
        </thead>

        <tbody>
        {% for ln in lines %}
          <tr class="{% if ln.item_type == 'RoomNight' %}line-roomnight{% elif ln.item_type == 'RoomService' %}line-roomservice{% elif ln.item_type == 'Restaurant' %}line-restaurant{% else %}line-other{% endif %}">
            <td>{{ ln.date }}</td>

            <td>
              <span class="type-badge {{ ln.type_class }}">
                {{ ln.type_label }}
              </span>
            </td>

            <td class="text-center">{{ ln.ref_id }}</td>
            <td class="text-right">{{ ln.qty|floatformat:2 }}</td>
            <td class="text-right">{{ ln.unit_price|floatformat:2 }}</td>
            <td class="text-right">{{ ln.gross_amount_calc|floatformat:2 }}</td>
            <td class="text-right">{{ ln.discount_amount_calc|floatformat:2 }}</td>
            <td class="text-right"><b>{{ ln.net_amount_calc|floatformat:2 }}</b></td>
            <td class="text-right">{{ ln.effective_tax_percent|floatformat:2 }}</td>
            <td class="text-right">{{ ln.tax_amount_calc|floatformat:2 }}</td>
            <td class="text-right"><b>{{ ln.total_with_tax_calc|floatformat:2 }}</b></td>
            <td>{{ ln.routed_to }}</td>

            <td>
              {% if ln.item_type == "RoomService" %}
                <a class="btn btn-xs btn-outline-primary" href="{% url 'hotel:roomservice:detail' ln.ref_id %}">
                  View
                </a>
              {% elif ln.item_type == "Restaurant" %}
                <a class="btn btn-xs btn-outline-success" href="{% url 'restaurant:sales:pos' %}?order={{ ln.ref_id }}">
                  View
                </a>
              {% else %}
                <span class="text-muted small">-</span>
              {% endif %}
            </td>
          </tr>
        {% empty %}
          <tr>
            <td colspan="13" class="text-muted text-center py-3">
              No folio lines yet.
            </td>
          </tr>
        {% endfor %}
        </tbody>

        <tfoot>
          <tr>
            <th colspan="5" class="text-right">Total</th>
            <th class="text-right">{{ folio_subtotal|floatformat:2 }}</th>
            <th class="text-right">{{ folio_discount|floatformat:2 }}</th>
            <th class="text-right">{{ folio_net|floatformat:2 }}</th>
            <th></th>
            <th class="text-right">{{ folio_tax|floatformat:2 }}</th>
            <th class="text-right">{{ folio_grand_total|floatformat:2 }}</th>
            <th colspan="2"></th>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>
</div>

{% if rs_orders %}
<div class="card mt-3">
  <div class="card-header d-flex justify-content-between align-items-center">
    <div>
      <p class="section-title">Room Service Orders</p>
      <div class="mini-muted">Linked room service orders for this booking.</div>
    </div>
    <strong>Total: Rs {{ rs_total|floatformat:2 }}</strong>
  </div>

  <div class="card-body p-0">
    {% for o in rs_orders %}
      <div class="p-3 border-bottom">
        <div class="d-flex justify-content-between align-items-center mb-2">
          <div>
            <strong>
              <span class="type-badge badge-warning">Room Service</span>
              RS#{{ o.order_no }}
            </strong>
            <span class="text-muted small">— {{ o.created_at }}</span>

            {% if o.remarks %}
              <div class="text-muted small">Remarks: {{ o.remarks }}</div>
            {% endif %}
          </div>

          <div>
            <a class="btn btn-sm btn-outline-primary" href="{% url 'hotel:roomservice:detail' o.order_no %}">
              View
            </a>

            <a class="btn btn-sm btn-outline-secondary" href="{% url 'hotel:roomservice:kot' o.order_no %}">
              Print KOT
            </a>
          </div>
        </div>

        <table class="table table-sm table-bordered mb-0">
          <thead class="thead-light">
            <tr>
              <th>Item / Service</th>
              <th class="text-right" style="width:90px;">Qty</th>
              <th class="text-right" style="width:110px;">Rate</th>
              <th class="text-right" style="width:120px;">Amount</th>
            </tr>
          </thead>

          <tbody>
            {% for line in o.lines.all %}
              <tr>
                <td>{{ line.product_name }}</td>
                <td class="text-right">{{ line.qty|floatformat:2 }}</td>
                <td class="text-right">{{ line.unit_price|floatformat:2 }}</td>
                <td class="text-right">{{ line.line_total_calc|floatformat:2 }}</td>
              </tr>
            {% empty %}
              <tr>
                <td colspan="4" class="text-muted">No room service items found.</td>
              </tr>
            {% endfor %}
          </tbody>

          <tfoot>
            <tr>
              <th colspan="3" class="text-right">Subtotal</th>
              <th class="text-right">{{ o.subtotal_amount|floatformat:2 }}</th>
            </tr>

            <tr>
              <th colspan="3" class="text-right">Tax {{ o.tax_percent|floatformat:2 }}%</th>
              <th class="text-right">{{ o.tax_amount|floatformat:2 }}</th>
            </tr>

            <tr>
              <th colspan="3" class="text-right">Order Total</th>
              <th class="text-right">{{ o.total_amount|floatformat:2 }}</th>
            </tr>
          </tfoot>
        </table>
      </div>
    {% endfor %}
  </div>
</div>
{% endif %}

{% if restaurant_orders %}
<div class="card mt-3">
  <div class="card-header d-flex justify-content-between align-items-center">
    <div>
      <p class="section-title">Restaurant Room Sales</p>
      <div class="mini-muted">Restaurant orders shifted or linked to room.</div>
    </div>
    <strong>Total: Rs {{ restaurant_total|floatformat:2 }}</strong>
  </div>

  <div class="card-body p-0">
    {% for o in restaurant_orders %}
      <div class="p-3 border-bottom">
        <div class="d-flex justify-content-between align-items-center mb-2">
          <div>
            <strong>
              <span class="type-badge badge-success">Restaurant</span>
              Order #{{ o.order_no }}
            </strong>
            <span class="text-muted small">— {{ o.created_at }}</span>

            <div class="text-muted small">
              Type: {{ o.order_type }}
              {% if o.status %}| Status: {{ o.status }}{% endif %}
              {% if o.pay_mode %}| Pay Mode: {{ o.pay_mode }}{% endif %}
            </div>

            {% if o.remarks %}
              <div class="text-muted small">Remarks: {{ o.remarks }}</div>
            {% endif %}
          </div>

          <a class="btn btn-sm btn-outline-success" href="{% url 'restaurant:sales:pos' %}?order={{ o.order_no }}">
            View
          </a>
        </div>

        <table class="table table-sm table-bordered mb-0">
          <thead class="thead-light">
            <tr>
              <th>Item</th>
              <th class="text-right" style="width:90px;">Qty</th>
              <th class="text-right" style="width:110px;">Rate</th>
              <th class="text-right" style="width:110px;">Discount</th>
              <th class="text-right" style="width:90px;">Tax %</th>
              <th class="text-right" style="width:110px;">Tax</th>
              <th class="text-right" style="width:120px;">Amount</th>
            </tr>
          </thead>

          <tbody>
            {% for item in o.items.all %}
              <tr>
                <td>{{ item.product_name }}</td>
                <td class="text-right">{{ item.qty|floatformat:2 }}</td>
                <td class="text-right">{{ item.rate|floatformat:2 }}</td>
                <td class="text-right">{{ item.discount_amount|floatformat:2 }}</td>
                <td class="text-right">{{ item.effective_tax_percent|floatformat:2 }}</td>
                <td class="text-right">{{ item.tax_amount|floatformat:2 }}</td>
                <td class="text-right">{{ item.line_total|floatformat:2 }}</td>
              </tr>
            {% empty %}
              <tr>
                <td colspan="7" class="text-muted">No restaurant items found.</td>
              </tr>
            {% endfor %}
          </tbody>

          <tfoot>
            <tr>
              <th colspan="6" class="text-right">Subtotal</th>
              <th class="text-right">{{ o.subtotal_amount|floatformat:2 }}</th>
            </tr>

            <tr>
              <th colspan="6" class="text-right">Line Discount</th>
              <th class="text-right">{{ o.line_discount_amount|floatformat:2 }}</th>
            </tr>

            <tr>
              <th colspan="6" class="text-right">Tax</th>
              <th class="text-right">{{ o.tax_amount|floatformat:2 }}</th>
            </tr>

            {% if o.service_charges_amount %}
            <tr>
              <th colspan="6" class="text-right">Service Charges</th>
              <th class="text-right">{{ o.service_charges_amount|floatformat:2 }}</th>
            </tr>
            {% endif %}

            {% if o.other_charges_amount %}
            <tr>
              <th colspan="6" class="text-right">Other Charges</th>
              <th class="text-right">{{ o.other_charges_amount|floatformat:2 }}</th>
            </tr>
            {% endif %}

            {% if o.header_discount %}
            <tr>
              <th colspan="6" class="text-right">Invoice Discount</th>
              <th class="text-right">-{{ o.header_discount|floatformat:2 }}</th>
            </tr>
            {% endif %}

            <tr>
              <th colspan="6" class="text-right">Order Total</th>
              <th class="text-right">{{ o.total_amount|floatformat:2 }}</th>
            </tr>
          </tfoot>
        </table>
      </div>
    {% endfor %}
  </div>
</div>
{% endif %}

{% endblock %}