<?php
include_once('../header.php');
include_once(ROOT_PATH.'language/'.$lang_code_global.'/lang_rented_report.php');
if (!check_login()) {
  header("Location: " . WEB_URL . "logout.php");
  die();
}
?>
<!-- Page Header -->
<section class="content-header">
  <h1 style="display:flex;align-items:center;gap:10px;margin:0;">
    <i class="fa fa-file-text-o"></i> <?= $_data['text_1']; ?>
  </h1>
  <ol class="breadcrumb" style="margin-top:8px;">
    <li>
      <a href="<?= WEB_URL ?>dashboard.php">
        <i class="fa fa-dashboard"></i> <?= $_data['text_1']; ?>
      </a>
    </li>
    <li class="active">
      <a href="<?= WEB_URL ?>report/rented_report.php"><?= $_data['text_2']; ?></a>
    </li>
    <li class="active"><?= $_data['text_1']; ?></li>
  </ol>
</section>

<!-- Friendly Styles -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
<style>
  :root{
    /* Muted, eye-comfy palette */
    --bg-soft:#f9fafb;      /* gray-50 */
    --bg-soft2:#f3f4f6;     /* gray-100 */
    --ink:#111827;          /* gray-900 */
    --ink2:#374151;         /* gray-700 */
    --muted:#6b7280;        /* gray-500 */
    --line:#e5e7eb;         /* gray-200 */
    --brand:#475569;        /* slate-600 */
    --ok:#166534;           /* green-800 */
    --ok-ghost:#e7f5ec;     /* soft green bg */
    --shadow:0 10px 28px rgba(2,6,23,.08);
  }
  .content-wrapper, .box, .modal-content, .table, label, input, select, button {
    font-family:'Inter',system-ui,Segoe UI,Roboto,Helvetica,Arial;
    color:var(--ink2);
  }
  .content-header > h1 { font-weight:800; color:var(--ink); letter-spacing:.2px; }

  /* Card */
  .card {
    background:#fff; border:1px solid var(--line); border-radius:14px;
    box-shadow:var(--shadow); overflow:hidden;
  }
  .card-header {
    display:flex; justify-content:space-between; align-items:center; gap:10px;
    background:var(--bg-soft2); border-bottom:1px solid var(--line); padding:14px 16px;
  }
  .card-title { margin:0; font-weight:800; color:var(--ink); letter-spacing:.2px; }
  .card-sub { color:var(--muted); font-size:12px; }

  .card-body { padding:16px; }
  .row-gap { display:grid; grid-template-columns: 1fr 220px; gap:14px; }
  @media (max-width: 720px) { .row-gap { grid-template-columns: 1fr; } }

  /* Form controls */
  .label-strong { font-weight:700; color:#111827; margin-bottom:6px; display:block; }
  .select, .input {
    width:100%; border:1px solid var(--line); border-radius:12px;
    padding:10px 12px; background:#fff; outline:none;
  }
  .select:focus, .input:focus {
    border-color:#c7d2fe; box-shadow:0 0 0 3px rgba(99,102,241,.12);
  }
  .hint { font-size:12px; color:var(--muted); margin-top:6px; }

  /* Buttons */
  .actions { display:flex; gap:8px; align-items:center; justify-content:flex-end; }
  .btn {
    border-radius:999px; padding:9px 16px; font-weight:700; letter-spacing:.2px;
    border:1px solid var(--line); background:#fff; color:var(--ink2);
  }
  .btn:hover { background:#f9fafb; }
  .btn-primary {
    background:#eef2f7; color:#1f2937; border-color:var(--line);
  }
  .btn-success {
    background:var(--ok-ghost); color:var(--ok); border-color:#c7f0d6;
  }
  .btn-success:hover { filter:brightness(.98); }
</style>

<!-- Main content -->
<section class="content">
  <div class="row">
    <div class="col-md-12">

      <div class="card">
        <div class="card-header">
          <h3 class="card-title">
            <i class="fa fa-filter"></i> <?= $_data['text_3']; ?>
          </h3>
          <div class="card-sub">Generate a quick tenant status report</div>
        </div>

        <!-- Form (logic unchanged) -->
        <form onsubmit="return validateMe();" action="#" method="post" enctype="multipart/form-data">
          <div class="card-body">
            <div class="row-gap">
              <!-- Status select -->
              <div>
                <label for="ddlRStatus" class="label-strong"><?= $_data['text_4']; ?>:</label>
                <select name="ddlRStatus" id="ddlRStatus" class="select">
                  <option value="">-- <?= $_data['text_5']; ?> --</option>
                  <option value="active"><?= $_data['text_active']; ?></option>
                  <option value="inactive">Archived</option>
                  <option value="all">All</option>
                </select>
                <div class="hint">Choose the status and we’ll open a printable report in a new tab.</div>
              </div>

              <!-- Actions -->
              <div class="actions" style="align-self:end;">
                <button type="button" onclick="getTenantInfo()" class="btn btn-success">
                  <i class="fa fa-file-text-o"></i> <?= $_data['submit']; ?>
                </button>
              </div>
            </div>
          </div>
        </form>

      </div>

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

<script type="text/javascript">
  // Keep behavior identical: open the report in a new tab
  function getTenantInfo(){
    var v = document.getElementById('ddlRStatus').value || '';
    window.open('<?= WEB_URL; ?>report/tenant_info.php?status=' + encodeURIComponent(v), '_blank');
  }

  // Minor UX sugar: submit on Enter if focused on the select
  (function(){
    var s = document.getElementById('ddlRStatus');
    if(!s) return;
    s.addEventListener('keydown', function(e){
      if(e.key === 'Enter'){ getTenantInfo(); }
    });
  })();
</script>

<?php include_once('../footer.php'); ?>
