<?php require_once __DIR__.'/layout/header.php'; ?>
<?php require_once __DIR__.'/layout/sidebar.php'; ?>

<style>
.main {
  margin-left: 200px;
  padding: 24px;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

th, td {
  padding: 10px;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
}

th {
  background: #f9fafb;
}

button {
  padding: 8px 14px;
  border: none;
  background: #2563eb;
  color: #fff;
  cursor: pointer;
}

button.secondary {
  background: #6b7280;
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: none;
  align-items: center;
  justify-content: center;
}

.modal-box {
  background: #fff;
  padding: 20px;
  width: 420px;
}

.modal-box input {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
}
</style>

<main class="main">

<h1>Departments</h1>

<button onclick="openCreate()">Create Department</button>

<br><br>

<table>

<thead>
<tr>
<th>Name</th>
</tr>
</thead>

<tbody id="rows"></tbody>

</table>

</main>


<!-- CREATE / EDIT MODAL -->

<div class="modal" id="modal">

<div class="modal-box">

<h3 id="modalTitle">Department</h3>

<label>Name</label>
<input id="dName">

<button onclick="saveDepartment()">Save</button>
<button class="secondary" onclick="closeModal()">Cancel</button>

</div>

</div>


<script>

let departments = []
let editingId = null

const rows = document.getElementById('rows')
const modal = document.getElementById('modal')


/* =========================
   LOAD DEPARTMENTS
========================= */

function loadDepartments(){

fetch('/departments/list.php',{credentials:'same-origin'})
.then(r=>r.json())
.then(res=>{

if(res.status!=='success'){
console.error(res)
return
}

departments = res.data || []

rows.innerHTML=''

departments.forEach(dep=>{

const tr=document.createElement('tr')

tr.onclick=()=>editDepartment(dep)

tr.innerHTML=`
<td>${dep.name}</td>
`

rows.appendChild(tr)

})

})

}


/* =========================
   CREATE
========================= */

function openCreate(){

editingId=null

document.getElementById('dName').value=''

document.getElementById('modalTitle').innerText='Create Department'

modal.style.display='flex'

}


/* =========================
   EDIT
========================= */

function editDepartment(dep){

editingId=dep.id

document.getElementById('dName').value=dep.name

document.getElementById('modalTitle').innerText='Edit Department'

modal.style.display='flex'

}


/* =========================
   CLOSE MODAL
========================= */

function closeModal(){
modal.style.display='none'
}


/* =========================
   SAVE
========================= */

function saveDepartment(){

const name = document.getElementById('dName').value.trim()

if(!name){
alert('Department name required')
return
}

const payload={
id:editingId,
name:name
}

fetch('/departments/update.php',{
method:'POST',
credentials:'same-origin',
headers:{'Content-Type':'application/json'},
body:JSON.stringify(payload)
})
.then(r=>r.json())
.then(res=>{

if(res.status!=='success'){
alert(res.message || 'Save failed')
return
}

closeModal()
loadDepartments()

})

}


/* =========================
   INIT
========================= */

document.addEventListener("DOMContentLoaded",()=>{
loadDepartments()
})

</script>

<?php require_once __DIR__.'/layout/footer.php'; ?>