admin-staff.php

<?php
include 'security-check.php';
include 'db_connect.php';
require_once 'uppercase-sanitizer.php';

// Admin-only access
if (!isset($_SESSION['staff_user']) || $_SESSION['role'] != 'Admin') {
    header("Location: login.php"); exit();
}

// ADD STAFF
if (isset($_POST['add_staff'])) {
    // FIX: Use prepared statements throughout — no more real_escape_string + string interpolation
    $u = trim($_POST['username'] ?? '');
    $plain_pass_new = trim($_POST['password'] ?? '');
    $p = password_hash($plain_pass_new, PASSWORD_BCRYPT, ['cost' => 12]);
    $r = $_POST['role'] ?? 'Staff';

    // Server-side validation for Staff role
    $validation_failed = false;

    if ($r == 'Staff') {
        if (empty($_POST['hostel_type']) || empty($_POST['block_name'])) {
            echo "<script>showToast('❌ Error: Staff must be assigned to a Hostel and Block!', 'error', 4000);</script>";
            $validation_failed = true;
        }
    }

    if (!$validation_failed) {
        $hostel = ($r == 'Staff' && !empty($_POST['hostel_type'])) ? $_POST['hostel_type'] : null;
        $block  = ($r == 'Staff' && !empty($_POST['block_name']))  ? $_POST['block_name']  : null;
        $one_device_mode = $_POST['one_device_mode'] ?? 'enabled';

        // FIX: Prepared statement for duplicate-check
        $check = executeQuery($conn, "SELECT id FROM staff_users WHERE username = ?", 's', [$u]);
        if ($check && mysqli_num_rows($check) > 0) {
            echo "<script>showToast('❌ Error: Username already exists!', 'error', 3000);</script>";
        } else {
            // FIX: Prepared statement for INSERT
            $ins = mysqli_prepare($conn, "INSERT INTO staff_users (username, password, role, hostel_type, block_name, one_device_mode) VALUES (?, ?, ?, ?, ?, ?)");
            mysqli_stmt_bind_param($ins, 'ssssss', $u, $p, $r, $hostel, $block, $one_device_mode);
            mysqli_stmt_execute($ins);
            mysqli_stmt_close($ins);
            echo "<script>showToast('✅ New User Added Successfully!', 'success', 3000); setTimeout(() => window.location='admin-staff.php', 3000);</script>";
        }
    }
}

// UPDATE PASSWORD
if (isset($_POST['update_password'])) {
    $id          = intval($_POST['user_id']);
    $plain_pass  = trim($_POST['new_password']); // Keep plain text to show admin ONCE
    $hashed_pass = password_hash($plain_pass, PASSWORD_DEFAULT); // Hash for DB

    // Prepared statement - safe from SQL injection
    $stmt = mysqli_prepare($conn, "UPDATE staff_users SET password = ?, session_token = NULL WHERE id = ?");
    mysqli_stmt_bind_param($stmt, 'si', $hashed_pass, $id);
    mysqli_stmt_execute($stmt);
    mysqli_stmt_close($stmt);

    // Store plain text in session - shown ONCE after redirect, then cleared
    $_SESSION['show_password'] = ['plain' => $plain_pass, 'user_id' => $id];
    header("Location: admin-staff.php");
    exit();
}

// ═══════════════════════════════════════════════════════════════
// ✅ NEW: UPDATE ASSIGNMENT (hostel + block change)
// ═══════════════════════════════════════════════════════════════
if (isset($_POST['update_assignment'])) {
    $id     = intval($_POST['user_id']);
    $role   = trim($_POST['user_role'] ?? '');
    // ← ra_ prefix to avoid clash with Add Staff form fields
    $hostel = trim($_POST['ra_hostel_type'] ?? '');
    $block  = trim($_POST['ra_block_name']  ?? '');

    if ($role === 'Admin') {
        // Admin — clear assignment, flag re-login (session_token untouched!)
        $stmt = mysqli_prepare($conn, "UPDATE staff_users SET hostel_type = NULL, block_name = NULL, force_relogin = 1 WHERE id = ?");
        mysqli_stmt_bind_param($stmt, 'i', $id);
        mysqli_stmt_execute($stmt);
        mysqli_stmt_close($stmt);
        $_SESSION['success_message'] = '✅ Admin assignment cleared. User will need to re-login.';
    } elseif (empty($hostel) || empty($block)) {
        $_SESSION['error_message'] = '❌ Staff must have both Hostel and Block assigned!';
    } else {
        // ✅ force_relogin = 1 → staff ka next page load pe logout hoga
        // session_token touch NAHI kiya → doosre staff ki sessions safe hain!
        $stmt = mysqli_prepare($conn, "UPDATE staff_users SET hostel_type = ?, block_name = ?, force_relogin = 1 WHERE id = ?");
        mysqli_stmt_bind_param($stmt, 'ssi', $hostel, $block, $id);
        mysqli_stmt_execute($stmt);
        mysqli_stmt_close($stmt);
        $_SESSION['success_message'] = '✅ Assignment updated! Staff will be re-logged in automatically.';
    }
    header("Location: admin-staff.php");
    exit();
}

