<main class="main-content main-content position-relative max-height-vh-100 h-100 border-radius-lg " id="main" style="display:none;">
    <nav class="navbar navbar-main navbar-expand-lg position-sticky mt-4 top-1 px-0 mx-4 shadow-none border-radius-xl z-index-sticky" id="navbarBlur" data-scroll="true">
      <div class="container-fluid py-1 px-3">
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb bg-transparent mb-0 pb-0 pt-1 px-0 me-sm-6 me-5">
            <li class="breadcrumb-item text-sm text-dark active" aria-current="page">Activity Event</li>
          </ol>
        </nav>
        <div class="sidenav-toggler sidenav-toggler-inner d-xl-block d-none ">
          <a href="javascript:;" class="nav-link text-body p-0">
            <div class="sidenav-toggler-inner">
              <i class="sidenav-toggler-line"></i>
              <i class="sidenav-toggler-line"></i>
              <i class="sidenav-toggler-line"></i>
            </div>
          </a>
        </div>
        <div class="collapse navbar-collapse mt-sm-0 mt-2 me-md-0 me-sm-4" id="navbar">
          <div class="ms-md-auto pe-md-3 d-flex align-items-center">
          </div>
          <ul class="navbar-nav  justify-content-end">
            <li class="nav-item">
              <a onclick="settings_profile()" class="nav-link text-body p-0 position-relative" >
                <i class="material-icons me-sm-1">
              account_circle
              </i>
              </a>
            </li>
            <li class="nav-item d-xl-none ps-3 d-flex align-items-center">
              <a href="javascript:;" class="nav-link text-body p-0" id="iconNavbarSidenav">
                <div class="sidenav-toggler-inner">
                  <i class="sidenav-toggler-line"></i>
                  <i class="sidenav-toggler-line"></i>
                  <i class="sidenav-toggler-line"></i>
                </div>
              </a>
            </li>
            <li class="nav-item px-3">
              <a onclick="signout()"  class="nav-link text-body p-0">
                <i class="material-icons cursor-pointer">
              logout
            </i>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <!-- content -->
    <div class="container-fluid my-3 py-3">
      <div class="row" id="userinfo" style="display:none;">
        <div class="col-12">
        <div class="card ">
          <div class="card-header pb-0">
              <div class="d-lg-flex">
                <div>
                  <h5 class="mb-0">New Activity</h5>
                  <p class="text-sm mb-0">

                  </p>
                </div>
                <div class="ms-auto my-auto mt-lg-0 mt-4">
                  <div class="ms-auto my-auto">
                    <a href="javascript:back_to_users_list();" class="btn bg-gradient-info btn-sm mb-0"><i class="ms-n2 mb-1 material-icons text-lg">arrow_back_ios_new</i>&nbsp; BACK TO Activity LIST</a>
                  </div>
                </div>
              </div>
            </div>
          <div class="card-body pt-0">
            <div class="row">
              <div class="col-5">
                <div name="newuser" class="input-group input-group-static">
                  <label>ชื่อกิจกรรม</label>
                  <i class="material-icons text-xs text-danger hidden">error</i>
                  <input name="Activity" type="text" class="form-control" placeholder="ชื่อ-สกุล" data-in="name" data-check="true">
                </div>
              </div>
              <div class="col-3">
                <div name="newuser" class="input-group input-group-static">
                  <label>วันที่เริ่ม</label>
                  <i class="material-icons text-xs text-danger hidden">error</i>
                  <input name="Activity"  type="date" class="form-control"  data-in="datetime_s" data-check="true">
                </div>
              </div>
              <div class="col-3">
                <div name="newuser" class="input-group input-group-static">
                  <label>วันสิ้นสุด</label>
                  <i class="material-icons text-xs text-danger hidden">error</i>
                  <input  name="Activity" type="date" class="form-control" data-in="datetime_n" data-check="true">
                </div>
              </div>
            </div>
            <div class="row mt-2">
              <div class="col-12">
                <div name="newuser" class="input-group input-group-static">
                  <label>รายละเอียด</label>
                  <i class="material-icons text-xs text-danger hidden">error</i>
                  <textarea name="Activity" data-in="details" class="form-control" rows="4" cols="50"></textarea>
                </div>
              </div>
              </div>
            <div class="row mt-4">
                <div class="col-6" style="text-align:right;">
                  <button onclick="newActivity()"type="button"  class="btn btn-outline-success">บันทึก</button>
                </div>
              </div>
          </div>
          </div>
        </div>
      </div>

      <div class="row" id="editActivity" style="display:none;">
        <div class="col-12">
        <div class="card" >
          <div class="card-header pb-0">
              <div class="d-lg-flex">
                <div>
                  <h5 class="mb-0">Edit Activity</h5>
                  <p class="text-sm mb-0">
                  </p>
                </div>
                <div class="ms-auto my-auto mt-lg-0 mt-4">
                  <div class="ms-auto my-auto">
                    <a href="javascript:back_to_users_list();" class="btn bg-gradient-info btn-sm mb-0"><i class="ms-n2 mb-1 material-icons text-lg">arrow_back_ios_new</i>&nbsp; BACK TO Activity LIST</a>
                  </div>
                </div>
              </div>
            </div>
          <div class="card-body pt-0">
            <div class="row">
              <div class="col-5">
                <div name="newuser" class="input-group input-group-static">
                  <label>ชื่อกิจกรรม</label>
                  <i class="material-icons text-xs text-danger hidden">error</i>
                  <input type="text" id="edit_name" name="edit_Activity" class="form-control"  data-in="name" data-check="true">
                </div>
              </div>
              <div class="col-3">
                <div name="newuser" class="input-group input-group-static">
                  <label>วันที่เริ่ม</label>
                  <i class="material-icons text-xs text-danger hidden">error</i>
                  <input   type="date" id="edit_datetime_s" name="edit_Activity" class="form-control" data-in="datetime_s" data-check="true">
                </div>
              </div>
              <div class="col-3">
                <div name="newuser" class="input-group input-group-static">
                  <label>วันสิ้นสุด</label>
                  <i class="material-icons text-xs text-danger hidden">error</i>
                  <input   type="date" id="edit_datetime_n" name="edit_Activity" class="form-control"  data-in="datetime_n" data-check="true">
                </div>
              </div>
            </div>
            <div class="row mt-2">
              <div class="col-12">
                <div name="newuser" class="input-group input-group-static">
                  <label>รายละเอียด</label>
                  <i class="material-icons text-xs text-danger hidden">error</i>
                  <textarea id="edit_details" name="edit_Activity" class="form-control" data-in="details" rows="4" cols="50"></textarea>
                </div>
              </div>
              </div>
            <div class="row mt-4">
                <div class="col-6" style="text-align:right;">
                  <button onclick="Activity_edit()"type="button"  class="btn btn-outline-success">บันทึก</button>
                </div>
              </div>
          </div>
          </div>
        </div>
      </div>

      <div class="row " id="users_list">
        <div class="col-12">
          <div class="card">
            <div class="card-header pb-0">
                          <div class="d-lg-flex">
                            <div>
                              <h5 class="mb-0">All Activity</h5>
                              <p class="text-sm mb-0">
                                รายชื่อกิจกรรม
                              </p>
                            </div>
                            <div class="ms-auto my-auto mt-lg-0 mt-4">
                              <div class="ms-auto my-auto ">
                                <a href="javascript:add_new_user();" class="btn bg-gradient-info btn-sm mb-0"><i class="ms-n1  mb-1 material-icons text-lg">add_circle</i>&nbsp; New Activity</a>
                              </div>
                            </div>
                          </div>
                        </div>
            <div class="table-responsive">
              <table class="table align-items-center mb-0" id="user_list">
                <thead>
                  <tr>
                    <th class="text-uppercase text-xxs font-weight-bolder opacity-7">Name</th>
                    <th class="text-uppercase text-xxs font-weight-bolder opacity-7 ps-2">รายละเอียด</th>
                    <th class="text-uppercase text-xxs font-weight-bolder opacity-7 ps-2">วันเริ่ม</th>
                    <th class="text-center text-uppercase text-xxs font-weight-bolder opacity-7">วันสิ้นสุด</th>
                    <th class="text-center text-uppercase text-xxs font-weight-bolder opacity-7">edit</th>
                  </tr>
                </thead>
                <tbody id="mytd">
                </tbody>
              </table>
              <nav aria-label="..." class="ms-3">
                <hr class="horizontal dark">
                <ul class="pagination " id="page_item">

                </ul>
              </nav>
            </div>
          </div>
        </div>
      </div>


  </main>