<div class="page-title">
  <div>
    <h1><i class="fa fa-users"></i> Staff</h1>
    <p>View all staff</p>
  </div>
  
</div>
<div class="card">
    <div class="table-scrol">
        <div class='panel panel-primary ch'>
            <div class='panel-heading'>
                <h4 align="center">All staff</h4>
            </div>
            <div class='panel-body'>
            <div class='mb-3 text-right'>
                        <button class="btn btn-success" data-toggle="modal" data-target="#addStaffModal">➕ Add Staff</button>
                    </div>
<?php
$query = "SELECT staff.*, role.role_name FROM staff 
          LEFT JOIN role ON staff.role = role.id";
$run_query = mysqli_query($connection, $query);

if (mysqli_num_rows($run_query) > 0) {
    $i = 0;
    $staffList = [];

    echo "
        <div class='table-responsive'>
            <table class='table table-bordered table-sm' id='myTable'>
                <thead>
                    <tr>
                        <th>S/N</th>
                        <th>IMAGE</th>
                        <th>USERNAME</th>
                        <th>NAME</th>
                        <th>SEX</th>
                        <th>ROLE</th>
                        <th>STATUS</th>
                        <th>ACTION</th>
                    </tr>
                </thead>
                <tbody>
    ";

    while ($result = mysqli_fetch_assoc($run_query)) {
        $i++;
        $staffList[] = $result;
        $staff_id = $result['id'];
        $passport = !empty($result['passport']) ? "../" . $result['passport'] : "../uploads/staff/none.jpg";
        $username = $result['username'];
        $name = $result['name'];
        $sex = $result['sex'];
        $position = $result['role_name']; // ✅ fetched from joined table
        $status = $result['status'];
        $dob = $result['dob'];        
        $email = $result['email'];
        $phone = $result['phone'];
        $address = htmlspecialchars($result['address']);
        $lga = $result['lga'];
        $state = $result['state'];
        $country = $result['country'];
        $date_registered = $result['date_registered'];

        echo "
            <tr>
             <td class ='text-center'>{$i}</td>
                <td class ='text-center'><img src='{$passport}' alt='Passport' width='40' height='40' class='img-thumbnail'></td>
                <td>{$username}</td>
                <td>{$name}</td>
                <td class ='text-center'>{$sex}</td>
               <td class ='text-center'>{$position}</td>
                <td class ='text-center'><b>{$status}</b></td>
<td class='text-center'>
    <form method='POST' style='display: inline-block;'>
        <input type='hidden' name='staff_hidden_id' value='{$staff_id}'>

        <!-- Select dropdown on top -->
        <div class='form-group mb-1'>
            <select name='new_status' class='form-control form-control-sm'>
				<option value=''>Select</option>
                <option value='Active'>Active</option>
                <option value='Suspend'>Suspend</option>
                <option value='On Leave'>On Leave</option>
                
            </select>
        </div>

        <!-- Buttons in a row below -->
        <div class='btn-group btn-group-sm d-flex justify-content-start' role='group'>
            <button type='submit' name='change_status_btn' class='btn btn-info' title='Change Status'>
                <i class='fa fa-sync-alt'></i>
            </button>

            <button type='submit' name='staff_delete_btn' class='btn btn-danger' title='Delete Staff'>
                <i class='fa fa-trash'></i>
            </button>

           <!-- View Button triggers modal -->
            <button type='button' class='btn btn-secondary' title='View Staff'
                data-toggle='modal' data-target='#viewStaffModal{$staff_id}'>
                <i class='fa fa-eye'></i>
            </button>
<!-- View Modal for Staff -->
<div class='modal fade' id='viewStaffModal{$staff_id}' tabindex='-1' role='dialog' aria-labelledby='viewStaffModalLabel{$staff_id}' aria-hidden='true'>
    <div class='modal-dialog modal-lg' role='document'>
        <div class='modal-content'>
            <div class='modal-header'>
                <h2 class='modal-title'>Staff Details - {$name}</h2>
                <button type='button' class='close' data-dismiss='modal' aria-label='Close'>
                    <span aria-hidden='true'>&times;</span>
                </button>
            </div>

            <div class='modal-body'>
                <div class='row'>

                    <!-- Left Column: Passport + Role + Status -->
                    <div class='col-md-4 text-center mb-3'>
                        <img src='{$passport}' class='img-thumbnail border mb-3' alt='Passport' style='width: 150px; height: 150px;'>
                        <p><strong>Role:</strong> {$position}</p>
                        <p><strong>Status:</strong> {$status}</p>
                    </div>

                    <!-- Right Column: Details Table -->
                    <div class='col-md-8'>
                        <table class='table table-bordered table-sm'>
                            <tbody>
                                <tr>
                                    <th>Username</th>
                                    <td>{$username}</td>
                                </tr>
                                <tr>
                                    <th>Name</th>
                                    <td>{$name}</td>
                                </tr>
                                <tr>
                                    <th>DOB</th>
                                    <td>{$dob}</td>
                                </tr>
                                <tr>
                                    <th>Sex</th>
                                    <td>{$sex}</td>
                                </tr>
                                <tr>
                                    <th>Phone</th>
                                    <td>{$phone}</td>
                                </tr>
                                <tr>
                                    <th>Email</th>
                                    <td>{$email}</td>
                                </tr>
                                <tr>
                                    <th>Address</th>
                                    <td>{$address}</td>
                                </tr>
                                <tr>
                                    <th>LGA</th>
                                    <td>{$lga}</td>
                                </tr>
                                <tr>
						                        <th>State</th>
						                        <td>{$state}</td>
						                    </tr>
						                    <tr>
						                        <th>Country</th>
						                        <td>{$country}</td>
						                    </tr>						                   
                                <tr>
                                    <th>Date Registered</th>
                                    <td>{$date_registered}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                </div>
            </div>

            <div class='modal-footer'>
                <button type='button' class='btn btn-secondary' data-dismiss='modal'>Close</button>
            </div>
        </div>
    </div>
</div>


            <button type='button' class='btn btn-primary' title='Edit Staff'
                data-toggle='modal' data-target='#editStaffModal{$staff_id}'>
                <i class='fa fa-edit'></i>
            </button>
        </div>
    </form>
                </td>
            </tr>
        ";
    }

    echo "
                </tbody>
            </table>
        </div>
    ";


    foreach ($staffList as $staff) {
        $staff_id = $staff['id'];
        ?>            
        <div class="modal fade" id="editStaffModal<?= $staff_id ?>" tabindex="-1" role="dialog" aria-labelledby="editStaffModalLabel<?= $staff_id ?>" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <form method="POST" enctype="multipart/form-data">
                        <div class="modal-header">
                            <h5 class="modal-title">Edit Staff</h5>
                            <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                        </div>
                        <div class="modal-body">
                            <input type="hidden" name="edit_staff_id" value="<?= $staff_id ?>">
                            <div class='form-group text-center'>
                                <label for='uploadImage<?= $staff_id ?>'><b>Upload Staff Image</b></label><br>
<img id='preview<?= $staff_id ?>' src='../<?= htmlspecialchars($staff['passport']) ?>' class='img-thumbnail rounded-circle mb-2' width='150' height='150' alt='Profile Preview'>
<input 
    type='file' 
    name='file' 
    id='uploadImage<?= $staff_id ?>' 
    class='form-control-file d-block mx-auto' 
    onchange="previewImage(event, 'preview<?= $staff_id ?>')">

                            </div>
                            <div class="form-group">
                                <label>Username</label>
                                <input type="text" name="username" value="<?= htmlspecialchars($staff['username']) ?>" class="form-control" required>
                            </div>
                            <div class="form-group">
                                <label>Full Name</label>
                                <input type="text" name="name" value="<?= htmlspecialchars($staff['name']) ?>" class="form-control" required>
                            </div>
                            <div class="form-group">
                                <label>Date of Birth</label>
                                <input type="text" name="dob" value="<?= htmlspecialchars($staff['dob']) ?>" class="form-control datepicker" required>
                            </div>
                            <div class="form-group">
    <label>Role</label>                                
    <select name="role" class="form-control" required>
        <option value="">-- Select Role --</option>
        <?php
        $query = "SELECT * FROM `role`";
        $run_query = mysqli_query($connection, $query);

        while ($result = mysqli_fetch_assoc($run_query)) {
            $role_id = $result['id'];
            $role_name = $result['role_name'];
            $selected = ($staff['role'] == $role_id) ? 'selected' : '';
            echo "<option value='{$role_id}' {$selected}>{$role_name}</option>";
        }
        ?>
    </select>
</div>

                            <div class="form-group">
                                <label>Country</label>
                                <input type="text" name="country" value="<?= htmlspecialchars($staff['country']) ?>" class="form-control" required>
                            </div>
<div class="form-group">
    <label>State</label>                                
    <select name="state" id="state" class="form-control" onchange="toggleLGA(this);" required>
        <option selected><?= htmlspecialchars($staff['state']) ?></option>
        <?php
        $states = ["Abia", "Adamawa", "AkwaIbom", "Anambra", "Bauchi", "Bayelsa", "Benue", "Borno",
            "Cross River", "Delta", "Ebonyi", "Edo", "Ekiti", "Enugu", "FCT", "Gombe", "Imo",
            "Jigawa", "Kaduna", "Kano", "Katsina", "Kebbi", "Kogi", "Kwara", "Lagos", "Nasarawa",
            "Niger", "Ogun", "Ondo", "Osun", "Oyo", "Plateau", "Rivers", "Sokoto", "Taraba",
            "Yobe", "Zamfara"];
        foreach ($states as $state) echo "<option value='$state'>$state</option>";
        ?>
    </select>
</div>

<div class="form-group">
    <label>LGA</label>
    <select name="lga" id="lga" class="form-control select-lga" required>
        <option selected><?= htmlspecialchars($staff['lga']) ?></option>
        <!-- Populate this dynamically via JS or PHP -->
    </select>
</div>
                            <div class="form-group">
                                <label>Sex</label>
                                <select name="sex" class="form-control" required>
                                    <option <?= $staff['sex'] == 'Male' ? 'selected' : '' ?>>Male</option>
                                    <option <?= $staff['sex'] == 'Female' ? 'selected' : '' ?>>Female</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>Address</label>
                                <input type="text" name="address" value="<?= htmlspecialchars($staff['address']) ?>" class="form-control" required>
                            </div>
                            <div class="form-group">
                                <label>Phone</label>
                                <input type="text" name="phone" value="<?= htmlspecialchars($staff['phone']) ?>" class="form-control" required>
                            </div>
                            <div class="form-group">
                                <label>Email</label>
                                <input type="email" name="email" value="<?= htmlspecialchars($staff['email']) ?>" class="form-control" required>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" name="update_staff_btn" class="btn btn-success">Update Staff</button>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <?php
    }
} else {
    echo "<p class='text-danger'><b>No staff found.</b></p>";
}
?>


                
            </div>
        </div>
    </div>