// DELETE STAFF
if (isset($_GET['delete'])) {
    $id = intval($_GET['delete']);
    
    // FIX: Prepared statement for user check
    $user_check = executeQuery($conn, "SELECT role, username FROM staff_users WHERE id = ?", 'i', [$id]);
    $user_data = mysqli_fetch_assoc($user_check);
    
    // ✅ FIX: Check if user exists before accessing array
    if (!$user_data) {
        $_SESSION['error_message'] = '❌ Error: User not found!';
        header("Location: admin-staff.php");
        exit();
    }
    
    // Check if last Staff
    if ($user_data['role'] == 'Staff') {
        // FIX: Prepared statement for staff count
        $count_res = executeQuery($conn, "SELECT COUNT(*) as total FROM staff_users WHERE role = ?", 's', ['Staff']);
        $count_row = mysqli_fetch_assoc($count_res);
        if ($count_row['total'] <= 1) {
            $_SESSION['error_message'] = '⚠️ STOP: At least 1 Staff member is required!';
            header("Location: admin-staff.php");
            exit();
        }
    }
    
    // Check if last Admin
    if ($user_data['role'] == 'Admin') {
        // FIX: Prepared statement for admin count
        $admin_count_res = executeQuery($conn, "SELECT COUNT(*) as total FROM staff_users WHERE role = ?", 's', ['Admin']);
        $admin_count = mysqli_fetch_assoc($admin_count_res);
        // ✅ FIX: Check if query succeeded
        if ($admin_count && $admin_count['total'] <= 1) {
            $_SESSION['error_message'] = '⚠️ STOP: At least 1 Admin is required!';
            header("Location: admin-staff.php");
            exit();
        }
    }

    // FIX: Prepared statement for DELETE
    $del_stmt = mysqli_prepare($conn, "DELETE FROM staff_users WHERE id = ?");
    mysqli_stmt_bind_param($del_stmt, 'i', $id);
    mysqli_stmt_execute($del_stmt);
    mysqli_stmt_close($del_stmt);
    $_SESSION['success_message'] = "✅ User '{$user_data['username']}' deleted successfully!";
    header("Location: admin-staff.php");
    exit();
}

// ═══════════════════════════════════════════════════════════════
// ✅ NEW: TOGGLE ONE-DEVICE MODE
// ═══════════════════════════════════════════════════════════════
if (isset($_POST['toggle_device_mode'])) {
    $user_id = intval($_POST['user_id']);

    // Fetch CURRENT value directly from DB — don't trust POST hidden field
    $fetch = mysqli_prepare($conn, "SELECT one_device_mode FROM staff_users WHERE id = ?");
    mysqli_stmt_bind_param($fetch, 'i', $user_id);
    mysqli_stmt_execute($fetch);
    $fetch_result = mysqli_stmt_get_result($fetch);
    $fetch_row    = mysqli_fetch_assoc($fetch_result);
    mysqli_stmt_close($fetch);

    $current_mode = $fetch_row['one_device_mode'] ?? 'enabled';
    $new_mode     = ($current_mode === 'enabled') ? 'disabled' : 'enabled';

    // Update with new toggled value
    $stmt = mysqli_prepare($conn, "UPDATE staff_users SET one_device_mode = ? WHERE id = ?");
    mysqli_stmt_bind_param($stmt, 'si', $new_mode, $user_id);
    mysqli_stmt_execute($stmt);
    mysqli_stmt_close($stmt);

    $mode_text = ($new_mode === 'enabled') ? 'Single' : 'Multi';
    $_SESSION['toast'] = "Device mode updated to: {$mode_text} Device";

    header("Location: admin-staff.php");
    exit();
}

