<div class="d-flex justify-content-between align-items-center mb-4">
    <h4 class="mb-0"><i class="fas fa-sitemap me-2"></i><?= lang('admin.departments') ?></h4>
    <?php if (Gate::can('staff.manage')): ?>
    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#deptModal" onclick="openDeptForm()"><i class="fas fa-plus me-1"></i>Add Department</button>
    <?php endif; ?>
</div>
<div class="card">
    <div class="card-body">
        <table id="dept-table" class="table table-striped w-100"
               data-url="/admin/departments/datatable"
               data-columns='[{"data":"code"},{"data":"name"},{"data":"name_ar"},{"data":"parent"},{"data":"manager"},{"data":"staff_count"},{"data":"active"},{"data":"actions","orderable":false}]'>
            <thead><tr><th>Code</th><th>Name</th><th>Arabic</th><th>Parent</th><th>Manager</th><th>Staff</th><th>Status</th><th>Actions</th></tr></thead>
        </table>
    </div>
</div>
<div class="modal fade" id="deptModal" tabindex="-1"><div class="modal-dialog"><div class="modal-content">
    <div class="modal-header"><h5 class="modal-title" id="deptModalTitle">Department</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
    <div class="modal-body">
        <form id="dept-form">
            <input type="hidden" name="_token" value="<?= csrf_token() ?>">
            <input type="hidden" name="dept_id" id="dept_id">
            <div class="mb-3"><label class="form-label">Code <span class="text-danger">*</span></label><input type="text" name="department_code" id="dept_code" class="form-control" required></div>
            <div class="mb-3"><label class="form-label">Name (EN) <span class="text-danger">*</span></label><input type="text" name="name_en" id="dept_name_en" class="form-control" required></div>
            <div class="mb-3"><label class="form-label">Name (AR) <span class="text-danger">*</span></label><input type="text" name="name_ar" id="dept_name_ar" class="form-control" required></div>
            <div class="mb-3"><label class="form-label">Parent</label><select name="parent_id" id="dept_parent" class="form-select"><option value="">None</option><?php foreach($departments as $d): ?><option value="<?= $d['id'] ?>"><?= e($d['name_en']) ?></option><?php endforeach; ?></select></div>
            <div class="mb-3"><label class="form-label">Manager</label><select name="manager_user_id" id="dept_manager" class="form-select"><option value="">None</option><?php foreach($users as $u): ?><option value="<?= $u['id'] ?>"><?= e($u['full_name_en']) ?></option><?php endforeach; ?></select></div>
            <div class="form-check form-switch"><input class="form-check-input" type="checkbox" name="is_active" value="1" id="dept_active" checked><label class="form-check-label">Active</label></div>
        </form>
    </div>
    <div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button><button type="button" class="btn btn-primary" id="btn-save-dept">Save</button></div>
</div></div></div>
<?php $__view->push('scripts') ?>
<script>
DataTableHelper.init('dept-table');
function openDeptForm(data){
    $('#deptModalTitle').text(data?'Edit Department':'Add Department');
    $('#dept_id').val(data?.id||''); $('#dept_code').val(data?.code||'').prop('readonly',!!data);
    $('#dept_name_en').val(data?.nameEn||''); $('#dept_name_ar').val(data?.nameAr||'');
    $('#dept_parent').val(data?.parent||''); $('#dept_manager').val(data?.manager||'');
    $('#dept_active').prop('checked',data?data.active=='1':true);
}
$(document).on('click','.btn-edit-dept',function(){
    openDeptForm({id:$(this).data('id'),code:$(this).data('code'),nameEn:$(this).data('name-en'),nameAr:$(this).data('name-ar'),parent:$(this).data('parent'),manager:$(this).data('manager'),active:$(this).data('active')});
    new bootstrap.Modal('#deptModal').show();
});
$('#btn-save-dept').click(function(){
    const id=$('#dept_id').val();
    const url=id?'/admin/departments/'+id+'/update':'/admin/departments/store';
    $.post(url,$('#dept-form').serialize(),function(r){
        if(r.success){bootstrap.Modal.getInstance(document.getElementById('deptModal')).hide();FormHelper.showToast('success',r.message);DataTableHelper.reload('dept-table');}
        else FormHelper.showToast('error',r.message||'Error');
    },'json');
});
$(document).on('click','.btn-delete-dept',function(){
    if(!confirm('Delete this department?'))return;
    $.post('/admin/departments/'+$(this).data('id')+'/delete',{_token:'<?= csrf_token() ?>'},function(r){
        if(r.success){FormHelper.showToast('success',r.message);DataTableHelper.reload('dept-table');}else FormHelper.showToast('error',r.message);
    },'json');
});
</script>
<?php $__view->endPush() ?>