<?php
defined('BASEPATH') OR exit('No direct script access allowed');
$base_url = base_url();
$theme_link = isset($theme_link) ? $theme_link : (rtrim(base_url(), '/') . '/theme/');
?>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Customer Display</title>
  <link rel="stylesheet" href="<?= $theme_link; ?>bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="<?= $theme_link; ?>css/font-awesome-4.7.0/css/font-awesome.min.css">
  <style>
    * { box-sizing: border-box; }
    body { margin: 0; padding: 0; background: #0d1117; color: #e6edf3; font-family: 'Segoe UI', system-ui, sans-serif; min-height: 100vh; display: flex; flex-direction: column; padding-top: 200px; padding-bottom: 200px; }
    /* Header fixed at top – store name, welcome, customer, date always visible */
    .customer-display-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 50;
      background: linear-gradient(135deg, #161b22 0%, #21262d 100%);
      padding: 14px 24px 16px;
      text-align: center;
      border-bottom: 2px solid #30363d;
      box-shadow: 0 8px 24px rgba(0,0,0,0.35);
      min-height: 200px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .customer-display-header h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: 0.02em; color: #fff; line-height: 1.2; }
    .customer-display-header .welcome { font-size: 15px; color: #c9d1d9; margin-top: 8px; font-weight: 500; line-height: 1.4; }
    .customer-display-header .welcome-sub { font-size: 13px; color: #8b949e; margin-top: 4px; }
    .customer-display-header .customer-line { font-size: 14px; color: #58a6ff; margin-top: 4px; font-weight: 500; }
    .customer-display-datetime { font-size: 13px; color: #8b949e; margin-top: 6px; }
    .customer-display-digital-clock { font-size: 36px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.08em; color: #58a6ff; margin-top: 6px; text-shadow: 0 0 20px rgba(88, 166, 255, 0.3); }
    .customer-display-digital-clock .clock-sep { opacity: 0.6; animation: clock-blink 1s step-end infinite; }
    @keyframes clock-blink { 50% { opacity: 0.2; } }
    .customer-display-body { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 20px 24px; max-width: 900px; margin: 0 auto; width: 100%; }
    .customer-display-items-wrap { flex: 1; min-height: 0; overflow-y: auto; margin-bottom: 16px; -webkit-overflow-scrolling: touch; }
    .customer-display-items {
      width: 100%; border-collapse: collapse; font-size: 18px;
    }
    .customer-display-items th {
      text-align: left; padding: 10px 8px; border-bottom: 2px solid #30363d;
      color: #8b949e; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
    }
    .customer-display-items td { padding: 10px 8px; border-bottom: 1px solid #21262d; color: #e6edf3; font-size: 17px; }
    .customer-display-items .text-right { text-align: right; }
    /* Totals strip fixed at bottom so Amount due / total to pay is always visible */
    .customer-display-totals-strip {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      flex-shrink: 0;
      border-top: 2px solid #30363d;
      padding: 16px 24px 24px;
      background: #0d1117;
      background: linear-gradient(to top, #0d1117 0%, #161b22 100%);
      box-shadow: 0 -8px 24px rgba(0,0,0,0.4);
      z-index: 100;
      box-sizing: border-box;
    }
    .customer-display-totals-strip-inner { max-width: 900px; margin: 0 auto; }
    .customer-display-summary { margin-bottom: 0; }
    .customer-display-summary-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 16px; color: #8b949e; }
    .customer-display-summary-row .val { color: #e6edf3; font-weight: 600; }
    .customer-display-total-row { font-size: 20px !important; color: #e6edf3 !important; padding: 12px 0 !important; border-top: 1px solid #30363d; margin-top: 4px; }
    .customer-display-total-row .val { font-size: 22px; color: #58a6ff; }
    .customer-display-payment-box { background: linear-gradient(135deg, #21262d 0%, #161b22 100%); border-radius: 10px; padding: 16px 20px; margin-top: 16px; border: 1px solid #30363d; }
    .customer-display-payment-box .title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: #8b949e; margin-bottom: 10px; font-weight: 600; }
    .customer-display-payment-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 16px; }
    .customer-display-payment-row .val { color: #7ee787; font-weight: 600; }
    .customer-display-payment-methods { font-size: 15px; color: #8b949e; margin-top: 8px; line-height: 1.5; }
    .customer-display-balance-due { margin-top: 12px; padding-top: 12px; border-top: 1px solid #30363d; font-size: 17px; font-weight: 600; display: flex; justify-content: space-between; }
    .customer-display-balance-due .val { color: #f85149; }
    .customer-display-change { margin-top: 12px; padding-top: 12px; border-top: 1px solid #30363d; font-size: 17px; font-weight: 600; display: flex; justify-content: space-between; }
    .customer-display-change .val { color: #7ee787; }
    .customer-display-amount-due-end { margin-top: 16px; padding-top: 12px; border-top: 1px solid #30363d; }
    .customer-display-empty { text-align: center; padding: 40px 20px; color: #484f58; font-size: 18px; }
    .customer-display-empty .icon { font-size: 42px; margin-bottom: 12px; opacity: 0.5; }
    /* Responsive: tablets and below */
    @media (max-width: 768px) {
      body { padding-top: 160px; padding-bottom: 160px; }
      .customer-display-header { min-height: 160px; padding: 12px 16px 14px; }
      .customer-display-header h1 { font-size: 22px; }
      .customer-display-header .welcome { font-size: 14px; margin-top: 6px; }
      .customer-display-header .welcome-sub { font-size: 12px; }
      .customer-display-header .customer-line { font-size: 13px; }
      .customer-display-datetime { font-size: 12px; margin-top: 4px; }
      .customer-display-digital-clock { font-size: 28px; margin-top: 4px; }
      .customer-display-body { padding: 12px 16px; }
      .customer-display-items { font-size: 15px; }
      .customer-display-items th { padding: 8px 6px; font-size: 10px; font-weight: 700; }
      .customer-display-items td { padding: 8px 6px; font-size: 14px; }
      .customer-display-totals-strip { padding: 12px 16px 16px; }
      .customer-display-summary-row { font-size: 14px; padding: 6px 0; }
      .customer-display-total-row { font-size: 17px !important; padding: 10px 0 !important; }
      .customer-display-total-row .val { font-size: 18px; }
      .customer-display-payment-box { padding: 12px 16px; margin-top: 12px; }
      .customer-display-payment-methods { font-size: 14px; }
      .customer-display-change, .customer-display-balance-due { font-size: 15px; margin-top: 8px; padding-top: 8px; }
      .customer-display-empty { padding: 24px 16px; font-size: 16px; }
      .customer-display-empty .icon { font-size: 36px; }
    }
    /* Responsive: phones */
    @media (max-width: 480px) {
      body { padding-top: 130px; padding-bottom: 140px; }
      .customer-display-header { min-height: 130px; padding: 10px 12px 12px; }
      .customer-display-header h1 { font-size: 18px; line-height: 1.3; }
      .customer-display-header .welcome { font-size: 13px; margin-top: 4px; }
      .customer-display-header .customer-line { font-size: 12px; }
      .customer-display-datetime { font-size: 11px; }
      .customer-display-digital-clock { font-size: 24px; margin-top: 2px; letter-spacing: 0.04em; }
      .customer-display-body { padding: 10px 12px; }
      .customer-display-items-wrap { margin-bottom: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
      .customer-display-items { font-size: 13px; min-width: 280px; }
      .customer-display-items thead { display: table-header-group; }
      .customer-display-items th { display: table-cell; padding: 6px 4px; font-size: 10px; font-weight: 700; }
      .customer-display-items td { padding: 6px 4px; font-size: 12px; }
      .customer-display-totals-strip { padding: 10px 12px 14px; }
      .customer-display-totals-strip-inner { padding: 0; }
      .customer-display-summary-row { font-size: 13px; padding: 5px 0; flex-wrap: wrap; }
      .customer-display-total-row { font-size: 16px !important; padding: 8px 0 !important; }
      .customer-display-total-row .val { font-size: 17px; }
      .customer-display-payment-box { padding: 10px 12px; margin-top: 10px; border-radius: 8px; }
      .customer-display-payment-methods { font-size: 13px; }
      .customer-display-change .val, .customer-display-balance-due .val { font-size: 15px; }
      .customer-display-empty { padding: 20px 12px; font-size: 14px; }
      .customer-display-empty .icon { font-size: 32px; }
    }
    /* Very small phones */
    @media (max-width: 360px) {
      body { padding-top: 115px; padding-bottom: 125px; }
      .customer-display-header { min-height: 115px; padding: 8px 10px 10px; }
      .customer-display-header h1 { font-size: 16px; }
      .customer-display-digital-clock { font-size: 20px; }
    }
  </style>
</head>
<body>
  <div class="customer-display-header">
    <h1 id="display-store-name"><?= $this->session->userdata('store_name'); ?></h1>
    <div class="welcome" id="display-welcome">Welcome. We thank you for your support.</div>
    <div class="welcome-sub" id="display-welcome-sub"></div>
    <div class="customer-line" id="display-customer-name"></div>
    <div class="customer-display-datetime" id="display-datetime"></div>
    <div class="customer-display-digital-clock" id="display-digital-clock">00:00:00</div>
  </div>
  <div class="customer-display-body">
    <div class="customer-display-items-wrap">
      <table class="customer-display-items" id="display-items">
        <thead>
          <tr>
            <th>Item</th>
            <th class="text-right">Qty</th>
            <th class="text-right">Price</th>
            <th class="text-right">Total</th>
          </tr>
        </thead>
        <tbody id="display-items-body">
          <tr><td colspan="4" class="customer-display-empty"><div class="icon"><i class="fa fa-shopping-cart"></i></div>Ready for items</td></tr>
        </tbody>
      </table>
    </div>
    <div class="customer-display-totals-strip">
      <div class="customer-display-totals-strip-inner">
        <div id="display-summary-wrap" class="customer-display-summary" style="display:none;">
          <div class="customer-display-summary-row customer-display-total-row">
            <span>Amount due</span>
            <span class="val" id="display-grand">0.00</span>
          </div>
        </div>
        <div id="display-payment-wrap" class="customer-display-payment-box" style="display:none;">
          <div class="customer-display-payment-methods" id="display-methods"></div>
          <div class="customer-display-summary-row customer-display-total-row">
            <span>Amount due</span>
            <span class="val" id="display-grand-end">0.00</span>
          </div>
          <div id="display-change-row" class="customer-display-summary-row customer-display-change" style="display:none;">
            <span>Change return</span>
            <span class="val" id="display-change">0.00</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="<?= $theme_link; ?>plugins/jQuery/jquery-2.2.3.min.js"></script>
  <script>
    var baseUrl = <?= json_encode($base_url); ?>;
    var currencySymbol = '';
    function formatQty(n) {
      n = Number(n);
      if (isNaN(n)) return '0';
      return n % 1 === 0 ? String(Math.round(n)) : n.toFixed(2).replace(/\.?0+$/, '');
    }
    function formatMoney(n) {
      n = Number(n);
      if (isNaN(n)) return '0.00';
      var s = n.toFixed(2);
      var parts = s.split('.');
      parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
      return parts.join('.');
    }
    function updateTime() {
      var d = new Date();
      $('#display-datetime').html(d.toLocaleDateString(undefined, { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' }));
      var h = d.getHours(), m = d.getMinutes(), s = d.getSeconds();
      var hh = (h < 10 ? '0' : '') + h, mm = (m < 10 ? '0' : '') + m, ss = (s < 10 ? '0' : '') + s;
      $('#display-digital-clock').html(hh + '<span class="clock-sep">:</span>' + mm + '<span class="clock-sep">:</span>' + ss);
    }
    updateTime();
    setInterval(updateTime, 1000);
    function poll() {
      $.getJSON(baseUrl + 'pos/customer_display_data', function(data) {
        currencySymbol = data.currency || '';
        if (data.store_name) $('#display-store-name').text(data.store_name);
        $('#display-welcome').text('Welcome. We thank you for your support.');
        if (data.customer_name) {
          $('#display-customer-name').text('Customer: ' + data.customer_name).show();
        } else {
          $('#display-customer-name').text('').hide();
          $('#display-welcome-sub').text('').hide();
        }
        var tbody = $('#display-items-body');
        tbody.empty();
        if (data.items && data.items.length) {
          data.items.forEach(function(row) {
            var qty = formatQty(row.qty);
            var price = (row.price != null && row.price !== '') ? (currencySymbol + formatMoney(parseFloat(String(row.price).replace(/[^0-9.-]/g, '')))) : '';
            var subtotal = (row.subtotal != null && row.subtotal !== '') ? (currencySymbol + formatMoney(parseFloat(String(row.subtotal).replace(/[^0-9.-]/g, '')))) : '';
            tbody.append('<tr><td>' + (row.name || '') + '</td><td class="text-right">' + qty + '</td><td class="text-right">' + price + '</td><td class="text-right">' + subtotal + '</td></tr>');
          });
          var totAmt = data.tot_amt != null ? Number(data.tot_amt) : 0;
          var totDisc = data.tot_disc != null ? Number(data.tot_disc) : 0;
          var totGrand = data.tot_grand != null ? Number(data.tot_grand) : 0;
          var paid = data.paid_amount != null ? Number(data.paid_amount) : 0;
          var balance = data.balance_due != null ? Number(data.balance_due) : 0;
          var changeRet = data.change_return != null ? Number(data.change_return) : 0;
          $('#display-grand').text(currencySymbol + formatMoney(totGrand));
          var methods = data.payment_methods || [];
          var methodLines = [];
          methods.forEach(function(m) {
            var amt = formatMoney(Number(m.amount));
            if (amt !== '0.00') methodLines.push((m.type || 'Payment') + ': ' + currencySymbol + amt);
          });
          $('#display-methods').html(methodLines.length ? methodLines.join(' &middot; ') : (paid > 0 ? '—' : ''));
          var showPayment = paid > 0 || balance > 0 || changeRet > 0;
          if (showPayment) {
            $('#display-payment-wrap').show();
            $('#display-summary-wrap').hide();
            $('#display-grand-end').text(currencySymbol + formatMoney(totGrand));
            if (changeRet > 0) {
              $('#display-change-row').show();
              $('#display-change').text(currencySymbol + formatMoney(changeRet));
            } else {
              $('#display-change-row').hide();
            }
          } else {
            $('#display-payment-wrap').hide();
            $('#display-summary-wrap').show();
          }
        } else {
          tbody.append('<tr><td colspan="4" class="customer-display-empty"><div class="icon"><i class="fa fa-shopping-cart"></i></div>Ready for items</td></tr>');
          $('#display-summary-wrap').hide();
          $('#display-payment-wrap').hide();
          $('#display-change-row').hide();
        }
      }).fail(function() { });
    }
    poll();
    setInterval(poll, 350);
  </script>
</body>
</html>
