{% extends "pos/base.html" %}
{% block title %}Folios{% endblock %}
{% block heading %}Folios{% endblock %}

{% block stylesheets %}
<style>
  .folio-toolbar{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:12px;
    margin-bottom:14px;
  }

  .folio-summary{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:10px;
    margin-bottom:14px;
  }

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

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

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

  .folio-card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:14px;
    margin-bottom:12px;
    overflow:hidden;
    box-shadow:0 4px 14px rgba(15,23,42,.04);
  }

  .folio-card-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    padding:14px;
    border-bottom:1px solid #eef2f7;
    background:#f9fafb;
  }

  .booking-badge{
    display:inline-block;
    padding:6px 12px;
    border-radius:999px;
    background:#2563eb;
    color:#fff;
    font-weight:800;
    font-size:13px;
  }

  .status-badge{
    display:inline-block;
    padding:4px 9px;
    border-radius:999px;
    background:#e5e7eb;
    color:#374151;
    font-size:12px;
    font-weight:700;
  }

  .folio-card-body{
    padding:14px;
  }

  .info-grid{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:10px;
  }

  .info-item{
    border:1px solid #edf0f5;
    border-radius:10px;
    padding:9px;
    background:#fff;
  }

  .info-item .k{
    color:#6b7280;
    font-size:12px;
  }

  .info-item .v{
    font-weight:700;
    color:#111827;
  }

  .folio-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-top:12px;
  }

  .money{
    font-weight:800;
  }

  @media(max-width: 991px){
    .folio-summary{
      grid-template-columns:1fr;
    }

    .info-grid{
      grid-template-columns:1fr 1fr;
    }

    .folio-card-head{
      flex-direction:column;
    }
  }
</style>
{% endblock %}

{% block content %}

<div class="folio-toolbar">
  <form method="get" class="form-row align-items-end">
    <div class="col-md-5">
      <label>Search</label>
      <input
        type="text"
        name="q"
        value="{{ q }}"
        class="form-control"
        placeholder="Booking T-ID / Code / Guest / Contact"
      >
    </div>

    <div class="col-auto">
      <button type="submit" class="btn btn-primary">
        Search
      </button>
    </div>

    <div class="col-auto">
      <a href="{% url 'hotel:folio:list' %}" class="btn btn-outline-secondary">
        Reset
      </a>
    </div>
  </form>
</div>

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

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

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

{% for r in rows %}
  <div class="folio-card">
    <div class="folio-card-head">
      <div>
        <span class="booking-badge">
          Booking #{{ r.booking_tid }}
        </span>

        <span class="status-badge ml-2">
          {{ r.status }}
        </span>

        <div class="mt-2">
          <strong>{{ r.guest_name|default:"Guest" }}</strong>
          {% if r.guest_contact %}
            <span class="text-muted"> — {{ r.guest_contact }}</span>
          {% endif %}
        </div>
      </div>

      <div class="text-right">
        <div class="text-muted small">Grand Total</div>
        <div class="money">Rs {{ r.grand_total|floatformat:2 }}</div>
      </div>
    </div>

    <div class="folio-card-body">
      <div class="info-grid">
        <div class="info-item">
          <div class="k">Stay</div>
          <div class="v">{{ r.checkin_date }} → {{ r.checkout_date }}</div>
        </div>

        <div class="info-item">
          <div class="k">Rooms</div>
          <div class="v">{{ r.rooms }}</div>
        </div>

        <div class="info-item">
          <div class="k">Lines</div>
          <div class="v">{{ r.line_count }}</div>
        </div>

        <div class="info-item">
          <div class="k">Net Amount</div>
          <div class="v">Rs {{ r.net_amount|floatformat:2 }}</div>
        </div>

        <div class="info-item">
          <div class="k">Tax</div>
          <div class="v">Rs {{ r.tax_amount|floatformat:2 }}</div>
        </div>
      </div>

      <div class="folio-actions">
        <a
          href="{% url 'hotel:bookings:detail' r.booking_tid %}"
          class="btn btn-outline-primary btn-sm"
        >
          View Booking
        </a>

        <a
          href="{% url 'hotel:folio:detail' r.booking_tid %}"
          class="btn btn-success btn-sm"
        >
          Folio Detail
        </a>
      </div>
    </div>
  </div>
{% empty %}
  <div class="alert alert-info">
    No folios found.
  </div>
{% endfor %}

{% endblock %}