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

{% block content %}

<style>
  .ci-page{
    padding:16px;
  }

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

  .ci-title{
    margin:0;
    font-size:24px;
    font-weight:900;
    color:#172b4d;
  }

  .ci-subtitle{
    margin:4px 0 0;
    color:#64748b;
    font-size:13px;
  }

  .ci-header-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    justify-content:flex-end;
  }

  .ci-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;
  }

  .ci-summary{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:12px;
    margin-bottom:14px;
  }

  .ci-box{
    background:linear-gradient(180deg,#ffffff,#f8fafc);
    border:1px solid #e5e7eb;
    border-radius:14px;
    padding:14px;
  }

  .ci-box .k{
    font-size:12px;
    color:#64748b;
    font-weight:800;
    text-transform:uppercase;
  }

  .ci-box .v{
    font-size:22px;
    font-weight:900;
    color:#0f172a;
    margin-top:5px;
  }

  .ci-box.danger .v{
    color:#b91c1c;
  }

  .ci-box.warn .v{
    color:#92400e;
  }

  .ci-filter{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr auto;
    gap:10px;
    align-items:end;
  }

  .ci-table-wrap{
    overflow:auto;
  }

  .ci-table{
    width:100%;
    border-collapse:collapse;
    font-size:13px;
  }

  .ci-table th{
    background:#f1f5f9;
    color:#334155;
    font-weight:900;
    padding:10px;
    border-bottom:1px solid #e5e7eb;
    white-space:nowrap;
  }

  .ci-table td{
    padding:10px;
    border-bottom:1px solid #eef2f7;
    vertical-align:middle;
    white-space:nowrap;
  }

  /* Rooms column ko multi-line wrap karne ke liye */
  .ci-table td.ci-rooms-cell{
    white-space:normal !important;
    min-width:320px;
    max-width:420px;
    width:420px;
    line-height:1.35;
  }

  /* Rooms text max 2 lines */
  .ci-rooms-text{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* Actions column fixed width */
  .ci-actions-cell{
    min-width:260px;
    width:260px;
    white-space:nowrap !important;
  }



  .ci-table tfoot td{
    background:#f8fafc;
    font-weight:900;
  }

  .badge-ci{
    display:inline-block;
    padding:4px 8px;
    border-radius:999px;
    font-size:11px;
    font-weight:900;
  }

  .badge-checkedin{
    background:#dcfce7;
    color:#166534;
  }

  .badge-due{
    background:#fef3c7;
    color:#92400e;
  }

  .badge-overdue{
    background:#fee2e2;
    color:#b91c1c;
  }

  .badge-normal{
    background:#e0f2fe;
    color:#075985;
  }

  /* Buttons ko ek hi line mein rakho */
  .action-group{
    display:flex;
    gap:5px;
    justify-content:flex-end;
    flex-wrap:nowrap;
    align-items:center;
  }

  /* Action buttons thory compact */
  .action-group .btn{
    padding:4px 8px;
    font-size:12px;
    line-height:1.2;
  }

  .text-right{
    text-align:right;
  }

  .text-center{
    text-align:center;
  }

  .text-muted{
    color:#6b7280;
  }

  @media(max-width:1100px){
    .ci-summary{
      grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .ci-filter{
      grid-template-columns:1fr;
    }

    .ci-header{
      align-items:flex-start;
      flex-direction:column;
    }

    .ci-header-actions{
      justify-content:flex-start;
    }
  }
</style>

<div class="ci-page">

  <div class="ci-header">
    <div>
      <h1 class="ci-title">Checked-in Guests</h1>
      <p class="ci-subtitle">
        Current in-house guests. View, edit, print check-in PDF, or open checkout.
      </p>
    </div>

    <div class="ci-header-actions">
      <a href="{% url 'hotel:checkin:checkin' %}" class="btn btn-primary">
        + New Check-in
      </a>

      <a href="{% url 'hotel:checkin:checkin_list_pdf' %}?{{ query_string }}"
         target="_blank"
         class="btn btn-secondary">
        Print PDF
      </a>
    </div>
  </div>

  <div class="ci-summary">
    <div class="ci-box">
      <div class="k">Current Guests</div>
      <div class="v">{{ total_records }}</div>
    </div>

    <div class="ci-box warn">
      <div class="k">Due Checkout</div>
      <div class="v">{{ due_count }}</div>
    </div>

    <div class="ci-box danger">
      <div class="k">Overdue</div>
      <div class="v">{{ overdue_count }}</div>
    </div>

    <div class="ci-box">
      <div class="k">Received</div>
      <div class="v">{{ total_received|floatformat:0 }}</div>
    </div>

    <div class="ci-box">
      <div class="k">Balance</div>
      <div class="v">{{ total_balance|floatformat:0 }}</div>
    </div>
  </div>

  <div class="ci-card">
    <form method="get" class="ci-filter">

      <div>
        <label>Search</label>
        <input type="text"
               name="q"
               value="{{ q }}"
               class="form-control"
               placeholder="Guest, phone, CNIC, passport, car no, T#, booking code">
      </div>

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

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

      <div>
        <label>Stay Filter</label>
        <select name="stay_filter" class="form-control">
          {% for val,label in stay_filter_choices %}
            <option value="{{ val }}" {% if stay_filter == val %}selected{% endif %}>
              {{ label }}
            </option>
          {% endfor %}
        </select>
      </div>

      <div>
        <button type="submit" class="btn btn-dark">
          Filter
        </button>

        <a href="{% url 'hotel:checkin:checkin_list' %}" class="btn btn-light">
          Reset
        </a>
      </div>

    </form>
  </div>

  <div class="ci-card">
    <div class="ci-table-wrap">
      <table class="ci-table">

        <thead>
          <tr>
            <th>T#</th>
            <th>Booking Code</th>
            <th>Guest</th>
            <th>Contact</th>
            <th>Rooms</th>
            <th>Check-in</th>
            <th>Checkout</th>
            <th>Nights</th>
            <th class="text-right">Total</th>
            <th class="text-right">Received</th>
            <th class="text-right">Balance</th>
            <th>Stay</th>
            <th class="text-right">Actions</th>
          </tr>
        </thead>

        <tbody>
          {% for row in rows %}
            {% with b=row.booking %}
              <tr>
                <td>
                  <strong>T#{{ b.t_id }}</strong>
                </td>

                <td>
                  {{ b.booking_code|default:"-" }}
                </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 class="ci-rooms-cell" title="{{ row.rooms }}">
                  <div class="ci-rooms-text">
                    {{ row.rooms }}
                  </div>
                </td>

                <td>
                  {{ b.checkin_date|date:"d/m/Y" }}
                </td>

                <td>
                  {{ b.checkout_date|date:"d/m/Y" }}
                </td>

                <td>
                  {{ b.nights }}
                </td>

                <td class="text-right">
                  {{ row.amount|floatformat:0 }}
                </td>

                <td class="text-right">
                  {{ row.received|floatformat:0 }}
                </td>

                <td class="text-right">
                  {{ row.balance|floatformat:0 }}
                </td>

                <td>
                  {% if row.is_overdue %}
                    <span class="badge-ci badge-overdue">OVERDUE</span>
                  {% elif row.is_due %}
                    <span class="badge-ci badge-due">DUE TODAY</span>
                  {% else %}
                    <span class="badge-ci badge-checkedin">CHECKEDIN</span>
                  {% endif %}
                </td>

                <td class="ci-actions-cell">
                  <div class="action-group">

                    <a class="btn btn-sm btn-info"
                       href="{% url 'hotel:checkin:checkin_detail' b.t_id %}">
                      View
                    </a>
                    <button type="button"
                          class="btn btn-success btn-checkin-whatsapp"
                          style="background-color:#25D366;border-color:#25D366;"
                          data-url="{% url 'hotel:checkin:checkin_whatsapp_payload' b.t_id %}">
                    WhatsApp
                  </button>

                    <a class="btn btn-sm btn-primary"
                       href="{% url 'hotel:folio:detail' b.t_id %}">
                      Folio
                    </a>

                    <a class="btn btn-sm btn-warning"
                       href="{% url 'hotel:checkin:checkin_edit' b.t_id %}">
                      Edit
                    </a>

                    <a class="btn btn-sm btn-secondary"
                       target="_blank"
                       href="{% url 'hotel:checkin:checkin_pdf' b.t_id %}">
                      PDF
                    </a>

                    <a class="btn btn-sm btn-success"
                       href="{% url 'hotel:checkout:checkout' b.t_id %}">
                      Checkout
                    </a>

                  </div>
                </td>
              </tr>
            {% endwith %}
          {% empty %}
            <tr>
              <td colspan="13" class="text-center text-muted" style="padding:30px;">
                No checked-in guests found.
              </td>
            </tr>
          {% endfor %}
        </tbody>

        <tfoot>
          <tr>
            <td colspan="8" class="text-right">Total</td>
            <td class="text-right">{{ total_amount|floatformat:0 }}</td>
            <td class="text-right">{{ total_received|floatformat:0 }}</td>
            <td class="text-right">{{ total_balance|floatformat:0 }}</td>
            <td colspan="2"></td>
          </tr>
        </tfoot>

      </table>
    </div>
  </div>

</div>

{% endblock %}





{% block javascripts %}
<script>
(function(){

  function replacePlaceholders(template, data) {
    var result = template || '';

    Object.keys(data || {}).forEach(function(key){
      var placeholder = '{' + key + '}';
      result = result.split(placeholder).join(data[key] || '');
    });

    return result;
  }

  function normalizePkPhone(phone) {
    phone = (phone || '').toString().trim();
    phone = phone.replace(/\s+/g, '').replace(/-/g, '').replace(/\+/g, '');

    if (phone.startsWith('0')) {
      phone = '92' + phone.substring(1);
    }

    return phone;
  }

  function getCheckinFallbackTemplate() {
    return `*{shop_name}*
{shop_address}
{shop_phone_1} {shop_phone_2}

Dear *{guest_name}*,

Welcome! Your check-in has been completed successfully ✅

*Check-in Details:*
━━━━━━━━━━━━━━━
🧾 Booking No: *{booking_no}*
🏨 Room No: *{room_no}*
📅 Check-In: {checkin_date}
📅 Check-Out: {checkout_date}
🌙 Nights: {nights}
💰 Total: Rs. {amount}
💵 Advance: Rs. {advance}
📋 Remaining: Rs. {remaining}
━━━━━━━━━━━━━━━

{remarks}

Thank you for choosing *{shop_name}*.`;
  }

  async function getTemplateText() {
    try {
      var templateResp = await fetch("{% url 'pos:whatsapp_template_get_default' 'hotel_checkin' %}", {
        method: 'GET',
        credentials: 'same-origin',
        headers: {
          'X-Requested-With': 'XMLHttpRequest'
        }
      });

      var templateData = await templateResp.json();
      console.log(templateData);

      if (templateData.ok && templateData.template_text) {
        console.log("ok template data ix ok")
        return templateData.template_text;
      }
    } catch (e) {
      console.warn('Template fetch failed:', e);
    }

    return getCheckinFallbackTemplate();
  }

  async function sendCheckinWhatsApp_________(payloadUrl, btn) {
    var oldHtml = btn ? btn.innerHTML : '';

    try {
      if (btn) {
        btn.disabled = true;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm mr-1"></span> Sending';
      }

      var resp = await fetch(payloadUrl, {
        method: 'GET',
        credentials: 'same-origin',
        headers: {
          'X-Requested-With': 'XMLHttpRequest'
        }
      });

      var data = await resp.json();
      console.log(data);

      if (!resp.ok || !data.ok) {
        throw new Error(data.error || 'Payload error');
      }

      if (!data.guest_phone) {
        alert('Guest contact number missing.');
        return;
      }

      var templateText = await getTemplateText();

      var msg = replacePlaceholders(templateText, {
        hotel_name: data.shop_name || "Hotel",
        guest_name:  data.guest_name || 'Guest',
        mobile: data.guest_phone || '',
        booking_no: data.booking_no || '',
        invoice_no: data.invoice_no || '',
        room_no: data.room_no || '',
        checkin_date: data.checkin_date || '',
        checkout_date: data.checkout_date || '',
        nights: data.nights || '',
        amount: data.amount || '0',
        advance: data.advance || '0',
        remaining: data.remaining || '0',
        date: data.date || '',
        address: data.shop_address || '',
        remarks: data.shop_remarks || data.shop_footer || ''
      });

      msg += `

━━━━━━━━━━━━━━━
_Automated Message from Blue Primes Software (blueprimes.com)_`;

      var waFD = new FormData();
      waFD.append('phone', normalizePkPhone(data.guest_phone));
      waFD.append('message', msg);


      var waResp = await fetch('http://localhost:3000/api/send-media', {
        method: 'POST',
        body: waFD
      });

      var waData = await waResp.json();

      if (waData.success) {
        alert('✅ WhatsApp sent to ' + (data.guest_name || 'Guest'));
      } else {
        alert('WhatsApp failed: ' + (waData.error || 'Unknown error'));
      }

    } catch (err) {
      console.error(err);
      alert('WhatsApp send error: ' + err.message);
    } finally {
      if (btn) {
        btn.disabled = false;
        btn.innerHTML = oldHtml;
      }
    }
  }


  
async function sendCheckinWhatsApp(payloadUrl, btn) {
  var oldHtml = btn ? btn.innerHTML : '';

  try {
    if (btn) {
      btn.disabled = true;
      btn.innerHTML = '<span class="spinner-border spinner-border-sm mr-1"></span> Sending PDF...';
    }

    // ================================
    // 1) Get WhatsApp payload from Django
    // ================================
    var resp = await fetch(payloadUrl, {
      method: 'GET',
      credentials: 'same-origin',
      headers: {
        'X-Requested-With': 'XMLHttpRequest'
      }
    });

    var data = await resp.json();
    console.log("WhatsApp Payload:", data);

    if (!resp.ok || !data.ok) {
      throw new Error(data.error || 'Payload error');
    }

    if (!data.guest_phone) {
      alert('Guest contact number missing.');
      return;
    }

    // ================================
    // 2) Build WhatsApp message
    // ================================
    var templateText = await getTemplateText();

    var msg = replacePlaceholders(templateText, {
      hotel_name: data.shop_name || "Hotel",
      shop_name: data.shop_name || "Hotel",
      guest_name: data.guest_name || 'Guest',
      mobile: data.guest_phone || '',
      booking_no: data.booking_no || '',
      invoice_no: data.invoice_no || '',
      room_no: data.room_no || '',
      checkin_date: data.checkin_date || '',
      checkout_date: data.checkout_date || '',
      nights: data.nights || '',
      amount: data.amount || '0',
      advance: data.advance || '0',
      remaining: data.remaining || '0',
      date: data.date || '',
      address: data.shop_address || '',
      remarks: data.shop_remarks || data.shop_footer || ''
    });

    msg += `

━━━━━━━━━━━━━━━
_Attached: Check-in registration PDF_
_Automated Message from Blue Primes Software (blueprimes.com)_`;

    // ================================
    // 3) Prepare FormData for Node API
    // ================================
    var waFD = new FormData();
    waFD.append('phone', normalizePkPhone(data.guest_phone));
    waFD.append('message', msg);

    // ================================
    // 4) Fetch check-in PDF from Django and attach it
    // ================================
    if (data.pdf_url) {
      var pdfUrl = data.pdf_url;

      // Agar pdf_url relative ho, usko full URL bana do
      if (pdfUrl.startsWith('/')) {
        pdfUrl = window.location.origin + pdfUrl;
      }

      var pdfResp = await fetch(pdfUrl, {
        method: 'GET',
        credentials: 'same-origin',
        headers: {
          'X-Requested-With': 'XMLHttpRequest'
        }
      });

      if (!pdfResp.ok) {
        throw new Error('PDF generate/fetch failed.');
      }

      var pdfBlob = await pdfResp.blob();

      if (!pdfBlob || pdfBlob.size <= 0) {
        throw new Error('PDF file is empty.');
      }

      var bookingNo = (data.booking_no || data.invoice_no || data.booking_t_id || 'checkin')
        .toString()
        .replace(/[^a-zA-Z0-9_-]/g, '_');

      var pdfFile = new File(
        [pdfBlob],
        'checkin_' + bookingNo + '.pdf',
        { type: 'application/pdf' }
      );

      waFD.append('attachment', pdfFile);

      console.log("PDF attached:", pdfFile.name, pdfFile.size);
    } else {
      console.warn("PDF URL missing in payload. Sending message only.");
    }

    // ================================
    // 5) Send message + PDF to local WhatsApp sender
    // ================================
    var waResp = await fetch('http://localhost:3000/api/send-media', {
      method: 'POST',
      body: waFD
    });

    var waData = await waResp.json();
    console.log("WhatsApp API Response:", waData);

    if (waData.success) {
      alert('✅ WhatsApp message + PDF sent to ' + (data.guest_name || 'Guest'));
    } else {
      alert('WhatsApp failed: ' + (waData.error || 'Unknown error'));
    }

  } catch (err) {
    console.error(err);
    alert('WhatsApp send error: ' + err.message);
  } finally {
    if (btn) {
      btn.disabled = false;
      btn.innerHTML = oldHtml;
    }
  }
}



  document.addEventListener('click', function(e){
    var btn = e.target.closest('.btn-checkin-whatsapp');
    if (!btn) return;

    e.preventDefault();

    var url = btn.getAttribute('data-url');
    if (!url) {
      alert('WhatsApp payload URL missing.');
      return;
    }

    sendCheckinWhatsApp(url, btn);
  });

})();


</script>
{% endblock %}