<!DOCTYPE html>
<html lang="<%= lang || 'id' %>">
<head>
  <meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">
  <title><%= t('admin.nav.cashiers', 'Kasir') %> | <%= company %></title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
  <link rel="stylesheet" href="/css/admin.css">
</head>
<body>
<%- include('partials/sidebar', { activePage: 'cashiers', company }) %>

<div class="mw">
  <div class="topbar">
    <div class="tb-title">
      <button class="hb-menu" onclick="toggleSidebar()"><i class="bi bi-list"></i></button>
      <i class="bi bi-person-vcard"></i>
      <span><%= t('admin.nav.cashiers', 'Kasir') %></span>
    </div>
    <div class="tb-right">
      <span class="adm-badge">
        <i class="bi bi-person-fill"></i> 
        <%= (typeof session !== 'undefined' && session.isCashier) ? t('admin.role.cashier', 'Kasir') : t('admin.role.admin', 'Admin') %>
      </span>
      <button class="btn btn-p btn-sm" onclick="openModal('addCashierModal')"><i class="bi bi-plus-lg"></i> <%= t('admin.cashiers.add', 'Tambah Kasir') %></button>
    </div>
  </div>

  <div class="page">
    <% if (msg) { %>
      <div class="alert alert-<%= msg.type==='error'?'d':'s' %>"><%= msg.text %></div>
    <% } %>

    <div class="card">
      <div class="card-hd">
        <h6><i class="bi bi-list-ul"></i> <%= t('admin.cashiers.list', 'Daftar Petugas Kasir') %></h6>
      </div>
      <div class="tbl-wrap">
        <table class="dtbl">
          <thead>
            <tr>
              <th><%= t('admin.cashiers.table.name', 'Nama') %></th>
              <th><%= t('admin.cashiers.table.username', 'Username') %></th>
              <th><%= t('admin.cashiers.table.password', 'Password') %></th>
              <th><%= t('admin.cashiers.table.phone', 'No. HP') %></th>
              <th><%= t('admin.cashiers.table.status', 'Status') %></th>
              <th><%= t('admin.cashiers.table.actions', 'Aksi') %></th>
            </tr>
          </thead>
          <tbody>
            <% if (cashiers.length === 0) { %>
              <tr><td colspan="6" class="text-center text-muted" style="padding:20px"><%= t('admin.cashiers.empty', 'Belum ada data kasir.') %></td></tr>
            <% } else { %>
              <% cashiers.forEach(c => { %>
                <tr>
                  <td><strong><%= c.name %></strong></td>
                  <td><code><%= c.username %></code></td>
                  <td><span class="text-muted"><%= c.password %></span></td>
                  <td><%= c.phone || '-' %></td>
                  <td>
                    <span class="badge <%= c.is_active ? 'bs' : 'bd' %>">
                      <%= c.is_active ? t('common.active', 'Aktif') : t('common.inactive', 'Nonaktif') %>
                    </span>
                  </td>
                  <td>
                    <div class="d-flex gap-2">
                      <button class="btn btn-g btn-icon btn-sm" onclick='editCashier(<%- JSON.stringify(c) %>)'><i class="bi bi-pencil"></i></button>
                      <form action="/admin/cashiers/<%= c.id %>/delete" method="POST" onsubmit="return confirm(I18N.confirmDeleteCashier)">
                        <button type="submit" class="btn btn-d btn-icon btn-sm"><i class="bi bi-trash"></i></button>
                      </form>
                    </div>
                  </td>
                </tr>
              <% }) %>
            <% } %>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<!-- Modal Tambah -->
<div class="mo" id="addCashierModal">
  <div class="mb">
    <form action="/admin/cashiers" method="POST">
      <div class="mh"><span class="mt"><%= t('admin.cashiers.modal.add_title', 'Tambah Kasir Baru') %></span><button type="button" class="mc" onclick="closeModal('addCashierModal')">&times;</button></div>
      <div class="mbody">
        <div class="fg"><label class="fl"><%= t('admin.cashiers.form.full_name', 'Nama Lengkap') %></label><input type="text" name="name" class="fc" required></div>
        <div class="fg"><label class="fl"><%= t('admin.cashiers.form.login_username', 'Username Login') %></label><input type="text" name="username" class="fc" required></div>
        <div class="fg"><label class="fl"><%= t('admin.cashiers.form.password', 'Password') %></label><input type="text" name="password" class="fc" required></div>
        <div class="fg"><label class="fl"><%= t('admin.cashiers.form.phone', 'No. HP') %></label><input type="text" name="phone" class="fc" placeholder="<%= t('admin.cashiers.form.phone_placeholder', 'Contoh: 08123456789') %>"></div>
      </div>
      <div class="mf">
        <button type="button" class="btn btn-g" onclick="closeModal('addCashierModal')"><%= t('common.cancel', 'Batal') %></button>
        <button type="submit" class="btn btn-p"><%= t('common.save', 'Simpan') %></button>
      </div>
    </form>
  </div>
</div>

<!-- Modal Edit -->
<div class="mo" id="editCashierModal">
  <div class="mb">
    <form id="editForm" method="POST">
      <div class="mh"><span class="mt"><%= t('admin.cashiers.modal.edit_title', 'Edit Data Kasir') %></span><button type="button" class="mc" onclick="closeModal('editCashierModal')">&times;</button></div>
      <div class="mbody">
        <div class="fg"><label class="fl"><%= t('admin.cashiers.form.full_name', 'Nama Lengkap') %></label><input type="text" name="name" id="e-name" class="fc" required></div>
        <div class="fg"><label class="fl"><%= t('admin.cashiers.form.login_username', 'Username Login') %></label><input type="text" name="username" id="e-username" class="fc" required></div>
        <div class="fg"><label class="fl"><%= t('admin.cashiers.form.password', 'Password') %></label><input type="text" name="password" id="e-password" class="fc" required></div>
        <div class="fg"><label class="fl"><%= t('admin.cashiers.form.phone', 'No. HP') %></label><input type="text" name="phone" id="e-phone" class="fc"></div>
        <div class="fg">
          <label class="fl"><%= t('admin.cashiers.form.account_status', 'Status Akun') %></label>
          <select name="is_active" id="e-status" class="fs">
            <option value="1"><%= t('common.active', 'Aktif') %></option>
            <option value="0"><%= t('common.inactive', 'Nonaktif') %></option>
          </select>
        </div>
      </div>
      <div class="mf">
        <button type="button" class="btn btn-g" onclick="closeModal('editCashierModal')"><%= t('common.cancel', 'Batal') %></button>
        <button type="submit" class="btn btn-p"><%= t('admin.cashiers.save_changes', 'Simpan Perubahan') %></button>
      </div>
    </form>
  </div>
</div>

<script>
const I18N = {
  confirmDeleteCashier: "<%= t('admin.cashiers.confirm_delete', 'Hapus kasir ini?') %>"
};

function openModal(id) { document.getElementById(id).classList.add('show'); }
function closeModal(id) { document.getElementById(id).classList.remove('show'); }
function editCashier(c) {
  document.getElementById('editForm').action = '/admin/cashiers/' + c.id + '/update';
  document.getElementById('e-name').value = c.name;
  document.getElementById('e-username').value = c.username;
  document.getElementById('e-password').value = c.password;
  document.getElementById('e-phone').value = c.phone || '';
  document.getElementById('e-status').value = c.is_active;
  openModal('editCashierModal');
}
</script>
</body>
</html>
