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

<style>

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

h1 {
    margin-top: 0;
}

.toolbar {
    margin-bottom: 12px;
}

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

button.secondary {
    background: #6b7280;
}

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

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

th {
    background: #f9fafb;
}

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

.modal.hidden {
    display: none;
}

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

.modal-content h3 {
    margin-top: 0;
}

.modal-content input {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

</style>


<main class="main">

<h1>System Modules</h1>

<div class="toolbar">
<button onclick="openModal()">+ Add Module</button>
</div>


<table>

<thead>

<tr>
<th>ID</th>
<th>Key</th>
<th>Name</th>
<th>Status</th>
<th>Created</th>
<th>Action</th>
</tr>

</thead>

<tbody id="modulesBody"></tbody>

</table>

</main>


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

<div class="modal-content">

<h3>Create Module</h3>

<input id="moduleKey" placeholder="module_key">

<input id="moduleName" placeholder="Module Name">

<button onclick="createModule()">Save</button>

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

</div>

</div>


<script>

const MODULES_API = 'https://api.jb26.co.za/system/modules.php'

/* ================= 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
}
})

}


function openModal(){

document.getElementById('modal').classList.remove('hidden')

}


function closeModal(){

document.getElementById('modal').classList.add('hidden')

}


function loadModules(){

fetch(MODULES_API,{credentials:'include'})

.then(r=>r.json())

.then(res=>{

if(res.status!=='success'||!Array.isArray(res.data)){

throw new Error(res.message||'Invalid response')

}

const tbody=document.getElementById('modulesBody')

tbody.innerHTML=''

if(res.data.length===0){

tbody.innerHTML=`<tr><td colspan="6">No modules found</td></tr>`

return

}

res.data.forEach(m=>{

const tr=document.createElement('tr')

tr.innerHTML=`
<td>${m.id}</td>
<td>${m.module_key}</td>
<td>${m.name}</td>
<td>${m.active==1?'Active':'Disabled'}</td>
<td>${new Date(m.created_at).toLocaleDateString()}</td>
<td>
<button onclick="toggleModule(${m.id})">
${m.active==1?'Disable':'Enable'}
</button>
</td>
`

tbody.appendChild(tr)

})

})

.catch(err=>{

console.error('LOAD MODULES ERROR:',err)

alert('Failed to load modules')

})

}


function createModule(){

const module_key=moduleKey.value.trim()

const name=moduleName.value.trim()

if(!module_key||!name){

alert('All fields required')

return

}

csrfFetch(MODULES_API,{
method:'POST',
credentials:'include',
headers:{'Content-Type':'application/json'},
body:JSON.stringify({module_key,name})
})

.then(r=>r.json())

.then(res=>{

if(res.status!=='success'){

throw new Error(res.message||'Create failed')

}

closeModal()

loadModules()

})

.catch(err=>{

console.error('CREATE MODULE ERROR:',err)

alert('Failed to create module')

})

}


function toggleModule(id){

fetch(MODULES_API,{
method:'PUT',
credentials:'include',
headers:{'Content-Type':'application/json'},
body:JSON.stringify({id})
})

.then(r=>r.json())

.then(res=>{

if(res.status!=='success'){

throw new Error(res.message||'Update failed')

}

loadModules()

})

.catch(err=>{

console.error('TOGGLE MODULE ERROR:',err)

alert('Failed to update module')

})

}


document.addEventListener('DOMContentLoaded',loadModules)

</script>


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