{% extends "pos/base.html" %}
{% block title %}Pre-Booking #{{ b.t_id }}{% endblock %}
{% block heading %}Pre-Booking #{{ b.t_id }} — {{ b.guest.name }}{% endblock %}

{% block content %}
<div class="mb-2">
  {% url 'hotel:staff_prebook_voucher' b.id as voucher_url %}

  <a class="btn btn-outline-secondary" href="{% url 'hotel:staff_prebook_list' %}">Back</a>

  <a class="btn btn-primary" href="{{ voucher_url }}" target="_blank">
    Print Voucher
  </a>

  <button type="button"
          class="btn btn-info"
          id="btnShareVoucher"
          data-voucher-url="{{ voucher_url }}">
    Share Voucher
  </button>

  {% if b.status != 'CANCELLED' %}
    <a class="btn btn-warning" href="{% url 'hotel:staff_prebook_edit' b.id %}">Edit</a>
    <a class="btn btn-success" href="{% url 'hotel:staff_prebook_pay' b.id %}">Record Payment</a>
    <a class="btn btn-danger"
       href="{% url 'hotel:staff_prebook_cancel' b.id %}"
       onclick="return confirm('Cancel and release holds?');">
      Cancel
    </a>
  {% endif %}
</div>


<div class="row">
  <div class="col-md-6">
    <div class="card card-body">
      <h6>Stay</h6>
      <div>Dates: <b>{{ b.checkin_date }}</b> → <b>{{ b.checkout_date }}</b> ({{ b.nights }} night{{ b.nights|pluralize }})</div>
      <div>Status: <span class="badge badge-{% if b.status == 'CONFIRMED' %}success{% elif b.status == 'CANCELLED' %}danger{% else %}warning{% endif %}">{{ b.status }}</span></div>
      <div>Mode: {{ b.pay_mode }} (Tax {{ b.tax_percent }}%)</div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="card card-body">
      <h6>Totals</h6>
      <div>Subtotal: {{ b.subtotal|floatformat:2 }}</div>
      <div>Tax: {{ b.tax_amount|floatformat:2 }}</div>
      <div><b>Total: {{ b.total_amount|floatformat:2 }}</b></div>
      <div>Advance Required: {{ b.advance_required|floatformat:2 }}</div>
      <div>Advance Received: <b>{{ paid_sum|floatformat:2 }}</b></div>
    </div>
  </div>
</div>

<div class="card card-body mt-3">
  <h6>Categories</h6>
  <table class="table table-sm table-striped">
    <thead><tr><th>Category</th><th class="text-right">Qty</th><th class="text-right">Rate/Night</th><th class="text-right">Disc/Night</th></tr></thead>
    <tbody>
      {% for i in items %}
      <tr>
        <td>{{ i.category.name }}</td>
        <td class="text-right">{{ i.qty }}</td>
        <td class="text-right">{{ i.rate_per_night|floatformat:2 }}</td>
        <td class="text-right">{{ i.discount_per_night|floatformat:2 }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<div class="card card-body mt-3">
  <h6>Advance Ledger</h6>
  <table class="table table-sm table-striped">
    <thead><tr><th>Date</th><th class="text-right">Amount</th><th>Bank</th><th>Desc</th><th class="text-right">Actions</th></tr></thead>
    <tbody>
      {% for p in ledger %}
      <tr>
        <td>{{ p.transaction_date }}</td>
        <td class="text-right">{{ p.amount_transaction|floatformat:2 }}</td>
        <td>{{ p.bank_id }}</td>
        <td>{{ p.bill_title_descp }}</td>
        <td class="text-right">
          <a href="{% url 'hotel:staff_prebook_pay_edit' b.id p.payment_id %}"
             class="btn btn-sm btn-outline-primary">Edit</a>
        </td>
      </tr>
      {% empty %}
      <tr><td colspan="5">No payments.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>

{% endblock %}

{% block javascripts %}
<script>
document.addEventListener('DOMContentLoaded', function () {
  const shareBtn = document.getElementById('btnShareVoucher');
  if (!shareBtn) return;

  // Django se relative URL mila (e.g. "/hotel/prebook/staff/1/voucher/")
  const relativeUrl = shareBtn.getAttribute('data-voucher-url') || '';
  // Full absolute URL banayen (https://domain + path)
  const voucherUrl = relativeUrl.startsWith('http')
    ? relativeUrl
    : (window.location.origin + relativeUrl);

  async function sharePdfFile() {
    try {
      // 1) PDF ko fetch karein (GET request)
      const resp = await fetch(voucherUrl, { method: 'GET' });
      if (!resp.ok) {
        alert('Voucher PDF load nahi ho saki (status: ' + resp.status + ').');
        return;
      }

      // 2) Response ko Blob me convert karein
      const blob = await resp.blob();

      // 3) Blob se File object banayen (type = application/pdf)
      const file = new File(
        [blob],
        'PreBookingVoucher-{{ b.t_id }}.pdf',
        { type: 'application/pdf' }
      );

      // 4) Check karein ke browser file-share support karta bhi hai ya nahi
      if (!navigator.canShare || !navigator.canShare({ files: [file] })) {
        // Fallback: sirf PDF open + user ko guide
        window.open(voucherUrl, '_blank');
        alert('Is device/browser par direct PDF file share support nahi hai. '
              + 'Voucher PDF open ho gayi, wahan se WhatsApp ya kisi bhi app me share kar lein.');
        return;
      }

      // 5) Actual share – yahan se system ka default share dialog khulna chahiye
      await navigator.share({
        files: [file],
        title: 'Pre-Booking Voucher #{{ b.t_id }}',
        text: 'Voucher for {{ b.guest.name }}'
      });
    } catch (err) {
      console.error('Share error:', err);
      // Error par PDF open + message
      window.open(voucherUrl, '_blank');
      alert('Share mein error aaya. Voucher PDF open ho gayi, wahan se manually share kar lein.');
    }
  }

  shareBtn.addEventListener('click', function () {
    // Agar Web Share API hi nahi hai to pehle hi fallback
    if (!navigator.share) {
      window.open(voucherUrl, '_blank');
      alert('Is browser me Web Share API nahi hai. PDF open ho gayi, wahan se share kar lein.');
      return;
    }

    // Warna full flow run karein (fetch + file share)
    sharePdfFile();
  });
});
</script>
{% endblock %}