<?php
/** @var string $title */
/** @var string $flash */
/** @var int    $auto_hide_minutes */
/** @var int    $manage_per_page */
$auto_hide_minutes = isset($auto_hide_minutes) ? (int) $auto_hide_minutes : 30;
$manage_per_page = isset($manage_per_page) ? (int) $manage_per_page : 10;
?>

<style>
  .status-manage-page{
    --status-blue:var(--app-theme-color, #3f51b5);
    --status-blue-dark:var(--app-theme-color, #334296);
    --status-blue-text:var(--app-theme-text-color, #fff);
    --status-text:#1f2937;
    --status-muted:#64748b;
    --status-line:#e2e8f0;
    --status-soft:#f8fafc;
    color:var(--status-text);
    padding-top:1.25rem;
    padding-bottom:2rem;
  }
  .status-manage-page *{ box-sizing:border-box; }
  .status-manage-header{ margin-bottom:1rem; }
  .status-manage-title{
    margin:0;
    color:#111827;
    font-size:1.75rem;
    font-weight:700;
    line-height:1.25;
  }
  .status-manage-note{
    margin:.45rem 0 0;
    color:var(--status-muted);
    font-size:.875rem;
    line-height:1.55;
  }
  .status-manage-note strong{ color:#334155; }
  .status-manage-flash{
    margin-bottom:1rem;
    padding:.75rem 1rem;
    border:1px solid #b7ebcb;
    border-radius:.35rem;
    background:#ecfdf3;
    color:#18733d;
    font-size:.875rem;
  }
  .status-setting-card,
  .status-list-card{
    border:1px solid var(--status-line);
    border-radius:.5rem;
    background:#fff;
    box-shadow:0 8px 22px rgba(15,23,42,.06);
  }
  .status-setting-card{
    margin-bottom:1rem;
    padding:1rem;
  }
  .status-setting-card label{
    display:block;
    margin:0 0 .65rem;
    color:#334155;
    font-size:.875rem;
    font-weight:700;
  }
  .status-setting-row{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:.65rem;
  }
  .status-setting-row input{
    width:130px;
    height:36px;
    padding:.375rem .65rem;
    border:1px solid #d1d3e2;
    border-radius:.2rem;
    background:#fff;
    color:#334155;
    font-size:.875rem;
    box-shadow:none;
  }
  .status-setting-row input:focus{
    outline:0;
    border-color:var(--status-blue);
    box-shadow:0 0 0 .15rem rgba(63,81,181,.18);
  }
  .status-setting-help{
    color:var(--status-muted);
    font-size:.8rem;
  }
  .status-manage-page .status-btn{
    min-height:36px;
    padding:.375rem .75rem;
    border:1px solid transparent;
    border-radius:.2rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.4rem;
    color:#fff;
    font-size:.8125rem;
    font-weight:600;
    line-height:1.4;
    cursor:pointer;
    box-shadow:0 .125rem .25rem rgba(58,59,69,.16);
  }
  .status-btn-save,
  .status-btn-unhide{
    background:var(--status-blue);
    border-color:var(--status-blue);
    color:var(--status-blue-text);
  }
  .status-btn-hide{
    background:#f59e0b;
    border-color:#f59e0b;
  }
  .status-btn-hide-all{
    background:#fc544b;
    border-color:#fc544b;
  }
  .status-manage-page .status-btn:hover,
  .status-manage-page .status-btn:focus{
    color:var(--status-blue-text);
    filter:brightness(.96);
    outline:0;
    box-shadow:0 .2rem .4rem rgba(58,59,69,.24);
  }
  .status-list-card{ overflow:hidden; }
  .status-list-controls{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:.5rem;
    padding:1rem 1rem 0;
    background:#fff;
  }
  .status-filter-group{
    display:flex;
    align-items:stretch;
    flex:1 1 240px;
    max-width:360px;
    min-width:200px;
  }
  .status-filter-group label{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:38px;
    margin:0;
    padding:0 .85rem;
    border:1px solid var(--status-blue);
    border-radius:.25rem 0 0 .25rem;
    background:var(--status-blue);
    color:#fff;
    font-size:.78rem;
    font-weight:600;
    line-height:1;
    letter-spacing:.01em;
    white-space:nowrap;
  }
  .status-filter-group select{
    flex:1 1 auto;
    width:100%;
    height:38px;
    padding:0 2rem 0 .75rem;
    border:1px solid #d1d3e2;
    border-left:0;
    border-radius:0 .25rem .25rem 0;
    background-color:#fff;
    color:#3a3b45;
    font-size:.82rem;
    outline:0;
  }
  .status-filter-group select:focus{
    border-color:#6f7bd9;
    box-shadow:0 0 0 .15rem rgba(63,81,181,.12);
  }
  .status-list-toolbar{
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
    padding:1rem;
    border-bottom:1px solid var(--status-line);
    background:#fff;
  }
  .status-table-wrap{
    width:100%;
    overflow-x:auto;
  }
  .status-manage-table{
    width:100%;
    min-width:720px;
    margin:0;
    border-collapse:collapse;
    color:#334155;
    font-size:.8125rem;
  }
  .status-manage-table th,
  .status-manage-table td{
    padding:.7rem .85rem;
    border-bottom:1px solid var(--status-line);
    text-align:left;
    vertical-align:middle;
  }
  .status-manage-table th{
    background:var(--status-soft);
    color:#475569;
    font-size:.75rem;
    font-weight:700;
    white-space:nowrap;
  }
  .status-manage-table tbody tr:nth-child(even) td{ background:#fbfcfe; }
  .status-manage-table tbody tr:hover td{ background:#f5f8fc; }
  .status-manage-table tbody tr:last-child td{ border-bottom:0; }
  .status-check-cell{
    width:42px;
    text-align:center!important;
  }
  .status-manage-table input[type="checkbox"]{
    width:15px;
    height:15px;
    accent-color:var(--status-blue);
  }
  .status-badge,
  .status-visibility{
    padding:.25rem .55rem;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    font-size:.7rem;
    font-weight:700;
    white-space:nowrap;
  }
  .status-diambil{
    background:#fff3cd;
    color:#8a5a00;
  }
  .status-dikirim{
    background:#ffedd5;
    color:#9a3412;
  }
  .status-hidden{
    background:#dcfce7;
    color:#166534;
  }
  .status-visible{
    background:#e0ecff;
    color:#1d4ed8;
  }
  .status-empty{
    padding:1.5rem!important;
    color:var(--status-muted);
    text-align:center!important;
  }
  .status-manage-loading,
  .status-manage-error{
    padding:2rem 1rem;
    color:var(--status-muted);
    text-align:center;
    font-size:.875rem;
  }
  .status-manage-error{ color:#b42318; }
  .status-pagination{
    min-height:58px;
    padding:.75rem 1rem;
    border-top:1px solid var(--status-line);
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:.75rem;
    background:#fff;
  }
  .status-pagination:empty{ display:none; }
  .status-pagination .pagination{
    float:none!important;
    margin:0!important;
  }
  .status-pagination .page-link{
    min-width:34px;
    min-height:34px;
    padding:.4rem .65rem;
    display:flex;
    align-items:center;
    justify-content:center;
    border-color:#dbe2ea;
    color:var(--status-blue);
    font-size:.8rem;
  }
  .status-pagination .page-item.active .page-link{
    border-color:var(--status-blue);
    background:var(--status-blue);
    color:#fff;
  }
  @media(max-width:767.98px){
    .status-manage-page{ padding-top:1rem; }
    .status-manage-title{ font-size:1.45rem; }
    .status-setting-row{ align-items:stretch; flex-direction:column; }
    .status-setting-row input,
    .status-manage-page .status-btn{ width:100%; }
    .status-filter-group{ flex-basis:100%; max-width:none; }
    .status-list-toolbar{ display:grid; grid-template-columns:1fr; }
  }
</style>

<div class="container-fluid status-manage-page" id="container-wrapper">
  <header class="status-manage-header">
    <h1 class="status-manage-title"><?= htmlspecialchars($title, ENT_QUOTES, 'UTF-8') ?></h1>
    <p class="status-manage-note">
      Atur kartu transaksi yang muncul di <strong>/status-board</strong>.<br>
      Daftar ini hanya memuat transaksi dengan status <strong>Diambil</strong> atau <strong>Dikirim</strong>.
    </p>
  </header>

  <?php if (!empty($flash)): ?>
    <div class="status-manage-flash"><?= htmlspecialchars($flash, ENT_QUOTES, 'UTF-8') ?></div>
  <?php endif; ?>

  <form method="post" action="<?= site_url('status-board/manage/save-auto-hide') ?>" class="status-setting-card">
    <label for="auto_hide_minutes">No. transaksi berstatus Diambil/Dikirim akan otomatis disembunyikan</label>
    <div class="status-setting-row">
      <input
        type="number"
        id="auto_hide_minutes"
        name="auto_hide_minutes"
        min="0"
        max="1440"
        step="1"
        value="<?= (int) $auto_hide_minutes ?>">
      <span class="status-setting-help">menit sebelum kartu disembunyikan dari /status-board</span>
      <button type="submit" class="status-btn status-btn-save">
        <i class="fa fa-save" aria-hidden="true"></i> Simpan Jeda
      </button>
    </div>
  </form>

  <form method="post" id="formManage" class="status-list-card">
    <div class="status-list-controls" aria-label="Filter daftar status board">
      <div class="status-filter-group">
        <label for="statusManageSort">SORT</label>
        <select id="statusManageSort" name="sort">
          <option value="DESC" selected>TERBARU</option>
          <option value="ASC">TERLAMA</option>
        </select>
      </div>
      <div class="status-filter-group">
        <label for="statusManageLimit">LIMIT</label>
        <select id="statusManageLimit" name="limit">
          <?php foreach ([10, 20, 50, 100] as $limitOption): ?>
            <option value="<?= $limitOption ?>"<?= $manage_per_page === $limitOption ? ' selected' : '' ?>><?= $limitOption ?></option>
          <?php endforeach; ?>
        </select>
      </div>
    </div>

    <div class="status-list-toolbar">
      <button type="submit" formaction="<?= site_url('status-board/manage/hide') ?>" class="status-btn status-btn-hide">
        <i class="fa fa-eye-slash" aria-hidden="true"></i> Sembunyikan yang dipilih
      </button>
      <button type="submit" formaction="<?= site_url('status-board/manage/unhide') ?>" class="status-btn status-btn-unhide">
        <i class="fa fa-eye" aria-hidden="true"></i> Tampilkan lagi yang dipilih
      </button>
      <button
        type="submit"
        formaction="<?= site_url('status-board/manage/hide-all') ?>"
        class="status-btn status-btn-hide-all"
        onclick="return confirm('Sembunyikan SEMUA transaksi Diambil/Dikirim dari status board?')">
        <i class="fa fa-times-circle" aria-hidden="true"></i> Sembunyikan semua Diambil &amp; Dikirim
      </button>
    </div>

    <div id="statusManageList" aria-live="polite">
      <div class="status-manage-loading">
        <i class="fa fa-spinner fa-spin" aria-hidden="true"></i> Memuat daftar transaksi...
      </div>
    </div>
  </form>
</div>

<script>
  (function(){
    var endpoint = <?= json_encode(rtrim(site_url('status-board/manage/list'), '/')) ?>;

    window.loadStatusManagePage = function(page){
      page = Math.max(0, parseInt(page, 10) || 0);
      var $target = window.jQuery ? window.jQuery('#statusManageList') : null;
      if (!$target || !$target.length) return;
      var limit = parseInt(document.getElementById('statusManageLimit').value, 10) || <?= (int) $manage_per_page ?>;
      var sort = document.getElementById('statusManageSort').value === 'ASC' ? 'ASC' : 'DESC';

      window.jQuery.ajax({
        type: 'POST',
        url: endpoint + '/' + page,
        data: {page: page, limit: limit, sort: sort},
        beforeSend: function(){
          $target.attr('aria-busy', 'true').html(
            '<div class="status-manage-loading"><i class="fa fa-spinner fa-spin" aria-hidden="true"></i> Memuat daftar transaksi...</div>'
          );
        },
        success: function(html){
          $target.attr('aria-busy', 'false').html(html);
        },
        error: function(){
          $target.attr('aria-busy', 'false').html(
            '<div class="status-manage-error">Daftar transaksi gagal dimuat. Silakan coba lagi.</div>'
          );
        }
      });
    };

    document.addEventListener('change', function(event){
      if (!event.target) return;
      if (event.target.id === 'statusManageSort' || event.target.id === 'statusManageLimit') {
        window.loadStatusManagePage(0);
        return;
      }
      if (event.target.id !== 'checkAll') return;
      document.querySelectorAll('#formManage input[name="selected[]"]').forEach(function(checkbox){
        checkbox.checked = event.target.checked;
      });
    });

    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', function(){ window.loadStatusManagePage(0); });
    } else {
      window.loadStatusManagePage(0);
    }
  })();
</script>
