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

<div class="main">

<h1>Sections</h1>

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

<br><br>

<table>

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

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

</table>

</div>


<!-- CREATE / EDIT MODAL -->

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

<div class="modal-box">

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

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

<label>Department</label>
<select id="sDepartment">
<option value="">Select Department</option>
</select>

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

</div>

</div>


<style>

.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,
.modal-box select{
width:100%;
padding:8px;
margin-bottom:10px;
}

</style>


<script>

let sections = []
let editingId = null

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


/* ================= CSRF ================= */

let CSRF_TOKEN = null

fetch('/auth/csrf_token.php',{credentials:'include'})
.then(r=>r.json())
.then(d=>{
CSRF_TOKEN = d.csrf_token
})


function csrfFetch(url,options={}){

return fetch(url,{
...options,
credentials:'include',
headers:{
...(options.headers || {}),
'X-CSRF-Token': CSRF_TOKEN
}
})

}


/* ================= LOAD SECTIONS ================= */

function loadSections(){

csrfFetch('/sections/list.php')
.then(r=>r.json())
.then(res=>{

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

sections = res.data || []

rows.innerHTML=''

sections.forEach(sec=>{

const tr=document.createElement('tr')

tr.onclick=()=>editSection(sec)

tr.innerHTML=`
<td>${sec.name}</td>
<td>${sec.department_name || '-'}</td>
`

rows.appendChild(tr)

})

})

}


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

function loadDepartments(selectedId){

csrfFetch('/departments/list.php')
.then(r=>r.json())
.then(res=>{

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

const sel=document.getElementById('sDepartment')

sel.innerHTML='<option value="">Select Department</option>';

(res.data || []).forEach(dep=>{

const opt=document.createElement('option')

opt.value=dep.id
opt.textContent=dep.name

if(selectedId && selectedId==dep.id){
opt.selected=true
}

sel.appendChild(opt)

})

})

}


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

function openCreate(){

editingId=null

document.getElementById('sName').value=''
document.getElementById('sDepartment').value=''

loadDepartments()

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

modal.style.display='flex'

}


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

function editSection(sec){

editingId=sec.id

document.getElementById('sName').value=sec.name

loadDepartments(sec.department_id)

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

modal.style.display='flex'

}


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

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


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

function saveSection(){

const name = document.getElementById('sName').value.trim()
const departmentId = document.getElementById('sDepartment').value

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

if(!departmentId){
alert('Please select a department')
return
}

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

csrfFetch('/sections/update.php',{
method:'POST',
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()
loadSections()

})

}


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

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

</script>

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