<?php $isEdit = !is_null($user); ?>

<div class="row justify-content-center">
<div class="col-12 col-xl-7">

<form method="POST" action="<?= $isEdit ? url('users/'.$user['id'].'/update') : url('users/store') ?>">
    <?= csrf_field() ?>

    <div class="card mb-4">
        <div class="card-header">
            <i class="bi bi-person-badge text-accent"></i>
            <h6 class="card-title"><?= $isEdit ? 'Edit User' : 'New Staff User' ?></h6>
        </div>
        <div class="card-body">

            <div class="row g-3">

                <div class="col-12 col-md-6">
                    <label class="form-label">Full Name <span class="text-danger">*</span></label>
                    <input type="text" name="name" class="form-control"
                           value="<?= e($user['name'] ?? '') ?>"
                           placeholder="e.g. Ahmed Khan" required>
                </div>

                <div class="col-12 col-md-6">
                    <label class="form-label">Email Address <span class="text-danger">*</span></label>
                    <input type="email" name="email" class="form-control"
                           value="<?= e($user['email'] ?? '') ?>"
                           placeholder="staff@restaurant.com" required>
                </div>

                <div class="col-12 col-md-6">
                    <label class="form-label">Phone Number</label>
                    <input type="text" name="phone" class="form-control"
                           value="<?= e($user['phone'] ?? '') ?>"
                           placeholder="0300-0000000">
                </div>

                <div class="col-12 col-md-6">
                    <label class="form-label">Role <span class="text-danger">*</span></label>
                    <?php $isSelf = $isEdit && ($user['id'] === \Core\Auth::id()); ?>
                    <?php if ($isSelf): ?>
                    <input type="text" class="form-control" value="<?= e($user['role_name'] ?? '') ?>" disabled>
                    <div class="form-text">You cannot change your own role.</div>
                    <?php else: ?>
                    <select name="role_id" class="form-select" required>
                        <?php foreach ($roles as $role): ?>
                        <option value="<?= $role['id'] ?>"
                            <?= ($user['role_id'] ?? '') == $role['id'] ? 'selected' : '' ?>>
                            <?= e($role['label']) ?>
                        </option>
                        <?php endforeach; ?>
                    </select>
                    <?php endif; ?>
                </div>

                <div class="col-12 col-md-6">
                    <label class="form-label">
                        <?= $isEdit ? 'New Password' : 'Password' ?>
                        <?= $isEdit ? '' : '<span class="text-danger">*</span>' ?>
                    </label>
                    <div class="input-group">
                        <input type="password" name="password" class="form-control" id="pwdInput"
                               placeholder="<?= $isEdit ? 'Leave blank to keep current' : 'Min. 8 characters' ?>"
                               <?= $isEdit ? '' : 'required' ?> minlength="8" autocomplete="new-password">
                        <button type="button" class="btn btn-outline-secondary" onclick="togglePwd()">
                            <i class="bi bi-eye" id="pwdEye"></i>
                        </button>
                    </div>
                    <?php if ($isEdit): ?>
                    <div class="form-text">Leave blank to keep the existing password.</div>
                    <?php endif; ?>
                </div>

                <?php if (!$isSelf): ?>
                <div class="col-12 col-md-6">
                    <label class="form-label">Account Status</label>
                    <div class="d-flex gap-3 mt-1">
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="is_active" value="1" id="statusActive"
                                   <?= ($user['is_active'] ?? 1) ? 'checked' : '' ?>>
                            <label class="form-check-label text-success fw-600" for="statusActive">Active</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="is_active" value="0" id="statusInactive"
                                   <?= (isset($user['is_active']) && !$user['is_active']) ? 'checked' : '' ?>>
                            <label class="form-check-label text-danger fw-600" for="statusInactive">Inactive</label>
                        </div>
                    </div>
                </div>
                <?php endif; ?>

            </div><!-- /row -->

        </div><!-- /card-body -->
    </div><!-- /card -->

    <!-- ── Role Permissions info box ──────────────────────────────────────── -->
    <div class="card mb-4" id="roleInfoCard">
        <div class="card-header">
            <i class="bi bi-shield-check text-accent"></i>
            <h6 class="card-title">Role Permissions</h6>
        </div>
        <div class="card-body">
            <p class="text-secondary" style="font-size:.85rem;margin:0;">
                Permissions are assigned per role. To change what a role can do, go to
                <a href="<?= url('settings') ?>" class="text-accent">Settings → Roles</a>.
            </p>
            <div class="mt-3" id="rolePermTable">
                <?php
                $roleLabels = [];
                foreach ($roles as $r) { $roleLabels[$r['id']] = $r['label']; }
                ?>
                <div class="table-responsive">
                    <table class="table table-sm mb-0" style="font-size:.8rem;">
                        <thead>
                            <tr>
                                <th>Role</th>
                                <th>Access Level</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php
                            $roleDesc = [
                                'super_admin' => 'Full access — all modules',
                                'manager'     => 'All except user delete & settings',
                                'kitchen'     => 'View & update order status only',
                                'rider'       => 'View & update assigned orders',
                            ];
                            foreach ($roles as $r):
                            ?>
                            <tr>
                                <td class="fw-600"><?= e($r['label']) ?></td>
                                <td class="text-secondary"><?= $roleDesc[$r['name']] ?? '—' ?></td>
                            </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- ── Submit ──────────────────────────────────────────────────────────── -->
    <div class="d-flex gap-2">
        <button type="submit" class="btn btn-accent">
            <i class="bi bi-<?= $isEdit ? 'check-lg' : 'person-plus-fill' ?> me-1"></i>
            <?= $isEdit ? 'Save Changes' : 'Create User' ?>
        </button>
        <a href="<?= url('users') ?>" class="btn btn-outline-secondary">Cancel</a>
    </div>

</form>

</div><!-- /col -->
</div><!-- /row -->

<?php ob_start(); ?>
<script>
function togglePwd() {
    const inp = document.getElementById('pwdInput');
    const eye = document.getElementById('pwdEye');
    const show = inp.type === 'password';
    inp.type = show ? 'text' : 'password';
    eye.className = show ? 'bi bi-eye-slash' : 'bi bi-eye';
}
</script>
<?php $extraJs = ob_get_clean(); ?>
