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

{% block title %}Restaurant POS{% endblock %}
{% block heading %}{% endblock %}

{% block stylesheets %}
<link rel="stylesheet" href="{% static 'hotel/restaurant/css/pos.css' %}?v=restaurant_layout_clean_01">
<link rel="stylesheet" href="{% static 'hotel/restaurant/css/pos.css' %}?v=restaurant_layout_clean_01">
<link rel="stylesheet" href="{% static 'hotel/restaurant/css/pos_image.css' %}?v=01">
{% endblock %}

{% block content %}
{% csrf_token %}

<div
    class="resto-page"
    data-layout-mode="image"
    data-initial-mode="{{ selected_mode|default:'dining' }}"
    data-initial-order-no="{{ initial_order_no|default:0 }}"

    data-save-open-url="../api/order/save-open/"
    data-kot-url="../api/order/kot/"
    data-preprint-url="../api/order/preprint/"
    data-settle-url="../api/order/settle/"
    data-get-order-url-template="../api/order/0/"
    data-pending-url-template="../api/orders/pending/TYPE/"
    data-tax-cash-percent="{{ tax_cash_percent|default:0 }}"
    data-tax-digital-percent="{{ tax_digital_percent|default:0 }}"
    data-customer-search-url="{% url 'customers:get_customers' %}"
    data-service-charges-percent="{{ service_charges_percent|default:0 }}"

    data-product-search-url="{% url 'products:search_products_for_edit' %}"
    data-product-lookup-url="{% url 'products:product_lookup' %}"
    data-product-image-search-url="{% url 'hotel:restaurant:api_pos_image_product_search' %}"
    data-focus-code="{% if focus_code %}1{% else %}0{% endif %}"
    data-shift-room-url="../api/order/shift-room/"



   
  >
  <!-- A: Top Mode Bar -->
  <div class="resto-topbar">
    <div class="top-mode-row">
      <div class="top-left-nav">
        <a href="{% url 'pos:index' %}" class="bp-dashboard-link">
          <div class="bp-slim-brand" data-toggle="tooltip" data-placement="right" title="BPOS Dashboard">
            <div class="logo">
              <i class="fas fa-gem"></i>
            </div>
          </div>
        </a>

        <div class="mode-tabs">
          <button type="button" class="mode-btn" data-mode="dining">
            <i class="fas fa-chair"></i> Dining
          </button>

          <button type="button" class="mode-btn" data-mode="takeaway">
            <i class="fas fa-shopping-bag"></i> Take Away
          </button>

          <button type="button" class="mode-btn" data-mode="delivery">
            <i class="fas fa-motorcycle"></i> Delivery
          </button>

          <button type="button" class="mode-btn" data-mode="foodapp">
            <i class="fas fa-mobile-alt"></i> Food App
          </button>

          <button type="button" class="mode-btn" data-mode="credit">
            <i class="fas fa-user-clock"></i> Credit
          </button>
        </div>
      </div>

      <div class="order-lookup-box">
        <label for="orderNoSearch">Order No</label>

        <input
          type="text"
          class="form-control form-control-sm"
          id="orderNoSearch"
          placeholder="Order No# (F8)"
          autocomplete="off"
        >

        <span class="order-edit-badge d-none" id="orderEditBadge">
          Edit Mode
        </span>

        <button
          type="button"
          class="pos-help-btn"
          id="btnPosHelp"
          title="Restaurant POS Help"
        >
          Help
        </button>
        <button
    type="button"
    class="pos-help-btn"
    id="btnChangeLayout"
    title="Change POS Layout"
  >
    Layout
  </button>
      </div>
    </div>

    <!-- Customer / Delivery Context Bar -->
    <div class="customer-strip is-hidden" id="customerStrip">

      <!-- Take Away Bar -->
      <div class="customer-grid takeaway-grid" id="takeawayBar">
        <input
          type="text"
          class="form-control form-control-sm"
          id="takeCustomerName"
          placeholder="Customer name / Walk-in"
          autocomplete="off"
        >

        <input
          type="text"
          class="form-control form-control-sm"
          id="takeCustomerPhone"
          placeholder="Phone"
          autocomplete="off"
        >

        <input
          type="text"
          class="form-control form-control-sm"
          id="takeToken"
          placeholder="Token / Note"
          autocomplete="off"
        >
      </div>




      <!-- Delivery Bar -->
      <div class="customer-grid delivery-grid" id="deliveryBar" style="display:none;">
        <input
          type="text"
          class="form-control form-control-sm"
          id="deliveryCustomerName"
          placeholder="Customer name"
          autocomplete="off"
        >

        <input
          type="text"
          class="form-control form-control-sm"
          id="deliveryCustomerPhone"
          placeholder="Phone"
          autocomplete="off"
        >

       

        <input
          type="text"
          class="form-control form-control-sm"
          id="deliveryAddress"
          placeholder="Delivery address"
          autocomplete="off"
        >
         <select class="form-control form-control-sm" id="deliveryPersonSelect">
          <option value="">Delivery Person</option>
          {% for person in delivery_persons %}
            <option value="{{ person.t_id }}">
              {{ person.name }}{% if person.mobile %} - {{ person.mobile }}{% endif %}
            </option>
          {% endfor %}
        </select>
      </div>

      <!-- Food App Bar -->
      <div class="customer-grid foodapp-grid" id="foodAppBar" style="display:none;">
        <select class="form-control form-control-sm" id="foodAppSelect">
          <option value="">Select food app</option>
          {% for app in food_apps %}
            <option value="{{ app.t_id }}">{{ app.area_name }}</option>
          {% endfor %}
        </select>

        <input
          type="text"
          class="form-control form-control-sm"
          id="foodAppOrderNo"
          placeholder="Food app order number"
          autocomplete="off"
        >
      </div>

      <!-- Credit Bar -->
      <div class="customer-grid credit-grid" id="creditBar" style="display:none;">
        <select
          class="form-control form-control-sm"
          id="creditCustomerSelect"
          style="width:100%;"
        ></select>

        <input
          type="text"
          class="form-control form-control-sm"
          id="creditCustomerPhone"
          placeholder="Phone"
          autocomplete="off"
        >

        <input
          type="text"
          class="form-control form-control-sm"
          id="creditCustomerAddress"
          placeholder="Address"
          autocomplete="off"
        >
      </div>
    </div>
  </div>

  <!-- C: Category Bar: below top/customer, above products + bill -->
  <div class="resto-category-strip">
    <div class="category-bar" id="categoryBar">
      <button type="button" class="cat-btn active" data-cat="all">All</button>

      {% for cat in categories %}
        <button type="button" class="cat-btn" data-cat="{{ cat.t_id }}">
          {{ cat.cat_name }}
        </button>
      {% endfor %}
    </div>
  </div>

  <!-- B: Left Dynamic Section -->
  <div class="resto-sidebar">
    <div class="panel-title" id="sideTitle">Dining Tables</div>

    <div class="sidebar-body">
      <!-- Dining Panel -->
      <div class="mode-panel" id="panelDining">
        <input
          type="text"
          class="form-control form-control-sm"
          id="tableSearch"
          placeholder="Search table... (F4)"
          autocomplete="off"
        >

        <div class="table-grid" id="tableGrid">
          {% for t in restaurant_tables %}
            <div
              class="table-card {% if t.status or t.invoice %}occupied{% endif %}"
              data-table-id="{{ t.t_id }}"
              data-table-name="{{ t.name|escape }}"
              data-status="{{ t.status|default:'0' }}"
              data-invoice="{{ t.invoice|default:'0' }}"
              title="{{ t.name|escape }}"
            >
              <div class="table-name">{{ t.name }}</div>
            </div>
          {% empty %}
            <div class="empty-side">No tables found.</div>
          {% endfor %}
        </div>
      </div>

      <!-- Pending Orders Panel -->
      <div class="mode-panel" id="panelPending">
        <input
          type="text"
          class="form-control form-control-sm"
          id="pendingSearch"
          placeholder="Search pending order... (F2)"
          autocomplete="off"
        >

        <div class="pending-grid" id="pendingGrid">
          <div class="empty-side" style="grid-column:1/-1;">
            No pending orders yet.
          </div>
        </div>
      </div>
    </div>
  </div>



  <!-- D: Products -->
  <div class="resto-products">
    <div class="section-title product-quick-title" >
      <span>Menu Items</span>

      <div class="quick-product-box">
        <input
          type="text"
          class="form-control form-control-sm"
          id="quickProductCode"
          placeholder="Code (F3)"
          autocomplete="off"
          title="Alt+C"
        >

        <select
          class="form-control form-control-sm"
          id="quickProductName"

        ></select>

        <input
          type="text"
          inputmode="decimal"
          class="form-control form-control-sm"
          id="quickProductRate"
          value=""
          placeholder="Rate"
          autocomplete="off"
          title="Alt+R"
        >

        <input
          type="text"
          inputmode="decimal"
          class="form-control form-control-sm"
          id="quickProductQty"
          value="1"
          placeholder="Qty"
          autocomplete="off"
          title="Alt+Q"
        >
      </div>
    </div>



    <div class="product-body">
      <div class="product-grid product-image-grid" id="productGrid">
        {% for row in product_rows %}
          {% with p=row.product %}
            <div
              class="product-card product-image-card"
              data-id="{{ p.prod_id }}"
              data-code="{{ p.prod_id }}"
              data-name="{{ p.name|escape }}"
              data-rate="{{ p.l_sale_price|default:0 }}"
              data-cat="{{ p.category_id|default:0 }}"

            >
              <div class="product-img-wrap">
                {% if row.image_url %}
                  <img
                    src="{{ row.image_url }}"
                    alt="{{ p.name|escape }}"
                    class="product-img"
                    loading="lazy"
                    onerror="this.style.display='none'; this.parentNode.classList.add('no-img');"
                  >
                {% else %}
                  <div class="product-img-placeholder">
                    <i class="fas fa-utensils"></i>
                  </div>
                {% endif %}
              </div>

              <div class="product-card-footer">
                <div class="product-name">{{ p.name }}</div>
                <div class="product-price">Rs {{ p.l_sale_price|floatformat:2 }}</div>
              </div>
            </div>
          {% endwith %}
        {% empty %}
          <div class="text-muted small">No products found.</div>
        {% endfor %}
      </div>
    </div>
  </div>

  <!-- E: Running Bill -->
  <div class="resto-bill">
    <div class="section-title">
      <span>Running Bill</span>
      <small id="billSubtitle">Select mode and add items</small>
    </div>

    <div class="bill-table-wrap">
      <table class="table table-sm bill-table">
        <thead>
          <tr>
            <th style="width: 32%;">Item</th>
            <th style="width: 25%;">Qty</th>
            <th style="width: 17%;">Rate</th>
            <th style="width: 19%;">Total</th>
            <th style="width: 7%;"></th>
          </tr>
        </thead>

        <tbody id="cartBody">
          <tr>
            <td colspan="5">
              <div class="empty-cart">No items selected</div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    
  </div>

  <!-- F: Footer / Actions -->
  <div class="resto-actions">
    <!-- Left: billing adjustments + buttons -->
    <div class="footer-left">
      <div class="adjustment-bar">
        <div class="adj-read">
          <span>Subtotal</span>
          <strong id="adjSubtotal">0.00</strong>
        </div>

        <label class="adj-field">
          <span>Disc</span>
          <input type="number" step="1" id="hdrDiscount" value="0">
        </label>


        <label class="adj-field" id="hdrServiceField">
          <span id="hdrServiceLabel">Service(%)</span>
          <input type="number" step="1" id="hdrService" value="0">
        </label>

        <label class="adj-field" id="hdrOtherField">
          <span id="hdrOtherLabel">Charges</span>
          <input type="number" step="1" id="hdrOther" value="0">
        </label>

        <label class="adj-field tax-field">
          <span>Tax</span>
          <select id="hdrTaxMode">
            <option value="auto" selected>Cash</option>
            <option value="digital">Digital</option>
            <option value="custom">Custom</option>
            <option value="no_tax">No Tax</option>
          </select>
        </label>

        <label class="adj-field percent-field">
          <input type="number" step="0.01" id="hdrTaxPercent" value="0">
          <span>%</span>
        </label>
      </div>

      <div class="action-left dining-action-bar">
        <button type="button" class="action-btn soft" id="btnKOT">
          KOT (Ctrl+K)
        </button>

        <button type="button" class="action-btn soft" id="btnSaveOpen">
          Save (Ctrl+S)
        </button>

        <button type="button" class="action-btn soft" id="btnPreprint">
          Pre-Print (Ctrl+P)
        </button>

        <button type="button" class="action-btn paid" id="btnSettle">
          Paid (Ctrl + Enter)
        </button>

        <button type="button" class="action-btn room-shift" id="btnShiftRoom">
          Shift Room
        </button>

      </div>
    </div>

    <!-- Right: Payment Section -->
    <div class="multi-tender">
      <div class="payment-head">
        <div class="payment-net-title">
          <span>Net Total</span>
          <span style="font-size: 30px;" id="netTotal">0.00</span>
        </div>

        <button type="button" class="payment-add-btn" id="btnAddPaymentRow" title="Add bank row (F7)">
          +
        </button>
      </div>
      <div class="payment-rows" id="paymentRows"></div>

      <!-- hidden bank options template -->
      <select id="paymentBankTemplate" style="display:none;">
        {% for b in banks %}
          <option value="{{ b.t_id }}">{{ b.name }}</option>
        {% endfor %}
      </select>
    </div>
  </div>

  <!-- Small POS Loader -->
  <div class="pos-mini-loader" id="posMiniLoader">
    <div class="pos-mini-loader-box">
      <div class="pos-spinner"></div>
      <div class="pos-loader-text">Loading...</div>
    </div>
  </div>
