<div class="offcanvas offcanvas-end" id="offcanvasAddUser" aria-labelledby="offcanvasAddUserLabel">
    <div class="offcanvas-header border-bottom">
        <h5 id="offcanvasAddUserLabel" class="offcanvas-title">Tambah User</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    
    <div class="offcanvas-body mx-0 flex-grow-0 p-6 h-100">
        <form class="add-new-user pt-0" id="addNewUserForm" action="{{ route('users.store') }}" method="POST">
            @csrf
            
            <div class="mb-6 form-control-validation">
                <label class="form-label" for="add-user-name">Nama Lengkap<span class="text-danger">*</span></label>
                <input type="text" class="form-control" id="add-user-name" name="name" placeholder="John Doe" />
            </div>

            <div class="mb-6 form-control-validation">
                <label class="form-label" for="add-user-email">Email<span class="text-danger">*</span></label>
                <input type="email" class="form-control" id="add-user-email" name="email" placeholder="john@example.com" />
            </div>

            <div class="mb-6 form-control-validation">
                <label class="form-label" for="add-user-role">Role<span class="text-danger">*</span></label>
                <select id="add-user-role" name="role" class="select2 form-select" data-placeholder="Pilih Role">
                    <option value="">Pilih Role</option>
                    <option value="super_admin">Super Admin</option>
                    <option value="admin">Admin</option>
                    <option value="fasilitator">Fasilitator</option>
                    <option value="petani">Petani</option>
                </select>
            </div>

            <div class="mb-6 form-control-validation">
                <label class="form-label" for="add-user-password">Password<span class="text-danger">*</span></label>
                <input type="password" class="form-control" id="add-user-password" name="password" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" />
            </div>

            <div class="mt-8">
                <button type="submit" class="btn btn-primary me-3 data-submit">Submit</button>
                <button type="reset" class="btn btn-label-danger" data-bs-dismiss="offcanvas">Cancel</button>
            </div>
        </form>
    </div>
</div>