{% extends "pos/base.html" %}
{% load static %}
{% block title %}Room Service{% endblock %}
{% block heading %}Room Service — New Order{% endblock %}

{% block stylesheets %}
  <!-- Select2 CSS (CDN) -->

  <style>
    .rs-row .form-control { height: 38px; }
    .table-sm td, .table-sm th { vertical-align: middle; }
    .totals .v { font-weight: 600; }
    .select2-container--default .select2-selection--single { height: 38px; }
    .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 36px; }
    .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }

  /* --- Rooms grid (top) --- */
  .rs-rooms-card { margin-bottom: 12px; }
  .rs-rooms { display:flex; flex-wrap:wrap; gap:8px; }
  .rs-room-tile{
    display:inline-flex; flex-direction:column; justify-content:center; align-items:flex-start;
    border:1px solid #e5e7eb; border-radius:10px; padding:10px 12px; min-width:120px;
    cursor:pointer; background:#fff; transition:transform .12s ease, box-shadow .12s ease, border-color .12s;
  }
  .rs-room-tile:hover{ transform:translateY(-2px); box-shadow:0 4px 16px rgba(0,0,0,.08) }
  .rs-room-tile.active{ border-color:#0d6efd; box-shadow:0 0 0 3px rgba(13,110,253,.15) }
  .rs-room-no{ font-weight:700; font-size:14px; line-height:1 }
  .rs-room-meta{ font-size:12px; color:#6b7280 }
  .rs-room-guest{ font-size:12px; margin-top:2px; color:#374151; font-weight:600 }
  .rs-sel-info{ padding:6px 10px; background:#f8fafc; border:1px dashed #d1d5db; border-radius:8px; margin-top:8px; display:none }
</style>




{% endblock %}

{% block content %}

{% if occupied_rooms %}
<div class="card rs-rooms-card">
  <div class="card-header">Occupied Rooms — Tap to start</div>
  <div class="card-body">
    <div class="rs-rooms" id="rsRooms">
      {% for r in occupied_rooms %}
        <div class="rs-room-tile"
             data-booking-code="{{ r.booking_code }}"
             data-guest="{{ r.guest_name|default_if_none:'' }}"
             data-room="{{ r.room_no }}"
             data-checkin="{{ r.checkin|date:'Y-m-d' }}"
             data-checkout="{{ r.checkout|date:'Y-m-d' }}"
             data-pay-mode="{{ r.pay_mode|default_if_none:'' }}">
          <div class="rs-room-no">Room {{ r.room_no }}</div>
          <div class="rs-room-meta">{{ r.category }}</div>
          <div class="rs-room-guest">{{ r.guest_name|default:"" }}</div>
        </div>
      {% endfor %}
    </div>
    <div id="rsSelInfo" class="rs-sel-info"></div>
  </div>
</div>
{% endif %}



<form method="post" id="rs-form">
  {% csrf_token %}

<div class="form-group d-none" id="booking_group">
  <label class="small">Booking (Checked-in)</label>
  <select name="booking_code" id="booking_code" class="form-control">
    <option value="">-- select --</option>
    {% for b in inhouse %}
      <option value="{{ b.booking_code }}">B#{{ b.booking_code }} — {{ b.guest.name }}</option>
    {% endfor %}
  </select>
</div>

  <div class="form-row align-items-end">
    <div class="form-group col-md-3 d-none" id="pay_mode_group">
      <label class="small">Pay Mode</label>
      <select name="pay_mode" id="pay_mode" class="form-control">
        <option value="cash" {% if default_pay_mode == "cash" %}selected{% endif %}>Cash</option>
        <option value="card" {% if default_pay_mode == "card" %}selected{% endif %}>Card</option>
      </select>
    </div>

    <div class="form-group col-md-9  d-none">
      <label class="small">Remarks</label>
      <input name="remarks" class="form-control" placeholder="Special instructions (optional)">
    </div>
  </div>

  <!-- Fast entry row -->
  <div class="card mb-2">
    <div class="card-header">Add Item</div>
    <div class="card-body rs-row">
      <div class="form-row">
        <div class="col-md-2">
          <label class="small">Product Code</label>
          <input id="code" class="form-control" placeholder="Type & press Enter">
        </div>
        <div class="col-md-4">
          <label class="small">Name</label>
          <select id="name_select" class="form-control" style="width:100%"></select>
        </div>
        <div class="col-md-2">
          <label class="small">Qty</label>
          <input id="qty" type="number" step="0.01" class="form-control" value="1">
        </div>
        <div class="col-md-2">
          <label class="small">Price</label>
          <input id="price" type="number" step="0.01" class="form-control" value="0">
        </div>
        <div class="col-md-2">
          <label class="small">Description</label>
          <input id="desc" class="form-control" placeholder="(optional)">
        </div>
      </div>
    </div>
  </div>

  <!-- Lines table -->
  <div class="card mb-2">
    <div class="card-header">Lines</div>
    <div class="card-body p-0">
      <div class="table-responsive">
        <table class="table table-sm mb-0" id="lines_tbl">
          <thead>
            <tr>
              <th style="width:5%">#</th>
              <th style="width:12%">Code</th>
              <th>Name</th>
              <th style="width:12%" class="text-right">Qty</th>
              <th style="width:12%" class="text-right">Price</th>
              <th style="width:20%">Description</th>
              <th style="width:12%" class="text-right">Total</th>
              <th style="width:7%"></th>
            </tr>
          </thead>
          <tbody id="lines_body"></tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- Totals -->
  <div class="card totals">
    <div class="card-header">Totals</div>
    <div class="card-body">
      <div class="row">
        <div class="col-md-3">Subtotal: <span class="v" id="v_subtotal">0.00</span></div>
        <div class="col-md-3">Tax %: <span class="v" id="v_taxp">{{ default_tax_percent }}</span></div>
        <div class="col-md-3">Tax: <span class="v" id="v_tax">0.00</span></div>
        <div class="col-md-3"><b>Grand Total: <span class="v" id="v_total">0.00</span></b></div>
      </div>
    </div>
  </div>

  <input type="hidden" name="payload" id="payload">

  <div class="mt-3">
    <button class="btn btn-primary">Save &amp; Print KOT</button>
    <a href="{% url 'hotel:inhouse_list' %}" class="btn btn-secondary">Cancel</a>
  </div>
</form>
{% endblock %}

{% block javascripts %}
  <!-- jQuery + Select2 (CDN) -->

  <script>
    (function(){
      const API_BY_CODE = "{% url 'hotel:api_rs_product_by_code' %}";
      const API_SEARCH  = "{% url 'hotel:api_rs_product_search' %}";

      const $code  = $("#code");
      const $name  = $("#name_select");
      const $qty   = $("#qty");
      const $price = $("#price");
      const $desc  = $("#desc");
      const $tbl   = $("#lines_tbl");
      const $tbody = $("#lines_body");
      const $pay   = $("#pay_mode");
      const $payload = $("#payload");

      let LINES = [];  // {product_id, product_code, name, qty, price, desc}
      let CURRENT = null;  // currently selected product (id, code, name, price)

      function fmt2(x){ return (Math.round((x + Number.EPSILON) * 100) / 100).toFixed(2); }

      function taxp(){
        const m = ($pay.val() || '').toLowerCase();
        if (m === 'cash') return 15.0;
        if (m === 'card') return 6.0;
        return 0.0;
      }

      function recalc(){
        let subtotal = 0.0;
        LINES.forEach(l => subtotal += (parseFloat(l.qty||0) * parseFloat(l.price||0)));
        const tp = taxp();
        const tax = +(Math.round((subtotal * tp / 100) * 100) / 100);
        const total = +(Math.round(((subtotal + tax)) * 100) / 100);

        $("#v_subtotal").text(fmt2(subtotal));
        $("#v_taxp").text(tp);
        $("#v_tax").text(fmt2(tax));
        $("#v_total").text(fmt2(total));
      }

      function redraw(){
        $tbody.empty();
        LINES.forEach((l, idx) => {
          const tr = $(`
            <tr data-idx="${idx}">
              <td>${idx+1}</td>
              <td>${l.product_code}</td>
              <td>${l.name}</td>
              <td class="text-right">${fmt2(l.qty)}</td>
              <td class="text-right">${fmt2(l.price)}</td>
              <td>${l.desc || ""}</td>
              <td class="text-right">${fmt2(l.qty * l.price)}</td>
              <td class="text-right">
                <button type="button" class="btn btn-sm btn-outline-danger btn-del">&times;</button>
              </td>
            </tr>
          `);
          $tbody.append(tr);
        });
        recalc();
      }

      function clearEntry(){
        CURRENT = null;
        $code.val('');
        $name.val(null).trigger('change');
        $qty.val('1');
        $price.val('0');
        $desc.val('');
        $code.focus();
      }

      function addLineFromEntry(){
        const pid = CURRENT ? CURRENT.id : null;
        const pcode = CURRENT ? CURRENT.product_code : '';
        const pname = CURRENT ? CURRENT.name : '';
        const qty = parseFloat($qty.val() || '0');
        const price = parseFloat($price.val() || '0');
        const desc = ($desc.val() || '').trim();

        if (!pid) { alert("Please select a product."); $code.focus(); return; }
        if (!(qty > 0)) { alert("Qty must be > 0"); $qty.focus(); return; }
        if (price < 0) { alert("Price must be >= 0"); $price.focus(); return; }

        LINES.push({ product_id: pid, product_code: pcode, name: pname, qty: qty, price: price, desc: desc });
        redraw();
        clearEntry();
      }

      // ----- Select2 init -----
      $name.select2({
        placeholder: "Search by name/code",
        ajax: {
          url: API_SEARCH,
          dataType: 'json',
          delay: 200,
          data: params => ({ q: params.term || "" }),
          processResults: data => data
        },
        minimumInputLength: 1,
        width: "100%"
      }).on('select2:select', function(e){
        const d = e.params.data || {};
        CURRENT = { id: d.id, product_code: d.product_code, name: (d.text || "").replace(/\s*\([^)]+\)\s*$/,''), price: parseFloat(d.l_sale_price || 0) };
        $code.val(d.product_code || "");
        if (!parseFloat($price.val() || '0')) $price.val(d.l_sale_price || 0);
        $qty.focus().select();
      }).on('select2:open', function(){       // ← NEW (reliable focus)
        const ip = document.querySelector('.select2-container--open .select2-search__field');
        if (ip) ip.focus();
      });

      // ----- Code: Enter to lookup -----
      $code.on('keydown', function(ev){
        if (ev.key === 'Enter') {
          ev.preventDefault();
          const v = ($code.val() || '').trim();
          if (!v) {
            setTimeout(() => { $name.select2('open'); }, 0);  // ← UPDATED
            return;
          }
          $.get(API_BY_CODE, { code: v }, function(res){
            if (res && res.ok && res.found) {
              CURRENT = { id: res.id, product_code: res.product_code, name: res.name, price: parseFloat(res.l_sale_price || 0) };
              $code.val(res.product_code || "");
              $name
                .empty()
                .append(new Option(res.name + " ("+ (res.product_code||"") +")", res.id, true, true))
                .trigger('change');
              if (!parseFloat($price.val() || '0')) $price.val(res.l_sale_price || 0);
              $qty.focus().select();
            } else {
              setTimeout(() => { $name.select2('open'); }, 0);  // ← UPDATED fallback
            }
          });
        }
      });


      // Keyboard flow
      $qty.on('keydown', ev => { if (ev.key === 'Enter') { ev.preventDefault(); $price.focus().select(); }});
      $price.on('keydown', ev => { if (ev.key === 'Enter') { ev.preventDefault(); $desc.focus().select(); }});
      $desc.on('keydown', ev => { if (ev.key === 'Enter') { ev.preventDefault(); addLineFromEntry(); }});

      // Delete line
      $tbody.on('click', '.btn-del', function(){
        const idx = parseInt($(this).closest('tr').attr('data-idx'), 10);
        if (!isNaN(idx)) {
          LINES.splice(idx, 1);
          redraw();
        }
      });

      // Pay mode change → tax% update & totals refresh
      $pay.on('change', recalc);

      // Submit → payload
      $("#rs-form").on('submit', function(ev){
        if (!LINES.length) { ev.preventDefault(); alert("Add at least one line."); return false; }
        $payload.val(JSON.stringify(LINES));
        return true;
      });

      // initial focus
      $code.focus();
    })();



  (function(){
    const $name = $("#name_select");
    const $booking = $("#booking_code");
    const $info = $("#rsSelInfo");
    const $pay = $("#pay_mode");   // ← NEW

    function selectBooking(bookingCode, labelText){
      let found = false;
      $booking.find("option").each(function(){
        if (String($(this).val()) === String(bookingCode)) { found = true; }
      });
      if (!found){
        $booking.append($("<option>", { value: bookingCode, text: labelText || ("B#"+bookingCode) }));
      }
      $booking.val(String(bookingCode));
    }

    $("#rsRooms").on("click", ".rs-room-tile", function(){
      $(".rs-room-tile").removeClass("active");
      $(this).addClass("active");

      const bcode = $(this).data("booking-code");
      const guest = ($(this).data("guest") || "").toString().trim();
      const room  = $(this).data("room");
      const cin   = $(this).data("checkin") || "";
      const cout  = $(this).data("checkout") || "";
      const pmRaw = (($(this).data("pay-mode") || "") + "").toLowerCase();

      if(!bcode){ return; }

      // 1) Select booking
      const label = `B#${bcode} — ${guest || "Guest"}`
      selectBooking(bcode, label);

      // 2) Pay mode map & set (transfer/wallet => digital class => 'card')
      const mapped = (pmRaw === "cash") ? "cash" : "card";
      $pay.val(mapped).trigger("change");  // change handler already calls recalc in your code

      // 3) Info strip
      $info.text(`Selected: B#${bcode} • Room ${room} • ${guest || "Guest"} • ${cin} → ${cout}`).show();

      // 4) Scroll + open Select2
      document.getElementById("code")?.scrollIntoView({behavior:"smooth", block:"center"});
      setTimeout(function(){
        $name.select2("open");
        const ip = document.querySelector(".select2-container .select2-search__field");
        if (ip) ip.focus();
      }, 50);
    });
  })();
</script>







{% endblock %}