<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title><?php echo APP_NAME ; ?></title>

  <!-- Bootstrap CSS -->
  <link href="<?php echo Util::asset('css/bootstrap.min.css'); ?>" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
  <link rel="stylesheet" href="<?php echo Util::asset('css/jquery-ui.css'); ?>">
  <link href="<?php echo Util::asset('css/select2.min.css'); ?>" rel="stylesheet" />
  <script type="text/javascript" src="<?php echo Util::asset('js/jquery-3.7.1.min.js'); ?>"></script>
  <script type="text/javascript" src="<?php echo Util::asset('js/jquery-ui.min.js'); ?>"></script>
  <script type="text/javascript" src="<?php echo Util::asset('js/sweetalert2@11.js'); ?>"></script>
  <script type="text/javascript" src="<?php echo Util::asset('js/select2.min.js'); ?>"></script>
  <script type="text/javascript" src="<?php echo Util::asset('js/sbg-util.js'); ?>"></script>
  <script type="text/javascript" src="<?php echo Util::asset('js/sbg-upload.js'); ?>"></script>
  <link type="text/css" rel="stylesheet" href="<?php echo Util::asset('css/fontawesome-free/css/all.min.css'); ?>">
  <style>
    body {
      background-color: #eb8015;
      padding: 15px;
    }

    .meeting-card {
      max-width: 500px;
      margin: auto;
      border-radius: 20px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      background-color: #fff;
      padding: 20px;
    }

    .history-container {
      max-width: 600px;
      margin: auto;
      background: #fff;
      border-radius: 20px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      padding: 20px;
      height: calc(100vh - 30px);
      overflow-y: auto;
    }

    .meeting-card {
      max-width: 500px;
      margin: auto;
      border-radius: 10px;
      /* box-shadow: 0 2px 10px rgba(0,0,0,0.1); */
      background-color: #eb8015;
      padding: 5px;
      color: #fff;
      margin-bottom: 20px;
    }

    .history-card {
      position: relative;
      background: #fff;
      border-radius: 10px;
      padding: 12px 12px 45px;
      /* extra bottom padding for button space */
      margin-bottom: 10px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .history-card .btn-edit {
      position: absolute;
      bottom: 10px;
      right: 10px;
    }

    .history-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 600;
      color: #0d6efd;
    }

    .history-date {
      color: #555;
      font-size: 0.85rem;
      white-space: nowrap;
    }

    .history-filter input,
    .history-filter select {
      font-size: 0.9rem;
    }

    /* @media (max-width: 768px) {
        .btn.btn-outline-primary.btn-sm {
        width: 100%;
      }      
    } */
    .status-group {
      background: #f8f9fa;
      border-radius: 10px;
      padding: 10px;
    }

    .status-group h6 {
      font-weight: 600;
      color: #0d6efd;
    }
  </style>
</head>

<body id="sbg-center-panel">
  <div class="history-container">
    <div class="meeting-card">
      <div class="d-flex justify-content-between align-items-center">
        <h5 class="m-0">Schedule List</h5>
        <div>
          <button class="btn btn-light btn-sm" onclick="<?php echo $this->createMenuFunc("Account", "Account", "") ?>">
            <i class="bi bi-person-plus"></i>
          </button>
          <button class="btn btn-light btn-sm" onclick="<?php echo $this->createMenuFunc("Meeting", "Meeting", "") ?>">
            <i class="bi bi-calendar-plus"></i>
          </button>
          <!-- ====== Filter Toggle Button ====== -->
          <button class="btn btn-light btn-sm"
            data-bs-toggle="collapse" data-bs-target="#filterSection"
            aria-expanded="false" aria-controls="filterSection">
            <i class="bi bi-funnel"></i>
          </button>
          <button class="btn btn-light btn-sm" onclick="onLogout();">
            <i class="bi bi-box-arrow-right"></i>
          </button>
        </div>
      </div>
    </div>

    <!-- ====== Collapsible Filter Section ====== -->
    <div class="collapse" id="filterSection">
      <div class="history-filter mb-3 p-2 rounded-3 shadow-sm" style="background-color: #7bacf5;">
        <div class="row g-2 align-items-center">
          <!-- Search -->
          <div class="col-12 col-md-4">
            <input type="text" id="searchInput" class="form-control" placeholder="Search name, agenda, or place">
          </div>

          <!-- Status Filter -->
          <div class="col-6 col-md-3">
            <select id="statusFilter" class="form-select">
              <option value="">All Status</option>
              <option value="0">Follow Up</option>
              <option value="1">Confirmed</option>
              <option value="2">Closed</option>
              <option value="3">KIV</option>
            </select>
          </div>

          <!-- Date Filter -->
          <div class="col-6 col-md-3">
            <input type="date" id="filterDate" class="form-control">
          </div>

          <!-- Clear Button -->
          <div class="col-6 col-md-2 text-end">
            <button class="btn btn-secondary w-100" id="clearFilter" onclick="clearFilter();">
              <i class="bi bi-x-circle"></i> Clear
            </button>
          </div>

          <!-- Filter Button -->
          <div class="col-6 col-md-2 text-end">
            <button class="btn btn-primary w-100" id="submitFilter" onclick="loadScheduleList();">
              <i class="bi bi-funnel"></i> Filter
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- ====== Appointment List ====== -->
    <div id="historyList"></div>

    <script>
      <?php include(PATH_CODE . "js/mobile/mobile.js"); ?>
      <?php include(PATH_CODE . "js/mobile/schedulelist.js"); ?>

      var login_url = "<?php echo Util::convertLink("Login"); ?>";
      var meeting_url = "<?php echo Util::convertLink("Meeting"); ?>";
      var account_url = "<?php echo Util::convertLink("ACcount"); ?>";

      const searchInput = document.getElementById('searchInput');
      const filterStatus = document.getElementById('filterStatus');
      const cards = document.querySelectorAll('.history-card');

      function filterHistory() {
        const search = $('#searchInput').val().toLowerCase();
        // const status = $('#filterStatus').val();
        $('.history-card').each(function() {
          const text = $(this).text().toLowerCase();
          const matchSearch = text.includes(search);
          // const matchStatus = !status || $(this).data('status') === status;
          $(this).toggle(matchSearch);
        });
      }
      $('#searchInput').on('input change', filterHistory);
    </script>

    <script type="text/javascript">
      var schedule_url = "<?php echo Util::convertLink("ScheduleList"); ?>";
      var mobile_signin_url = "<?php echo Util::convertLink("MobileSignIn"); ?>";
      <?php include(PATH_CODE . "js/mobile/schedulelist.js"); ?>
      <?php include(PATH_CODE . "js/mobile/mobilesignin.js"); ?>
      <?php include(PATH_CODE . "js/mobile/meeting/meeting.js"); ?>
    </script>
    <script type="text/javascript" src="<?php echo Util::asset('js/bootstrap.bundle.min.js'); ?>"></script>
</body>

</html>