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

{% block title %}{{ title }}{% endblock %}
{% block heading %}{{ title }}{% endblock %}

{% block stylesheets %}
<style>
  .rs-row .form-control { height: 38px; }
  .table-sm td, .table-sm th { vertical-align: middle; }
  .totals .v { font-weight: 700; }
  .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; }

  .rs-hero{
    background:linear-gradient(135deg,#0f172a,#2563eb);
    color:#fff;border-radius:18px;padding:16px;margin-bottom:12px;
    box-shadow:0 12px 28px rgba(15,23,42,.18)
  }
  .rs-hero h4{margin:0;color:#fff;font-weight:900}
  .rs-hero p{margin:4px 0 0;color:#dbeafe}
  .shortcut-badge{
    display:inline-flex;align-items:center;gap:6px;
    background:#ecfeff;color:#155e75;border:1px solid #a5f3fc;
    padding:6px 10px;border-radius:999px;font-weight:800;font-size:12px
  }

  .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:12px; padding:10px 12px; min-width:130px;
    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:800; 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:700 }
  .rs-sel-info{ padding:7px 10px; background:#f8fafc; border:1px dashed #d1d5db; border-radius:10px; margin-top:8px; display:none }

  .small-box{
    background:#fff;border:1px solid #e5e7eb;border-radius:14px;
    padding:12px;margin-bottom:12px;box-shadow:0 8px 20px rgba(15,23,42,.05)
  }
</style>
{% endblock %}

{% block content %}

<div class="rs-hero">
  <div class="d-flex justify-content-between align-items-center flex-wrap">
    <div>
      <h4>{{ title }}</h4>
      <p>
        {% if mode == "edit" %}
          Update room service items, status and remarks.
        {% else %}
          Select occupied room, add items, then save.
        {% endif %}
      </p>
    </div>
    <div class="shortcut-badge">
      Shortcut: Alt + S = Save
    </div>
  </div>
</div>

{% if form.errors %}
  <div class="alert alert-danger">
    {{ form.errors }}
  </div>
{% endif %}

{% if mode == "create" and occupied_rooms %}
<div class="card rs-rooms-card">
  <div class="card-header">
    Occupied Rooms — click room to select booking
  </div>
  <div class="card-body">
    <div class="rs-rooms" id="rsRooms">
      {% for r in occupied_rooms %}
        <div class="rs-room-tile"
             data-booking-tid="{{ r.booking_tid }}"
             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:'' }}"
             data-tax-percent="{{ r.tax_percent|default:0 }}">
          <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 %}

{% if mode == "edit" and booking %}
<div class="small-box">
  <div class="row">
    <div class="col-md-3"><b>Booking:</b> #{{ booking.t_id }}</div>
    <div class="col-md-3"><b>Guest:</b> {{ booking.guest.name|default:"Guest" }}</div>
    <div class="col-md-3"><b>Room:</b> {{ room_nos|default:"-" }}</div>
    <div class="col-md-3"><b>Tax:</b> {{ booking.tax_percent|floatformat:2 }}%</div>
  </div>
  <div class="mt-2">
    <a class="btn btn-sm btn-outline-dark"
       href="{% url 'hotel:bookings:detail' t_id=booking.t_id %}">
      View Booking
    </a>
  </div>
</div>
{% endif %}

<form method="post"
      id="rs-form"
      action="{% url 'hotel:roomservice:form' %}{% if mode == 'edit' %}?order_no={{ order.order_no }}{% endif %}">
  {% csrf_token %}

  {{ form.booking_tid }}
  {{ form.booking_code }}
  {{ form.payload }}

  {% if mode == "edit" %}
    <input type="hidden" name="edit_order_no" value="{{ order.order_no }}">
  {% endif %}

  <div class="card mb-2">
    <div class="card-header">Room Service Header</div>
    <div class="card-body">
      <div class="form-row">
        <div class="form-group col-md-3">
          <label class="small">Room Service Order No</label>
          {{ form.order_no }}
        </div>

        <div class="form-group col-md-3">
          <label class="small">Status</label>
          {{ form.status }}
        </div>

        <div class="form-group col-md-6">
          <label class="small">Remarks</label>
          {{ form.remarks }}
        </div>
      </div>
    </div>
  </div>

  <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 & Enter">
        </div>

        <div class="col-md-4">
          <label class="small">Product Search</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>

  <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>

  <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">0.00</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>

  <div class="mt-3">
    <button class="btn btn-primary" type="submit">
      {{ button_text }}
    </button>

    {% if mode == "edit" %}
      <a href="{% url 'hotel:roomservice:detail' order.order_no %}" class="btn btn-secondary">
        Cancel
      </a>
    {% else %}
      <a href="{% url 'hotel:roomservice:list' %}" class="btn btn-secondary">
        Cancel
      </a>
    {% endif %}
  </div>
</form>
{% endblock %}