</div>


<!-- Staff Registration Modal -->
<div class="modal fade" id="addStaffModal" tabindex="-1" role="dialog" aria-labelledby="addStaffModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <form action="" method="POST" enctype="multipart/form-data">
                <div class="modal-header">
                    <h5 class="modal-title" id="addStaffModalLabel">Add New Staff</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>&times;</span></button>
                </div>

                <div class="modal-body">
                    <!-- Profile Image Upload with Preview -->
                    <div class='form-group text-center'>
                        <label for='uploadImage'><b>Upload Staff Image</b></label><br>
                        <img id='preview' src='../uploads/staff/none.jpg' class='img-thumbnail rounded-circle mb-2' width='150' height='150' alt='Profile Preview'>
                        <input type='file' name='file' id='uploadImage' class='form-control-file d-block mx-auto' onchange="previewImage(event)" required>
                    </div>

                    <div class="form-group">
                        <label>Username</label>
                        <input type="text" name="username" class="form-control" required>
                    </div>

                    <div class="form-group">
                        <label>Password</label>
                        <input type="password" name="password" class="form-control" required>
                    </div>

                    <div class="form-group">
                        <label>Full Name</label>
                        <input type="text" name="name" placeholder="Full Name" class="form-control" required>
                    </div>

                    <div class="form-group">
                        <label>Date of Birth</label>
                        <input type="text" name="dob" class="form-control datepicker" required>
                    </div>

                    <div class="form-group">
                        <label>Role</label>
                        <select name="role" class="form-control" required>
    <option value="">-- Select Role --</option>
    <?php
    $role_query = mysqli_query($connection, "SELECT id, role_name FROM role");
    while ($role = mysqli_fetch_assoc($role_query)) {
        echo "<option value='{$role['id']}'>" . htmlspecialchars($role['role_name']) . "</option>";
    }
    ?>
