<?php require_once __DIR__ . '/../../layouts/header.php'; ?>

<div style="max-width: 1000px;">
    <h2 style="margin-bottom: 1.5rem;">Create New User</h2>

    <form action="/users/store" method="POST">
        <div class="two-col-grid" style="display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.5rem; align-items: start;">
            
            <!-- Left Column: Basic Details -->
            <div class="card" style="padding: 1.25rem;">
                <h4 style="margin-bottom: 1rem; color: var(--text-muted); border-bottom: 1px solid var(--glass-border); padding-bottom: 0.5rem;">Basic Details</h4>
                
                <div style="display: flex; gap: 1rem;" class="form-row">
                    <div class="input-group" style="flex: 1; margin-bottom: 1rem;">
                        <label for="name">Full Name *</label>
                        <input type="text" id="name" name="name" required placeholder="Jane Doe" style="padding: 0.5rem 0.75rem;">
                    </div>

                    <div class="input-group" style="flex: 1; margin-bottom: 1rem;">
                        <label for="email">Email Address *</label>
                        <input type="email" id="email" name="email" required placeholder="jane@example.com" style="padding: 0.5rem 0.75rem;">
                    </div>
                </div>

                <div class="input-group" style="margin-bottom: 1rem;">
                    <label for="password">Initial Password *</label>
                    <input type="password" id="password" name="password" required placeholder="••••••••" style="padding: 0.5rem 0.75rem;">
                </div>

                <div style="display: flex; gap: 1rem; margin-bottom: 0;" class="form-row">
                    <div class="input-group" style="flex: 1; margin-bottom: 0;">
                        <label for="role">Role *</label>
                        <select id="role" name="role" required style="width: 100%; padding: 0.5rem 0.75rem; background: rgba(15, 23, 42, 0.6); border: 1px solid var(--glass-border); border-radius: 8px; color: var(--text-light); outline: none;">
                            <option value="cashier" style="background: var(--bg-dark);">Cashier</option>
                            <option value="pharmacist" style="background: var(--bg-dark);">Pharmacist</option>
                            <option value="admin" style="background: var(--bg-dark);">Admin</option>
                        </select>
                    </div>
                    <div class="input-group" style="flex: 1; margin-bottom: 0;">
                        <label for="branch_id">Assign to Branch</label>
                        <select id="branch_id" name="branch_id" style="width: 100%; padding: 0.5rem 0.75rem; background: rgba(15, 23, 42, 0.6); border: 1px solid var(--glass-border); border-radius: 8px; color: var(--text-light); outline: none;">
                            <option value="" style="background: var(--bg-dark);">Global (Admin Only)</option>
                            <?php foreach($branches as $branch): ?>
                                <option value="<?php echo $branch['id']; ?>" style="background: var(--bg-dark);">
                                    <?php echo htmlspecialchars($branch['name']); ?>
                                </option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                </div>
            </div>

            <!-- Right Column: Privileges -->
            <div class="card" style="padding: 1.25rem;">
                <h4 style="margin-bottom: 1rem; color: var(--text-muted); border-bottom: 1px solid var(--glass-border); padding-bottom: 0.5rem;">Navigation Privileges</h4>
                
                <div class="input-group" style="margin-bottom: 0;">
                    <div class="form-row" style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem;">
                        <?php foreach($privileges as $priv): ?>
                            <label style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--text-light); cursor: pointer; font-weight: normal; background: rgba(15, 23, 42, 0.4); padding: 0.5rem 0.75rem; border-radius: 6px; border: 1px solid var(--glass-border);">
                                <input type="checkbox" name="privileges[]" value="<?php echo $priv['id']; ?>" style="width: 1rem; height: 1rem; margin: 0; padding: 0; cursor: pointer;">
                                <?php echo htmlspecialchars($priv['name']); ?>
                            </label>
                        <?php endforeach; ?>
                    </div>
                    <small style="color: var(--text-muted); display: block; margin-top: 1rem; line-height: 1.4; font-size: 0.8rem;">Admins automatically receive all privileges. For others, check the boxes to grant access to navigation menu items.</small>
                </div>
            </div>

        </div>

        <div style="display: flex; gap: 1rem; margin-top: 1.5rem; max-width: 300px;" class="form-row">
            <button type="submit" class="btn-primary" style="flex: 1; margin-top: 0; padding: 0.6rem;">Create User</button>
            <a href="/users" class="btn-primary" style="flex: 1; margin-top: 0; padding: 0.6rem; background: transparent; border: 1px solid var(--glass-border); color: var(--text-light); text-align: center; text-decoration: none;">Cancel</a>
        </div>
    </form>
</div>

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