?>

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Manage Staff | Hostel Management</title>
    <?php include 'session-monitor-header.php'; ?>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="toast.css">
    <script src="toast.js"></script>
    <script src="uppercase-input-solution.js"></script>
    <style>
        /* ── Base ── */
        *, *::before, *::after { box-sizing: border-box; }
        body { margin: 0; font-family: 'Segoe UI', sans-serif; background: var(--ms-bg); color: var(--ms-text); }
        .main-content { margin-left: 250px; padding: 28px 24px 60px; }

        /* ── Page header ── */
        .page-header {
            display: flex; align-items: center; gap: 12px;
            margin-bottom: 24px;
        }
        .page-header .page-icon {
            width: 44px; height: 44px; border-radius: 10px;
            background: linear-gradient(135deg,#14532d,#16a34a);
            display: flex; align-items: center; justify-content: center;
            color: #fff; font-size: 18px; flex-shrink: 0;
        }
        .page-header h2 {
            margin: 0; font-size: 20px; font-weight: 700; color: var(--ms-text);
        }
        .page-header p { margin: 2px 0 0; font-size: 13px; color: var(--ms-muted); }

        /* ── Layout ── */
        .staff-layout {
            display: grid;
            grid-template-columns: 340px 1fr;
            gap: 20px;
            align-items: start;
        }

        /* ── Card / Box ── */
        .card {
            background: var(--ms-card);
            border: 1px solid var(--ms-border);
            border-radius: 12px;
            padding: 24px;
            box-shadow: var(--ms-shadow);
        }
        .card-title {
            font-size: 15px; font-weight: 700;
            color: var(--ms-text);
            margin: 0 0 20px;
            display: flex; align-items: center; gap: 8px;
        }
        .card-title i { color: #16a34a; }

        /* ── Form elements ── */
        .form-group { margin-bottom: 14px; }
        .form-group label {
            display: block; margin-bottom: 6px;
            font-size: 12px; font-weight: 600;
            color: var(--ms-muted); text-transform: uppercase; letter-spacing: 0.5px;
        }
        .form-control {
            width: 100%; padding: 9px 12px;
            border: 1px solid var(--ms-border);
            border-radius: 7px; font-size: 14px;
            background: var(--ms-bg); color: var(--ms-text);
            transition: border-color 0.2s, box-shadow 0.2s;
            outline: none;
        }
        .form-control:focus {
            border-color: #0078d4;
            box-shadow: 0 0 0 3px rgba(0,120,212,.12);
        }

        /* Password wrapper */
        .pw-wrap { position: relative; }
        .pw-wrap .form-control { padding-right: 40px; }
        .pw-wrap .eye-icon {
            position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
            cursor: pointer; color: var(--ms-muted); font-size: 15px; transition: color 0.2s;
        }
        .pw-wrap .eye-icon:hover { color: #0078d4; }

        /* ── Assignment section inside add form ── */
        .assign-section {
            display: none;
            background: var(--ms-bg);
            border: 1px solid var(--ms-border);
            border-left: 4px solid #0078d4;
            border-radius: 8px;
            padding: 16px;
            margin-bottom: 14px;
        }
        .assign-section.show { display: block; }
        .assign-section-title {
            font-size: 12px; font-weight: 700; color: #0078d4;
            text-transform: uppercase; letter-spacing: 0.5px;
            margin: 0 0 12px; display: flex; align-items: center; gap: 6px;
        }

        /* Inline hostel/block selects in add form */
        .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

        /* ── Info box ── */
        .info-box {
            background: #fffbeb;
            border-left: 4px solid #f59e0b;
            border-radius: 6px;
            padding: 10px 14px;
            margin-bottom: 14px;
            font-size: 12px; color: #92400e;
        }
        .info-box ul { margin: 5px 0 0 16px; padding: 0; }

        /* ── Buttons ── */
        .btn {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 9px 16px; border: none; border-radius: 7px;
            font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s;
        }
        .btn-primary   { background: #0078d4; color: #fff; }
        .btn-primary:hover { background: #005fa3; }
        .btn-success   { background: #16a34a; color: #fff; width: 100%; justify-content: center; font-size: 14px; padding: 11px; }
        .btn-success:hover { background: #14532d; }
        .btn-warning   { background: #f59e0b; color: #fff; }
        .btn-warning:hover { background: #d97706; }
        .btn-danger    { background: #ef4444; color: #fff; }
        .btn-danger:hover { background: #dc2626; }
        .btn-secondary { background: #6b7280; color: #fff; }
        .btn-secondary:hover { background: #4b5563; }
        .btn-sm { padding: 5px 10px; font-size: 12px; border-radius: 5px; }

        /* ── Table ── */
        .table-wrapper { overflow-x: auto; border-radius: 8px; border: 1px solid var(--ms-border); }
        table { width: 100%; border-collapse: collapse; font-size: 13px; }
        thead th {
            background: #166534; color: #fff;
            padding: 11px 12px; font-weight: 600;
            font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px;
            position: sticky; top: 0;
        }
        tbody tr { transition: background 0.15s; }
        tbody tr:hover { background: rgba(0,120,212,.04); }
        td { padding: 11px 12px; border-bottom: 1px solid var(--ms-border); vertical-align: middle; }
        tbody tr:last-child td { border-bottom: none; }

        /* ── Badges ── */
        .badge {
            display: inline-flex; align-items: center; gap: 4px;
            padding: 3px 10px; border-radius: 20px;
            font-size: 11px; font-weight: 700; letter-spacing: 0.3px;
        }
        .badge-admin  { background: #fee2e2; color: #b91c1c; }
        .badge-staff  { background: #dbeafe; color: #1e40af; }

        /* Assignment tags */
        .assign-stack { display: flex; flex-direction: column; gap: 4px; }
        .assign-tag {
            display: inline-flex; align-items: center; gap: 5px;
            padding: 3px 9px; border-radius: 20px;
            font-size: 11px; font-weight: 600;
        }
        .assign-tag.boys  { background: #dbeafe; color: #1e40af; }
        .assign-tag.girls { background: #fce7f3; color: #9d174d; }
        .assign-tag.block { background: #ede9fe; color: #5b21b6; }
        .assign-tag.none  { background: #fee2e2; color: #b91c1c; }
        .all-access { font-size: 12px; color: var(--ms-muted); display: flex; align-items: center; gap: 5px; }
        .all-access i { color: #f59e0b; }

        /* Password cell */
        .password-cell { display: flex; align-items: center; gap: 6px; }
        .pw-dots {
            font-family: monospace; font-size: 13px;
            color: var(--ms-muted); letter-spacing: 2px;
            flex: 1; min-width: 0;
        }
        .pw-text { display: none; font-family: monospace; font-size: 11px;
            color: var(--ms-text); word-break: break-all; flex: 1; min-width: 0; }
        .btn-reveal {
            background: none; border: none; color: var(--ms-muted);
            cursor: pointer; padding: 4px 6px; border-radius: 4px;
            font-size: 13px; flex-shrink: 0; transition: all 0.2s;
        }
        .btn-reveal:hover { background: var(--ms-bg); color: #0078d4; }

        /* Device mode toggle */
        .device-badge {
            display: inline-flex; align-items: center; gap: 5px;
            padding: 5px 11px; border-radius: 20px;
            font-size: 11px; font-weight: 700;
            border: none; cursor: pointer; transition: all 0.2s;
        }
        .device-badge.single { background: #dcfce7; color: #166534; }
        .device-badge.single:hover { background: #16a34a; color: #fff; }
        .device-badge.multi  { background: #f3f4f6; color: #4b5563; }
        .device-badge.multi:hover  { background: #6b7280; color: #fff; }

        /* Actions cell */
        .actions-cell { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }

        /* ── Modals ── */
        .modal {
            display: none; position: fixed; inset: 0; z-index: 1000;
            background: rgba(0,0,0,.45); backdrop-filter: blur(3px);
            align-items: center; justify-content: center;
        }
        .modal.open { display: flex; animation: fadeIn .2s; }
        @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

        .modal-box {
            background: var(--ms-card);
            border: 1px solid var(--ms-border);
            border-radius: 14px; padding: 28px;
            width: 90%; max-width: 440px;
            box-shadow: 0 20px 60px rgba(0,0,0,.2);
            animation: slideUp .22s ease;
        }
        .modal-box.wide { max-width: 500px; }
        @keyframes slideUp { from { transform:translateY(30px); opacity:0; } to { transform:translateY(0); opacity:1; } }

        .modal-header {
            display: flex; justify-content: space-between; align-items: center;
            margin-bottom: 20px; padding-bottom: 14px;
            border-bottom: 1px solid var(--ms-border);
        }
        .modal-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--ms-text); }
        .modal-close {
            background: none; border: none; font-size: 22px; line-height: 1;
            color: var(--ms-muted); cursor: pointer; padding: 0 4px;
            border-radius: 4px; transition: all 0.2s;
        }
        .modal-close:hover { background: var(--ms-bg); color: var(--ms-text); }

        .modal-footer {
            display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px;
        }

        /* Hostel pills in reassign modal */
        .hostel-pills { display: flex; gap: 10px; flex-wrap: wrap; }
        .hostel-pill input[type="radio"] { display: none; }
        .hostel-pill label {
            padding: 9px 20px; border: 2px solid var(--ms-border);
            border-radius: 24px; cursor: pointer;
            font-size: 13px; font-weight: 600; transition: all .2s;
            color: var(--ms-text); user-select: none;
        }
        .hostel-pill label:hover { border-color: #0078d4; background: rgba(0,120,212,.06); }
        .hostel-pill input:checked + label { border-color: #0078d4; background: #0078d4; color: #fff; }

        /* Block grid */
        .block-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        .block-btn input[type="radio"] { display: none; }
        .block-btn label {
            display: flex; flex-direction: column; align-items: center;
            justify-content: center; padding: 16px 10px; gap: 7px;
            border: 2px solid var(--ms-border); border-radius: 10px;
            cursor: pointer; font-size: 13px; font-weight: 600;
            color: var(--ms-text); transition: all .2s; user-select: none;
        }
        .block-btn label i { font-size: 22px; color: #0078d4; }
        .block-btn label:hover { border-color: #0078d4; background: rgba(0,120,212,.05); }
        .block-btn input:checked + label { border-color: #16a34a; background: #f0fdf4; color: #14532d; }
        .block-btn input:checked + label i { color: #16a34a; }

        /* Admin note in modal */
        .admin-note {
            background: #fffbeb; border-left: 4px solid #f59e0b;
            border-radius: 8px; padding: 12px 16px;
            font-size: 13px; color: #92400e; margin-bottom: 4px;
        }

        /* ── Password reveal banner ── */
        .pw-banner {
            display: flex; align-items: center; justify-content: space-between;
            gap: 16px; flex-wrap: wrap;
            background: #fffbeb; border: 1.5px solid #f59e0b;
            border-radius: 10px; padding: 14px 18px; margin-bottom: 20px;
        }
        .pw-banner-left { display: flex; align-items: center; gap: 12px; }
        .pw-banner-icon { font-size: 22px; }
        .pw-banner-row  { margin-top: 5px; font-size: 13px; color: #555; }
        .pw-banner-hint { font-size: 11px; color: #aaa; margin-top: 3px; }
        .pw-code {
            background: #fef3c7; padding: 3px 9px; border-radius: 5px;
            font-size: 14px; font-weight: 700; border: 1px solid #fcd34d;
        }
        .pw-copy-btn {
            margin-left: 8px; padding: 3px 10px;
            background: #f59e0b; border: none; border-radius: 5px;
            cursor: pointer; font-size: 12px; font-weight: 600;
        }
        .pw-banner-close {
            background: none; border: none; font-size: 20px; cursor: pointer; color: #aaa;
        }

        /* ── Utility ── */
        .btn-block { width: 100%; justify-content: center; }
        .btn-green { background: #16a34a; color: #fff; font-size: 14px; padding: 11px; }
        .btn-green:hover { background: #14532d; }
        .req  { color: #ef4444; }
        .hint { font-size: 11px; color: var(--ms-muted); margin: 10px 0 0; }
    </style>
    
    <script>
        // Toggle staff-specific fields based on role
        function toggleStaffFields() {
            const role        = document.getElementById('roleSelect').value;
            const staffFields = document.getElementById('staffFields');
            const hostelSel   = document.getElementById('hostelSelect');
            const blockSel    = document.getElementById('blockSelect');

            if (role === 'Staff') {
                staffFields.classList.add('show');
                // Enable + require hostel & block
                hostelSel.required = true;
                hostelSel.disabled = false;
                blockSel.required  = true;
                blockSel.disabled  = false;
            } else {
                // Admin — hide box, disable AND clear fields
                // Disabled fields are NOT submitted by browser, so no clash
                staffFields.classList.remove('show');
                hostelSel.required = false;
                hostelSel.disabled = true;   // ← KEY FIX: disabled fields skip validation
                hostelSel.value    = '';
                blockSel.required  = false;
                blockSel.disabled  = true;   // ← KEY FIX
                blockSel.value     = '';
            }
        }
        
        // Initialize on page load
        window.addEventListener('DOMContentLoaded', function() {
            toggleStaffFields();
        });
        
        // Toggle password visibility in table (new dots/text structure)
        function togglePassword(id) {
            const dots = document.getElementById('dots-' + id);
            const text = document.getElementById('text-' + id);
            const icon = document.getElementById('icon-' + id);
            const isHidden = dots.style.display !== 'none';
            dots.style.display = isHidden ? 'none'   : 'inline';
            text.style.display = isHidden ? 'inline' : 'none';
            icon.className = isHidden ? 'fas fa-eye-slash' : 'fas fa-eye';
        }
        
        // Show password reset modal
        function showEditModal(userId, username) {
            document.getElementById('editUserId').value    = userId;
            document.getElementById('editUsername').value  = username;
            document.getElementById('newPassword').value   = '';
            document.getElementById('passwordModal').style.display = 'flex';
            document.getElementById('newPassword').focus();
        }
        function closeModal() {
            document.getElementById('passwordModal').style.display = 'none';
        }
        
        // Toggle password visibility in add form
        function toggleAddPassword() {
            const input = document.getElementById('addPassword');
            const icon = document.getElementById('addPasswordIcon');
            
            if (input.type === 'password') {
                input.type = 'text';
                icon.classList.remove('fa-eye');
                icon.classList.add('fa-eye-slash');
            } else {
                input.type = 'password';
                icon.classList.remove('fa-eye-slash');
                icon.classList.add('fa-eye');
            }
        }
        
        // Toggle password visibility in edit modal
        function toggleEditPassword() {
            const input = document.getElementById('newPassword');
            const icon  = document.getElementById('editPasswordIcon');
            if (input.type === 'password') {
                input.type = 'text';
                icon.classList.replace('fa-eye','fa-eye-slash');
            } else {
                input.type = 'password';
                icon.classList.replace('fa-eye-slash','fa-eye');
            }
        }

        // ── Reassign Modal ──
        function showReassignModal(id, username, role, hostel, block) {
            document.getElementById('raUserId').value   = id;
            document.getElementById('raUserRole').value = role;
            document.getElementById('raTitle').innerHTML = '<i class="fas fa-map-marker-alt"></i> Reassign: ' + username;

            const staffSection = document.getElementById('raStaffSection');
            const adminNote    = document.getElementById('raAdminNote');
            if (role === 'Admin') {
                staffSection.style.display = 'none';
                adminNote.style.display    = 'block';
            } else {
                staffSection.style.display = 'block';
                adminNote.style.display    = 'none';
                // Pre-select current hostel
                document.querySelectorAll('input[name="ra_hostel_type"]').forEach(r => r.checked = (r.value === hostel));
                // Pre-select current block
                document.querySelectorAll('input[name="ra_block_name"]').forEach(r => r.checked = (r.value === block));
            }
            document.getElementById('reassignModal').style.display = 'flex';
        }
        function closeReassignModal() {
            document.getElementById('reassignModal').style.display = 'none';
        }
    </script>
</head>
<body>
    <?php include 'navbar.php'; ?>
    <?php include 'lang-switcher.php'; ?>
    <?php include 'sidebar.php'; ?>
    
    <div class="main-content">

        <!-- ── Page Header ── -->
        <div class="page-header">
            <div class="page-icon"><i class="fas fa-users-cog"></i></div>
            <div>
                <h2>Staff Management</h2>
                <p>Add users, assign hostels &amp; blocks, manage access</p>
            </div>
        </div>

        <!-- ── Session Messages ── -->
        <?php if (isset($_SESSION['success_message'])): ?>
            <script>showToast('<?= addslashes($_SESSION['success_message']) ?>', 'success', 3000);</script>
            <?php unset($_SESSION['success_message']); ?>
        <?php endif; ?>
        <?php if (isset($_SESSION['error_message'])): ?>
            <script>showToast('<?= addslashes($_SESSION['error_message']) ?>', 'error', 4000);</script>
            <?php unset($_SESSION['error_message']); ?>
        <?php endif; ?>
        <?php if (isset($_SESSION['toast'])): ?>
            <script>showToast('✅ <?= addslashes($_SESSION['toast']) ?>', 'success', 3000);</script>
            <?php unset($_SESSION['toast']); ?>
        <?php endif; ?>

        <!-- ── One-time Password Banner ── -->
        <?php if (isset($_SESSION['show_password'])): ?>
            <?php
                $sp      = $_SESSION['show_password'];
                $u_res   = mysqli_query($conn, "SELECT username FROM staff_users WHERE id=".intval($sp['user_id']));
                $u_row   = mysqli_fetch_assoc($u_res);
                $sp_name = htmlspecialchars($u_row['username'] ?? 'Staff');
                $sp_pass = htmlspecialchars($sp['plain']);
                unset($_SESSION['show_password']); // shown only once
            ?>
            <div class="pw-banner" id="pwRevealBanner">
                <div class="pw-banner-left">
                    <span class="pw-banner-icon">🔑</span>
                    <div>
                        <strong>Password Reset — Share with Staff</strong>
                        <div class="pw-banner-row">
                            User: <strong><?= $sp_name ?></strong>
                            &nbsp;|&nbsp; New Password:
                            <code class="pw-code"><?= $sp_pass ?></code>
                            <button class="pw-copy-btn"
                                onclick="navigator.clipboard.writeText('<?= addslashes($sp_pass) ?>');this.textContent='✅ Copied!';setTimeout(()=>this.textContent='📋 Copy',1500);">
                                📋 Copy
                            </button>
                        </div>
                        <div class="pw-banner-hint">⚠️ Disappears on next page refresh</div>
                    </div>
                </div>
                <button class="pw-banner-close" onclick="document.getElementById('pwRevealBanner').remove()">✕</button>
            </div>
        <?php endif; ?>

        <!-- ── Main 2-column Layout ── -->
        <div class="staff-layout">

            <!-- ── LEFT: Add User Form ── -->
            <div class="card">
                <p class="card-title"><i class="fas fa-user-plus"></i> Add New User</p>
                <form method="POST">

                    <div class="form-group">
                        <label>Username</label>
                        <input class="form-control" type="text" name="username" placeholder="e.g. staff_ravi" required>
                    </div>

                    <div class="form-group">
                        <label>Password</label>
                        <div class="pw-wrap">
                            <input class="form-control" type="password" id="addPassword" name="password" placeholder="Enter password" required>
                            <i class="fas fa-eye eye-icon" id="addPasswordIcon" onclick="toggleAddPassword()"></i>
                        </div>
                    </div>

                    <div class="form-group">
                        <label>Role</label>
                        <select class="form-control" name="role" id="roleSelect" onchange="toggleStaffFields()" required>
                            <option value="Staff">Staff</option>
                            <option value="Admin">Admin</option>
                        </select>
                    </div>

                    <!-- Staff-only: hostel & block (hidden for Admin) -->
                    <div id="staffFields" class="assign-section show">
                        <p class="assign-section-title"><i class="fas fa-building"></i> Hostel &amp; Block Assignment</p>
                        <div class="two-col">
                            <div class="form-group" style="margin:0">
                                <label>Hostel <span class="req">*</span></label>
                                <select class="form-control" name="hostel_type" id="hostelSelect" required>
                                    <option value="">-- Select --</option>
                                    <option value="Boys Hostel">Boys Hostel</option>
                                    <option value="Girls Hostel">Girls Hostel</option>
                                </select>
                            </div>
                            <div class="form-group" style="margin:0">
                                <label>Block <span class="req">*</span></label>
                                <select class="form-control" name="block_name" id="blockSelect" required>
                                    <option value="">-- Select --</option>
                                    <option value="Block A">Block A</option>
                                    <option value="Block B">Block B</option>
                                </select>
                            </div>
                        </div>
                        <p class="hint"><i class="fas fa-info-circle"></i> Staff will only see students from their assigned hostel &amp; block.</p>
                    </div>

                    <div class="form-group">
                        <label><i class="fas fa-mobile-alt"></i> Device Login Mode</label>
                        <select class="form-control" name="one_device_mode">
                            <option value="enabled" selected>🔒 Single Device (Recommended)</option>
                            <option value="disabled">🖥️ Multi Device</option>
                        </select>
                    </div>

                    <div class="info-box">
                        <strong><i class="fas fa-info-circle"></i> Device Mode</strong>
                        <ul>
                            <li><strong>Single:</strong> One active session — more secure.</li>
                            <li><strong>Multi:</strong> Login from multiple devices at once.</li>
                        </ul>
                    </div>

                    <button type="submit" name="add_staff" class="btn btn-block btn-green">
                        <i class="fas fa-plus-circle"></i> Add User
                    </button>
                </form>
            </div>

            <!-- ── RIGHT: User Table ── -->
            <div class="card">
                <p class="card-title"><i class="fas fa-users"></i> All Users</p>
                <div class="table-wrapper">
                    <table>
                        <thead>
                            <tr>
                                <th>Username</th>
                                <th>Password</th>
                                <th>Role</th>
                                <th>Assignment</th>
                                <th>Device Mode</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                        <?php
                            $res = mysqli_query($conn, "SELECT * FROM staff_users ORDER BY role DESC, username ASC");
                            while ($row = mysqli_fetch_assoc($res)):
                                // Device mode vars
                                $dm_enabled  = ($row['one_device_mode'] !== 'disabled');
                                $dm_class    = $dm_enabled ? 'single' : 'multi';
                                $dm_label    = $dm_enabled ? 'Single' : 'Multi';
                                $dm_icon     = $dm_enabled ? 'fa-mobile-alt' : 'fa-laptop';
                                // Assignment vars
                                $h = $row['hostel_type'] ?: '';
                                $b = $row['block_name']  ?: '';
                                $isGirls    = (strpos($h,'Girls') !== false);
                                $hClass     = $h ? ($isGirls ? 'girls' : 'boys') : 'none';
                                $hIcon      = $h ? ($isGirls ? 'fa-female' : 'fa-male') : 'fa-exclamation-circle';
                        ?>
                            <tr>
                                <!-- Username -->
                                <td><strong><?= htmlspecialchars($row['username']) ?></strong></td>

                                <!-- Password (masked by default) -->
                                <td>
                                    <div class="password-cell">
                                        <span class="pw-dots" id="dots-<?= $row['id'] ?>">••••••••</span>
                                        <span class="pw-text"  id="text-<?= $row['id'] ?>"><?= htmlspecialchars($row['password']) ?></span>
                                        <button class="btn-reveal" type="button" onclick="togglePassword(<?= $row['id'] ?>)">
                                            <i class="fas fa-eye" id="icon-<?= $row['id'] ?>"></i>
                                        </button>
                                    </div>
                                </td>

                                <!-- Role badge -->
                                <td>
                                    <span class="badge <?= ($row['role']=='Admin') ? 'badge-admin' : 'badge-staff' ?>">
                                        <?= $row['role'] == 'Admin' ? '<i class="fas fa-crown"></i> ' : '<i class="fas fa-user"></i> ' ?>
                                        <?= $row['role'] ?>
                                    </span>
                                </td>

                                <!-- Hostel & Block assignment -->
                                <td>
                                    <?php if ($row['role'] == 'Staff'): ?>
                                        <div class="assign-stack">
                                            <span class="assign-tag <?= $hClass ?>">
                                                <i class="fas <?= $hIcon ?>"></i>
                                                <?= $h ?: '⚠️ No Hostel' ?>
                                            </span>
                                            <?php if ($b): ?>
                                                <span class="assign-tag block">
                                                    <i class="fas fa-door-open"></i> <?= $b ?>
                                                </span>
                                            <?php else: ?>
                                                <span class="assign-tag none">
                                                    <i class="fas fa-exclamation-circle"></i> No Block
                                                </span>
                                            <?php endif; ?>
                                        </div>
                                    <?php else: ?>
                                        <span class="all-access">
                                            <i class="fas fa-crown"></i> Full Access
                                        </span>
                                    <?php endif; ?>
                                </td>

                                <!-- Device Mode toggle -->
                                <td>
                                    <form method="POST" style="margin:0"
                                          onsubmit="return confirm('Toggle device mode for <?= addslashes($row['username']) ?>?')">
                                        <input type="hidden" name="user_id" value="<?= $row['id'] ?>">
                                        <button type="submit" name="toggle_device_mode"
                                                class="device-badge <?= $dm_class ?>"
                                                title="Click to toggle">
                                            <i class="fas <?= $dm_icon ?>"></i> <?= $dm_label ?>
                                        </button>
                                    </form>
                                </td>

                                <!-- Action buttons -->
                                <td>
                                    <div class="actions-cell">
                                        <button class="btn btn-sm btn-warning"
                                                onclick="showEditModal(<?= $row['id'] ?>, '<?= addslashes($row['username']) ?>')"
                                                type="button" title="Reset Password">
                                            <i class="fas fa-key"></i> Password
                                        </button>
                                        <?php if ($row['role'] == 'Staff'): ?>
                                        <button class="btn btn-sm btn-primary"
                                                onclick="showReassignModal(<?= $row['id'] ?>, '<?= addslashes($row['username']) ?>', '<?= addslashes($row['role']) ?>', '<?= addslashes($row['hostel_type'] ?? '') ?>', '<?= addslashes($row['block_name'] ?? '') ?>')"
                                                type="button" title="Change Assignment">
                                            <i class="fas fa-map-marker-alt"></i> Assign
                                        </button>
                                        <?php endif; ?>
                                        <button class="btn btn-sm btn-danger"
                                                onclick="if(confirm('Delete <?= addslashes($row['username']) ?>?')) window.location='?delete=<?= $row['id'] ?>'"
                                                type="button" title="Delete User">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        <?php endwhile; ?>
                        </tbody>
                    </table>
                </div>
            </div><!-- /.card table -->

        </div><!-- /.staff-layout -->
    </div><!-- /.main-content -->

    <div id="toast-container"></div>
    <?php include 'staff-footer.php'; ?>

    <!-- ══════════════════════════════════
         Modal: Reset Password
    ══════════════════════════════════ -->
    <div id="passwordModal" class="modal" onclick="if(event.target===this)closeModal()">
        <div class="modal-box">
            <div class="modal-header">
                <h3 class="modal-title"><i class="fas fa-key"></i> Reset Password</h3>
                <button class="modal-close" onclick="closeModal()">×</button>
            </div>
            <form method="POST">
                <input type="hidden" name="user_id" id="editUserId">
                <div class="form-group">
                    <label>Username</label>
                    <input class="form-control" type="text" id="editUsername" readonly
                           style="background:var(--ms-bg);cursor:not-allowed;font-weight:600;">
                </div>
                <div class="form-group">
                    <label>New Password</label>
                    <div class="pw-wrap">
                        <input class="form-control" type="password" name="new_password" id="newPassword" placeholder="Enter new password" required>
                        <i class="fas fa-eye eye-icon" id="editPasswordIcon" onclick="toggleEditPassword()"></i>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" onclick="closeModal()">
                        <i class="fas fa-times"></i> Cancel
                    </button>
                    <button type="submit" name="update_password" class="btn btn-primary">
                        <i class="fas fa-save"></i> Save Password
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- ══════════════════════════════════
         Modal: Reassign Hostel & Block
    ══════════════════════════════════ -->
    <div id="reassignModal" class="modal" onclick="if(event.target===this)closeReassignModal()">
        <div class="modal-box wide">
            <div class="modal-header">
                <h3 class="modal-title" id="raTitle"><i class="fas fa-map-marker-alt"></i> Reassign Staff</h3>
                <button class="modal-close" onclick="closeReassignModal()">×</button>
            </div>
            <form method="POST">
                <input type="hidden" name="user_id"   id="raUserId">
                <input type="hidden" name="user_role" id="raUserRole">

                <!-- Shown only for Admin role -->
                <div id="raAdminNote" class="admin-note" style="display:none">
                    <i class="fas fa-crown" style="color:#f59e0b"></i>
                    <strong>Admin</strong> users have <strong>full access</strong> to all hostels &amp; blocks — no assignment needed.
                </div>

                <!-- Shown for Staff role -->
                <div id="raStaffSection">
                    <div class="form-group">
                        <label><i class="fas fa-building" style="color:#0078d4"></i> Select Hostel <span class="req">*</span></label>
                        <div class="hostel-pills">
                            <div class="hostel-pill">
                                <input type="radio" id="hBoys"  name="ra_hostel_type" value="Boys Hostel" required>
                                <label for="hBoys"><i class="fas fa-male"></i> Boys Hostel</label>
                            </div>
                            <div class="hostel-pill">
                                <input type="radio" id="hGirls" name="ra_hostel_type" value="Girls Hostel">
                                <label for="hGirls"><i class="fas fa-female"></i> Girls Hostel</label>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label><i class="fas fa-door-open" style="color:#16a34a"></i> Select Block <span class="req">*</span></label>
                        <div class="block-grid">
                            <div class="block-btn">
                                <input type="radio" id="blkA" name="ra_block_name" value="Block A" required>
                                <label for="blkA"><i class="fas fa-building"></i> Block A</label>
                            </div>
                            <div class="block-btn">
                                <input type="radio" id="blkB" name="ra_block_name" value="Block B">
                                <label for="blkB"><i class="fas fa-building"></i> Block B</label>
                            </div>
                        </div>
                    </div>

                    <p class="hint"><i class="fas fa-info-circle"></i> Staff will only see students from the assigned hostel &amp; block.</p>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" onclick="closeReassignModal()">
                        <i class="fas fa-times"></i> Cancel
                    </button>
                    <button type="submit" name="update_assignment" class="btn btn-primary">
                        <i class="fas fa-save"></i> Save Assignment
                    </button>
                </div>
            </form>
        </div>
    </div>

</body>
</html>