</div>

<!-- Pending Detail Modal -->
<div class="modal fade" id="pendingDetailModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header py-2">
        <h6 class="modal-title">Pending Order Details</h6>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span>&times;</span>
        </button>
      </div>

      <div class="modal-body small">
        <div><strong>Order #:</strong> <span id="mdlPendingOrderNo">—</span></div>
        <div><strong>Type:</strong> <span id="mdlPendingType">—</span></div>
        <div><strong>Customer:</strong> <span id="mdlPendingCustomer">—</span></div>
        <div><strong>Phone:</strong> <span id="mdlPendingPhone">—</span></div>
        <div><strong>Address:</strong> <span id="mdlPendingAddress">—</span></div>
        <div><strong>Status:</strong> <span id="mdlPendingStatus">—</span></div>
        <div><strong>Total:</strong> Rs <span id="mdlPendingTotal">0.00</span></div>
      </div>

      <div class="modal-footer py-2">
        <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">
          Close
        </button>

        <button type="button" class="btn btn-primary btn-sm" id="btnLoadPending">
          Load Order
        </button>
      </div>
    </div>
  </div>
</div>
<!-- Restaurant POS Help Modal -->
<div class="modal fade" id="posHelpModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
    <div class="modal-content pos-help-modal">
      <div class="modal-header py-2">
        <h6 class="modal-title">
          Restaurant POS Help (F1)
        </h6>

        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span>&times;</span>
        </button>
      </div>

      <div class="modal-body">
        <div class="help-grid">
          <div class="help-card">
            <h6>1. Dining Flow</h6>
            <ol>
              <li>Select Dining mode.</li>
              <li>Select a table before adding items.</li>
              <li>Add products by card, code, or product search.</li>
              <li>Click KOT to send items to kitchen.</li>
              <li>Click Save to keep order open.</li>
              <li>Click Paid to settle the order.</li>
            </ol>
          </div>

          <div class="help-card">
            <h6>2. Take Away / Delivery Flow</h6>
            <ol>
              <li>Select Take Away or Delivery mode.</li>
              <li>Enter customer details.</li>
              <li>Add products to the bill.</li>
              <li>Click Save to keep order pending.</li>
              <li>Click any pending order card to load it directly.</li>
              <li>Click Paid when payment is complete.</li>
            </ol>
          </div>

          <div class="help-card">
            <h6>3. Food App / Credit Flow</h6>
            <ol>
              <li>Select Food App or Credit mode.</li>
              <li>Select app/customer details.</li>
              <li>Add products and save order.</li>
              <li>Pending orders appear on the left side.</li>
              <li>Click pending order card to load it.</li>
              <li>Partial payment is allowed for Food App and Credit.</li>
            </ol>
          </div>

          <div class="help-card">
            <h6>4. Order Load / Edit</h6>
            <ol>
              <li>Press F8 or click Order No field.</li>
              <li>Enter order number and press Enter.</li>
              <li>If order exists, it will load automatically.</li>
              <li>If settled order is loaded, it opens in Edit Mode.</li>
              <li>Make changes and click Update Paid.</li>
            </ol>
          </div>
        </div>

        <div class="shortcut-box mt-3">
          <h6>Keyboard Shortcuts</h6>

          <div class="shortcut-grid">
            <div><kbd>F2</kbd><span>Product name search</span></div>
            <div><kbd>F3</kbd><span>Product code search</span></div>
            <div><kbd>F4</kbd><span>Table / pending search</span></div>
            <div><kbd>F7</kbd><span>Add payment row</span></div>
            <div><kbd>F8</kbd><span>Order number search</span></div>
            <div><kbd>Ctrl + K</kbd><span>KOT / kitchen print</span></div>
            <div><kbd>Ctrl + S</kbd><span>Save open order</span></div>
            <div><kbd>Ctrl + P</kbd><span>Pre-print bill</span></div>
            <div><kbd>Ctrl + Enter</kbd><span>Paid / settle order</span></div>
          </div>
        </div>

        <div class="help-note mt-3">
          Tip: For fast billing, use keyboard shortcuts. Select table first in Dining mode, then use product search or code entry to add items quickly.
        </div>
      </div>

      <div class="modal-footer py-2">
        <button type="button" class="btn btn-primary btn-sm" data-dismiss="modal">
          Got it
        </button>
      </div>
    </div>
  </div>