{% block javascripts %}
<script>
(function(){
  const API_BY_CODE = "{% url 'hotel:roomservice:api_product_by_code' %}";
  const API_SEARCH  = "{% url 'hotel:roomservice:api_product_search' %}";
  const MODE = "{{ mode }}";

  const $code  = $("#code");
  const $name  = $("#name_select");
  const $qty   = $("#qty");
  const $price = $("#price");
  const $desc  = $("#desc");
  const $tbody = $("#lines_body");
  const $payload = $("#id_payload");

  let LINES = [];
  let CURRENT = null;

  try {
    LINES = JSON.parse('{{ initial_lines_json|escapejs }}');
    if (!Array.isArray(LINES)) LINES = [];
  } catch(e) {
    LINES = [];
  }

  let SELECTED_BOOKING_TAX_PERCENT = parseFloat("{% if booking %}{{ booking.tax_percent|default:0 }}{% else %}0{% endif %}") || 0;

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

  function recalc(){
    let subtotal = 0.0;

    LINES.forEach(function(l){
      subtotal += parseFloat(l.qty || 0) * parseFloat(l.price || 0);
    });

    const tp = SELECTED_BOOKING_TAX_PERCENT || 0;
    const tax = subtotal * tp / 100;
    const total = subtotal + tax;

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

    $payload.val(JSON.stringify(LINES));
  }

  function redraw(){
    $tbody.empty();

    if (!LINES.length) {
      $tbody.append('<tr><td colspan="8" class="text-muted">No items added.</td></tr>');
      recalc();
      return;
    }

    LINES.forEach(function(l, idx){
      const total = parseFloat(l.qty || 0) * parseFloat(l.price || 0);

      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(total)}</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 greater than 0.");
      $qty.focus();
      return;
    }

    if (price < 0) {
      alert("Price cannot be negative.");
      $price.focus();
      return;
    }

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

    redraw();
    clearEntry();
  }

  $name.select2({
    placeholder: "Search product by name/code",
    ajax: {
      url: API_SEARCH,
      dataType: "json",
      delay: 200,
      data: function(params){
        return { q: params.term || "" };
      },
      processResults: function(data){
        return 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.name || d.text || "").replace(/\s*\([^)]+\)\s*$/, ""),
      price: parseFloat(d.l_sale_price || 0)
    };

    $code.val(d.product_code || "");
    $price.val(d.l_sale_price || 0);
    $qty.focus().select();
  }).on("select2:open", function(){
    const ip = document.querySelector(".select2-container--open .select2-search__field");
    if (ip) ip.focus();
  });

  $code.on("keydown", function(ev){
    if (ev.key === "Enter") {
      ev.preventDefault();

      const v = ($code.val() || "").trim();

      if (!v) {
        setTimeout(function(){ $name.select2("open"); }, 0);
        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");

          $price.val(res.l_sale_price || 0);
          $qty.focus().select();
        } else {
          setTimeout(function(){ $name.select2("open"); }, 0);
        }
      });
    }
  });

  $qty.on("keydown", function(ev){
    if (ev.key === "Enter") {
      ev.preventDefault();
      $price.focus().select();
    }
  });

  $price.on("keydown", function(ev){
    if (ev.key === "Enter") {
      ev.preventDefault();
      $desc.focus().select();
    }
  });

  $desc.on("keydown", function(ev){
    if (ev.key === "Enter") {
      ev.preventDefault();
      addLineFromEntry();
    }
  });

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

  function selectRoomTile($tile){
    $(".rs-room-tile").removeClass("active");
    $tile.addClass("active");

    const btid = $tile.data("booking-tid");
    const bcode = $tile.data("booking-code");
    const guest = ($tile.data("guest") || "").toString().trim();
    const room = $tile.data("room") || "";
    const cin = $tile.data("checkin") || "";
    const cout = $tile.data("checkout") || "";
    const taxPercent = parseFloat($tile.data("tax-percent") || "0") || 0;

    if (!btid) {
      alert("Booking not found for this room.");
      return;
    }

    $("#id_booking_tid").val(btid);
    $("#id_booking_code").val(bcode || "");

    SELECTED_BOOKING_TAX_PERCENT = taxPercent;
    recalc();

    $("#rsSelInfo")
      .text("Selected: B#" + btid + " • Room " + room + " • " + (guest || "Guest") + " • " + cin + " → " + cout)
      .show();

    setTimeout(function(){
      $name.select2("open");
      const ip = document.querySelector(".select2-container--open .select2-search__field");
      if (ip) ip.focus();
    }, 80);
  }

  $("#rsRooms").on("click", ".rs-room-tile", function(){
    selectRoomTile($(this));
  });

  $("#rs-form").on("submit", function(ev){
    if (MODE === "create") {
      const bookingTid = $("#id_booking_tid").val();

      if (!bookingTid) {
        ev.preventDefault();
        alert("Please select a room / booking first.");
        return false;
      }
    }

    if (!LINES.length) {
      ev.preventDefault();
      alert("Add at least one line.");
      return false;
    }

    $payload.val(JSON.stringify(LINES));
    return true;
  });

  $(document).on("keydown", function(ev){
    const key = (ev.key || "").toLowerCase();

    if (ev.altKey && key === "s") {
      ev.preventDefault();

      const form = document.getElementById("rs-form");
      if (form.requestSubmit) {
        form.requestSubmit();
      } else {
        $("#rs-form").submit();
      }
    }
  });

  redraw();
  $code.focus();
})();
</script>
{% endblock %}