<?php 
include_once('../header.php');
include_once(ROOT_PATH.'language/'.$lang_code_global.'/lang_unit_report.php');
if(!check_login()){
  header("Location: " . WEB_URL . "logout.php");
  die();
}
$currentYear = date('Y');
?>
<!-- Content Header -->
<section class="content-header">
  <h1 style="display:flex;align-items:center;gap:10px;">
    <i class="fa fa-building-o"></i> <?= $_data['text_1']; ?>
  </h1>
  <ol class="breadcrumb">
    <li>
      <a href="<?= WEB_URL?>dashboard.php">
        <i class="fa fa-dashboard"></i> <?= $_data['home_breadcam']; ?>
      </a>
    </li>
    <li class="active">
      <a href="<?= WEB_URL?>report/unit_report.php"><?= $_data['text_2']; ?></a>
    </li>
    <li class="active"><?= $_data['text_1']; ?></li>
  </ol>
</section>

<!-- Styles (friendly + compact) -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
  :root{
    --ink:#0f172a; --ink-2:#334155; --muted:#64748b; --line:#e5e7eb;
    --soft:#f8fafc; --soft2:#eef2ff; --card:#ffffff;
    --brand:#2563eb; --ok:#16a34a; --warn:#d97706; --danger:#dc2626;
  }
  .content-wrapper, .box, label, .btn, input, select {
    font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    color:var(--ink-2);
  }

  .box.box-success{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 12px 32px rgba(2,6,23,.08);
  }
  .box .box-header{
    background:linear-gradient(135deg, var(--soft), var(--soft2));
    border-bottom:1px solid var(--line);
    padding:14px 16px;
    display:flex; align-items:center; justify-content:space-between; gap:12px;
  }
  .box .box-title{ margin:0; font-weight:600; color:var(--ink); letter-spacing:.1px; }
  .box .box-body{ padding:16px; }

  .form-grid{ display:grid; grid-template-columns:repeat(12,1fr); grid-gap:12px; }
  .col-span-6{ grid-column:span 6; }
  .col-span-4{ grid-column:span 4; }
  .col-span-3{ grid-column:span 3; }
  .col-span-12{ grid-column:span 12; }
  @media (max-width: 991px){
    .col-span-6,.col-span-4,.col-span-3{ grid-column:span 12; }
  }

  .form-control{
    border:1px solid var(--line);
    border-radius:10px;
    height:38px;
    box-shadow:none;
  }
  .form-control:focus{
    border-color:#93c5fd;
    box-shadow:0 0 0 3px rgba(59,130,246,.15);
  }
  label{ font-weight:600; color:var(--ink); }

  .hint{ color:var(--muted); font-size:12px; margin-top:4px; }

  .box-footer{
    border-top:1px dashed var(--line);
    padding:12px 16px;
    display:flex; gap:8px; justify-content:flex-end; align-items:center;
    flex-wrap: wrap;
  }

  .btn{ border:none; font-weight:600; border-radius:10px; }
  .btn-compact{ padding:6px 12px; font-size:12px; line-height:1.25; }
  .btn-primary{ background:var(--brand); color:#fff; }
  .btn-success{ background:var(--ok); color:#fff; }
  .btn-warning{ background:#f59e0b; color:#fff; }
  .btn-soft{ background:#fff; border:1px solid var(--line); color:var(--ink-2); }
  .btn:hover{ filter:brightness(.97); }
  .btn + .btn{ margin-left:6px; }

  .line{
    border:0; height:1px;
    background:linear-gradient(90deg, transparent, var(--line), transparent);
    margin:0 16px 8px;
  }

  .pill{
    display:inline-flex; align-items:center; gap:8px;
    padding:6px 10px; border:1px solid var(--line); border-radius:999px;
    background:#fff; color:var(--ink-2);
  }
</style>

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

      <div class="box box-success">
        <div class="box-header">
          <h3 class="box-title"><i class="fa fa-filter"></i> <?= $_data['text_3']; ?></h3>
          <div class="pill">
            <i class="fa fa-info-circle"></i>
            <span style="font-size:12px;">
              Status is optional. If you leave it blank, the report shows all units.
              Choosing a month limits results to that month; otherwise the report shows
              free dates for the next 6 months (or all booked dates for occupied view).
              Use the year picker with the “All Year — Available &amp; Booked” button for a full Jan–Dec view.
            </span>
          </div>
        </div>

        <div class="box-body">
          <div class="form-grid">
            <!-- Status (optional) -->
            <div class="col-span-6">
              <label for="ddlUStatus"><?= $_data['text_4']; ?> :</label>
              <select name="ddlUStatus" id="ddlUStatus" class="form-control">
                <option value=""><?= $_data['text_5']; ?> (optional)</option>
                <option value="vacant">Available</option>
                <option value="occupied">Occupied</option>
                <!-- <option value="all">All</option> -->
              </select>
              <div class="hint">
                Leave blank to include all units.
              </div>
            </div>

            <!-- Month (yyyy-mm) -->
            <div class="col-span-6">
              <label for="reportMonth">Month (optional):</label>
              <input type="month" id="reportMonth" class="form-control" />
              <div class="hint">
                If selected: Available shows free dates within that month; Occupied shows booked dates within that month.
              </div>
            </div>

            <!-- Year picker for All-Year view -->
            <div class="col-span-6">
              <label for="reportYear">Year (for “All Year” view):</label>
              <select id="reportYear" class="form-control">
                <?php for($y=$currentYear-4;$y<=$currentYear+4;$y++): ?>
                  <option value="<?= $y ?>" <?= $y==$currentYear?'selected':''; ?>><?= $y ?></option>
                <?php endfor; ?>
              </select>
              <div class="hint">
                Used by the “All Year — Available &amp; Booked” button to load Jan–Dec of the selected year.
              </div>
            </div>
          </div>
        </div>

        <hr class="line">

        <div class="box-footer">
          <button type="button" class="btn btn-soft btn-compact" onclick="clearFilters()">
            <i class="fa fa-eraser"></i> Clear
          </button>

          <!-- Quick: All Units (no filters) -->
          <button type="button" class="btn btn-primary btn-compact" onclick="openAllUnits()">
            <i class="fa fa-list"></i> All Booked and Available
          </button>

          <!-- All Year — Available & Booked (forces Jan–Dec of the selected year) -->
          <button type="button" class="btn btn-warning btn-compact" onclick="openAllYearBoth()">
            <i class="fa fa-calendar"></i> All Year — Available &amp; Booked
          </button>

          <input type="button" onclick="getUnitInfo()" value="<?= $_data['submit']; ?>" class="btn btn-success btn-compact"/>
        </div>
      </div>

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

<script type="text/javascript">
  function clearFilters(){
    document.getElementById('ddlUStatus').value = '';
    document.getElementById('reportMonth').value = '';
    // keep year as-is
  }

  function openAllUnits(){
    // Open a general view (no filters)
    window.open('<?= WEB_URL;?>report/unit_status_info.php?status=all', '_blank');
  }

  // Open all-year view (available & booked) for all units, using the selected year.
  function openAllYearBoth(){
    var yEl = document.getElementById('reportYear');
    var chosenYear = (yEl && yEl.value) ? yEl.value : (new Date()).getFullYear().toString();

    // Pass explicit Jan–Dec bounds so the report can fetch all 12 months.
    const url = '<?= WEB_URL;?>report/unit_status_info.php'
              + '?status=all'
              + '&mode=year-both'              // hint for default UI mode
              + '&year=' + encodeURIComponent(chosenYear)
              + '&from=' + chosenYear + '-01-01'
              + '&to='   + chosenYear + '-12-31';
    window.open(url, '_blank');
  }

  function getUnitInfo(){
    var status = (document.getElementById('ddlUStatus').value || '').trim(); // optional
    var month  = (document.getElementById('reportMonth').value || '').trim(); // yyyy-mm, optional

    // Build base URL
    var url = '<?= WEB_URL;?>report/unit_status_info.php';

    // If status is chosen, include it + occ; otherwise omit both to default to "all"
    var params = [];
    if (status) {
      params.push('status=' + encodeURIComponent(status));
      var occ = (status === 'occupied') ? 'occupied' : 'available';
      params.push('occ=' + encodeURIComponent(occ));
    }

    if (month) {
      params.push('month=' + encodeURIComponent(month));
    }

    if (params.length > 0) {
      url += '?' + params.join('&');
    }

    window.open(url, '_blank');
  }
</script>

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