</select>

                    </div>

                    <div class="form-group">
                        <label>Country</label>
                        <input type="text" name="country" value="Nigeria" class="form-control" required>
                    </div>

                    <div class="form-group">
                        <label>State</label>
                        <select name="state" id="state" class="form-control" onchange="toggleLGA(this);" required>
                            <option value="">- Select -</option>
                            <?php
                            $states = ["Abia", "Adamawa", "AkwaIbom", "Anambra", "Bauchi", "Bayelsa", "Benue", "Borno",
                                "Cross River", "Delta", "Ebonyi", "Edo", "Ekiti", "Enugu", "FCT", "Gombe", "Imo",
                                "Jigawa", "Kaduna", "Kano", "Katsina", "Kebbi", "Kogi", "Kwara", "Lagos", "Nasarawa",
                                "Niger", "Ogun", "Ondo", "Osun", "Oyo", "Plateau", "Rivers", "Sokoto", "Taraba",
                                "Yobe", "Zamfara"];
                            foreach ($states as $state) echo "<option value='$state'>$state</option>";
                            ?>
                        </select>
                    </div>

                    <div class="form-group">
                        <label>LGA</label>
                        <select name="lga" id="lga" class="form-control select-lga" required></select>
                    </div>

                    <div class="form-group">
                        <label>Sex</label>
                        <select name="sex" class="form-control" required>
                            <option>Male</option>
                            <option>Female</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label>Staff Address</label>
                        <input type="text" name="address" class="form-control" placeholder="Staff Address" required>
                    </div>

                    <div class="form-group">
                        <label>Staff Phone Number</label>
                        <input type="tel" name="phone" pattern="[0-9]+" title="Input must be a valid phone number" class="form-control" placeholder="Phone Number" required>
                    </div>

                    <div class="form-group">
                        <label>Staff Email</label>
                        <input type="email" name="email" class="form-control" placeholder="Staff Email e.g me@gmail.com" required>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="submit" name="staff_register_btn" class="btn btn-primary">Register</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                </div>
            </form>
        </div>
    </div>
</div>