</div>
<!-- Shift To Room Modal -->
<div class="modal fade" id="shiftRoomModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
    <div class="modal-content shift-room-modal">
      <div class="modal-header shift-room-header">
        <h6 class="modal-title">
          <i class="fas fa-bed"></i> Shift To Room
        </h6>

        <button type="button" class="close shift-room-close" data-dismiss="modal" aria-label="Close">
          <span>&times;</span>
        </button>
      </div>

      <div class="modal-body shift-room-body">
        <div class="shift-room-total">
          <span>Bill Total</span>
          <strong>Rs <span id="shiftRoomTotal">0</span></strong>
        </div>

        <label class="shift-room-field">
          <span>Select occupied room</span>

          <select class="form-control" id="shiftRoomBookingSelect">
            <option value="">Select room</option>

            {% for room in occupied_rooms %}
              {% if room.current_booking %}
                <option
                  value="{{ room.current_booking_id }}"
                  data-room-no="{{ room.room_no }}"
                >
                  Room {{ room.room_no }}
                  - B#{{ room.current_booking.booking_code|default:room.current_booking.t_id }}
                  {% if room.current_booking.guest %}
                    - {{ room.current_booking.guest.name }}
                  {% endif %}
                </option>
              {% endif %}
            {% endfor %}
          </select>
        </label>

        <div class="shift-room-note">
          This bill will be posted to guest folio. No cash/bank payment will be posted here.
        </div>
      </div>

      <div class="modal-footer shift-room-footer">
        <button type="button" class="btn shift-room-cancel" data-dismiss="modal">
          Cancel
        </button>

        <button type="button" class="btn shift-room-confirm" id="btnShiftRoomConfirm">
          Shift
        </button>
      </div>
    </div>
  </div>
