<?php
	require_once $_SERVER['DOCUMENT_ROOT'] . "/check_session.php";
	require_once $_SERVER['DOCUMENT_ROOT'] . "/connection.php";
	require_once $_SERVER['DOCUMENT_ROOT'] . "/functions.php";

	$UserID = sanitize_input($_SESSION['UserID']);
?>

<!DOCTYPE html>
<html lang="en" data-bs-theme="light">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>GSO : Asset & Procurement Management System (APMS)</title>
  <link rel="icon" type="image/png" href="/assets/logo/fav.png">

  <!-- Fonts / Icons / CSS -->
  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">

  <!-- Core Layout / Sidebar CSS -->
  <style>
    /* Global */
    :root{--primary:#0d6efd;--radius:12px;--navbar-h:0px;--sidebar-w:260px;--sidebar-w-collapsed:70px;--transition-fast:.2s ease;--transition-slow:.35s ease;--bg:#f8f9fa;--surface:#ffffff;--text:#212529;--muted:#6c757d;--border:rgba(0,0,0,.08);--shadow-1:0 10px 30px rgba(0,0,0,.06),0 2px 8px rgba(0,0,0,.04);--footer-h:60px;--left-pane-h:70vh;}
    html[data-bs-theme="dark"]{--bg:#1e1e2f;--surface:#23233a;--text:#f5f5f5;--muted:#b9b9c9;--border:rgba(255,255,255,.08);--shadow-1:0 10px 30px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.4);}
    html,body{width:100%;height:100%;margin:0;padding:0;background:var(--bg);color:var(--text);font-family:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";overflow:hidden;}
    .app-shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100dvh;max-height:100dvh;transition:grid-template-columns var(--transition-slow);}
    .app-shell.collapsed{grid-template-columns:var(--sidebar-w-collapsed) 1fr;}
    .app-sidebar{position:relative;height:100dvh;background:var(--surface);border-right:1px solid var(--border);box-shadow:var(--shadow-1);display:flex;flex-direction:column;transition:width var(--transition-slow),padding var(--transition-slow),background var(--transition-fast);padding:0;overflow:visible;}
    .sidebar-topbar{position:relative;flex-shrink:0;display:flex;align-items:flex-start;justify-content:flex-start;padding:.75rem .75rem .5rem .75rem;border-bottom:1px solid var(--border);}
    .sidebar-scroll{flex:1 1 auto;min-height:0;padding:.75rem .75rem .5rem .75rem;overflow-y:auto;overflow-x:visible;padding-right:.5rem;}
    .sidebar-scroll::-webkit-scrollbar{width:4px;}
    .sidebar-scroll::-webkit-scrollbar-track{background:transparent;}
    .sidebar-scroll::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:999px;}
    html[data-bs-theme="dark"] .sidebar-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);}
    .app-shell.collapsed .sidebar-scroll{overflow-y:hidden;}
    .app-shell.collapsed .app-sidebar:hover .sidebar-scroll{overflow-y:auto;}
    .sidebar-bottom{flex-shrink:0;border-top:1px solid var(--border);padding:.75rem .75rem 1rem .75rem;}
    .brand-block{display:flex;align-items:center;gap:.75rem;border-radius:.75rem;padding:0;}
    .brand-ims-box{flex-shrink:0;width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#0d6efd 0%,#6610f2 100%);color:#fff;font-weight:800;font-size:.9rem;line-height:1.2;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(13,110,253,.45);text-align:center;}
    .brand-lines{line-height:1.2;min-width:0;}
    .brand-line-main{font-size:.9rem;font-weight:800;color:var(--text);white-space:nowrap;}
    .brand-line-sub{font-size:.7rem;font-weight:600;color:var(--muted);white-space:nowrap;}
    .app-shell.collapsed .brand-lines{display:none;}
    .app-shell.collapsed .brand-block{justify-content:center;width:100%;}
    .sidebar-toggle{position:absolute;top:50%;right:-16px;transform:translateY(-50%);width:32px;height:32px;padding:0;border:0;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:var(--primary);color:#fff;box-shadow:0 8px 16px rgba(13,110,253,.45);transition:transform var(--transition-fast),box-shadow var(--transition-fast),background var(--transition-fast);cursor:pointer;z-index:1000;}
    .sidebar-toggle:hover{box-shadow:0 12px 24px rgba(13,110,253,.55);}
    .sidebar-toggle i{font-size:16px;line-height:1;}
    .menu-section{margin-bottom:1rem;}
    .menu-heading{display:flex;align-items:flex-end;justify-content:space-between;padding:.5rem .35rem .5rem;margin-bottom:.25rem;}
    .menu-header{font-size:.7rem;color:var(--muted);margin:0;text-transform:uppercase;letter-spacing:.08em;padding:0 .15rem;font-weight:600;}
    .menu .menu-link{position:relative;display:flex;align-items:center;gap:.75rem;padding:.6rem .75rem;border-radius:.6rem;color:var(--text);text-decoration:none;font-weight:600;line-height:1;transition:background var(--transition-fast),color var(--transition-fast),transform var(--transition-fast);cursor:pointer;white-space:nowrap;}
    .menu .menu-link:hover{background:rgba(13,110,253,.10);transform:translateX(2px);}
    .menu .menu-link.active{background:rgba(13,110,253,.15);color:var(--primary);}
    .icon-badge{flex-shrink:0;width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1rem;line-height:1;box-shadow:0 8px 16px rgba(0,0,0,.18);text-shadow:0 1px 2px rgba(0,0,0,.4);}
    .grad-blue{background:linear-gradient(135deg,#0d6efd 0%,#6610f2 100%);}
    .grad-green{background:linear-gradient(135deg,#198754 0%,#20c997 100%);}
    .grad-orange{background:linear-gradient(135deg,#fd7e14 0%,#ffc107 100%);color:#212529;text-shadow:none;}
    .grad-red{background:linear-gradient(135deg,#dc3545 0%,#fd7e14 100%);}
    .grad-cyan{background:linear-gradient(135deg,#0dcaf0 0%,#0d6efd 100%);color:#fff;}
    .grad-purple{background:linear-gradient(135deg,#6f42c1 0%,#d63384 100%);}
    .grad-gray{background:linear-gradient(135deg,#6c757d 0%,#adb5bd 100%);color:#fff;}
    .grad-teal{background:linear-gradient(135deg,#20c997 0%,#0dcaf0 100%);}
    .grad-pink{background:linear-gradient(135deg,#d63384 0%,#fd7e14 100%);}
    .grad-yellow{background:linear-gradient(135deg,#ffc107 0%,#ffe08a 100%);color:#212529;text-shadow:none;}
    .grad-indigo{background:linear-gradient(135deg,#4b0082 0%,#6610f2 100%);}
    .grad-lime{background:linear-gradient(135deg,#84cc16 0%,#22c55e 100%);}
    .grad-brown{background:linear-gradient(135deg,#8b5e3c 0%,#c08457 100%);}
    .grad-sky{background:linear-gradient(135deg,#38bdf8 0%,#60a5fa 100%);}
    .grad-slate{background:linear-gradient(135deg,#334155 0%,#64748b 100%);}
    .label{white-space:nowrap;}
    .app-shell.collapsed .label{display:none;}
    .app-shell.collapsed .menu-heading .menu-header{display:none;}
    .flymenu{position:fixed;min-width:220px;background:var(--surface);border:1px solid var(--border);border-radius:.75rem;box-shadow:var(--shadow-1);padding:.5rem;display:none;z-index:2000;}
    .flymenu .fly-title{font-size:.7rem;font-weight:700;text-transform:uppercase;color:var(--muted);letter-spacing:.05em;padding:.25rem .5rem .5rem;line-height:1.2;white-space:nowrap;}
    .flymenu .fly-link{display:flex;align-items:center;gap:.5rem;padding:.5rem .6rem;border-radius:.5rem;color:var(--text);font-size:.8rem;font-weight:600;text-decoration:none;line-height:1.2;transition:background var(--transition-fast),transform var(--transition-fast);white-space:nowrap;cursor:pointer;}
    .flymenu .fly-link:hover{background:rgba(13,110,253,.10);transform:translateX(2px);}
    .app-main{position:relative;min-width:0;min-height:100dvh;max-height:100dvh;display:flex;flex-direction:column;background:var(--bg);}
    /* #cnt{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:1rem 1rem 1rem;} */
    #cnt{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;}

     /* =================== SPECIFIC — DEPRECIATION RUN ==================== */
  .dep-headline{ text-align:center; font-size:.8rem; line-height:1.4; font-weight:600; }
  .dep-headline .doc-title{ font-size:.85rem; font-weight:700; margin-top:.5rem; text-transform:uppercase; }
  .dep-formgrid{ font-size:.75rem; line-height:1.3; }
  .dep-formgrid .label{ font-weight:600; white-space:nowrap; }
  .dep-bigtable th, .dep-bigtable td{border:1px solid #000; font-size:.7rem; line-height:1.2; padding:.4rem .5rem; vertical-align:top;}
  .dep-bigtable th{ font-weight:600; text-align:center; }
  .dep-signatures td{border:1px solid #000; font-size:.7rem; line-height:1.2; padding:.5rem .5rem; vertical-align:top;}
  .dep-signatures .sig-label{ font-weight:600; font-size:.7rem; }
  .dep-signatures .sig-role{ font-size:.65rem; }
  .journal-box{border:1px solid rgba(0,0,0,.2); border-radius:8px; background:#fff; padding:1rem; font-size:.8rem; line-height:1.4;}
  .journal-box .jb-head{ font-weight:700; font-size:.8rem; margin-bottom:.25rem; }
  .journal-box .jb-sub{ font-size:.72rem; color:var(--bs-secondary-color); }
  /* Generate Journal modal */
  .gj-meta .label{ font-weight:600; font-size:.75rem; color:var(--bs-secondary-color); }
  .gj-meta .value{ font-size:.85rem; font-weight:600; }
  .gj-chip{ display:inline-flex; align-items:center; gap:.4rem; padding:.25rem .6rem; border:1px solid rgba(0,0,0,.1);border-radius:999px; font-size:.72rem; background:var(--bs-body-bg, #fff);}
  .gj-total-row td{ font-weight:700; }
  .gj-note{ font-size:.75rem; color:var(--bs-secondary-color); }
  .gj-small{ font-size:.75rem; }
  .gj-divider{ border-top:1px dashed rgba(0,0,0,.12); margin:.75rem 0; }

  /* @media (min-width:992px){#cnt{padding:1.5rem 1.5rem 1rem;}} */
  @media (min-width:992px){#cnt{padding:0;}}
    #cnt::-webkit-scrollbar{width:6px;}
    #cnt::-webkit-scrollbar-track{background:transparent;}
    #cnt::-webkit-scrollbar-thumb{background:rgba(0,0,0,.18);border-radius:999px;}
    html[data-bs-theme="dark"] #cnt::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);}
    .app-footer{flex-shrink:0;height:var(--footer-h);line-height:1.3;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--muted);padding:.75rem 1rem 1rem;border-top:1px solid var(--border);background:var(--bg);font-size:.8rem;}
    /* #loginCover{position:fixed;inset:0;background:#0d6efd;opacity:.95;z-index:1051;display:none;} */
    /* body.noBsBackdrop{--bs-backdrop-bg:transparent!important;--bs-backdrop-opacity:0!important;}
    .login-modal .modal-content{border:0;border-radius:20px;box-shadow:0 25px 60px rgba(0,0,0,.25);}
    .login-modal .brand-badge{width:48px;height:48px;border-radius:12px;background:#0d6efd;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;box-shadow:0 8px 20px rgba(13,110,253,.35);}
    .login-modal .form-control{padding:.8rem .9rem;border-radius:12px;}
    .login-modal .btn-primary{background:#0d6efd;border-color:#0d6efd;border-radius:12px;padding:.8rem 1rem;font-weight:700;}
    .login-modal .btn-primary:focus{box-shadow:0 0 0 .2rem rgba(13,110,253,.3);} */
    /* *{transition:background-color var(--transition-slow),color var(--transition-slow),border-color var(--transition-slow);} */
    @media (max-width:991.98px){.app-shell{grid-template-columns:1fr;}.app-sidebar{display:none;}.app-main{min-height:100dvh;max-height:100dvh;}}
    :root{--left-pane-h:70vh;}
    .section-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--bs-secondary-color);}
    .page-head-title{font-size:1rem;font-weight:700;line-height:1.3;}
    .page-head-desc{font-size:.8rem;color:var(--bs-secondary-color);line-height:1.3;}
    .mini-tabs{display:flex;flex-wrap:wrap;gap:.5rem 1rem;border-bottom:1px solid var(--bs-border-color);}
    .mini-tabs .tab-btn{background:none;border:0;padding:0 0 .5rem 0;font-size:.8rem;font-weight:600;line-height:1.2;color:var(--bs-secondary-color);position:relative;display:flex;align-items:center;gap:.4rem;cursor:pointer;}
    .mini-tabs .tab-btn .count-badge{font-size:.65rem;font-weight:600;line-height:1.1;border-radius:.4rem;padding:.15rem .4rem;border:1px solid var(--bs-border-color);color:var(--bs-secondary-color);background-color:var(--bs-body-bg);}
    .mini-tabs .tab-btn.active{color:var(--bs-primary);}
    .mini-tabs .tab-btn.active .count-badge{background-color:var(--bs-primary);border-color:var(--bs-primary);color:#fff;}
    .mini-tabs .tab-btn.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background-color:var(--bs-primary);border-radius:2px;}
    .table-sm thead th{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--bs-secondary-color);vertical-align:bottom;background-color:var(--bs-body-bg);}
    .table-sm tbody td{font-size:.8rem;vertical-align:middle;}
    .app-table thead th{position:sticky;top:0;z-index:2;background:var(--bs-body-bg,#fff);}
    .doc-row.active,.doc-row.active td{background-color:#0d6efd!important;color:#fff!important;}
    .doc-row.active .text-body-secondary,.doc-row.active small,.doc-row.active .badge,.doc-row.active .badge *{color:#fff!important;}
    .doc-row.active .btn-link{color:#fff!important;}
    .status-badge{font-size:.7rem;font-weight:600;border-radius:.5rem;padding:.25rem .5rem;}
    .status-draft{background-color:rgba(108,117,125,.1);color:#6c757d;border:1px solid rgba(108,117,125,.3);}
    .status-pending{background-color:rgba(255,193,7,.1);color:#b58100;border:1px solid rgba(255,193,7,.4);}
    .status-approved{background-color:rgba(25,135,84,.1);color:#198754;border:1px solid rgba(25,135,84,.4);}
    .status-rejected{background-color:rgba(220,53,69,.1);color:#dc3545;border:1px solid rgba(220,53,69,.4);}
    .action-footer{border-top:1px solid var(--bs-border-color);padding-top:.75rem;margin-top:1rem;}
    .action-footer .note{font-size:.7rem;color:var(--bs-secondary-color);line-height:1.3;}
    .left-pane-scroll{max-height:var(--left-pane-h);overflow:auto;}
    .rejection-alert{font-size:.75rem;line-height:1.3;border:1px solid rgba(220,53,69,.4);background:rgba(220,53,69,.08);color:#dc3545;border-radius:.5rem;padding:.5rem .75rem;}
    .rejection-alert .bi{line-height:1;font-size:.9rem;}
    .routing-step{display:flex;align-items:flex-start;position:relative;}
    .routing-step + .routing-step{margin-top:1rem;}
    .routing-step:not(:last-child)::after{content:"";position:absolute;left:14px;top:2.2rem;width:2px;height:calc(100% - 2.2rem);background:rgba(0,0,0,.2);}
    [data-bs-theme="dark"] .routing-step:not(:last-child)::after{background:rgba(255,255,255,.2);}
    .routing-badge{flex-shrink:0;width:28px;height:28px;border-radius:.5rem;background:#6c757d;color:#fff;font-size:.75rem;font-weight:600;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(0,0,0,.25);}
    .routing-badge.active-step{background:#0d6efd;box-shadow:0 8px 20px rgba(13,110,253,.5);}
    .routing-info{margin-left:.75rem;line-height:1.3;}
    .routing-role{font-size:.8rem;font-weight:600;}
    .routing-names{font-size:.75rem;font-weight:500;}
    .routing-desc{font-size:.7rem;color:var(--bs-secondary-color);}
    .d-none{display:none!important;}
    .preview-card{border:1px solid var(--bs-border-color);border-radius:.75rem;background-color:#fff;box-shadow:0 .5rem 1rem rgba(0,0,0,.05);max-height:70vh;overflow:auto;}
    [data-bs-theme="dark"] .preview-card{background-color:#1e1e2f;}
    .stat-chip{display:inline-flex;gap:.4rem;align-items:center;font-size:.72rem;padding:.2rem .5rem;border:1px solid rgba(0,0,0,.1);border-radius:999px;background:var(--bs-body-bg,#fff);}
    .scrollable-items{max-height:500px;overflow-y:auto;}
    .scrollable-panel{max-height:220px;overflow-y:auto;}
    .table-sm > :not(caption) > * > *{padding:.45rem .5rem;}
    .kbox{position:relative;}
    .kbox .btn{color:var(--bs-secondary-color);}
    .kbox .btn:hover{color:var(--bs-body-color);}
    .kbox .dropdown-menu{font-size:.85rem;border:none;box-shadow:0 6px 20px rgba(0,0,0,.1);min-width:7rem;z-index:2055;}
    .kbox .dropdown-item i{width:1rem;color:var(--bs-secondary-color);}
    .kbox .dropdown-item.text-danger i{color:var(--bs-danger);}
    .mobile-menu-toggle{position:fixed;bottom:18px;left:18px;z-index:1100;border:0;border-radius:14px;padding:.65rem .8rem;box-shadow:0 10px 24px rgba(13,110,253,.35);display:none;}
    @media (max-width:991.98px){.mobile-menu-toggle{display:inline-flex;align-items:center;gap:.5rem;}}
    #mSide.offcanvas{width:300px;background:var(--surface);color:var(--text);border-right:1px solid var(--border);}
    #mSide .offcanvas-header{border-bottom:1px solid var(--border);}
    #mSide .m-section-title{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:.75rem 0 .35rem;}
    .m-menu .m-link{display:flex;align-items:center;gap:.75rem;width:100%;text-align:left;padding:.6rem .5rem;border:0;background:transparent;color:var(--text);border-radius:.6rem;font-weight:600;}
    .m-menu .m-link:hover{background:rgba(13,110,253,.10);}
    .m-icon{width:32px;height:32px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:1rem;line-height:1;box-shadow:0 8px 16px rgba(0,0,0,.18);text-shadow:0 1px 2px rgba(0,0,0,.4);flex-shrink:0;}
    [data-bs-theme="dark"] .grad-yellow,[data-bs-theme="dark"] .grad-orange{color:#212529;text-shadow:none;}

    /* Per Page */
    .preview-headline,.po-headline{text-align:center;font-size:.8rem;line-height:1.4;font-weight:600;}
    .po-headline .doc-title{font-size:.85rem;font-weight:700;margin-top:.5rem;text-transform:uppercase;}
    .preview-formgrid,.po-formgrid{font-size:.75rem;line-height:1.3;}
    .preview-formgrid .label,.po-formgrid .po-label{font-weight:600;font-size:.75rem;line-height:1.3;}
    .po-formgrid .po-label{white-space:nowrap;}
    .po-formgrid .value-line{border-bottom:1px solid #000;min-height:1.2rem;line-height:1.2rem;font-size:.75rem;}
    .preview-bigtable th,.preview-bigtable td,.ris-edit-table th,.ris-edit-table td,.po-bigtable th,.po-bigtable td,.iar-bigtable th,.iar-bigtable td{border:1px solid #000;font-size:.7rem;line-height:1.2;padding:.4rem .5rem;vertical-align:top;}
    .preview-bigtable th,.ris-edit-table th,.po-bigtable th,.iar-bigtable th{font-weight:600;text-align:center;}
    .po-bigtable tfoot td{border:1px solid #000;font-size:.7rem;line-height:1.2;padding:.4rem .5rem;}
    .preview-signatures td{border:1px solid #000;font-size:.7rem;line-height:1.2;padding:.5rem .5rem;vertical-align:top;}
    .preview-signatures .sig-label{font-weight:600;font-size:.7rem;}
    .preview-signatures .sig-role{font-size:.65rem;}
    .po-signatures{font-size:.7rem;line-height:1.4;}
    .po-signatures .sig-line{border-bottom:1px solid #000;min-height:1.4rem;}
    .po-signatures .sig-caption{font-size:.7rem;line-height:1.2;}
    .po-signatures .mayor-name{font-weight:600;text-transform:uppercase;font-size:.75rem;line-height:1.3;}
    .po-signatures .mayor-title,.iar-sig-title{font-size:.7rem;line-height:1.2;}
    .preview-subsec{border:1px solid #000;border-top:0;font-size:.7rem;line-height:1.2;padding:.5rem .5rem;}
    .preview-subsec .sub-label{font-weight:600;}
    .ris-meta-block .label{font-weight:600;font-size:.7rem;line-height:1.2;}
    .po-aftertable{font-size:.7rem;line-height:1.4;}
    .po-aftertable .label{font-weight:600;font-size:.7rem;display:block;margin-bottom:.25rem;}
    .po-terms-head{text-align:center;font-weight:600;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.5rem;}
    .po-terms-body{font-size:.7rem;line-height:1.4;}
    .po-terms-body ol{padding-left:1rem;margin:0;}
    .po-terms-body li{margin-bottom:.4rem;}
    .attachment-preview-box{border:1px solid rgba(0,0,0,.2);border-radius:8px;background:#fff;padding:1rem;font-size:.8rem;line-height:1.4;}
    .attachment-preview-box .att-label{font-weight:600;font-size:.8rem;margin-bottom:.5rem;}
    .attachment-preview-box .att-filename{font-size:.75rem;}
    .attachment-preview-box .att-frame{border:1px solid rgba(0,0,0,.25);border-radius:4px;background:#f8f9fa;min-height:200px;font-size:.7rem;color:#6c757d;display:flex;align-items:center;justify-content:center;text-align:center;padding:1rem;}
    .attachment-preview-box .att-upload-hint{font-size:.7rem;color:#6c757d;line-height:1.3;}
    .loading-wrapper .spinner{width:36px;height:36px;border:4px solid #ddd;border-top-color:#007bff;border-radius:50%;animation:spin .8s linear infinite;margin:0 auto;}
    @keyframes spin{to{transform:rotate(360deg);}}
    #paginationForm.pagination{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin-top:10px;}
    #paginationForm button{border:1px solid #dee2e6;background:#fff;color:#007bff;padding:4px 10px;border-radius:4px;font-size:13px;transition:all .2s ease-in-out;cursor:pointer;}
    #paginationForm button:hover:not(.disabled):not(.active){background:#f0f8ff;border-color:#007bff;}
    #paginationForm button.active{background:#007bff;color:#fff;border-color:#007bff;font-weight:600;}
    #paginationForm button.disabled,#paginationForm button:disabled{background:#f8f9fa;color:#aaa;border-color:#ddd;cursor:not-allowed;}
    @media(max-width:575px){#paginationForm button{padding:3px 8px;font-size:12px;}}

    .iar-sheet{background:#fff;color:#000;font-size:.75rem;line-height:1.3;border-radius:4px;min-width:700px;}
    .iar-headtitle{text-align:center;font-weight:700;text-transform:uppercase;font-size:.8rem;letter-spacing:.05em;line-height:1.4;margin-bottom:1rem;}
    .iar-meta-row .iar-label{font-weight:600;white-space:nowrap;font-size:.7rem;line-height:1.3;}
    .iar-meta-row .iar-value-line{border-bottom:1px solid #000;min-height:1.1rem;line-height:1.1rem;font-size:.7rem;}
    .iar-bottom-headrow{background:#fff;border-top:1px solid #000;border-bottom:1px solid #000;border-left:1px solid #000;border-right:1px solid #000;font-weight:600;text-transform:uppercase;text-align:center;font-size:.7rem;line-height:1.2;letter-spacing:.03em;}
    .iar-bottom-body{font-size:.7rem;line-height:1.4;padding:.75rem .75rem 1rem .75rem;border-bottom:1px solid #000;border-left:1px solid #000;border-right:1px solid #000;}
    .iar-bottom-body.split-right{border-left:0;border-left:1px solid #000;}
    .iar-field-label{font-weight:600;font-size:.7rem;line-height:1.2;margin-bottom:.25rem;white-space:nowrap;}
    .iar-line{border-bottom:1px solid #000;min-height:1.2rem;line-height:1.2rem;font-size:.7rem;margin-bottom:.5rem;}
    .iar-check-row{display:flex;align-items:flex-start;gap:.5rem;font-size:.7rem;line-height:1.3;margin-bottom:.5rem;}
    .iar-check-box{width:14px;height:14px;border:1px solid #000;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:700;line-height:1;}
    .iar-sig-name{font-weight:600;text-transform:uppercase;font-size:.7rem;line-height:1.3;margin-top:.75rem;}
    .left-card-header .fw-semibold{font-size:.9rem;}

    @media (max-width:1366px){
    html,body{font-size:0.9rem!important;}
    h1{font-size:1.75rem!important;} h2{font-size:1.5rem!important;} h3{font-size:1.35rem!important;} h4{font-size:1.2rem!important;}
    .p-3,.px-3,.py-3{padding:0.75rem!important;} .p-4,.px-4,.py-4{padding:1rem!important;}
    .m-3,.mx-3,.my-3{margin:0.75rem!important;}
    .btn{padding:.35rem .55rem!important;font-size:.85rem!important;border-radius:.25rem!important;}
    .form-control,.form-select{padding:.35rem .5rem!important;font-size:.85rem!important;height:auto!important;}
    table,.table{font-size:.85rem!important;}
    .modal-dialog{max-width:550px!important;}
    .modal-body{padding:1rem!important;font-size:.9rem!important;}
    .navbar-brand{font-size:1rem!important;}
    .nav-link{padding:.3rem .5rem!important;font-size:.85rem!important;}
    }


  </style>

  <script>
    // Keep kbox dropdown behavior (global)
    document.addEventListener('show.bs.dropdown', function (e) {
      document.querySelectorAll('.kbox .dropdown-menu.show').forEach(function (menu) {
        if (menu !== e.target.nextElementSibling) {
          bootstrap.Dropdown.getInstance(menu.previousElementSibling)?.hide();
        }
      });
    });
    
  </script>
</head>
<body>

  <!-- LOGIN COVER (inactive) -->
  <div id="loginCover" aria-hidden="true"></div>

  <!-- ===== FLOATING SUBMENUS (OUTSIDE SIDEBAR) ===== -->
  <!-- Others -->
  <div id="flyOthers" class="flymenu">
    <div class="fly-title">Other Settings & Registry</div>
    <div class="fly-link" onclick="load_item_unit();"><i class="bi bi-box-seam"></i><span>Supplies & Fixed Asset Registry</span></div>
    <div class="fly-link" onclick="load_fund_cluster();"><i class="bi bi-collection"></i><span>Fund Cluster & Responsibility Center Code</span></div>
    <div class="fly-link" onclick="load_department();"><i class="bi bi-building"></i><span>Department Registry</span></div>
    <div class="fly-link" onclick="load_supplier();"><i class="bi bi-truck"></i><span>Supplier Registry</span></div>
    <div class="fly-link" onclick="load_warehouse_racking();"><i class="bi bi-grid-3x3-gap-fill"></i><span>Warehouse & Racking Registry</span></div>
  </div>

  <!-- Inventory Reports -->
  <div id="flyInventory" class="flymenu">
    <div class="fly-title">Inventory Reports</div>
    <div class="fly-link" onclick="load_rpt_rsmi();"><i class="bi bi-receipt"></i><span>Report of Supplies & Materials Issued (RSMI)</span></div>
    <div class="fly-link" onclick="load_rpt_items_disposal();"><i class="bi bi-trash3"></i><span>Items for Disposal</span></div>
    <div class="fly-link" onclick="load_rpt_stockcard();"><i class="bi bi-card-list"></i><span>Stock Card (Kardex) by Item</span></div>
    <div class="fly-link" onclick="load_rpt_reorder();"><i class="bi bi-exclamation-triangle"></i><span>Reorder / Low Stock</span></div>
    <div class="fly-link" onclick="load_rpt_slow_moving();"><i class="bi bi-hourglass-split"></i><span>Slow / Non-Moving Items</span></div>
  </div>

  <!-- Purchasing Reports -->
  <div id="flyPurchasing" class="flymenu">
    <div class="fly-title">Purchasing Reports</div>
    <div class="fly-link" onclick="load_rpt_req_history();"><i class="bi bi-file-earmark-plus"></i><span>Requisition History</span></div>
    <div class="fly-link" onclick="load_rpt_pr_history();"><i class="bi bi-journal-text"></i><span>Purchase Request</span></div>
    <div class="fly-link" onclick="load_rpt_po_history();"><i class="bi bi-receipt-cutoff"></i><span>Purchase Order</span></div>
  </div>

  <!-- Asset Reports -->
  <div id="flyAsset" class="flymenu">
    <div class="fly-title">Asset Reports</div>
    <div class="fly-link" onclick="load_rpt_capitalized_assets();"><i class="bi bi-pc-display"></i><span>Capitalized Assets</span></div>
    <div class="fly-link" onclick="load_rpt_asset_movement();"><i class="bi bi-shuffle"></i><span>Asset Movement / Transfer Trail</span></div>
    <div class="fly-link" onclick="load_rpt_depreciation_sched();"><i class="bi bi-graph-down"></i><span>Depreciation Schedule</span></div>
    <div class="fly-link" onclick="load_rpt_disposal();"><i class="bi bi-trash3"></i><span>Disposed / Retired Assets</span></div>
    <div class="fly-link" onclick="load_rpt_asset_valuation();"><i class="bi bi-cash-coin"></i><span>Asset Valuation (NBV)</span></div>
  </div>

  <!-- ================= SHELL ================= -->
  <div id="appShell" class="app-shell collapsed">
    
    <!-- ====== SIDEBAR ====== -->
    <aside class="app-sidebar">

      <!-- TOPBAR -->
      <div class="sidebar-topbar">
        <div class="brand-block" onclick="load_menurgtry();">
          <div class="brand-ims-box">GSO</div>
          <div class="brand-lines">
            <div class="brand-line-main">Asset & Procurement</div>
            <div class="brand-line-sub">Management System (APMS)</div>
          </div>
        </div>

        <!-- collapse toggle -->
        <button id="btnSidebarInline" class="sidebar-toggle"
                data-bs-toggle="tooltip"
                data-bs-title="Expand sidebar">
          <i class="bi bi-chevron-right"></i>
        </button>
      </div>

      <!-- SCROLLABLE MENU -->
      <div class="sidebar-scroll">
        <!-- MAIN -->
        <div class="menu-section">
			<?php

				$fetch_user_acess=$conn->prepare("SELECT GROUP_CONCAT(a.AccessID) as AccessIDs FROM tbluseraccesschild a WHERE UserID=?");
				$fetch_user_acess->execute([ $UserID ]);
				$get_user_access = $fetch_user_acess->fetch(PDO::FETCH_ASSOC);
				$AccessIDs  = $get_user_access['AccessIDs'];

				$AccessIDs = implode(',', array_filter(
			        explode(',', $AccessIDs),
			        fn($id) => is_numeric($id)
			    ));

                if (empty($AccessIDs)) {
                    $fetch_main_group = null;
                } else {
                    $fetch_main_group = $conn->prepare("
                        SELECT AccessType FROM tbluseraccess WHERE AccessID IN ($AccessIDs)
                        GROUP BY AccessType ORDER BY FIELD(AccessType, 'Main', 'Modules', 'Reports','Help')
                    ");
                    $fetch_main_group->execute();
                }
                if ($fetch_main_group) {
                while ($row_group = $fetch_main_group->fetch(PDO::FETCH_ASSOC)) {
			?>
	         	<div class="menu-heading">
	            	<div class="menu-header"><?php echo $row_group["AccessType"] ?></div>
	         	</div>
		      	<nav class="menu">
		      		<?php
						$fetch_sub_group = $conn->prepare("
							SELECT AccessScript,AccessName,AccessIcon,AccessIconColor,AccessID 
							FROM tbluseraccess 
							WHERE AccessID IN ($AccessIDs) and AccessType = ? and AncestorIDs IS NULL
                            ORDER BY AccessOrder
						");
						$fetch_sub_group->execute([ $row_group["AccessType"] ]);
						while ($row_sub_group = $fetch_sub_group->fetch(PDO::FETCH_ASSOC)) {

						$triggerID = "flyTrig_" . preg_replace('/[^A-Za-z0-9]/', '', $row_sub_group["AccessName"]);
						$flyID = $triggerID . "_menu";

					?>
						<?php if (!empty($row_sub_group["AccessScript"])){ ?>
				            <div class="menu-link"
				                 onclick="<?php echo $row_sub_group["AccessScript"] ?>"
				                 data-bs-toggle="tooltip"
				                 data-bs-placement="right"
				                 data-bs-title="<?php echo $row_sub_group["AccessName"] ?>">
				              	<span class="icon-badge <?php echo $row_sub_group["AccessIconColor"] ?>">
				              		<i class="<?php echo $row_sub_group["AccessIcon"] ?>"></i>
				              	</span>
				              	<span class="label"><?php echo $row_sub_group["AccessName"] ?></span>
				            </div>
		            	<?php }else{ ?>
		            		<div class="menu-link submenu-trigger"
				                 id="<?php echo $triggerID ?>"
				                 data-menu-key="<?php echo $triggerID ?>"
				                 data-bs-toggle="tooltip"
				                 data-bs-placement="right"
				                 data-bs-title="<?php echo $row_sub_group["AccessName"] ?>">
				                <span class="icon-badge <?php echo $row_sub_group["AccessIconColor"] ?>">
				                    <i class="<?php echo $row_sub_group["AccessIcon"] ?>"></i>
				                </span>
				                <span class="label"><?php echo $row_sub_group["AccessName"] ?></span>
				            </div>

						  	<div id="<?php echo $flyID ?>" class="flymenu">
							    <div class="fly-title"><?php echo $row_sub_group["AccessName"] ?></div>
								<?php
									$fetch_ancestors = $conn->prepare("
										SELECT AccessName,AccessScript,AccessIcon,AccessIconColor 
										FROM tbluseraccess 
										WHERE AccessID IN ($AccessIDs) and FIND_IN_SET(?, AncestorIDs)
									");
									$fetch_ancestors->execute([ $row_sub_group["AccessID"] ]);
									while ($row_ancestors = $fetch_ancestors->fetch(PDO::FETCH_ASSOC)) {
								?>
								    <div class="fly-link" onclick="<?php echo $row_ancestors['AccessScript'] ?>">
								    	<i class="<?php echo $row_ancestors["AccessIcon"] ?>"></i>
								    	<span><?php echo $row_ancestors['AccessName'] ?></span>
								    </div>
								<?php } ?>
						  	</div>
		            	<?php } ?>
		            <?php } ?>
		      	</nav>
	      	<?php }} ?>
        </div>

      </div>
      <!-- /.sidebar-scroll -->

      <!-- BOTTOM -->
      <div class="sidebar-bottom">
        <nav class="menu">
          <div class="menu-link"
               id="btnTheme"
               data-bs-toggle="tooltip"
               data-bs-placement="right"
               data-bs-title="Toggle Dark / Light">
            <span class="icon-badge grad-purple theme-icon-light"><i class="bi bi-moon-stars"></i></span>
            <span class="icon-badge grad-orange theme-icon-dark d-none"><i class="bi bi-brightness-high"></i></span>
            <span class="label">Theme</span>
          </div>

          <!-- USER MENU LINK (tooltip stays here) -->
          <div class="menu-link"
                data-bs-toggle="modal"
                data-bs-target="#modalMyProfile"
              data-bs-toggle="tooltip"
              data-bs-placement="right"
              data-bs-title="<?php echo $_SESSION['EmployeeName']; ?>">
            <span class="icon-badge grad-blue"><i class="bi bi-person"></i></span>

            <!-- CLICK TARGET (modal trigger) -->
            <span class="label"
                  role="button"
                  style="cursor:pointer;">
              <?php echo $_SESSION['EmployeeName']; ?>
            </span>
          </div>

          <div class="menu-link text-danger"
               onclick="logout();"
               data-bs-toggle="tooltip"
               data-bs-placement="right"
               data-bs-title="Logout">
            <span class="icon-badge grad-red"><i class="bi bi-box-arrow-right"></i></span>
            <span class="label">Logout</span>
          </div>
        </nav>
      </div>

    </aside>


    <!-- ====== MAIN CONTENT ====== -->
    <main class="app-main">
      <div id="cnt"><img src="/assets/banner/banner.jpg" class="w-100"></div>

      <footer class="app-footer">
        © 2025 IMS : Integrated Requisition to Ordering, Inventory and Fixed Asset Management System
      </footer>
    </main>

  </div><!-- /app-shell -->
  
<div class="modal fade" id="modalMyProfile" tabindex="-1" data-bs-backdrop="static">
  <div class="modal-dialog modal-dialog-centered modal-lg modal-dialog-scrollable">
    <div class="modal-content border-0 shadow-lg rounded-4">

      <!-- HEADER -->
      <div class="modal-header">
        <div>
          <div class="text-uppercase small fw-semibold text-primary">Account</div>
          <div class="fw-semibold">My Profile</div>
        </div>
        <button class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body">

        <!-- ================= BASIC INFORMATION ================= -->
        <div class="card border-0 shadow-sm rounded-4 mb-3">
          <div class="card-body">

            <div class="d-flex justify-content-between align-items-start mb-3">
              <div>
                <div class="fw-semibold">Basic Information</div>
                <div class="text-muted small">Personal and organizational details</div>
              </div>
              <button class="btn btn-sm btn-outline-primary"
                      onclick="load_basic_user()">
                      Modify
              </button>
            </div>

            <!-- VIEW -->
            <div id="basic_view">
              <div class="row g-3">
                <div class="col-12">
                  <div class="text-muted small">Full Name</div>
                  <div class="fw-semibold" id="user_full_name_text"><?php echo $_SESSION['EmployeeName']; ?></div>
                </div>
                <div class="col-md-6">
                  <div class="text-muted small">Designation</div>
                  <div class="fw-semibold" id="user_designation_text"><?php echo $_SESSION['Designation'] ?? '—'; ?></div>
                </div>
                <div class="col-md-6">
                  <div class="text-muted small">Contact Number</div>
                  <div class="fw-semibold" id="user_contactno_text"><?php echo $_SESSION['ContactNumber'] ?? '—'; ?></div>
                </div>
                <div class="col-md-6">
                  <div class="text-muted small">Email</div>
                  <div class="fw-semibold" id="user_email_text"><?php echo $_SESSION['Email'] ?? '—'; ?></div>
                </div>
                <div class="col-md-6">
                  <div class="text-muted small">Department / Section</div>
                  <div class="fw-semibold" id="user_department_text">
                    <?php echo ($_SESSION['Department'] ?? '—') . ' / ' . ($_SESSION['Section'] ?? '—'); ?>
                  </div>
                </div>
              </div>
            </div>

            <!-- EDIT -->
            <div id="basic_edit" class="d-none">
              <div class="row g-3">
                <div class="col-12">
                  <label class="form-label small fw-semibold">Full Name</label>
                  <input class="form-control form-control-sm" value="<?php echo $_SESSION['EmployeeName']; ?>" id="user_full_name_edit">
                </div>
                <div class="col-md-6">
                  <label class="form-label small fw-semibold">Designation</label>
                  <input class="form-control form-control-sm" value="<?php echo $_SESSION['Designation'] ?? ''; ?>" id="user_designation_edit">
                </div>
                <div class="col-md-6">
                  <label class="form-label small fw-semibold">Contact Number</label>
                  <input class="form-control form-control-sm" value="<?php echo $_SESSION['ContactNumber'] ?? ''; ?>" id="user_contactno_edit">
                </div>
                <div class="col-md-6">
                  <label class="form-label small fw-semibold">Email</label>
                  <input class="form-control form-control-sm" value="<?php echo $_SESSION['Email'] ?? ''; ?>" id="user_email_edit">
                </div>
                <div class="col-md-6">
                  <label class="form-label small fw-semibold">Department</label>
                  <input class="form-control form-control-sm" list="user_department_list" value="<?php echo $_SESSION['Department'] ?? ''; ?>" id="user_department_edit" oninput="load_section_list()" autocomplete="off">
                  <datalist id="user_department_list">
                    <?php
                      try {
                        $q = $conn->query("SELECT DeptID, Department FROM tbldepartment ORDER BY Department");
                        while($d = $q->fetch(PDO::FETCH_ASSOC)) {
                          echo '<option deptid="'.htmlspecialchars($d['DeptID']).'" value="'.htmlspecialchars($d['Department']).'"></option>';
                        }
                      } catch (Exception $e) { }
                    ?>
                  </datalist>
                </div>
                <div class="col-md-6">
                  <label class="form-label small fw-semibold">Section</label>
                  <input class="form-control form-control-sm" value="<?php echo $_SESSION['Section'] ?? ''; ?>" id="user_section_edit" list="Section_list" autocomplete="off">
                  <datalist id="Section_list"></datalist>
                </div>

                <div class="col-12 d-flex justify-content-end gap-2">
                  <button class="btn btn-sm btn-light"
                          onclick="toggleEdit('basic', false)">Cancel</button>
                  <button class="btn btn-sm btn-primary"
                          onclick="upd_basic_user();">
                    Update
                  </button>
                </div>
              </div>
            </div>

          </div>
        </div>

        <!-- ================= ACCOUNT SECURITY ================= -->
        <div class="card border-0 shadow-sm rounded-4">
          <div class="card-body">

            <div class="mb-3">
              <div class="fw-semibold">Account Security</div>
              <div class="text-muted small">Credentials and login protection</div>
            </div>

            <div class="row g-3">

              <!-- USERNAME -->
              <div class="col-md-6">
                <div class="border rounded-3 p-3 h-100">
                  <div class="d-flex justify-content-between mb-2">
                    <div class="fw-semibold">Username</div>
                    <button class="btn btn-sm btn-outline-primary"
                            onclick="toggleEdit('username', true)">Modify</button>
                  </div>

                  <div id="username_view">
                    <div class="fw-semibold" id="user_username_text"><?php echo $_SESSION['Username'] ?? '—'; ?></div>
                  </div>

                  <div id="username_edit" class="d-none">
                    <input class="form-control form-control-sm mb-2" placeholder="New Username" id="user_username_edit">
                    <div class="d-flex justify-content-end gap-2">
                      <button class="btn btn-sm btn-light"
                              onclick="toggleEdit('username', false)">Cancel</button>
                      <button class="btn btn-sm btn-primary"
                              onclick="upd_user_username()">Update</button>
                    </div>
                  </div>
                </div>
              </div>

              <!-- PASSWORD -->
              <div class="col-md-6">
                <div class="border rounded-3 p-3 h-100">
                  <div class="d-flex justify-content-between mb-2">
                    <div class="fw-semibold">Password</div>
                    <button class="btn btn-sm btn-outline-primary"
                            onclick="toggleEdit('password', true)">Modify</button>
                  </div>

                  <div id="password_view">
                    <div class="fw-semibold">••••••••</div>
                  </div>

                  <div id="password_edit" class="d-none">
                    <input type="password" id="user_oldpass" class="form-control form-control-sm mb-2" placeholder="Current Password">
                    <input type="password" id="user_newpass" class="form-control form-control-sm mb-2" placeholder="New Password">
                    <input type="password" id="user_newpass2" class="form-control form-control-sm mb-2" placeholder="Confirm New Password">
                    <div class="d-flex justify-content-end gap-2">
                      <button class="btn btn-sm btn-light"
                              onclick="toggleEdit('password', false)">Cancel</button>
                      <button class="btn btn-sm btn-primary"
                              onclick="upd_user_password()">Update</button>
                    </div>
                  </div>
                </div>
              </div>

            </div>

          </div>
        </div>

      </div>

      <div class="modal-footer">
        <button class="btn btn-sm btn-light" data-bs-dismiss="modal">Close</button>
      </div>

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

<script>
  function toggleEdit(section, edit) {
    const view = document.getElementById(section + '_view');
    const editBox = document.getElementById(section + '_edit');
    if (!view || !editBox) return;

    view.classList.toggle('d-none', edit);
    editBox.classList.toggle('d-none', !edit);
  }
</script>




  <!-- ================== LOGIN MODAL (kept but not shown automatically) ================== -->
  <div class="modal fade login-modal" id="loginModal" tabindex="-1" aria-hidden="true"
       data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content p-3 p-md-4">
        <div class="modal-body">
          <div class="d-flex align-items-center gap-3 mb-3">
            <div class="brand-badge"><i class="bi bi-lock-fill"></i></div>
            <div>
              <h4 class="mb-0 fw-800">Sign in to continue</h4>
              <div class="text-muted small">IMS : Integrated Requisition to Ordering, Inventory and Fixed Asset Management System</div>
            </div>
          </div>

          <form id="loginForm" class="needs-validation" novalidate>
            <div class="mb-3">
              <label class="form-label fw-semibold" for="loginUser">Username</label>
              <input id="loginUser" type="text" value="admin" class="form-control" placeholder="Enter username" required>
              <div class="invalid-feedback">Username is required.</div>
            </div>
            <div class="mb-2">
              <label class="form-label fw-semibold" for="loginPass">Password</label>
              <input id="loginPass" type="password" value="admin" class="form-control" placeholder="Enter password" required>
              <div class="invalid-feedback">Password is required.</div>
            </div>
            <div class="d-grid mt-3">
              <button id="btnDoLogin" type="submit" class="btn btn-primary">
                <i class="bi bi-box-arrow-in-right me-1"></i> Login
              </button>
            </div>
          </form>

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

  <!-- ✅ MOBILE TOGGLE BUTTON -->
  <button class="btn btn-primary mobile-menu-toggle"
          type="button"
          data-bs-toggle="offcanvas"
          data-bs-target="#mSide"
          aria-controls="mSide">
    <i class="bi bi-list"></i> Menu
  </button>

  <!-- ✅ MOBILE OFFCANVAS SIDEBAR (mirrors desktop) -->
  <div class="offcanvas offcanvas-start" tabindex="-1" id="mSide" aria-labelledby="mSideLabel">
    <div class="offcanvas-header">
      <div class="d-flex align-items-center gap-2">
        <div class="brand-ims-box">IMS</div>
        <div>
          <div class="brand-line-main">Inventory</div>
          <div class="brand-line-sub">Management System</div>
        </div>
      </div>
      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>

    <div class="offcanvas-body">
      <!-- MAIN -->
      <div class="m-section-title">Main</div>
      <div class="m-menu">
        <button class="m-link" onclick="$('#mSide').offcanvas('hide'); load_dashboard();">
          <span class="m-icon grad-blue"><i class="bi bi-speedometer2"></i></span> Dashboard
        </button>
        <button class="m-link" onclick="$('#mSide').offcanvas('hide'); load_userrole();">
          <span class="m-icon grad-teal"><i class="bi bi-person-gear"></i></span> User &amp; Role
        </button>
        <button class="m-link" onclick="$('#mSide').offcanvas('hide'); load_chart_of_authority();">
          <span class="m-icon grad-indigo"><i class="bi bi-diagram-3"></i></span> Chart of Authority
        </button>

        <!-- Others -->
        <button class="m-link" onclick="$('#mSide').offcanvas('hide'); load_item_unit();">
          <span class="m-icon grad-yellow"><i class="bi bi-grid"></i></span> Others — Supplies &amp; Fixed Asset Registry
        </button>
        <button class="m-link" onclick="$('#mSide').offcanvas('hide'); load_fund_cluster();">
          <span class="m-icon grad-yellow"><i class="bi bi-collection"></i></span> Others — Fund Cluster &amp; RCC
        </button>
        <button class="m-link" onclick="$('#mSide').offcanvas('hide'); load_department();">
          <span class="m-icon grad-yellow"><i class="bi bi-building"></i></span> Others — Department Registry
        </button>
        <button class="m-link" onclick="$('#mSide').offcanvas('hide'); load_supplier();">
          <span class="m-icon grad-yellow"><i class="bi bi-truck"></i></span> Others — Supplier Registry
        </button>
        <button class="m-link" onclick="$('#mSide').offcanvas('hide'); load_warehouse_racking();">
          <span class="m-icon grad-yellow"><i class="bi bi-grid-3x3-gap-fill"></i></span> Others — Warehouse &amp; Racking
        </button>

        <!-- ✅ ADDED (Mobile): Approval -->
        <button class="m-link" onclick="$('#mSide').offcanvas('hide'); load_approval();">
          <span class="m-icon grad-green"><i class="bi bi-check2-square"></i></span> Approval
        </button>
      </div>

      <!-- MODULES -->
      <div class="m-section-title">Modules</div>
      <div class="m-menu">
        <button class="m-link" onclick="$('#mSide').offcanvas('hide'); load_requisition();">
          <span class="m-icon grad-orange"><i class="bi bi-file-earmark-plus"></i></span> Requisition
        </button>
        <button class="m-link" onclick="$('#mSide').offcanvas('hide'); load_pr();">
          <span class="m-icon grad-cyan"><i class="bi bi-journal-text"></i></span> Purchase Request
        </button>
        <button class="m-link" onclick="$('#mSide').offcanvas('hide'); load_po();">
          <span class="m-icon grad-red"><i class="bi bi-receipt-cutoff"></i></span> Purchase Order
        </button>
        <button class="m-link" onclick="$('#mSide').offcanvas('hide'); load_acceptance();">
          <span class="m-icon grad-yellow"><i class="bi bi-box-arrow-in-down"></i></span> Acceptance
        </button>
        <button class="m-link" onclick="$('#mSide').offcanvas('hide'); load_issuance();">
          <span class="m-icon grad-pink"><i class="bi bi-box-arrow-up-right"></i></span> Issuance
        </button>

        <!-- ✅ ADDED (Mobile): Custodian & Acknowledgement -->
        <button class="m-link" onclick="$('#mSide').offcanvas('hide'); load_custodian_ack();">
          <span class="m-icon grad-indigo"><i class="bi bi-person-badge"></i></span> Custodian &amp; Receipt
        </button>

        <button class="m-link" onclick="$('#mSide').offcanvas('hide'); load_inventory_count();">
          <span class="m-icon grad-green"><i class="bi bi-clipboard-check"></i></span> Inventory Count
        </button>
        <button class="m-link" onclick="$('#mSide').offcanvas('hide'); load_asset_capitalization();">
          <span class="m-icon grad-lime"><i class="bi bi-cash-stack"></i></span> Asset Capitalization
        </button>
        <button class="m-link" onclick="$('#mSide').offcanvas('hide'); load_asset_transfer();">
          <span class="m-icon grad-brown"><i class="bi bi-arrow-left-right"></i></span> Asset Transfer
        </button>
        <button class="m-link" onclick="$('#mSide').offcanvas('hide'); load_depreciation();">
          <span class="m-icon grad-purple"><i class="bi bi-calculator"></i></span> Depreciation Run
        </button>
        <button class="m-link" onclick="$('#mSide').offcanvas('hide'); load_asset_disposal();">
          <span class="m-icon grad-red"><i class="bi bi-trash2"></i></span> Fixed Asset Disposal
        </button>
      </div>

      <!-- REPORTS -->
      <div class="m-section-title">Reports</div>
      <div class="m-menu">
        <!-- Inventory Reports -->
        <button class="m-link" onclick="$('#mSide').offcanvas('hide'); load_rpt_rsmi();">
          <span class="m-icon grad-teal"><i class="bi bi-receipt"></i></span> RSMI
        </button>
        <button class="m-link" onclick="$('#mSide').offcanvas('hide'); load_rpt_items_disposal();">
          <span class="m-icon grad-teal"><i class="bi bi-trash3"></i></span> Items for Disposal
        </button>
        <button class="m-link" onclick="$('#mSide').offcanvas('hide'); load_rpt_stockcard();">
          <span class="m-icon grad-teal"><i class="bi bi-card-list"></i></span> Stock Card (Kardex)
        </button>
        <button class="m-link" onclick="$('#mSide').offcanvas('hide'); load_rpt_reorder();">
          <span class="m-icon grad-teal"><i class="bi bi-exclamation-triangle"></i></span> Reorder / Low Stock
        </button>
        <button class="m-link" onclick="$('#mSide').offcanvas('hide'); load_rpt_slow_moving();">
          <span class="m-icon grad-teal"><i class="bi bi-hourglass-split"></i></span> Slow / Non-Moving
        </button>

        <!-- Purchasing Reports -->
        <button class="m-link" onclick="$('#mSide').offcanvas('hide'); load_rpt_req_history();">
          <span class="m-icon grad-cyan"><i class="bi bi-file-earmark-plus"></i></span> Requisition History
        </button>
        <button class="m-link" onclick="$('#mSide').offcanvas('hide'); load_rpt_pr_history();">
          <span class="m-icon grad-cyan"><i class="bi bi-journal-text"></i></span> Purchase Request
        </button>
        <button class="m-link" onclick="$('#mSide').offcanvas('hide'); load_rpt_po_history();">
          <span class="m-icon grad-cyan"><i class="bi bi-receipt-cutoff"></i></span> Purchase Order
        </button>

        <!-- Asset Reports -->
        <button class="m-link" onclick="$('#mSide').offcanvas('hide'); load_rpt_capitalized_assets();">
          <span class="m-icon grad-green"><i class="bi bi-pc-display"></i></span> Capitalized Assets
        </button>
        <button class="m-link" onclick="$('#mSide').offcanvas('hide'); load_rpt_asset_movement();">
          <span class="m-icon grad-green"><i class="bi bi-shuffle"></i></span> Asset Movement
        </button>
        <button class="m-link" onclick="$('#mSide').offcanvas('hide'); load_rpt_depreciation_sched();">
          <span class="m-icon grad-green"><i class="bi bi-graph-down"></i></span> Depreciation Schedule
        </button>
        <button class="m-link" onclick="$('#mSide').offcanvas('hide'); load_rpt_disposal();">
          <span class="m-icon grad-green"><i class="bi bi-trash3"></i></span> Disposal Report
        </button>
        <button class="m-link" onclick="$('#mSide').offcanvas('hide'); load_rpt_asset_valuation();">
          <span class="m-icon grad-green"><i class="bi bi-cash-coin"></i></span> Asset Valuation (NBV)
        </button>

        <!-- Standalone -->
        <button class="m-link" onclick="$('#mSide').offcanvas('hide'); load_rpt_audit_variance();">
          <span class="m-icon grad-slate"><i class="bi bi-clipboard-data"></i></span> Audit Variance
        </button>
      </div>

      <!-- HELP -->
      <div class="m-section-title">Help</div>
      <div class="m-menu">
        <button class="m-link" onclick="$('#mSide').offcanvas('hide'); load_help();">
          <span class="m-icon grad-sky"><i class="bi bi-life-preserver"></i></span> Help / User Guide
        </button>
        <button class="m-link" onclick="$('#mSide').offcanvas('hide'); load_docs();">
          <span class="m-icon grad-purple"><i class="bi bi-journal-code"></i></span> Documentation
        </button>
      </div>
    </div>
  </div>

  <!-- JS -->
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
  <script src="./assets/js/xlsx.full.min.js"></script>

  <?php include 'toast.php'; ?>
  <?php include 'app_controller.php'; ?>



  <script>
    // === PAGE LOADERS / ROUTES ===
    load_dashboard();

    function load_dashboard()              { $("#cnt").load("/dashboard/dashboard-main.php"); }
    function load_userrole()               { $("#cnt").load("/registry/userrole/userrole-main.php"); }
    function load_chart_of_authority()     { $("#cnt").load("/registry/authority/authority-main.php"); }

    // others submenu pages
    function load_item_unit()              { $("#cnt").load("/registry/item-unit/item-unit-main.php"); hideFly('Others'); }
    function load_fund_cluster()           { $("#cnt").load("/registry/fund-cluster/fund-cluster-main.php"); hideFly('Others'); }
    function load_responsibility_center()  { $("#cnt").load("/registry/master/responsibility-center.php"); hideFly('Others'); }
    function load_department()             { $("#cnt").load("/registry/department/department-main.php"); hideFly('Others'); }
    function load_supplier()               { $("#cnt").load("/registry/supplier/supplier-main.php"); hideFly('Others'); }
    function load_warehouse_racking()      { $("#cnt").load("/registry/warehouse-racking/warehouse-racking-main.php"); hideFly('Others'); }

    // modules
    function load_requisition()            { $("#cnt").load("/modules/requisition/requisition-main.php"); }
    function load_pr()                     { $("#cnt").load("/modules/pr/pr-main.php"); }
    function load_po()                     { $("#cnt").load("/modules/po/po-main.php"); }
    function load_acceptance()             { $("#cnt").load("/modules/acceptance/acceptance-main.php"); }
    function load_issuance()               { $("#cnt").load("/modules/issuance/issuance-main.php"); }

    // ✅ ADDED loader: Custodian & Acknowledgement
    function load_custodian_ack()          { $("#cnt").load("/modules/custodian-receipt/custodian-receipt-main.php"); }

    function load_inventory_count()        { $("#cnt").load("/modules/inventorycount/inventorycount-main.php"); }
    function load_asset_capitalization()   { $("#cnt").load("/modules/assetcapitalization/assetcapitalization-main.php"); }
    function load_asset_transfer()         { $("#cnt").load("/modules/assettransfer/assettransfer-main.php"); }
    function load_depreciation()           { $("#cnt").load("/modules/depreciation/depreciation-main.php"); }
    function load_asset_disposal()         { $("#cnt").load("/modules/disposal/disposal-main.php"); }

    // purchasing reports (flyout)
    function load_rpt_req_history()        { $("#cnt").load("/reports/rpt_requisition/rpt-requisition-main.php"); hideFly('Purchasing'); }
    function load_rpt_pr_history()         { $("#cnt").load("/reports/rpt-pr-history/rpt-pr-main.php"); hideFly('Purchasing'); }
    function load_rpt_po_history()         { $("#cnt").load("/reports/rpt-po-history/rpt-po-main.php"); hideFly('Purchasing'); }

    // inventory reports (flyout)
    function load_inventorybalance()       { $("#cnt").load("/reports/rpt-inventory-balance/rpt-inventory-balance-main.php"); hideFly('Inventory'); }
    function load_rpt_rsmi()               { $("#cnt").load("/reports/rpt-rsmi/rpt-rsmi-main.php"); hideFly('Inventory'); }
    function Inventorycentralsupply()      { $("#cnt").load("/reports/rpt-inventory-of-central-supply/rpt-inventory-of-central-supply-main.php"); hideFly('Inventory'); }
    function load_po_vs_acceptance()       { $("#cnt").load("/reports/rpt-po-vs-acceptance/rpt-po-vs-acceptance-main.php"); hideFly('Inventory'); }
    // function load_rpt_items_disposal()     { $("#cnt").load("/reports/rpt-items-for-disposal/rpt-items-for-disposal-main.php"); hideFly('Inventory'); }
    // function load_rpt_stockcard()          { $("#cnt").load("/reports/rpt-stockcard/rpt-stockcard-main.php"); hideFly('Inventory'); }
    // function load_rpt_reorder()            { $("#cnt").load("/reports/rpt-reorder-lowstock/rpt-reorder-lowstock-main.php"); hideFly('Inventory'); }
    // function load_rpt_slow_moving()        { $("#cnt").load("/reports/rpt-slow-nonmoving/rpt-slow-nonmoving-main.php"); hideFly('Inventory'); }

    // asset reports (flyout)
    function load_rpt_capitalized_assets() { $("#cnt").load("/reports/rpt-list-of-assets/rpt-list-of-assets-main.php"); hideFly('Asset'); }
    function load_rpt_asset_movement()     { $("#cnt").load("/reports/rpt-asset-movement/rpt-asset-movement-main.php"); hideFly('Asset'); }
    function load_rpt_depreciation_sched() { $("#cnt").load("/reports/rpt-depreciation-schedule/rpt-depreciation-schedule-amin.php"); hideFly('Asset'); }
    function load_rpt_disposal()           { $("#cnt").load("/reports/rpt-disposal/rpt-disposal-main.php"); hideFly('Asset'); }
    function load_rpt_asset_valuation()    { $("#cnt").load("/reports/rpt-asset-valuation-nbv/rpt-asset-valuation-nbv-main.php"); hideFly('Asset'); }

    // other standalone report
    function load_rpt_audit_variance()     { $("#cnt").load("/reports/rpt_audit_variance/rpt_audit_variance-.php"); }

    // help / docs
    function load_help()                   { $("#cnt").load("/help/help-main.php"); }
    function load_docs()                   { $("#cnt").load("/help/documentation-main.php"); }

    function load_menurgtry()                   { $("#cnt").load("/registry/menu/menu-main.php"); }

    function doLogout(){
      alert("Logging out…");
      // window.location = '/logout.php';
    }

    // ✅ ADDED loader: Approval (Main)
    function load_approval()               { $("#cnt").load("/approval/approval-main.php"); }


    // =============== Dynamic Floating Submenu System ===============
	// Auto-scan for submenu triggers
	const menuConfig = [];

	$(".submenu-trigger").each(function () {
	    const key = $(this).data("menu-key");
	    const id  = this.id;

	    // Flyout container must exist in HTML:
	    // <div id="flyTrig_Others" class="flyout-menu"></div>
	    menuConfig.push({
	        key,
	        trigger: `#${id}`,
	        fly: `#${key}_menu`
	    });
	});

	// Build storage objects
	let flyTimers = {}, $trig = {}, $fly = {};

	menuConfig.forEach(cfg => {
	    flyTimers[cfg.key] = null;
	    $trig[cfg.key] = $(cfg.trigger);
	    $fly[cfg.key]  = $(cfg.fly);
	});

	// Position flyout
	function positionFly(key){
	    if (!$trig[key].length) return;

	    const rect = $trig[key][0].getBoundingClientRect();

	    $fly[key].css({
	        display: "block",
	        top: rect.top + "px",
	        left: rect.right + 10 + "px"
	    });
	}

	function showFly(key){
	    clearTimeout(flyTimers[key]);
	    positionFly(key);
	}

	function hideFlyNow(key){
	    $fly[key].hide();
	}

	function hideFly(key){
	    flyTimers[key] = setTimeout(() => hideFlyNow(key), 150);
	}

	// Bind Events
	menuConfig.forEach(cfg => {
	    const key = cfg.key;

	    if ($trig[key].length) {
	        $trig[key].mouseenter(() => showFly(key));
	        $trig[key].mouseleave(() => hideFly(key));
	    }
	    if ($fly[key].length) {
	        $fly[key].mouseenter(() => clearTimeout(flyTimers[key]));
	        $fly[key].mouseleave(() => hideFly(key));
	    }
	});
    // ===== THEME / SIDEBAR SETUP (no login auto-popup) =====
    ;(function(){
      const $html       = $('html');
      const $appShell   = $('#appShell');
      const $btnInline  = $('#btnSidebarInline');
      const themeKey    = 'ims_theme';
      const sidebarKey  = 'ims_sidebar_collapsed';

      function applyTheme(mode){
        $html.attr('data-bs-theme', mode);
        $('.theme-icon-light').toggleClass('d-none', mode === 'dark');
        $('.theme-icon-dark').toggleClass('d-none', mode !== 'dark');
        localStorage.setItem(themeKey, mode);
      }
      applyTheme(localStorage.getItem(themeKey) || 'light');

      $('#btnTheme').on('click', () => {
        applyTheme($html.attr('data-bs-theme') === 'light' ? 'dark' : 'light');
      });

      function setSidebar(collapsed){
        $appShell.toggleClass('collapsed', !!collapsed);
        localStorage.setItem(sidebarKey, collapsed ? '1' : '0');
        updateSidebarChevron();
      }

      function updateSidebarChevron(){
        const collapsed = $appShell.hasClass('collapsed');
        if($btnInline.length){
          $btnInline.find('i').attr('class', 'bi ' + (collapsed ? 'bi-chevron-right' : 'bi-chevron-left'));
          $btnInline.attr('data-bs-title', collapsed ? 'Expand sidebar' : 'Collapse sidebar');
          if ($btnInline[0]._tooltip) $btnInline[0]._tooltip.dispose();
          const t = new bootstrap.Tooltip($btnInline[0]);
          $btnInline[0]._tooltip = t;
        }
      }

      const storedCollapsed = localStorage.getItem(sidebarKey);
      if(storedCollapsed === null){
        setSidebar(true); // default collapsed
      }else{
        setSidebar(storedCollapsed === '1');
      }

      if($btnInline.length){
        $btnInline.on('click', () => {
          setSidebar(!$appShell.hasClass('collapsed'));
        });
      }

      document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => {
        if (!$btnInline || el !== $btnInline[0]) new bootstrap.Tooltip(el);
      });

      // 🔕 Login modal NOT auto-shown. Kept only for manual use if needed.
    })();
  </script>

  <!-- ✅ jQuery helper to close offcanvas via $('#mSide').offcanvas('hide') -->
  <script>
    (function(){
      const to = setInterval(() => {
        if (window.bootstrap && window.bootstrap.Offcanvas && window.jQuery){
          clearInterval(to);
          if (!$.fn.offcanvas){
            $.fn.offcanvas = function(cmd){
              const el = this.get(0);
              const oc = bootstrap.Offcanvas.getOrCreateInstance(el);
              if(cmd === 'hide') oc.hide(); else oc.show();
              return this;
            };
          }
        }
      }, 50);
    })();
  </script>


  <script type="text/javascript">
    function logout() {
      $.post('logout.php', {}, function(response){
          if(response.status === "success") {
            if (<?php echo isset($_SESSION['isExternal']) ? 1:0;?>) {
              window.location.replace('/registration.php?login=true');
            }else{
              window.location.replace('login.php');
            }
          } else {
              alert('Logout failed.');
          }
      }, 'json');
    }
  </script>
<!-- user display js-->
  <script type="text/javascript">
  $(document).ready(function () {
    load_section_list();
    load_basic_user(1);
  });

  function upd_basic_user(){

    var sectionVal = $('#user_section_edit').val();
    var sectionCode = get_datalist_value('user_section_edit','section_code');
    var department_Val = $('#user_department_edit').val();
    var department_Code = get_datalist_value('user_department_edit','deptid');

    if (sectionVal !== '' && sectionCode === null) {
      handleAjaxResponse(
        { code: 409, status: 'error', msg: 'Invalid Section selected.' },
        null,
        'save'
      );
      return;
    }

    if (department_Val !== '' && department_Code === null) {
      handleAjaxResponse(
        { code: 409, status: 'error', msg: 'Invalid Department selected.' },
        null,
        'save'
      );
      return;
    }

    $.post("/user/action/upd_user_basic.php", {
      user_full_name_edit   : $('#user_full_name_edit').val(),
      user_designation_edit : $('#user_designation_edit').val(),
      user_contactno_edit   : $('#user_contactno_edit').val(),
      user_email_edit       : $('#user_email_edit').val(),
      user_department_edit  : department_Code,
      user_section_edit     : sectionCode
    })
    .done(resp => handleAjaxResponse(resp, () => {
      toggleEdit('basic', false);
      load_basic_user(1);
    }, 'update'))
    .fail(handleAjaxError);
  }


  function upd_user_username(){
    var user_username = $('#user_username_edit').val();

    $.post("/user/action/upd_user_username.php", {
      user_username : user_username
    })
    .done(resp => handleAjaxResponse(resp, () => {
      toggleEdit('username', false);
      load_basic_user(1);
    }, 'update'))
    .fail(handleAjaxError);
  }

  function upd_user_password(){
    var user_oldpass  = $('#user_oldpass').val();
    var user_newpass  = $('#user_newpass').val();
    var user_newpass2 = $('#user_newpass2').val();

    $.post("/user/action/upd_user_password.php", {
      user_oldpass  : user_oldpass,
      user_newpass  : user_newpass,
      user_newpass2 : user_newpass2
    })
    .done(resp => handleAjaxResponse(resp, () => {
      toggleEdit('password', false);
      load_basic_user(1);
    }, 'update'))
    .fail(handleAjaxError);
  }


  function load_section_list(){
    $.post("/user/components/load_section.php", {
        dept_id : get_datalist_value('user_department_edit','deptid'),
    }, function (data) {
      $('#Section_list').html(data);
    }).fail(function (xhr, status, error) {
        console.error("AJAX error:", error);
    });
  }    

  function get_datalist_value(inputId, action) {
    var $input  = $('#' + inputId);
    var listId  = $input.attr('list');
    var $option = $('#' + listId + ' option').filter(function () {
        return $(this).val() === $input.val();
    });
    if (!$option.length) return null;
    return $option.attr(action);
  }

  function load_basic_user(trigger_toggle) {
  $.post("/user/action/load_basic_user_data.php", {
  }, function (res) {
      if (res.status !== 'success') {
        alert(res.msg);
        return;
      }
      var d = res.data;
      $('#user_full_name_edit').val(d.EmployeeName || '');
      $('#user_designation_edit').val(d.Designation || '');
      $('#user_contactno_edit').val(d.ContactNo || '');
      $('#user_email_edit').val(d.EmailAdd || '');
      $('#user_department_edit').val(d.Department || '');
      $('#user_section_edit').val(d.SectionName || '');
      $('#user_full_name_text').html(d.EmployeeName || '');
      $('#user_designation_text').html(d.Designation || '');
      $('#user_contactno_text').html(d.ContactNo || '');
      $('#user_email_text').html(d.EmailAdd || '');
      $('#user_username_text').html(d.Username || '');
      $('#user_username_edit').val(d.Username || '');
      $('#user_department_text').html(
          d.Department
              ? d.Department + (d.SectionName ? ' - ' + d.SectionName : '')
              : ''
      );
      $('#user_oldpass').val('');
      $('#user_newpass').val('');
      $('#user_newpass2').val('');
      
      if(trigger_toggle == 1){
        //do nothing
      }else{
        toggleEdit('basic', true); 
      }

    }, 'json').fail(function (xhr, status, error) {
      console.error("AJAX error:", error);
    });
  }
  </script>

</body>
</html>