</div>
<!-- Paid Confirmation Modal -->
<div class="modal fade" id="paidConfirmModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-sm modal-dialog-centered pos-paid-dialog" role="document">
    <div class="modal-content paid-confirm-modal">
      <div class="modal-header paid-confirm-header">
        <div>
          <h6 class="modal-title">Settle Order</h6>
          <small>Complete payment and choose save option.</small>
        </div>

        <button type="button" class="close paid-confirm-close" data-dismiss="modal" aria-label="Close">
          <span>&times;</span>
        </button>
      </div>

      <div class="modal-body paid-confirm-body">
        <div class="paid-confirm-icon">
          <i class="fas fa-cash-register"></i>
        </div>

        <div class="paid-modal-summary">
          <div>
            <span>Net Total</span>
            <strong>Rs <span id="paidModalNetTotal">0.00</span></strong>
          </div>

          <div>
            <span>Received</span>
            <strong>Rs <span id="paidModalReceived">0.00</span></strong>
          </div>
        </div>

     
      </div>

      <div class="modal-footer paid-confirm-footer">
        <button type="button" class="btn paid-cancel-btn" data-dismiss="modal">
          Cancel
        </button>

        <button type="button" class="btn paid-save-btn" id="btnPaidSaveOnly">
          Save Only
        </button>

        <button type="button" class="btn paid-print-btn" id="btnPaidSavePrint">
          Save & Print
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Quick Cash Payment Modal -->
<div class="modal fade" id="quickPaymentModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-sm modal-dialog-centered quick-pay-dialog" role="document">
    <div class="modal-content quick-pay-modal">
      <div class="quick-pay-header">
        <h6>
          <i class="fas fa-cash-register"></i>
          Quick Payment
        </h6>

        <button type="button" class="close quick-pay-close" data-dismiss="modal" aria-label="Close">
          <span>&times;</span>
        </button>
      </div>

      <div class="quick-pay-body">
        <div class="quick-total-box">
          <span>Bill Total</span>
          <strong>Rs <span id="quickPayBillTotal">0.00</span></strong>
        </div>

        <label class="quick-pay-field">
          <span>Received Amount</span>
          <input
            type="text"
            inputmode="decimal"
            class="form-control"
            id="quickPayReceived"
            autocomplete="off"
          >
        </label>

        <div class="quick-change-box">
          <span>Change</span>
          <strong>Rs <span id="quickPayChange">0.00</span></strong>
        </div>

        <div class="quick-pay-hint">
          <kbd>End</kbd> Quick Payment &nbsp;
          <kbd>Enter</kbd> Save & Print &nbsp;
          <kbd>Esc</kbd> Close
        </div>
      </div>

      <div class="quick-pay-footer">
        <button type="button" class="quick-cancel-btn" data-dismiss="modal">
          Cancel
        </button>

        <button type="button" class="quick-save-btn" id="btnQuickPaySaveOnly">
          Save Only
        </button>

        <button type="button" class="quick-print-btn" id="btnQuickPaySavePrint">
          Save & Print
        </button>
      </div>
    </div>
  </div>
</div>


<!-- POS Layout Mode Modal -->
<div class="modal fade" id="layoutModeModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
    <div class="modal-content pos-layout-modal">
      <div class="modal-header py-2">
        <h6 class="modal-title">Change POS Layout</h6>

        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span>&times;</span>
        </button>
      </div>

      <div class="modal-body">
        <div class="layout-mode-list">

          <button
            type="button"
            class="layout-mode-card"
            data-layout-key="normal"
            data-layout-url="{% url 'hotel:restaurant:pos' %}"
          >
            <strong>Normal POS</strong>
            <span>Fast text-based product layout</span>
          </button>

          <button
            type="button"
            class="layout-mode-card"
            data-layout-key="image"
            data-layout-url="{% url 'hotel:restaurant:pos_image' %}"
          >
            <strong>Image POS</strong>
            <span>Product image card layout</span>
          </button>

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

{% endblock %}

{% block javascripts %}
<script src="{% static 'hotel/restaurant/js/pos.js' %}?v=restaurant_layout_clean_01"></script>
{% endblock %}